Skip to content

Commit 7ff6696

Browse files
devongovettdevongovett
authored
fix: Docs bugs from testing (#9109)
* Fix photo app chevron * Fix plant app issues * Fix HCM on swipeable tabs * Fix ios list focus ring * Fix sheet background * Fix mobile code wrapping on homepage * Add placeholders to forms doc * Fix tailwind reset related issues * Scale font size on mobile a bit less * Improve code blocks on mobile * Fix underlay on search menu * Fix DatePicker button padding * Fix sheet scaling
1 parent fc3ea3e commit 7ff6696

File tree

23 files changed

+241
-113
lines changed

23 files changed

+241
-113
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
import {AlertDialog} from 'tailwind-starter/AlertDialog';
1414
import {Arrow} from './components';
1515
import {Button} from 'tailwind-starter/Button';
16-
import {Cell, Column, Row, Table, TableHeader} from 'tailwind-starter/Table';
16+
import {Cell, Column, Row, Table, TableBody, TableHeader} from 'tailwind-starter/Table';
1717
import {Checkbox} from 'tailwind-starter/Checkbox';
1818
import {CloudSun, Dessert, Droplet, Droplets, FilterIcon, Mail, MoreHorizontal, PencilIcon, PlusIcon, RefreshCw, ShareIcon, SlidersIcon, StarIcon, Sun, SunDim, TrashIcon, Twitter} from 'lucide-react';
19-
import {ColumnProps, Dialog, DialogTrigger, DropZone, Form, Heading, isFileDropItem, Key, ModalOverlay, ModalOverlayProps, Modal as RACModal, Selection, SortDescriptor, TableBody, Text, ToggleButton, ToggleButtonProps, TooltipTrigger} from 'react-aria-components';
19+
import {ColumnProps, Dialog, DialogTrigger, DropZone, Form, Heading, isFileDropItem, Key, ModalOverlay, ModalOverlayProps, Modal as RACModal, Selection, SortDescriptor, Text, ToggleButton, ToggleButtonProps, TooltipTrigger} from 'react-aria-components';
2020
import {ComboBox, ComboBoxItem} from 'tailwind-starter/ComboBox';
2121
import {DatePicker} from 'tailwind-starter/DatePicker';
2222
import {focusRing} from 'tailwind-starter/utils';
@@ -177,7 +177,7 @@ export function ExampleApp(): React.ReactNode {
177177
<SearchField aria-label="Search" value={search} onChange={setSearch} className="col-span-3 sm:col-span-1" />
178178
<DialogTrigger>
179179
<TooltipTrigger>
180-
<Button aria-label="Filters" variant="secondary" className="w-9 h-9 shrink-0 p-0 relative">
180+
<Button aria-label="Filters" variant="secondary" className="w-9 h-9 shrink-0 p-0 px-2 relative">
181181
<FilterIcon aria-hidden className="block w-5 h-5" />
182182
{filters > 0 && <div className="absolute -top-2 -right-2 rounded-full h-4 aspect-square text-white text-xs bg-blue-600">{filters}</div>}
183183
</Button>
@@ -239,7 +239,7 @@ export function ExampleApp(): React.ReactNode {
239239
<span className="truncate capitalize">{item.common_name}</span>
240240
<span className="truncate text-xs text-gray-600 dark:text-zinc-400 col-start-2 row-start-2">{item.scientific_name}</span>
241241
<MenuTrigger placement="bottom end" >
242-
<Button aria-label="Actions" variant="secondary" className="row-span-2 place-self-center"><MoreHorizontal className="w-5 h-5" /></Button>
242+
<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>
243243
<Menu onAction={action => onAction(item, action)}>
244244
<MenuItem id="favorite"><StarIcon aria-hidden className="w-4 h-4" /> {item.isFavorite ? 'Unfavorite' : 'Favorite'}</MenuItem>
245245
<MenuItem id="edit"><PencilIcon aria-hidden className="w-4 h-4" /> Edit…</MenuItem>
@@ -266,7 +266,7 @@ export function ExampleApp(): React.ReactNode {
266266
<TableHeader columns={columns}>
267267
{column => <Column {...column} />}
268268
</TableHeader>
269-
<TableBody items={items} dependencies={[columns]}>
269+
<TableBody items={items} dependencies={[columns]} renderEmptyState={() => 'No results. Try changing the filters.'}>
270270
{item => (
271271
<Row columns={columns}>
272272
{column => {

‎packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const description = 'A GridList with Framer Motion swipe gestures and lay
1111

1212
# iOS List View
1313

14-
<PageDescription>A re-creation of the iOS List View built with React Aria Components, [Framer Motion](https://www.framer.com/motion/), and [Tailwind CSS](https://tailwindcss.com/) with support for swipe gestures, layout animations, and multiple selection mode.</PageDescription>
14+
<PageDescription>A re-creation of the iOS List View built with React Aria Components, [Motion](https://motion.dev/), and [Tailwind CSS](https://tailwindcss.com/) with support for swipe gestures, layout animations, and multiple selection mode.</PageDescription>
1515

1616
```tsx render type="tailwind" expanded
1717
"use client";
@@ -191,7 +191,7 @@ function ListItem({ id, children, textValue, onRemove }) {
191191
<MotionItem
192192
id={id}
193193
textValue={textValue}
194-
className="outline-hidden group relative overflow-clip border-t border-0 border-solid last:border-b border-gray-200 dark:border-gray-800 pressed:bg-gray-200 dark:pressed:bg-gray-800 selected:bg-gray-200 dark:selected:bg-gray-800 focus-visible:outline focus-visible:outline-blue-600 focus-visible:-outline-offset-2"
194+
className="outline-hidden group relative overflow-clip border-t border-0 border-solid last:border-b border-gray-200 dark:border-gray-800 pressed:bg-gray-200 dark:pressed:bg-gray-800 selected:bg-gray-200 dark:selected:bg-gray-800 focus-visible:outline-solid focus-visible:outline-blue-600 focus-visible:-outline-offset-2"
195195
layout
196196
transition={{ duration: 0.25 }}
197197
exit={{ opacity: 0 }}

‎packages/dev/s2-docs/pages/react-aria/examples/photos/Sidebar.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
outline-offset: 2px;
7979
}
8080

81-
[slot=chevron] {
81+
.chevron {
8282
all: unset;
8383
margin-right: 4px;
8484
transition: rotate 200ms;
@@ -87,11 +87,11 @@
8787
}
8888
}
8989

90-
&[data-expanded] [slot=chevron] {
90+
&[data-expanded] .chevron {
9191
rotate: 90deg;
9292
}
9393

94-
&:not(:has([slot=chevron]))::before {
94+
&:not(:has(.chevron))::before {
9595
content: '';
9696
width: 20px;
9797
}

‎packages/dev/s2-docs/pages/react-aria/examples/photos/Sidebar.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,11 @@ export function Sidebar({selectedAlbum, onSelectionChange, isVisible, onDrop}: S
3030
let renderAlbum = (album: Album) => (
3131
<TreeItem textValue={album.name} className="sidebar-TreeItem">
3232
<TreeItemContent>
33-
{album.children && <Button slot="chevron"><ChevronRight size={16} /></Button>}
33+
{album.children &&
34+
<Button slot="chevron" className="chevron">
35+
<ChevronRight size={16} />
36+
</Button>
37+
}
3438
<span>{album.name}</span>
3539
</TreeItemContent>
3640
{album.children && <Collection items={album.children}>{renderAlbum}</Collection>}

‎packages/dev/s2-docs/pages/react-aria/examples/plants/PlantActionMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export function PlantActionMenu(props: PlantActionMenuProps) {
1414
let {item, onFavoriteChange, onEdit, onDelete} = props;
1515
return (
1616
<MenuTrigger>
17-
<Button aria-label="Actions" variant="secondary">
17+
<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">
1818
<MoreHorizontal aria-hidden className="w-5 h-5" />
1919
</Button>
2020
<Menu>

‎packages/dev/s2-docs/pages/react-aria/examples/plants/PlantList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function PlantList(props: PlantListProps) {
2323
{item => (
2424
<GridListItem textValue={item.common_name}>
2525
<div className="grid grid-cols-[40px_1fr_auto] gap-x-2 w-full">
26-
<img alt="" src={item.default_image?.thumbnail} className="inline rounded-sm row-span-3 object-contain h-[40px]" />
26+
<img alt="" src={item.default_image?.thumbnail} className="inline rounded-sm row-span-2 object-contain h-[40px]" />
2727
<span className="truncate capitalize">{item.common_name}</span>
2828
<span className="truncate text-xs text-gray-600 dark:text-zinc-400 col-start-2 row-start-2">{item.scientific_name}</span>
2929
<PlantActionMenu

‎packages/dev/s2-docs/pages/react-aria/examples/sheet.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const description = 'An iOS-style gesture driven modal sheet built with F
1111

1212
# Gesture Driven Sheet
1313

14-
<PageDescription>An iOS-style gesture driven sheet built with React Aria Components, [Framer Motion](https://www.framer.com/motion/), and [Tailwind CSS](https://tailwindcss.com/).</PageDescription>
14+
<PageDescription>An iOS-style gesture driven sheet built with React Aria Components, [Motion](https://motion.dev/), and [Tailwind CSS](https://tailwindcss.com/).</PageDescription>
1515

1616
```tsx render type="tailwind" expanded
1717
"use client";
@@ -38,7 +38,7 @@ const staticTransition = {
3838
const SHEET_MARGIN = 34;
3939
const SHEET_RADIUS = 12;
4040

41-
const root = typeof document !== 'undefined' ? document.body.firstChild as HTMLElement : null;
41+
const root = typeof document !== 'undefined' ? document.querySelector('body > div:first-of-type') as HTMLElement : null;
4242

4343
function Sheet() {
4444
let [isOpen, setOpen] = useState(false);
@@ -126,7 +126,7 @@ function Sheet() {
126126
background: black;
127127
}
128128
129-
body > :first-child {
129+
body > div:first-of-type {
130130
background: var(--s2-container-bg);
131131
translate: 0;
132132
transform-origin: center 0;

‎packages/dev/s2-docs/pages/react-aria/examples/tabs/TabSelectionIndicator.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function TabSelectionIndicator() {
2525
`}
2626
</style>
2727
<div
28-
className="absolute z-10 bg-white rounded-full mix-blend-difference contain-strict transition-[inset]"
28+
className="absolute z-10 bg-white forced-color-adjust-none rounded-full mix-blend-difference contain-strict transition-[inset]"
2929
style={{
3030
animationName: animationId,
3131
animationTimingFunction: 'linear',

‎packages/dev/s2-docs/pages/react-aria/index.mdx‎

Lines changed: 90 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -392,45 +392,97 @@ export const hideFromSearch = true;
392392

393393
<Scrollable className="relative flex-1 -mx-6 -mb-6 mt-6 [&_pre]:m-0 [&_.source]:px-6 [&_.source]:text-[15px] [&_.source]:leading-snug lg:[&_.source]:text-sm isolate rounded-b-2xl">
394394

395-
<div className="highlight-tags [--delay:2.5s] h-full *:h-full cross-fade [--fade-from:1] [--fade-to:0]">
396-
397-
```tsx
398-
<Select>
399-
<Label>Permissions</Label>
400-
<Button>
401-
<SelectValue />
402-
<span>▼</span>
403-
</Button>
404-
<Popover>
405-
<ListBox>
406-
<ListBoxItem>Read Only</ListBoxItem>
407-
<ListBoxItem>Edit</ListBoxItem>
408-
<ListBoxItem>Admin</ListBoxItem>
409-
</ListBox>
410-
</Popover>
411-
</Select>
412-
```
413-
414-
</div>
395+
<div className="highlight-tags [--delay:2.5s] h-full *:h-full cross-fade [--fade-from:1] [--fade-to:0]">
396+
<div className="hidden md:contents">
397+
```tsx
398+
<Select>
399+
<Label>Permissions</Label>
400+
<Button>
401+
<SelectValue />
402+
<span>▼</span>
403+
</Button>
404+
<Popover>
405+
<ListBox>
406+
<ListBoxItem>Read Only</ListBoxItem>
407+
<ListBoxItem>Edit</ListBoxItem>
408+
<ListBoxItem>Admin</ListBoxItem>
409+
</ListBox>
410+
</Popover>
411+
</Select>
412+
```
413+
</div>
414+
<div className="contents md:hidden">
415+
```tsx
416+
<Select>
417+
<Label>
418+
Permissions
419+
</Label>
420+
<Button>
421+
<SelectValue />
422+
<span>▼</span>
423+
</Button>
424+
<Popover>
425+
<ListBox>
426+
<ListBoxItem>
427+
Read Only
428+
</ListBoxItem>
429+
<ListBoxItem>
430+
Edit
431+
</ListBoxItem>
432+
<ListBoxItem>
433+
Admin
434+
</ListBoxItem>
435+
</ListBox>
436+
</Popover>
437+
</Select>
438+
```
439+
</div>
440+
</div>
415441
<div className="absolute top-0 left-0 highlight-tags cross-fade">
416-
417-
```tsx
418-
<ComboBox>
419-
<Label>Permissions</Label>
420-
<Group>
421-
<Input />
422-
<Button>▼</Button>
423-
</Group>
424-
<Popover>
425-
<ListBox>
426-
<ListBoxItem>Read Only</ListBoxItem>
427-
<ListBoxItem>Edit</ListBoxItem>
428-
<ListBoxItem>Admin</ListBoxItem>
429-
</ListBox>
430-
</Popover>
431-
</ComboBox>
432-
```
433-
442+
<div className="hidden md:contents">
443+
```tsx
444+
<ComboBox>
445+
<Label>Permissions</Label>
446+
<Group>
447+
<Input />
448+
<Button>▼</Button>
449+
</Group>
450+
<Popover>
451+
<ListBox>
452+
<ListBoxItem>Read Only</ListBoxItem>
453+
<ListBoxItem>Edit</ListBoxItem>
454+
<ListBoxItem>Admin</ListBoxItem>
455+
</ListBox>
456+
</Popover>
457+
</ComboBox>
458+
```
459+
</div>
460+
<div className="contents md:hidden">
461+
```tsx
462+
<ComboBox>
463+
<Label>
464+
Permissions
465+
</Label>
466+
<Group>
467+
<Input />
468+
<Button>▼</Button>
469+
</Group>
470+
<Popover>
471+
<ListBox>
472+
<ListBoxItem>
473+
Read Only
474+
</ListBoxItem>
475+
<ListBoxItem>
476+
Edit
477+
</ListBoxItem>
478+
<ListBoxItem>
479+
Admin
480+
</ListBoxItem>
481+
</ListBox>
482+
</Popover>
483+
</ComboBox>
484+
```
485+
</div>
434486
</div>
435487
</Scrollable>
436488
</Card>

0 commit comments

Comments
 (0)