diff --git a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx index 99dd00be8af..c7b0ccf8594 100644 --- a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx +++ b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx @@ -13,10 +13,10 @@ import {AlertDialog} from 'tailwind-starter/AlertDialog'; import {Arrow} from './components'; import {Button} from 'tailwind-starter/Button'; -import {Cell, Column, Row, Table, TableHeader} from 'tailwind-starter/Table'; +import {Cell, Column, Row, Table, TableBody, 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, ModalOverlay, ModalOverlayProps, Modal as RACModal, Selection, SortDescriptor, TableBody, Text, ToggleButton, ToggleButtonProps, TooltipTrigger} from 'react-aria-components'; +import {ColumnProps, Dialog, DialogTrigger, DropZone, Form, Heading, isFileDropItem, Key, ModalOverlay, ModalOverlayProps, Modal as RACModal, Selection, SortDescriptor, 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'; @@ -177,7 +177,7 @@ export function ExampleApp(): React.ReactNode { - @@ -239,7 +239,7 @@ export function ExampleApp(): React.ReactNode { {item.common_name} {item.scientific_name} - + onAction(item, action)}> {item.isFavorite ? 'Unfavorite' : 'Favorite'} Edit… @@ -266,7 +266,7 @@ export function ExampleApp(): React.ReactNode { {column => } - + 'No results. Try changing the filters.'}> {item => ( {column => { diff --git a/packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx b/packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx index 9754bdd5e39..cb9cbac4b31 100644 --- a/packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx +++ b/packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx @@ -11,7 +11,7 @@ export const description = 'A GridList with Framer Motion swipe gestures and lay # iOS List View -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. +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. ```tsx render type="tailwind" expanded "use client"; @@ -191,7 +191,7 @@ function ListItem({ id, children, textValue, onRemove }) { ( - {album.children && } + {album.children && + + } {album.name} {album.children && {renderAlbum}} diff --git a/packages/dev/s2-docs/pages/react-aria/examples/plants/PlantActionMenu.tsx b/packages/dev/s2-docs/pages/react-aria/examples/plants/PlantActionMenu.tsx index e17ba9f6923..5f1d74cf040 100644 --- a/packages/dev/s2-docs/pages/react-aria/examples/plants/PlantActionMenu.tsx +++ b/packages/dev/s2-docs/pages/react-aria/examples/plants/PlantActionMenu.tsx @@ -14,7 +14,7 @@ export function PlantActionMenu(props: PlantActionMenuProps) { let {item, onFavoriteChange, onEdit, onDelete} = props; return ( - diff --git a/packages/dev/s2-docs/pages/react-aria/examples/plants/PlantList.tsx b/packages/dev/s2-docs/pages/react-aria/examples/plants/PlantList.tsx index 1df8710984c..734a578e5c7 100644 --- a/packages/dev/s2-docs/pages/react-aria/examples/plants/PlantList.tsx +++ b/packages/dev/s2-docs/pages/react-aria/examples/plants/PlantList.tsx @@ -23,7 +23,7 @@ export function PlantList(props: PlantListProps) { {item => (
- + {item.common_name} {item.scientific_name} div:first-of-type') as HTMLElement : null; function Sheet() { let [isOpen, setOpen] = useState(false); @@ -126,7 +126,7 @@ function Sheet() { background: black; } - body > :first-child { + body > div:first-of-type { background: var(--s2-container-bg); translate: 0; transform-origin: center 0; diff --git a/packages/dev/s2-docs/pages/react-aria/examples/tabs/TabSelectionIndicator.tsx b/packages/dev/s2-docs/pages/react-aria/examples/tabs/TabSelectionIndicator.tsx index af9145c4804..9928920905d 100644 --- a/packages/dev/s2-docs/pages/react-aria/examples/tabs/TabSelectionIndicator.tsx +++ b/packages/dev/s2-docs/pages/react-aria/examples/tabs/TabSelectionIndicator.tsx @@ -25,7 +25,7 @@ export function TabSelectionIndicator() { `}
-
- - ```tsx - - ``` - -
+
+
+ ```tsx + + ``` +
+
+ ```tsx + + ``` +
+
- - ```tsx - - - - - - - - - Read Only - Edit - Admin - - - - ``` - +
+ ```tsx + + + + + + + + + Read Only + Edit + Admin + + + + ``` +
+
+ ```tsx + + + + + + + + + + Read Only + + + Edit + + + Admin + + + + + ``` +
diff --git a/packages/dev/s2-docs/pages/s2/TagGroup.mdx b/packages/dev/s2-docs/pages/s2/TagGroup.mdx index 054b22f7ad8..2076d586823 100644 --- a/packages/dev/s2-docs/pages/s2/TagGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/TagGroup.mdx @@ -60,7 +60,7 @@ function PhotoCategories() { return ( list.remove(...keys)}> diff --git a/packages/dev/s2-docs/pages/s2/TreeView.mdx b/packages/dev/s2-docs/pages/s2/TreeView.mdx index 715d459cdd3..e754da1a821 100644 --- a/packages/dev/s2-docs/pages/s2/TreeView.mdx +++ b/packages/dev/s2-docs/pages/s2/TreeView.mdx @@ -299,11 +299,11 @@ function Example(props) { let [selected, setSelected] = useState(new Set()); return ( -
+
+ ``` Most fields should have a visible label. In rare exceptions, the `aria-label` or `aria-labelledby` attribute must be provided instead to identify the element to screen readers. @@ -55,7 +59,7 @@ function Example() { return (
- + @@ -90,8 +94,12 @@ function Example() { return ( - {/*- begin highlight -*/} - + {/*- end highlight -*/}
You entered: {name}
@@ -118,8 +126,13 @@ import {Form, TextField, ButtonGroup, Button} from '@react-spectrum/s2'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; - {/*- begin highlight -*/} - + {/*- end highlight -*/} @@ -151,6 +164,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; ( @@ -177,6 +191,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; value === 'admin' ? 'Nice try!' : null} /*- end highlight -*/ @@ -213,6 +228,7 @@ function Example() { return ( ) => { - e.preventDefault(); - - let data = Object.fromEntries(new FormData(e.currentTarget)); + let action = async (formData) => { + let data = Object.fromEntries(formData); let result = await callServer(data) - /*- begin highlight -*/ setErrors(result.errors); - /*- end highlight -*/ }; return ( - - + + @@ -269,15 +297,6 @@ function Example() { ); } - -// Fake server used in this example. -function callServer(data) { - return { - errors: { - username: 'Sorry, this username is taken.' - } - }; -} ``` #### Schema validation diff --git a/packages/dev/s2-docs/src/Code.tsx b/packages/dev/s2-docs/src/Code.tsx index 4bbf0940519..04ac88e4917 100644 --- a/packages/dev/s2-docs/src/Code.tsx +++ b/packages/dev/s2-docs/src/Code.tsx @@ -3,7 +3,7 @@ import {CodeLink} from './Link'; import {CodeProps} from './VisualExampleClient'; import {HastNode, HastTextNode, highlightHast, Language} from 'tree-sitter-highlight'; import React, {ReactNode} from 'react'; -import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; +import {style, StyleString} from '@react-spectrum/s2/style' with {type: 'macro'}; const property = style({color: 'indigo-1000'}); const fn = style({color: 'red-1000'}); @@ -50,10 +50,11 @@ export interface ICodeProps { children: string, lang?: string, hideImports?: boolean, - links?: Links + links?: Links, + styles?: StyleString } -export function Code({children, lang, hideImports = true, links}: ICodeProps) { +export function Code({children, lang, hideImports = true, links, styles}: ICodeProps) { if (lang) { // @ts-ignore let highlighted = highlightHast(children, Language[lang === 'json' ? 'JS' : lang.toUpperCase()]); @@ -107,7 +108,7 @@ export function Code({children, lang, hideImports = true, links}: ICodeProps) { } } - return {renderChildren(lineNodes, '0', links)}; + return {renderChildren(lineNodes, '0', links)}; } return {children}; diff --git a/packages/dev/s2-docs/src/CodeBlock.tsx b/packages/dev/s2-docs/src/CodeBlock.tsx index d5b016beb0e..a66d5ebf011 100644 --- a/packages/dev/s2-docs/src/CodeBlock.tsx +++ b/packages/dev/s2-docs/src/CodeBlock.tsx @@ -26,11 +26,14 @@ const example = style({ const standaloneCode = style({ '--code-padding-start': { type: 'paddingStart', - value: 32 + value: { + default: 12, + lg: 32 + } }, '--code-padding-end': { type: 'paddingEnd', - value: 32 + value: '--code-padding-start' }, padding: '--code-padding-start', marginY: 32, @@ -40,7 +43,7 @@ const standaloneCode = style({ default: 'code-xs', lg: 'code-sm' }, - whiteSpace: 'pre-wrap' + overflow: 'auto' }); interface CodeBlockProps extends VisualExampleProps { @@ -63,7 +66,7 @@ export function CodeBlock({render, children, files, expanded, hidden, hideExampl if (!render) { return ( 
-        {children}
+        {children}
); } diff --git a/packages/dev/s2-docs/src/Command.tsx b/packages/dev/s2-docs/src/Command.tsx index 750ecc8ac44..cac60837e11 100644 --- a/packages/dev/s2-docs/src/Command.tsx +++ b/packages/dev/s2-docs/src/Command.tsx @@ -31,7 +31,8 @@ const preStyle = style({ margin: 0, whiteSpace: 'pre', flex: 1, - minWidth: 0 + minWidth: 0, + overflow: 'auto' }); export interface CommandProps { diff --git a/packages/dev/s2-docs/src/InstallCommand.tsx b/packages/dev/s2-docs/src/InstallCommand.tsx index 46a89ca3425..d930b548d59 100644 --- a/packages/dev/s2-docs/src/InstallCommand.tsx +++ b/packages/dev/s2-docs/src/InstallCommand.tsx @@ -2,7 +2,6 @@ import {CopyButton} from './CopyButton'; import {Key} from 'react-aria-components'; -import {Pre} from './CodePlatter'; import React, {useEffect, useMemo, useState} from 'react'; import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; @@ -30,6 +29,18 @@ const codeWrap = style({ padding: 16 }); +const preStyle = style({ + font: {default: 'code-xs', lg: 'code-sm'}, + overflowX: 'auto', + paddingY: 8, + paddingX: 0, + margin: 0, + whiteSpace: 'pre', + flex: 1, + minWidth: 0, + overflow: 'auto' +}); + type PkgManager = 'yarn' | 'npm' | 'pnpm'; export interface InstallCommandProps { @@ -98,7 +109,7 @@ export function InstallCommand({pkg, flags, label, isCommand}: InstallCommandPro
{label &&
{label}
}
- 
{command}
+ 
{command}
diff --git a/packages/dev/s2-docs/src/SearchMenuTrigger.tsx b/packages/dev/s2-docs/src/SearchMenuTrigger.tsx index 311597ac650..cbc45a9b9e6 100644 --- a/packages/dev/s2-docs/src/SearchMenuTrigger.tsx +++ b/packages/dev/s2-docs/src/SearchMenuTrigger.tsx @@ -1,6 +1,6 @@ 'use client'; -import {Button, ButtonProps, Modal} from 'react-aria-components'; +import {Button, ButtonProps, Modal, ModalOverlay} from 'react-aria-components'; import {fontRelative, style} from '@react-spectrum/s2/style' with { type: 'macro' }; import {Page} from '@parcel/rsc'; import React, {CSSProperties, lazy, useCallback, useEffect, useState} from 'react'; @@ -24,6 +24,25 @@ export interface SearchMenuTriggerProps extends Omit⌘K - { if (!isOpen) { onClose(); } }} - className={modalStyle}> - - + className={underlayStyle}> + + + +
); } diff --git a/packages/dev/s2-docs/tailwind/home.global.css b/packages/dev/s2-docs/tailwind/home.global.css index ebe527a21dc..14eb88978b3 100644 --- a/packages/dev/s2-docs/tailwind/home.global.css +++ b/packages/dev/s2-docs/tailwind/home.global.css @@ -19,3 +19,16 @@ body { font-family: "adobe-clean-spectrum-vf", system-ui, sans-serif; } + +@media (min-resolution: 200dpi) { + :root { + --spacing: calc(0.25rem * 1.25); + --text-xs: calc(0.75rem * 1.125); + --text-sm: calc(0.875rem * 1.125); + --text-base: calc(1rem * 1.125); + --text-lg: calc(1.125rem * 1.125); + --text-xl: calc(1.25rem * 1.125); + --text-2xl: calc(1.5rem * 1.125); + --text-3xl: calc(1.875rem * 1.125); + } +} diff --git a/packages/dev/s2-docs/tailwind/tailwind.css b/packages/dev/s2-docs/tailwind/tailwind.css index e6590ca4681..75d6fb095d3 100644 --- a/packages/dev/s2-docs/tailwind/tailwind.css +++ b/packages/dev/s2-docs/tailwind/tailwind.css @@ -11,10 +11,12 @@ @media (min-resolution: 200dpi) { :root { --spacing: calc(0.25rem * 1.25); - --text-xs: calc(0.75rem * 1.25); - --text-sm: calc(0.875rem * 1.25); - --text-base: calc(1rem * 1.25); - --text-lg: calc(1.125rem * 1.25); - --text-xl: calc(1.25rem * 1.25); + --text-xs: calc(0.75rem * 1.125); + --text-sm: calc(0.875rem * 1.125); + --text-base: calc(1rem * 1.125); + --text-lg: calc(1.125rem * 1.125); + --text-xl: calc(1.25rem * 1.125); + --text-2xl: calc(1.5rem * 1.125); + --text-3xl: calc(1.875rem * 1.125); } } diff --git a/packages/react-aria-components/src/Link.tsx b/packages/react-aria-components/src/Link.tsx index 08678bdb195..22df63e3ac3 100644 --- a/packages/react-aria-components/src/Link.tsx +++ b/packages/react-aria-components/src/Link.tsx @@ -23,7 +23,7 @@ import {filterDOMProps} from '@react-aria/utils'; import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared'; import React, {createContext, ElementType, ForwardedRef, forwardRef} from 'react'; -export interface LinkProps extends Omit, HoverEvents, RenderProps, SlotProps, Omit, 'onClick'> { +export interface LinkProps extends Omit, HoverEvents, RenderProps, SlotProps, Omit, 'onClick'> { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-Link' diff --git a/starters/docs/src/DatePicker.css b/starters/docs/src/DatePicker.css index b5662674b01..c4f0571ae5b 100644 --- a/starters/docs/src/DatePicker.css +++ b/starters/docs/src/DatePicker.css @@ -10,5 +10,6 @@ .react-aria-DateInput { width: 100%; + padding-right: var(--spacing-10); } } diff --git a/starters/tailwind/src/Calendar.tsx b/starters/tailwind/src/Calendar.tsx index 418c5c40e80..50c683f2683 100644 --- a/starters/tailwind/src/Calendar.tsx +++ b/starters/tailwind/src/Calendar.tsx @@ -20,7 +20,7 @@ import { composeTailwindRenderProps, focusRing } from './utils'; const cellStyles = tv({ extend: focusRing, - base: 'w-9 h-9 m-px text-sm cursor-default rounded-full flex items-center justify-center forced-color-adjust-none', + base: 'w-9 h-9 text-sm cursor-default rounded-full flex items-center justify-center forced-color-adjust-none', variants: { isSelected: { false: 'text-zinc-900 dark:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-700 pressed:bg-gray-200 dark:pressed:bg-zinc-600', @@ -42,7 +42,7 @@ export function Calendar( return ( - + {(date) => } diff --git a/starters/tailwind/src/ComboBox.tsx b/starters/tailwind/src/ComboBox.tsx index 94038bc8889..2628a49fafb 100644 --- a/starters/tailwind/src/ComboBox.tsx +++ b/starters/tailwind/src/ComboBox.tsx @@ -36,7 +36,7 @@ export function ComboBox( {description && {description}} {errorMessage} - + {children} diff --git a/starters/tailwind/src/ListBox.tsx b/starters/tailwind/src/ListBox.tsx index 8a051d46cf6..97309a8fd00 100644 --- a/starters/tailwind/src/ListBox.tsx +++ b/starters/tailwind/src/ListBox.tsx @@ -96,7 +96,7 @@ export interface DropdownSectionProps extends SectionProps { export function DropdownSection(props: DropdownSectionProps) { return ( - +
{props.title}
{props.children} diff --git a/starters/tailwind/src/Select.tsx b/starters/tailwind/src/Select.tsx index 478263197d5..6975e187c29 100644 --- a/starters/tailwind/src/Select.tsx +++ b/starters/tailwind/src/Select.tsx @@ -50,7 +50,7 @@ export function Select( {description && {description}} {errorMessage} - + {children} diff --git a/starters/tailwind/src/Table.tsx b/starters/tailwind/src/Table.tsx index 0313fdd8d50..62298acabc5 100644 --- a/starters/tailwind/src/Table.tsx +++ b/starters/tailwind/src/Table.tsx @@ -51,7 +51,7 @@ const resizerStyles = tv({ export function Column(props: ColumnProps) { return ( - + {composeRenderProps(props.children, (children, { allowsSorting, sortDirection }) => (