docs: Fixes from testing (#9236)

* Fix alignment of contextual help

* Fix border-radius of first/last items

* Fix press outline on toast close button

* Fix toast contrast

* Fix tailwind code examples

Author: devongovett

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

@@ -31,7 +31,7 @@ export const relatedPages = [{'title': 'useDatePicker', 'url': 'https://react-sp
     props={['label', 'granularity', 'isDisabled']}
     initialProps={{label: 'Date'}}
     type="tailwind"
-    files={["starters/tailwind/src/DatePicker.tsx", "starters/tailwind/src/DateField.tsx",  "starters/tailwind/src/index.css"]} />
+    files={["starters/tailwind/src/DatePicker.tsx"]} />
 </ExampleSwitcher>
 
 ## Value

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

@@ -31,7 +31,7 @@ export const relatedPages = [{'title': 'useDateRangePicker', 'url': 'https://rea
     props={['label', 'granularity', 'isDisabled']}
     initialProps={{label: 'Date range'}}
     type="tailwind"
-    files={["starters/tailwind/src/DateRangePicker.tsx", "starters/tailwind/src/DateField.tsx",  "starters/tailwind/src/index.css"]} />
+    files={["starters/tailwind/src/DateRangePicker.tsx"]} />
 </ExampleSwitcher>
 
 ## Value

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

@@ -47,7 +47,7 @@ export const relatedPages = [{'title': 'useModalOverlay', 'url': 'https://react-
   }
   ```
 
-  ```tsx render docs={vanillaDocs.exports.Modal} links={vanillaDocs.links} props={['isDismissable', 'isKeyboardDismissDisabled']} type="tailwind" files={["starters/docs/src/Modal.tsx"]}
+  ```tsx render docs={vanillaDocs.exports.Modal} links={vanillaDocs.links} props={['isDismissable', 'isKeyboardDismissDisabled']} type="tailwind" files={["starters/tailwind/src/Modal.tsx"]}
   "use client";
   import {DialogTrigger, Heading} from 'react-aria-components';
   import {Modal} from 'tailwind-starter/Modal';

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

@@ -43,7 +43,7 @@ export const relatedPages = [{'title': 'usePopover', 'url': 'https://react-spect
   }
   ```
 
-  ```tsx render docs={vanillaDocs.exports.Popover} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']} type="tailwind" files={["starters/docs/src/Popover.tsx"]}
+  ```tsx render docs={vanillaDocs.exports.Popover} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']} type="tailwind" files={["starters/tailwind/src/Popover.tsx"]}
   "use client";
   import {DialogTrigger} from 'react-aria-components';
   import {Popover} from 'tailwind-starter/Popover';

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

@@ -56,7 +56,7 @@ export const relatedPages = [{'title': 'useToolbar', 'url': 'https://react-spect
   </Toolbar>
   ```
 
-  ```tsx render docs={docs.exports.Toolbar} links={docs.links} props={['orientation']} initialProps={{'aria-label': 'Text formatting'}} type="tailwind" files={["starters/docs/src/Toolbar.tsx"]}
+  ```tsx render docs={docs.exports.Toolbar} links={docs.links} props={['orientation']} initialProps={{'aria-label': 'Text formatting'}} type="tailwind" files={["starters/tailwind/src/Toolbar.tsx"]}
   "use client";
   import {Toolbar} from 'tailwind-starter/Toolbar';
   import {ToggleButtonGroup} from 'tailwind-starter/ToggleButtonGroup';

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

@@ -38,7 +38,7 @@ export const relatedPages = [{'title': 'useTooltipTrigger', 'url': 'https://reac
   }
   ```
 
-  ```tsx render docs={vanillaDocs.exports.Tooltip} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']} type="tailwind" files={["starters/docs/src/Tooltip.tsx"]}
+  ```tsx render docs={vanillaDocs.exports.Tooltip} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']} type="tailwind" files={["starters/tailwind/src/Tooltip.tsx"]}
   "use client";
   import {TooltipTrigger} from 'react-aria-components';
   import {Tooltip} from 'tailwind-starter/Tooltip';

packages/dev/s2-docs/src/VisualExampleClient.tsx

@@ -3,6 +3,7 @@
 import {ActionButton, Avatar, Collection, ComboBox, ComboBoxItem, Content, ContextualHelp, Footer, Header, Heading, NotificationBadge, NumberField, Picker, PickerItem, PickerSection, RangeSlider, Slider, Switch, Text, TextField, ToggleButton, ToggleButtonGroup} from '@react-spectrum/s2';
 import AddCircle from '@react-spectrum/s2/icons/AddCircle';
 import {baseColor, focusRing, style, StyleString} from '@react-spectrum/s2/style' with { type: 'macro' };
+import {CenterBaseline} from '../../../@react-spectrum/s2/src/CenterBaseline';
 import {CodePlatter, Pre, ShareUrlProvider} from './CodePlatter';
 import {ExampleOutput} from './ExampleOutput';
 import {ExampleSwitcherContext} from './ExampleSwitcher';
@@ -549,7 +550,15 @@ function Wrapper({control, children, styles, ref}: {control: PropControl, childr
         {control.name}
         <span className={style({whiteSpace: 'nowrap'})}>
           &nbsp;
-          {control.description ? <div style={{display: 'inline-flex'}}><PropContextualHelp control={control} /></div> : null}
+          {control.description ? (
+            <CenterBaseline
+              styles={style({
+                display: 'inline-flex',
+                height: 0
+              })}>
+              <PropContextualHelp control={control} />
+            </CenterBaseline>
+          ) : null}
         </span>
       </span>
       {children}

starters/docs/src/Table.css

@@ -55,6 +55,10 @@
   transition-duration: 200ms;
   -webkit-tap-highlight-color: transparent;
 
+  &tr:last-child {
+    border-radius: 0 0 var(--radius) var(--radius);
+  }
+
   &[data-focus-visible] {
     outline: 2px solid var(--focus-ring-color);
     outline-offset: -2px;
@@ -144,6 +148,14 @@
     height: 100%;
   }
 
+  &:is(.react-aria-Row > :first-child) {
+    border-end-start-radius: var(--radius);
+  }
+
+  &:is(.react-aria-Row > :last-child) {
+    border-end-end-radius: var(--radius);
+  }
+
   &[data-focus-visible] {
     outline: 2px solid var(--focus-ring-color);
     outline-offset: -2px;

starters/docs/src/Toast.css

@@ -20,7 +20,7 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-4);
-  background: var(--tint-1000);
+  background: var(--highlight-background);
   padding: var(--spacing-3) var(--spacing-4);
   border-radius: var(--radius-lg);
   outline: none;
@@ -75,6 +75,7 @@
 
     &[data-pressed] {
       background: var(--highlight-pressed);
+      box-shadow: none;
     }
   }
 }

starters/tailwind/src/GridList.tsx

@@ -24,7 +24,7 @@ export function GridList<T extends object>(
 
 const itemStyles = tv({
   extend: focusRing,
-  base: 'relative flex gap-3 cursor-default select-none py-2 px-3 text-sm text-neutral-900 dark:text-neutral-200 border-y dark:border-y-neutral-700 border-transparent first:border-t-0 last:border-b-0 first:rounded-t-lg last:rounded-b-lg -mb-px last:mb-0 -outline-offset-2',
+  base: 'relative flex gap-3 cursor-default select-none py-2 px-3 text-sm text-neutral-900 dark:text-neutral-200 border-t dark:border-t-neutral-700 border-transparent first:border-t-0 first:rounded-t-lg last:rounded-b-lg last:mb-0 -outline-offset-2',
   variants: {
     isSelected: {
       false: 'hover:bg-neutral-100 dark:hover:bg-neutral-700/60',