docs: Refine Tailwind examples (#9229)

* docs: Refine Tailwind examples

* More refinements

* fixes

* lint

Author: devongovett

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

@@ -174,19 +174,19 @@ export function ExampleApp(): React.ReactNode {
   return (
     <div className="h-full flex flex-col gap-4 p-4 box-border">
       <div className="grid grid-cols-[1fr_auto_auto] sm:grid-cols-[1.1fr_auto_auto_1fr_auto] gap-2 items-end">
-        <SearchField aria-label="Search" value={search} onChange={setSearch} className="col-span-3 sm:col-span-1" />
+        <SearchField aria-label="Search plants" placeholder="Search plants" value={search} onChange={setSearch} className="col-span-3 sm:col-span-1" />
         <DialogTrigger>
           <TooltipTrigger>
-            <Button aria-label="Filters" variant="secondary" className="w-9 h-9 shrink-0 p-0 px-2 relative">
-              <FilterIcon aria-hidden className="block w-5 h-5" />
+            <Button aria-label="Filters" variant="secondary" className="!w-9 !h-9 shrink-0 relative">
+              <FilterIcon aria-hidden className="block w-5 h-5 shrink-0" />
               {filters > 0 && <div className="absolute -top-2 -right-2 rounded-full h-4 aspect-square text-white text-xs bg-blue-600">{filters}</div>}
             </Button>
             <Tooltip>Filters</Tooltip>
           </TooltipTrigger>
           <Popover showArrow>
             <Dialog className="outline outline-0 p-4 box-border max-h-[inherit] overflow-auto w-[350px]">
               <Heading slot="title" className="text-lg font-semibold m-0 mb-2">Filters</Heading>
-              {filters > 0 && <Button onPress={clearFilters} variant="secondary" className="absolute top-4 right-4 py-1 px-2 text-xs">Clear</Button>}
+              {filters > 0 && <Button onPress={clearFilters} variant="secondary" className="absolute top-4 right-4 h-auto py-1 px-2 text-xs">Clear</Button>}
               <div className="flex flex-col gap-4">
                 <Checkbox isSelected={favorite} onChange={setFavorite}>Favorite</Checkbox>
                 <TagGroup label="Cycle" selectionMode="multiple" selectedKeys={cycles} onSelectionChange={setCycles} escapeKeyBehavior="none">
@@ -209,7 +209,7 @@ export function ExampleApp(): React.ReactNode {
         </DialogTrigger>
         <MenuTrigger>
           <TooltipTrigger>
-            <Button aria-label="Columns" variant="secondary" className="w-9 h-9 shrink-0 p-0 hidden sm:block">
+            <Button aria-label="Columns" variant="secondary" className="!h-9 shrink-0 p-0 hidden sm:inline-flex">
               <SlidersIcon aria-hidden className="block w-5 h-5" />
             </Button>
             <Tooltip>Columns</Tooltip>
@@ -222,7 +222,7 @@ export function ExampleApp(): React.ReactNode {
           </Menu>
         </MenuTrigger>
         <DialogTrigger>
-          <Button aria-label="Add plant" variant="secondary" className="w-9 h-9 shrink-0 p-0 col-start-5">
+          <Button aria-label="Add plant" variant="secondary" className="!h-9 shrink-0 p-0 col-start-5">
             <PlusIcon aria-hidden className="block w-5 h-5" />
           </Button>
           <PlantModal>
@@ -237,9 +237,9 @@ export function ExampleApp(): React.ReactNode {
               <div className="grid grid-cols-[40px_1fr_auto] gap-x-2 w-full">
                 <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>
+                <span className="truncate text-xs text-neutral-600 dark:text-neutral-400 col-start-2 row-start-2">{item.scientific_name}</span>
                 <MenuTrigger placement="bottom end" >
-                  <Button aria-label="Actions" variant="secondary" className="row-span-2 place-self-center bg-transparent dark:bg-transparent border-transparent dark:border-transparent !p-1"><MoreHorizontal className="w-5 h-5" /></Button>
+                  <Button aria-label="Actions" variant="quiet" 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>
@@ -283,7 +283,7 @@ export function ExampleApp(): React.ReactNode {
                           <div className="grid grid-cols-[40px_1fr] gap-x-2">
                             <img alt="" src={item.default_image?.thumbnail} className="inline rounded-sm row-span-2 object-contain h-[40px] w-[40px]" />
                             <span className="truncate capitalize">{item.common_name}</span>
-                            <span className="truncate text-xs text-gray-600 dark:text-zinc-400">{item.scientific_name}</span>
+                            <span className="truncate text-xs text-neutral-600 dark:text-neutral-400">{item.scientific_name}</span>
                           </div>
                         </Cell>
                       );
@@ -297,7 +297,7 @@ export function ExampleApp(): React.ReactNode {
                       return (
                         <Cell>
                           <MenuTrigger>
-                            <Button aria-label="Actions" variant="secondary" className="bg-transparent dark:bg-transparent border-transparent dark:border-transparent !p-1">
+                            <Button aria-label="Actions" variant="quiet">
                               <MoreHorizontal aria-hidden className="w-5 h-5" />
                             </Button>
                             <Menu onAction={action => onAction(item, action)}>
@@ -340,7 +340,7 @@ export function ExampleApp(): React.ReactNode {
 }
 
 const labelStyles = {
-  gray: 'bg-gray-100 text-gray-600 border-gray-200 dark:bg-zinc-700 dark:text-zinc-300 dark:border-zinc-600',
+  gray: 'bg-neutral-100 text-neutral-600 border-neutral-200 dark:bg-neutral-700 dark:text-neutral-300 dark:border-neutral-600',
   green: 'bg-green-100 text-green-700 border-green-200 dark:bg-green-300/20 dark:text-green-400 dark:border-green-300/10',
   yellow: 'bg-yellow-100 text-yellow-700 border-yellow-200 dark:bg-yellow-300/20 dark:text-yellow-400 dark:border-yellow-300/10',
   blue: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-400/20 dark:text-blue-300 dark:border-blue-400/10'
@@ -399,7 +399,7 @@ function PlantDialog({item, onSave}: {item?: Plant | null, onSave: (item: Plant)
         <>
           <Heading
             slot="title"
-            className="text-2xl font-semibold leading-6 my-0 text-slate-700 dark:text-zinc-300">
+            className="text-2xl font-semibold leading-6 my-0 text-neutral-700 dark:text-neutral-300">
             {item ? 'Edit Plant' : 'Add Plant'}
           </Heading>
           <Form
@@ -424,18 +424,18 @@ function PlantDialog({item, onSave}: {item?: Plant | null, onSave: (item: Plant)
                     setDroppedImage(URL.createObjectURL(await item.getFile()));
                   }
                 }}
-                className="w-24 sm:w-32 p-2 box-border flex items-center justify-center shrink-0 border-2 border-gray-400 border-dashed rounded-xl text-gray-500 dark:text-gray-300 focus-visible:border-blue-600 forced-colors:focus-visible:border-[Highlight] focus-visible:border-solid drop-target:border-blue-600 forced-colors:drop-target:border-[Highlight] drop-target:border-solid drop-target:bg-blue-200 dark:drop-target:bg-blue-800/60 drop-target:text-blue-600 dark:drop-target:text-blue-300">
+                className="w-24 sm:w-32 p-2 box-border flex items-center justify-center shrink-0 border-2 border-neutral-400 border-dashed rounded-xl text-neutral-500 dark:text-neutral-300 focus-visible:border-blue-600 forced-colors:focus-visible:border-[Highlight] focus-visible:border-solid drop-target:border-blue-600 forced-colors:drop-target:border-[Highlight] drop-target:border-solid drop-target:bg-blue-200 dark:drop-target:bg-blue-800/60 drop-target:text-blue-600 dark:drop-target:text-blue-300">
                 {droppedImage
                   ? <img alt="" src={droppedImage} className="w-full h-full object-contain aspect-square" />
                   : <Text slot="label" className="italic text-sm text-center">Drop or paste image here</Text>
                 }
                 <input type="hidden" name="image" value={droppedImage} />
               </DropZone>
               <div className="flex flex-col gap-3 flex-1 min-w-0">
-                <ComboBox label="Common Name" name="common_name" isRequired items={plants} defaultInputValue={item?.common_name} allowsCustomValue autoFocus={navigator.maxTouchPoints === 0}>
+                <ComboBox label="Common Name" placeholder="Enter plant name" name="common_name" isRequired items={plants} defaultInputValue={item?.common_name} allowsCustomValue autoFocus={navigator.maxTouchPoints === 0}>
                   {plant => <ComboBoxItem>{plant.common_name}</ComboBoxItem>}
                 </ComboBox>
-                <TextField label="Scientific Name" name="scientific_name" isRequired defaultValue={item?.scientific_name?.join('')} />
+                <TextField label="Scientific Name" placeholder="Enter scientific name" name="scientific_name" isRequired defaultValue={item?.scientific_name?.join('')} />
               </div>
             </div>
             <Select label="Cycle" name="cycle" isRequired defaultSelectedKey={item?.cycle}>
@@ -527,10 +527,10 @@ function PlantModal(props: ModalOverlayProps) {
               <svg viewBox="0 0 700 620" width={700} height={620}>
                 <Arrow textX={52} x1={88} x2={130} y={50} href="Dialog.html">Dialog</Arrow>
                 <Arrow textX={34} x1={88} x2={150} y={150} href="DropZone.html">DropZone</Arrow>
-                <Arrow textX={54} x1={88} x2={150} y={272} href="Select.html">Select</Arrow>
-                <Arrow textX={32} x1={88} x2={150} y={492} href="DatePicker.html">DatePicker</Arrow>
-                <Arrow textX={616} x1={550} x2={612} y={126} marker="markerStart" href="ComboBox.html">ComboBox</Arrow>
-                <Arrow textX={616} x1={550} x2={612} y={198} marker="markerStart" href="TextField.html">TextField</Arrow>
+                <Arrow textX={54} x1={88} x2={150} y={274} href="Select.html">Select</Arrow>
+                <Arrow textX={32} x1={88} x2={150} y={490} href="DatePicker.html">DatePicker</Arrow>
+                <Arrow textX={616} x1={550} x2={612} y={128} marker="markerStart" href="ComboBox.html">ComboBox</Arrow>
+                <Arrow textX={616} x1={550} x2={612} y={200} marker="markerStart" href="TextField.html">TextField</Arrow>
                 <Arrow points="560,90 590,90 590,338 612,338 590,338 590,585 560,585" textX={616} y={338} marker="none" href="Form.html">Form</Arrow>
               </svg>
             </div>
@@ -539,7 +539,7 @@ function PlantModal(props: ModalOverlayProps) {
             {...props}
             ref={ref}
             className={({isEntering, isExiting}) => `
-            w-full max-w-md max-h-full overflow-auto rounded-2xl bg-white dark:bg-zinc-800/70 dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:!bg-[Canvas] box-border p-6 border-box text-left align-middle shadow-2xl bg-clip-padding border border-black/10 dark:border-white/10
+            w-full max-w-md max-h-full overflow-auto rounded-2xl bg-white dark:bg-neutral-800/70 dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:!bg-[Canvas] box-border p-6 border-box text-left align-middle shadow-2xl bg-clip-padding border border-black/10 dark:border-white/10
             ${isEntering ? 'animate-in zoom-in-105 ease-out duration-200' : ''}
             ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
           `} />
@@ -554,16 +554,16 @@ const favoriteButtonStyles = tv({
   base: 'group cursor-default align-middle rounded-sm border-0 bg-transparent p-0',
   variants: {
     isSelected: {
-      false: 'text-gray-500 dark:text-zinc-400 pressed:text-gray-600 dark:pressed:text-zinc-300',
-      true: 'text-gray-700 dark:text-slate-300 pressed:text-gray-800 dark:pressed:text-slate-200'
+      false: 'text-neutral-500 dark:text-neutral-400 pressed:text-neutral-600 dark:pressed:text-neutral-300',
+      true: 'text-neutral-700 dark:text-neutral-300 pressed:text-neutral-800 dark:pressed:text-neutral-200'
     }
   }
 });
 
 function FavoriteButton(props: ToggleButtonProps) {
   return (
     <ToggleButton aria-label="Favorite" {...props} className={favoriteButtonStyles}>
-      <StarIcon className="block w-5 h-5 fill-white dark:fill-zinc-900 group-selected:fill-current" />
+      <StarIcon className="block w-5 h-5 fill-white dark:fill-neutral-900 group-selected:fill-current" />
     </ToggleButton>
   );
 }

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

@@ -21,7 +21,7 @@ export function FocusExample() {
   return (
     <div className="flex items-center justify-center h-full">
       <DialogTrigger>
-        <Button variant="secondary" className="w-9 h-9 p-0" aria-label="Account"><CircleUser aria-hidden className="inline w-5 h-5" /></Button>
+        <Button variant="secondary" aria-label="Account"><CircleUser aria-hidden className="inline w-5 h-5" /></Button>
         <Popover showArrow className="w-[250px]">
           <Dialog className="outline outline-0 p-4 overflow-auto flex flex-col gap-2">
             <Heading slot="title" className="text-lg font-semibold m-0 mb-2">Your Account</Heading>

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

@@ -60,7 +60,7 @@ export function MouseAnimation(): ReactNode {
           mouseRef.current!.animate({
             transform: [
               'translate(10px, 10px)',
-              'translate(110px, 14px)'
+              'translate(105px, 14px)'
             ]
           }, {duration: 2000, fill: 'forwards', easing: 'ease-in-out'});
         }
@@ -97,7 +97,7 @@ export function MouseAnimation(): ReactNode {
         perform() {
           mouseRef.current!.animate({
             transform: [
-              'translate(110px, 14px)',
+              'translate(105px, 14px)',
               'translate(170px, 150px)'
             ]
           }, {duration: 1500, fill: 'forwards', easing: 'ease-in-out'});
@@ -151,20 +151,20 @@ export function MouseAnimation(): ReactNode {
         </g>
       </svg>
       <TooltipTrigger isOpen={tooltip === 'edit'} onOpenChange={(o) => onOpenChange('edit', o)}>
-        <Button aria-label="Edit" variant="secondary" className={`w-9 h-9 p-0 relative ${hovered === 'edit' ? 'bg-gray-200 dark:bg-zinc-500' : ''}`}>
+        <Button aria-label="Edit" variant="secondary" className={`relative ${hovered === 'edit' ? 'bg-gray-200 dark:bg-zinc-500' : ''}`}>
           <PencilIcon aria-hidden className="inline w-5 h-5" />
         </Button>
         <Tooltip>Edit</Tooltip>
       </TooltipTrigger>
       <TooltipTrigger isOpen={tooltip === 'share'} onOpenChange={(o) => onOpenChange('share', o)}>
-        <Button aria-label="Share" variant="secondary" className={`w-9 h-9 p-0 relative ${hovered === 'share' ? 'bg-gray-200 dark:bg-zinc-500' : ''}`}>
+        <Button aria-label="Share" variant="secondary" className={`relative ${hovered === 'share' ? 'bg-gray-200 dark:bg-zinc-500' : ''}`}>
           <ShareIcon aria-hidden className="inline w-5 h-5" />
         </Button>
         <Tooltip>Share</Tooltip>
       </TooltipTrigger>
       <TooltipTrigger isOpen={tooltip === 'settings'} onOpenChange={(o) => onOpenChange('settings', o)}>
         <ButtonContext.Provider value={{isPressed}}>
-          <Button aria-label="Settings" variant="secondary" className={`w-9 h-9 p-0 relative ${hovered === 'settings' ? 'bg-gray-200 dark:bg-zinc-500' : ''}`}>
+          <Button aria-label="Settings" variant="secondary" className={`relative ${hovered === 'settings' ? 'bg-gray-200 dark:bg-zinc-500' : ''}`}>
             <CogIcon aria-hidden className="inline w-5 h-5" />
           </Button>
         </ButtonContext.Provider>

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

@@ -62,11 +62,15 @@ export const relatedPages = [{'title': 'useModalOverlay', 'url': 'https://react-
         <Button>Sign up…</Button>
         <Modal {...props}/* PROPS */>
           <Dialog>
+            <Heading slot="title" className="text-xl mt-0">Subscribe to our newsletter</Heading>
+            <p className="text-sm">Enter your information to subscribe to our newsletter and receive updates about new features and announcements.</p>
             <Form>
-              <Heading slot="title">Sign up</Heading>
-              <TextField autoFocus label="First Name" />
-              <TextField label="Last Name" />
-              <Button slot="close" className="self-end">Submit</Button>
+              <TextField autoFocus label="Name" placeholder="Enter your full name" />
+              <TextField label="Email" placeholder="Enter your email" />
+              <div className="flex gap-2 self-end">
+                <Button slot="close" variant="secondary">Cancel</Button>
+                <Button slot="close">Subscribe</Button>
+              </div>
             </Form>
           </Dialog>
         </Modal>

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

@@ -78,7 +78,7 @@ export const relatedPages = [{'title': 'useToolbar', 'url': 'https://react-spect
         <Underline size={16} />
       </ToggleButton>
     </ToggleButtonGroup>
-    <Group aria-label="Clipboard" className="flex gap-1">
+    <Group aria-label="Clipboard" className="flex gap-1" style={{flexDirection: 'inherit'}}>
       <Button aria-label="Copy" variant="secondary">
         <ClipboardCopy size={16} />
       </Button>