docs: Update React Aria example styling (#9049)

* Add isPressed to table column header render props

* docs: Update React Aria example styling

* fix

* lint

* Fixes and improvements

* fix ts and test

* fix disclosure

* more fixes

Author: devongovett

packages/@react-aria/disclosure/src/useDisclosure.ts

@@ -73,7 +73,7 @@ export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState
     if (raf.current) {
       cancelAnimationFrame(raf.current);
     }
-    if (ref.current && !isDisabled && !isSSR) {
+    if (ref.current && !isSSR) {
       let panel = ref.current;
 
       if (isExpandedRef.current == null || typeof panel.getAnimations !== 'function') {
@@ -155,7 +155,7 @@ export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState
       role: 'group',
       'aria-labelledby': triggerId,
       'aria-hidden': !state.isExpanded,
-      hidden: !state.isExpanded || undefined
+      hidden: isSSR ? !state.isExpanded : undefined
     }
   };
 }

packages/@react-aria/disclosure/test/useDisclosure.test.ts

@@ -91,7 +91,7 @@ describe('useDisclosure', () => {
   });
 
   it('should keep panel hidden when toggling disabled state', () => {
-    let {result, rerender} = renderHook(({isDisabled}: {isDisabled: boolean}) => {
+    let {rerender} = renderHook(({isDisabled}: {isDisabled: boolean}) => {
       let state = useDisclosureState({});
       return useDisclosure({isDisabled}, state, ref);
     }, {initialProps: {isDisabled: false}});
@@ -100,13 +100,13 @@ describe('useDisclosure', () => {
       rerender({isDisabled: true});
     });
 
-    expect(result.current.panelProps.hidden).toBe(true);
+    expect(ref.current.hidden).toBe(true);
 
     act(() => {
       rerender({isDisabled: false});
     });
 
-    expect(result.current.panelProps.hidden).toBe(true);
+    expect(ref.current.hidden).toBe(true);
   });
 
   it('should set correct IDs for accessibility', () => {

packages/@react-aria/table/src/useTableColumnHeader.ts

@@ -31,7 +31,9 @@ export interface AriaTableColumnHeaderProps<T> {
 
 export interface TableColumnHeaderAria {
   /** Props for the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader) element. */
-  columnHeaderProps: DOMAttributes
+  columnHeaderProps: DOMAttributes,
+  /** Whether the column is currently in a pressed state. */
+  isPressed: boolean
 }
 
 /**
@@ -48,7 +50,7 @@ export function useTableColumnHeader<T>(props: AriaTableColumnHeaderProps<T>, st
 
   let isSelectionCellDisabled = node.props.isSelectionCell && state.selectionManager.selectionMode === 'single';
 
-  let {pressProps} = usePress({
+  let {pressProps, isPressed} = usePress({
     isDisabled: !allowsSorting || isSelectionCellDisabled,
     onPress() {
       state.sort(node.key);
@@ -100,6 +102,7 @@ export function useTableColumnHeader<T>(props: AriaTableColumnHeaderProps<T>, st
       id: getColumnHeaderId(state, node.key),
       'aria-colspan': node.colSpan && node.colSpan > 1 ? node.colSpan : undefined,
       'aria-sort': ariaSort
-    }
+    },
+    isPressed
   };
 }

packages/dev/docs/pages/react-aria/home/ExampleApp.tsx

@@ -15,13 +15,13 @@ import {Button} from 'tailwind-starter/Button';
 import {Cell, Column, Row, TableHeader} from 'tailwind-starter/Table';
 import {Checkbox} from 'tailwind-starter/Checkbox';
 import {CloudSun, Dessert, Droplet, Droplets, FilterIcon, Mail, MoreHorizontal, PencilIcon, PlusIcon, RefreshCw, ShareIcon, SlidersIcon, StarIcon, Sun, SunDim, TrashIcon, Twitter} from 'lucide-react';
-import {ColumnProps, Dialog, DialogTrigger, DropZone, Form, Heading, isFileDropItem, Key, MenuTrigger, ModalOverlay, ModalOverlayProps, Modal as RACModal, ResizableTableContainer, Selection, SortDescriptor, SubmenuTrigger, Table, TableBody, Text, ToggleButton, ToggleButtonProps, TooltipTrigger} from 'react-aria-components';
+import {ColumnProps, Dialog, DialogTrigger, DropZone, Form, Heading, isFileDropItem, Key, ModalOverlay, ModalOverlayProps, Modal as RACModal, ResizableTableContainer, Selection, SortDescriptor, Table, TableBody, Text, ToggleButton, ToggleButtonProps, TooltipTrigger} from 'react-aria-components';
 import {ComboBox, ComboBoxItem} from 'tailwind-starter/ComboBox';
 import {DatePicker} from 'tailwind-starter/DatePicker';
 import {focusRing} from 'tailwind-starter/utils';
 import {getLocalTimeZone, today} from '@internationalized/date';
 import {GridList, GridListItem} from 'tailwind-starter/GridList';
-import {Menu, MenuItem} from 'tailwind-starter/Menu';
+import {Menu, MenuItem, MenuTrigger, SubmenuTrigger} from 'tailwind-starter/Menu';
 import {Modal} from 'tailwind-starter/Modal';
 import plants, {Plant} from './plants';
 import {Popover} from 'tailwind-starter/Popover';
@@ -41,7 +41,7 @@ const allColumns: ColumnProps[] = [
   {id: 'cycle', children: 'Cycle', defaultWidth: 120, allowsSorting: true},
   {id: 'sunlight', children: 'Sunlight', defaultWidth: 120, allowsSorting: true},
   {id: 'watering', children: 'Watering', defaultWidth: 120, allowsSorting: true},
-  {id: 'actions', children: <VisuallyHidden>Actions</VisuallyHidden>, width: 44, minWidth: 44}
+  {id: 'actions', children: <VisuallyHidden>Actions</VisuallyHidden>, width: 64, minWidth: 64}
 ];
 
 let hideOnScroll = document.getElementById('hideOnScroll');
@@ -237,9 +237,9 @@ export function ExampleApp(): React.ReactNode {
                 <img alt="" src={item.default_image?.thumbnail} className="inline rounded-sm row-span-3 object-contain h-[40px]" />
                 <span className="truncate capitalize">{item.common_name}</span>
                 <span className="truncate text-xs text-gray-600 dark:text-zinc-400 col-start-2 row-start-2">{item.scientific_name}</span>
-                <MenuTrigger>
-                  <Button aria-label="Actions" variant="icon" className="row-span-2 place-self-center"><MoreHorizontal className="w-5 h-5" /></Button>
-                  <Menu placement="bottom end" onAction={action => onAction(item, action)}>
+                <MenuTrigger placement="bottom end" >
+                  <Button aria-label="Actions" variant="secondary" className="row-span-2 place-self-center"><MoreHorizontal className="w-5 h-5" /></Button>
+                  <Menu onAction={action => onAction(item, action)}>
                     <MenuItem id="favorite"><StarIcon aria-hidden className="w-4 h-4" /> {item.isFavorite ? 'Unfavorite' : 'Favorite'}</MenuItem>
                     <MenuItem id="edit"><PencilIcon aria-hidden className="w-4 h-4" /> Edit…</MenuItem>
                     <MenuItem id="delete"><TrashIcon aria-hidden className="w-4 h-4" /> Delete…</MenuItem>
@@ -296,7 +296,7 @@ export function ExampleApp(): React.ReactNode {
                       return (
                         <Cell>
                           <MenuTrigger>
-                            <Button aria-label="Actions" variant="icon">
+                            <Button aria-label="Actions" variant="secondary">
                               <MoreHorizontal aria-hidden className="w-5 h-5" />
                             </Button>
                             <Menu onAction={action => onAction(item, action)}>

packages/dev/s2-docs/pages/react-aria/Button.mdx

@@ -6,6 +6,7 @@ import docs from 'docs:react-aria-components';
 import {Button as VanillaButton} from 'vanilla-starter/Button';
 import {Button as TailwindButton} from 'tailwind-starter/Button';
 /* import {Button as MacroButton} from './ButtonExample'; */
+import vanillaDocs from 'docs:vanilla-starter/Button';
 import tailwindDocs from 'docs:tailwind-starter/Button';
 import '../../tailwind/tailwind.css';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
@@ -19,9 +20,9 @@ export const tags = ['btn'];
 <ExampleSwitcher examples={['Vanilla CSS', 'Tailwind'/*, 'Style Macro'*/]}>
   <VisualExample
     component={VanillaButton}
-    docs={docs.exports.Button}
-    links={docs.links}
-    props={['isPending', 'isDisabled']}
+    docs={vanillaDocs.exports.Button}
+    links={vanillaDocs.links}
+    props={['variant', 'isPending', 'isDisabled']}
     initialProps={{children: 'Press me'}}
     type="vanilla"
     files={["starters/docs/src/Button.tsx", "starters/docs/src/Button.css"]} />
@@ -114,7 +115,7 @@ The `Button` component always represents a button semantically. To create a link
 "use client";
 import {Link} from 'react-aria-components';
 
-<Link className="react-aria-Button" href="https://adobe.com/" target="_blank">
+<Link className="react-aria-Button button-base" href="https://adobe.com/" target="_blank">
   Adobe
 </Link>
 ```

packages/dev/s2-docs/pages/react-aria/Calendar.mdx

@@ -183,8 +183,11 @@ Set the `visibleDuration` prop and render multiple `CalendarGrid` elements to di
 
 ```tsx render docs={docs.exports.Calendar} links={docs.links} props={['visibleDuration', 'pageBehavior', 'firstDayOfWeek']} initialProps={{visibleDuration: {months: 2}}} wide
 "use client";
-import {Calendar, Heading, Button, CalendarGrid, CalendarCell} from 'react-aria-components';
+import {Calendar, Heading} from 'react-aria-components';
+import {CalendarGrid, CalendarCell} from 'vanilla-starter/Calendar';
+import {Button} from 'vanilla-starter/Button';
 import {useDateFormatter} from 'react-aria';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
 
 // TODO: move this into the starter example.
 function Example(props) {
@@ -201,18 +204,22 @@ function Example(props) {
       ///- begin highlight -///
       /* PROPS */
       ///- end highlight -///
-      style={{display: 'flex', gap: 30, overflow: 'auto'}}
+      style={{display: 'flex', gap: 12, overflow: 'auto'}}
     >
       {({state}) => (
         [...Array(props.visibleDuration.months).keys()].map(i => (
           <div key={i} style={{flex: 1}}>
-            <header>
+            <header style={{minHeight: 32}}>
               {i === 0 && 
-                <Button slot="previous">◀</Button>
+                <Button slot="previous" variant="quiet">
+                  <ChevronLeft />
+                </Button>
               }
-              <h2 style={{flex: 1, textAlign: 'center'}}>{monthFormatter.format(state.visibleRange.start.add({months: i}).toDate('UTC'))}</h2>
+              <Heading>{monthFormatter.format(state.visibleRange.start.add({months: i}).toDate(state.timeZone))}</Heading>
               {i === props.visibleDuration.months - 1 && 
-                <Button slot="next">▶</Button>
+                <Button slot="next" variant="quiet">
+                  <ChevronRight />
+                </Button>
               }
             </header>
             <CalendarGrid offset={{months: i}}>
@@ -265,19 +272,25 @@ You can also control the focused date via `CalendarStateContext`. This example s
 
 ```tsx render files={['packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx', 'packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx']}
 "use client";
-import {Calendar, CalendarGrid, CalendarCell} from 'react-aria-components';
+import {Calendar} from 'react-aria-components';
+import {CalendarGrid, CalendarCell} from 'vanilla-starter/Calendar';
 import {MonthDropdown} from './MonthDropdown';
 import {YearDropdown} from './YearDropdown';
 import {Button} from 'vanilla-starter/Button';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
 
 <Calendar>
   <header style={{display: 'flex', gap: 4}}>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous" variant="quiet">
+      <ChevronLeft />
+    </Button>
     {/*- begin highlight -*/}
     <MonthDropdown />
     <YearDropdown />
     {/*- end highlight -*/}
-    <Button slot="next">▶</Button>
+    <Button slot="next" variant="quiet">
+      <ChevronRight />
+    </Button>
   </header>
   <CalendarGrid>
     {(date) => <CalendarCell date={date} />}

packages/dev/s2-docs/pages/react-aria/Checkbox.mdx

@@ -70,7 +70,7 @@ Use the `name` and `value` props to submit the checkbox to the server. Set the `
 "use client";
 import {Checkbox} from 'vanilla-starter/Checkbox';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 <Form>
   <Checkbox

packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx

@@ -77,7 +77,7 @@ Use the `name` prop to submit the selected checkboxes to the server. Set the `is
 import {CheckboxGroup} from 'vanilla-starter/CheckboxGroup';
 import {Checkbox} from 'vanilla-starter/Checkbox';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 <Form>
   <div style={{display: 'flex', gap: 32, flexWrap: 'wrap'}}>

packages/dev/s2-docs/pages/react-aria/ColorField.mdx

@@ -20,15 +20,15 @@ export const tags = ['input'];
     docs={vanillaDocs.exports.ColorField}
     links={vanillaDocs.links}
     props={['label', 'colorSpace', 'channel', 'description', 'isDisabled']}
-    initialProps={{label: 'Color', defaultValue: '#ff0000'}}
+    initialProps={{label: 'Color', defaultValue: '#ff0000', placeholder: 'Enter a color'}}
     type="vanilla"
     files={["starters/docs/src/ColorField.tsx", "starters/docs/src/ColorField.css"]} />
   <VisualExample
     component={TailwindColorField}
     docs={vanillaDocs.exports.ColorField}
     links={vanillaDocs.links}
     props={['label', 'colorSpace', 'channel', 'description', 'isDisabled']}
-    initialProps={{label: 'Color', defaultValue: '#ff0000'}}
+    initialProps={{label: 'Color', defaultValue: '#ff0000', placeholder: 'Enter a color'}}
     type="tailwind"
     files={["starters/tailwind/src/ColorField.tsx", "starters/tailwind/src/index.css"]} />
 </ExampleSwitcher>
@@ -50,9 +50,10 @@ function Example() {
     <div>
       <ColorField
         label="Primary color"
+        placeholder="Enter a color"
         value={value}
         onChange={setValue} />
-      <pre style={{fontSize: 12}}>Current value: {value.toString('hex')}</pre>
+      <pre style={{fontSize: 12}}>Current value: {value?.toString('hex')}</pre>
     </div>
   );
 }
@@ -75,6 +76,7 @@ function Example() {
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
       <ColorField
         label="Hue"
+        
         value={color}
         onChange={setColor}
         /*- begin highlight -*/
@@ -115,6 +117,7 @@ function Example(props) {
       <ColorField
         {...props}
         label="Brand color"
+        placeholder="Enter a color"
         ///- begin highlight -///
         name="brandColor"
         isRequired />

packages/dev/s2-docs/pages/react-aria/ComboBox.mdx

@@ -14,7 +14,7 @@ export const tags = ['autocomplete', 'search', 'typeahead', 'input'];
 <PageDescription>{docs.exports.ComboBox.description}</PageDescription>
 
 <ExampleSwitcher>
-  ```tsx render docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['label', 'isDisabled']} initialProps={{label: 'Favorite Animal'}} type="vanilla" files={["starters/docs/src/ComboBox.tsx", "starters/docs/src/ComboBox.css"]}
+  ```tsx render docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['label', 'isDisabled']} initialProps={{label: 'Favorite Animal', placeholder: 'Select a flavor'}} type="vanilla" files={["starters/docs/src/ComboBox.tsx", "starters/docs/src/ComboBox.css"]}
   "use client";
   import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
 
@@ -28,7 +28,7 @@ export const tags = ['autocomplete', 'search', 'typeahead', 'input'];
   </ComboBox>
   ```
 
-  ```tsx render docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['label', 'isDisabled']} initialProps={{label: 'Favorite Animal'}} type="tailwind" files={["starters/tailwind/src/ComboBox.tsx"]}
+  ```tsx render docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['label', 'isDisabled']} initialProps={{label: 'Favorite Animal', placeholder: 'Select a flavor'}} type="tailwind" files={["starters/tailwind/src/ComboBox.tsx"]}
   "use client";
   import {ComboBox, ComboBoxItem} from 'tailwind-starter/ComboBox';
 
@@ -52,8 +52,8 @@ The following example shows a dynamic collection of items, grouped into sections
 
 ```tsx render
 "use client";
-import {ComboBox} from 'vanilla-starter/ComboBox';
-import {ListBoxSection, ListBoxItem, Collection, Header} from 'react-aria-components';
+import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
+import {ListBoxSection, Collection, Header} from 'react-aria-components';
 
 function Example() {
   /*- begin collapse -*/
@@ -82,16 +82,21 @@ function Example() {
   /*- end collapse -*/
 
   return (
-    <ComboBox label="Preferred fruit or vegetable" items={options}>
+    /*- begin highlight -*/
+    <ComboBox
+      label="Preferred fruit or vegetable"
+      placeholder="Select an option"
+      defaultItems={options}>
       {section => (
         <ListBoxSection id={section.name}>
           <Header>{section.name}</Header>
           <Collection items={section.children}>
-            {item => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}
+            {item => <ComboBoxItem id={item.name}>{item.name}</ComboBoxItem>}
           </Collection>
         </ListBoxSection>
       )}
     </ComboBox>
+    /*- end highlight -*/
   );
 }
 ```
@@ -112,7 +117,8 @@ function Example() {
   return (
     <div>
       <ComboBox
-        label="Pick an animal"
+        label="Favorite Animal"
+        placeholder="Select an animal"
         /*- begin highlight -*/
         selectedKey={animal}
         onSelectionChange={setAnimal}>
@@ -148,6 +154,7 @@ function Example(props) {
       <ComboBox
         {...props}
         label="Favorite Animal"
+        placeholder="Select an animal"
         /*- begin highlight -*/
         /* PROPS */
         inputValue={value}
@@ -215,7 +222,8 @@ function ControlledComboBox() {
   return (
     <div>
        <ComboBox
-        label="Pick a engineering major"
+        label="Engineering major"
+        placeholder="Select a major"
         /*- begin highlight -*/
         defaultItems={options}
         selectedKey={fieldState.selectedKey}
@@ -249,6 +257,7 @@ function Example() {
   return (
     <ComboBox
       label="Favorite Animal"
+      placeholder="Select an animal"
       allowsEmptyCollection
       inputValue={inputValue}
       onInputChange={setInputValue}>
@@ -278,11 +287,12 @@ Use the `name` prop to submit the `id` of the selected item to the server. Set t
 "use client";
 import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 <Form>
   <ComboBox
     label="Animal"
+    placeholder="e.g. Cat"
     /*- begin highlight -*/
     name="animal"
     isRequired
@@ -309,7 +319,7 @@ Use the `menuTrigger` prop to control when the popover opens:
 
 Use `allowsEmptyCollection` to keep the popover open when there are no items available in the list.
 
-```tsx render wide docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['menuTrigger', 'allowsEmptyCollection']} initialProps={{label: 'Favorite Animal'}}
+```tsx render wide docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['menuTrigger', 'allowsEmptyCollection']} initialProps={{label: 'Favorite Animal', placeholder: 'Select an animal'}}
 "use client";
 import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';