docs: random docs improvements (#9048)

reidbarber · web-flow · commit eb0006cb08f2 · 2025-10-17T22:00:43.000Z
* user style macro in S2 docs where possible

* update Picker selection prop usage

* add icons to MarkdownMenu items

* dynamic favicon based on library
diff --git a/packages/dev/s2-docs/assets/internationalized.ico b/packages/dev/s2-docs/assets/internationalized.ico
diff --git a/packages/dev/s2-docs/assets/react-aria.ico b/packages/dev/s2-docs/assets/react-aria.ico
diff --git a/packages/dev/s2-docs/pages/s2/Calendar.mdx b/packages/dev/s2-docs/pages/s2/Calendar.mdx
@@ -177,14 +177,15 @@ Use the `focusedValue` or `defaultFocusedValue` prop to control which date is fo
 "use client";
 import {Calendar, ActionButton} from '@react-spectrum/s2';
 import {CalendarDate, today, getLocalTimeZone} from '@internationalized/date';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
   let defaultDate = new CalendarDate(2021, 7, 1);
   let [focusedDate, setFocusedDate] = useState(defaultDate);
 
   return (
-    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8}}>
+    <div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8})}>
       <ActionButton onPress={() => setFocusedDate(today(getLocalTimeZone()))}>
         Today
       </ActionButton>
diff --git a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx
@@ -57,6 +57,7 @@ Use the `name` prop to submit the selected checkboxes to the server. Set the `is
 ```tsx render
 "use client";
 import {CheckboxGroup, Checkbox, Button, Form} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 <Form/* PROPS */>
   <CheckboxGroup
@@ -77,7 +78,7 @@ import {CheckboxGroup, Checkbox, Button, Form} from '@react-spectrum/s2';
     <Checkbox value="cookies" isRequired>Cookie policy</Checkbox>
     {/*- end highlight -*/}
   </CheckboxGroup>
-  <Button type="submit" style={{marginTop: 8}}>Submit</Button>
+  <Button type="submit" className={style({marginTop: 8})}>Submit</Button>
 </Form>
 ```
 
diff --git a/packages/dev/s2-docs/pages/s2/ColorArea.mdx b/packages/dev/s2-docs/pages/s2/ColorArea.mdx
@@ -29,6 +29,7 @@ The `onChange` event is called as the user drags, and `onChangeEnd` is called wh
 ```tsx render
 "use client";
 import {ColorArea, parseColor} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -45,7 +46,7 @@ function Example() {
         onChange={setCurrentValue}
         onChangeEnd={setFinalValue} />
         {/*- end highlight -*/}
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         onChange value: {currentValue.toString('hex')}{'\n'}
         onChangeEnd value: {finalValue.toString('hex')}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/ColorField.mdx b/packages/dev/s2-docs/pages/s2/ColorField.mdx
@@ -28,6 +28,7 @@ Use the `value` or `defaultValue` prop to set the color value, and `onChange` to
 import {ColorField} from '@react-spectrum/s2';
 import {useState} from 'react';
 import {parseColor} from '@react-stately/color';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 function Example() {
   let [value, setValue] = useState(parseColor('#e73623'));
@@ -39,7 +40,7 @@ function Example() {
         placeholder="Enter a color"
         value={value}
         onChange={setValue} />
-      <pre style={{fontSize: 12}}>Current value: {value.toString('hex')}</pre>
+      <pre className={style({font: 'body'})}>Current value: {value.toString('hex')}</pre>
     </div>
   );
 }
@@ -52,13 +53,14 @@ By default, ColorField displays a hex value. Set the `colorSpace` and `channel`
 ```tsx render
 "use client";
 import {ColorField, parseColor} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
   let [color, setColor] = useState(parseColor('#7f007f'));
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+    <div className={style({ display: 'flex', flexDirection: 'column', gap: 8 })}>
       <ColorField
         label="Hue"
         placeholder="Select a hue"
@@ -82,7 +84,7 @@ function Example() {
         onChange={setColor}
         colorSpace="hsl"
         channel="lightness" />
-      <pre style={{fontSize: 12}}>Current value: {color?.toString('hex')}</pre>
+      <pre className={style({font: 'body'})}>Current value: {color?.toString('hex')}</pre>
     </div>
   );
 }
diff --git a/packages/dev/s2-docs/pages/s2/ColorSlider.mdx b/packages/dev/s2-docs/pages/s2/ColorSlider.mdx
@@ -28,6 +28,7 @@ The `onChange` event is called as the user drags, and `onChangeEnd` is called wh
 ```tsx render
 "use client";
 import {ColorSlider, parseColor} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -43,7 +44,7 @@ function Example() {
         onChange={setCurrentValue}
         onChangeEnd={setFinalValue} />
         {/*- end highlight -*/}
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         onChange value: {currentValue.toString('hex')}{'\n'}
         onChangeEnd value: {finalValue.toString('hex')}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx b/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx
@@ -25,8 +25,9 @@ A ColorSwatch displays a color value passed via the `color` prop. The value can
 ```tsx render
 "use client";
 import {ColorSwatch} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
-<div style={{display: 'flex', gap: 12, alignItems: 'center'}}>
+<div className={style({display: 'flex', gap: 12, alignItems: 'center'})}>
   <ColorSwatch color="#ff6600" />
   <ColorSwatch color="rgb(255, 0, 255)" />
   <ColorSwatch color="hsl(120, 100%, 42%)" />
diff --git a/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx b/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx
@@ -30,6 +30,7 @@ Use the `value` or `defaultValue` prop to set the selected color, and `onChange`
 ```tsx render
 "use client";
 import {ColorSwatchPicker, ColorSwatch, parseColor} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -48,7 +49,7 @@ function Example() {
         <ColorSwatch color="#8b5cf6" />
         <ColorSwatch color="#ec4899" />
       </ColorSwatchPicker>
-      <pre style={{fontSize: 12}}>Selected color: {value.toString('rgb')}</pre>
+      <pre className={style({font: 'body'})}>Selected color: {value.toString('rgb')}</pre>
     </>
   );
 }
diff --git a/packages/dev/s2-docs/pages/s2/ColorWheel.mdx b/packages/dev/s2-docs/pages/s2/ColorWheel.mdx
@@ -29,6 +29,7 @@ The `onChange` event is called as the user drags, and `onChangeEnd` is called wh
 import {ColorWheel} from '@react-spectrum/s2';
 import {useState} from 'react';
 import {parseColor} from '@react-stately/color';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 function Example() {
   let [currentValue, setCurrentValue] = useState(parseColor('hsl(50, 100%, 50%)'));
@@ -42,7 +43,7 @@ function Example() {
         onChange={setCurrentValue}
         onChangeEnd={setFinalValue} />
         {/*- end highlight -*/}
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         onChange value: {currentValue.toString('hex')}{'\n'}
         onChangeEnd value: {finalValue.toString('hex')}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/ComboBox.mdx b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
@@ -318,6 +318,7 @@ Both `inputValue` and `selectedKey` can be controlled simultaneously. However, e
 ```tsx render
 "use client";
 import {ComboBox, ComboBoxItem, type Key} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function ControlledComboBox() {
@@ -358,7 +359,7 @@ function ControlledComboBox() {
 
   return (
     <div>
-       <ComboBox
+      <ComboBox
         label="Pick a engineering major"
         placeholder="Select a major"
         /*- begin highlight -*/
@@ -370,7 +371,7 @@ function ControlledComboBox() {
         {/*- end highlight -*/}
         {item => <ComboBoxItem>{item.name}</ComboBoxItem>}
       </ComboBox>
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         Current selected major id: {fieldState.selectedKey}{'\n'}
         Current input text: {fieldState.inputValue}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/DropZone.mdx b/packages/dev/s2-docs/pages/s2/DropZone.mdx
@@ -43,7 +43,7 @@ function Example(props) {
         } else if (item?.kind === 'file') {
           let file = await item.getFile();
           let url = URL.createObjectURL(file);
-          setContent(<img src={url} alt={item.name} style={{maxHeight: '100%', maxWidth: '100%'}} />);
+          setContent(<img src={url} alt={item.name} className={style({maxHeight: 'full', maxWidth: 'full'})} />);
         }
       }}>
       {content || (
@@ -60,7 +60,7 @@ function Example(props) {
               acceptedFileTypes={['image/jpeg', 'image/png', 'image/gif']}
               onSelect={files => {
                 let url = URL.createObjectURL(files[0]);
-                setContent(<img src={url} alt={files[0].name} style={{maxHeight: '100%', maxWidth: '100%'}} />);
+                setContent(<img src={url} alt={files[0].name} className={style({maxHeight: 'full', maxWidth: 'full'})} />);
               }}>
               <Button variant="accent">Browse files</Button>
             </FileTrigger>
diff --git a/packages/dev/s2-docs/pages/s2/Form.mdx b/packages/dev/s2-docs/pages/s2/Form.mdx
@@ -158,7 +158,7 @@ function Example() {
         isRequired
         label="Last name"
         placeholder="Enter your last name" />
-      <div style={{display: 'flex', gap: 8}}>
+      <div className={style({display: 'flex', gap: 8})}>
         <Button type="submit" variant="accent">Submit</Button>
         <Button type="reset" variant="secondary">Reset</Button>
       </div>
diff --git a/packages/dev/s2-docs/pages/s2/InlineAlert.mdx b/packages/dev/s2-docs/pages/s2/InlineAlert.mdx
@@ -26,13 +26,14 @@ Use the `autoFocus` prop to focus the alert when it first renders. This is usefu
 ```tsx render hideImports
 "use client";
 import {InlineAlert, Heading, Content, Button} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
   let [shown, setShown] = useState(false);
 
   return (
-    <div style={{display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'center'}}>
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'center'})}>
       <Button variant="primary" onPress={() => setShown(!shown)}>
         {shown ? 'Hide Alert' : 'Show Alert'}
       </Button>
diff --git a/packages/dev/s2-docs/pages/s2/Picker.mdx b/packages/dev/s2-docs/pages/s2/Picker.mdx
@@ -209,6 +209,7 @@ Use the `defaultValue` or `value` prop to set the selected item. The value corre
 ```tsx render docs={docs.exports.Picker} links={docs.links} props={['selectionMode']} wide
 "use client";
 import {Picker, PickerItem} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example(props) {
@@ -232,7 +233,7 @@ function Example(props) {
         <PickerItem id="bison">Bison</PickerItem>
         <PickerItem id="skunk">Skunk</PickerItem>
       </Picker>
-      <pre style={{fontSize: 12}}>Current selection: {JSON.stringify(animal)}</pre>
+      <pre className={style({font: 'body'})}>Current selection: {JSON.stringify(animal)}</pre>
     </div>
   );
 }
diff --git a/packages/dev/s2-docs/pages/s2/Popover.mdx b/packages/dev/s2-docs/pages/s2/Popover.mdx
@@ -54,7 +54,7 @@ function Example() {
   let triggerRef = useRef(null);
 
   return (
-    <div style={{display: 'flex', flexDirection: 'column', gap: 64, alignItems: 'center'}}>
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 64, alignItems: 'center'})}>
       <Button onPress={() => setOpen(!isOpen)}>
         Open popover
       </Button>
diff --git a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
@@ -197,14 +197,15 @@ Use the `focusedValue` or `defaultFocusedValue` prop to control which date is fo
 "use client";
 import {RangeCalendar, ActionButton} from '@react-spectrum/s2';
 import {CalendarDate, today, getLocalTimeZone} from '@internationalized/date';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
   let defaultDate = new CalendarDate(2021, 7, 1);
   let [focusedDate, setFocusedDate] = useState(defaultDate);
 
   return (
-    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8}}>
+    <div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8})}>
       <ActionButton onPress={() => setFocusedDate(today(getLocalTimeZone()))}>
         Today
       </ActionButton>
diff --git a/packages/dev/s2-docs/pages/s2/RangeSlider.mdx b/packages/dev/s2-docs/pages/s2/RangeSlider.mdx
@@ -29,6 +29,7 @@ Use the `value` or `defaultValue` prop to set the RangeSlider's value. The value
 ```tsx render
 "use client";
 import {RangeSlider} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -44,7 +45,7 @@ function Example() {
         onChange={setCurrentValue}
         onChangeEnd={setFinalValue} />
         {/*- end highlight -*/}
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         onChange value: {JSON.stringify(currentValue)}{'\n'}
         onChangeEnd value: {JSON.stringify(finalValue)}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/SearchField.mdx b/packages/dev/s2-docs/pages/s2/SearchField.mdx
@@ -29,6 +29,7 @@ Use the `value` or `defaultValue` prop to set the text value, and `onChange` to
 ```tsx render
 "use client";
 import {SearchField} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -45,7 +46,7 @@ function Example() {
         onChange={setSearch}
         onSubmit={setSubmittedSearch} />
       {/*- end highlight -*/}
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         Value: {search}{'\n'}
         Submitted value: {submittedSearch}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/Slider.mdx b/packages/dev/s2-docs/pages/s2/Slider.mdx
@@ -26,6 +26,7 @@ Use the `value` or `defaultValue` prop to set the slider's value. The `onChange`
 ```tsx render
 "use client";
 import {Slider} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -41,7 +42,7 @@ function Example() {
         onChange={setCurrentValue}
         onChangeEnd={setFinalValue} />
         {/*- end highlight -*/}
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         onChange value: {currentValue}{'\n'}
         onChangeEnd value: {finalValue}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/Tabs.mdx b/packages/dev/s2-docs/pages/s2/Tabs.mdx
@@ -164,9 +164,9 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
     borderStyle: 'solid', 
     borderColor: 'gray-300',
     borderRadius: 'default',
-    overflow: 'hidden'
-  })}
-  style={{resize: 'horizontal'}}>
+    overflow: 'hidden',
+    resize: 'horizontal'
+  })}>
   {/*- begin focus -*/}
   <Tabs aria-label="Tabs">
     <TabList>
diff --git a/packages/dev/s2-docs/pages/s2/Tooltip.mdx b/packages/dev/s2-docs/pages/s2/Tooltip.mdx
@@ -28,12 +28,13 @@ Tooltips appear after a "warmup" delay when hovering, or instantly on focus. Onc
 ```tsx render docs={docs.exports.TooltipTrigger} links={docs.links} props={['trigger', 'delay', 'isDisabled']} type="vanilla"
 "use client";
 import {TooltipTrigger, Tooltip, ActionButton} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import Edit from '@react-spectrum/s2/icons/Edit';
 import Save from '@react-spectrum/s2/icons/SaveFloppy';
 
 function Example(props) {
   return (
-    <div style={{display: 'flex', gap: 8}}>
+    <div className={style({display: 'flex', gap: 8})}>
       {/*- begin highlight -*/}
       <TooltipTrigger {...props}/* PROPS */>
       {/*- end highlight -*/}
@@ -69,8 +70,9 @@ Tooltips must be placed on focusable elements so they are accessible to keyboard
 ```tsx render
 "use client";
 import {Tooltip, TooltipTrigger, Button, ContextualHelp, Heading, Content} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
-<div style={{display: 'flex', gap: '6px', alignItems: 'center'}}>
+<div className={style({display: 'flex', gap: 8, alignItems: 'center'})}>
   <Button isDisabled>Delete resource</Button>
   {/*- begin highlight -*/}
   <ContextualHelp variant="info">
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
@@ -2,6 +2,10 @@ import {MobileOnPageNav, Nav, OnPageNav, SideNav, SideNavItem, SideNavLink} from
 import type {Page, PageProps, TocNode} from '@parcel/rsc';
 import React, {ReactElement} from 'react';
 import '../src/client';
+// @ts-ignore
+import internationalizedFavicon from 'url:../assets/internationalized.ico';
+// @ts-ignore
+import reactAriaFavicon from 'url:../assets/react-aria.ico';
 import './anatomy.css';
 import {ClassAPI} from './ClassAPI';
 import {Code} from './Code';
@@ -84,6 +88,18 @@ const getDescription = (currentPage: Page): string => {
   return library ? `Documentation for ${pageTitle} in ${library}.` : `Documentation for ${pageTitle}.`;
 };
 
+const getFaviconUrl = (currentPage: Page): string => {
+  const library = getLibraryFromPage(currentPage);
+  switch (library) {
+    case 'react-aria':
+      return reactAriaFavicon;
+    case 'internationalized':
+      return internationalizedFavicon;
+    default:
+      return 'https://www.adobe.com/favicon.ico';
+  }
+};
+
 let articleStyles = style({
   maxWidth: {
     default: 'none',
@@ -103,7 +119,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="alternate" type="text/markdown" title="LLM-friendly version" href={currentPage.url.replace(/\.html$/, '.md')} />
-        <link rel="icon" href="https://www.adobe.com/favicon.ico" />
+        <link rel="icon" href={getFaviconUrl(currentPage)} />
         <meta name="description" content={getDescription(currentPage)} />
         <meta property="og:image" content={getOgImageUrl(currentPage)} />
         <title>{getTitle(currentPage)}</title>
diff --git a/packages/dev/s2-docs/src/MarkdownMenu.tsx b/packages/dev/s2-docs/src/MarkdownMenu.tsx
diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
diff --git a/packages/dev/s2-docs/src/VisualExampleClient.tsx b/packages/dev/s2-docs/src/VisualExampleClient.tsx
