diff --git a/packages/react-aria-components/docs/GridList.mdx b/packages/react-aria-components/docs/GridList.mdx index bbc1a4df916..a184e9d7442 100644 --- a/packages/react-aria-components/docs/GridList.mdx +++ b/packages/react-aria-components/docs/GridList.mdx @@ -15,7 +15,7 @@ import sharedDocs from 'docs:@react-types/shared'; import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable} from '@react-spectrum/docs'; import styles from '@react-spectrum/docs/src/docs.css'; import packageData from 'react-aria-components/package.json'; -import Anatomy from '@react-aria/gridlist/docs/anatomy.svg'; +import Anatomy from './GridListAnatomy.svg'; import ChevronRight from '@spectrum-icons/workflow/ChevronRight'; import {Divider} from '@react-spectrum/divider'; import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard'; @@ -317,6 +317,7 @@ HTML lists are meant for static content, rather than lists with rich interaction * **Actions** – Items support optional row actions such as navigation via click, tap, double click, or Enter key. * **Async loading** – Support for loading items asynchronously. * **Keyboard navigation** – List items and focusable children can be navigated using the arrow keys, along with page up/down, home/end, etc. Typeahead, auto scrolling, and selection modifier keys are supported as well. +* **Drag and drop** – GridList supports drag and drop to reorder, insert, or update items via mouse, touch, keyboard, and screen reader interactions. * **Touch friendly** – Selection and actions adapt their behavior depending on the device. For example, selection is activated via long press on touch when item actions are present. * **Accessible** – Follows the [ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/), with additional selection announcements via an ARIA live region. Extensively tested across many devices and [assistive technologies](accessibility.html#testing) to ensure announcements and behaviors are consistent. @@ -324,7 +325,7 @@ HTML lists are meant for static content, rather than lists with rich interaction ## Anatomy - + A grid list consists of a container element, with rows of data inside. The rows within a list may contain focusable elements or plain text content. If the list supports row selection, each row can optionally include a selection checkbox. diff --git a/packages/react-aria-components/docs/GridListAnatomy.svg b/packages/react-aria-components/docs/GridListAnatomy.svg new file mode 100644 index 00000000000..16437c966c4 --- /dev/null +++ b/packages/react-aria-components/docs/GridListAnatomy.svg @@ -0,0 +1,173 @@ + + + + + + + + + Documents + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Item + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Selectioncheckbox + + + + + + + + Dragbutton + + + + + + + + + + + + + 12 items + + + + + Onboarding + PDF + + + + + Budget + XLS + + + + + Sales Pitch + PPT + + + + + + + + + + + + + + + Dragbutton + + + diff --git a/packages/react-aria-components/docs/ListBox.mdx b/packages/react-aria-components/docs/ListBox.mdx index 8ecf1ddc8f3..6e5adba368b 100644 --- a/packages/react-aria-components/docs/ListBox.mdx +++ b/packages/react-aria-components/docs/ListBox.mdx @@ -167,6 +167,8 @@ listbox components that can be styled as needed. * **Item selection** – Single or multiple selection, disabled rows, and both `toggle` and `replace` selection behaviors. * **Keyboard navigation** – List items can be navigated using the arrow keys, along with page up/down, home/end, etc. Typeahead, auto scrolling, and selection modifier keys are supported as well. +* **Layout options** – Items can be arranged in a vertical or horizontal stack, or as a two-dimensional grid. +* **Drag and drop** – ListBox supports drag and drop to reorder, insert, or update items via mouse, touch, keyboard, and screen reader interactions. * **Touch friendly** – Selection behavior adapts depending on the device. For example, selection occurs on mouse down but on touch up, which is consistent with native conventions. * **Accessible** – Follows the [ARIA listbox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/), with support for items and sections, and slots for label and description elements within each item for improved screen reader announcement. * **Styleable** – Items include builtin states for styling, such as hover, press, focus, selected, and disabled. @@ -175,7 +177,7 @@ Note: `ListBox` only handles the list itself. For a dropdown, see [Select](Selec ## Anatomy - + A listbox consists of a container element, with a list of items or sections inside. Users can select one or more items by clicking, tapping, or navigating with the keyboard. diff --git a/packages/react-aria-components/docs/ListBoxAnatomy.svg b/packages/react-aria-components/docs/ListBoxAnatomy.svg index 6bee748221e..c71c79006a7 100644 --- a/packages/react-aria-components/docs/ListBoxAnatomy.svg +++ b/packages/react-aria-components/docs/ListBoxAnatomy.svg @@ -1,77 +1,46 @@ - - Listbox anatomy diagram - Shows a listbox with labels pointing to its parts, including the label, listbox, group, section heading, option, option label, and option description elements. - - - - + + + + + - - Label - - - - - - Option 1 - - Option 2 - - - Item - - + + + - - + Option 1 + Option 2 + + Item + - - - Label - - - + + + - - Item label - - - - Description - - Description - - Option 3 - - Description - - - Item description - - + + Item label + - - - Listbox - - - - - SECTION TITLE - - - - Section header - - + Description + Description + Option 3 + Description + + Item description + - - - - - - - Section - + SECTION TITLE + + Section header + + + + + + + + + Section diff --git a/packages/react-aria-components/docs/Table.mdx b/packages/react-aria-components/docs/Table.mdx index 2dd9392b3d4..5808a039b36 100644 --- a/packages/react-aria-components/docs/Table.mdx +++ b/packages/react-aria-components/docs/Table.mdx @@ -15,7 +15,7 @@ import sharedDocs from 'docs:@react-types/shared'; import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable} from '@react-spectrum/docs'; import styles from '@react-spectrum/docs/src/docs.css'; import packageData from 'react-aria-components/package.json'; -import Anatomy from '@react-aria/table/docs/TableAnatomy.svg'; +import Anatomy from './TableAnatomy.svg'; import ChevronRight from '@spectrum-icons/workflow/ChevronRight'; import {Divider} from '@react-spectrum/divider'; import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard'; @@ -385,18 +385,19 @@ HTML tables are meant for static content, rather than tables with rich interacti `Table` helps achieve accessible and interactive table components that can be styled as needed. * **Row selection** – Single or multiple selection, with optional checkboxes, disabled rows, and both `toggle` and `replace` selection behaviors. -* **Columns** – Support for column sorting, [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) columns, and nested column groups. +* **Columns** – Support for column sorting, [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) columns, and nested column groups. Columns may optionally allow user resizing via mouse, touch, and keyboard interactions. * **Interactive children** – Table cells may include interactive elements such as buttons, menus, etc. * **Actions** – Rows and cells support optional actions such as navigation via click, tap, double click, or Enter key. * **Async loading** – Support for loading and sorting items asynchronously. * **Keyboard navigation** – Table rows, cells, and focusable children can be navigated using the arrow keys, along with page up/down, home/end, etc. Typeahead, auto scrolling, and selection modifier keys are supported as well. +* **Drag and drop** – Tables support drag and drop to reorder, insert, or update rows via mouse, touch, keyboard, and screen reader interactions. * **Touch friendly** – Selection and actions adapt their behavior depending on the device. For example, selection is activated via long press on touch when row actions are present. * **Accessible** – Follows the [ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/), with additional selection announcements via an ARIA live region. Extensively tested across many devices and [assistive technologies](accessibility.html#testing) to ensure announcements and behaviors are consistent. ## Anatomy - + A table consists of a container element, with columns and rows of cells containing data inside. The cells within a table may contain focusable elements or plain text content. Columns may be nested to create column groups. diff --git a/packages/react-aria-components/docs/TableAnatomy.svg b/packages/react-aria-components/docs/TableAnatomy.svg new file mode 100644 index 00000000000..0a4fd051714 --- /dev/null +++ b/packages/react-aria-components/docs/TableAnatomy.svg @@ -0,0 +1,194 @@ + + + + + Column + + + Size + + + + + + 214 KB + + 120 KB + 88 KB + 24 KB + Proposal + Budget + Welcome + Onboarding + File name + + + + Cell + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Select allcheckbox + + + + + + + + + + + + Table body + + + + + + + + + Table header + + + + + + + + + + + Row + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Selectioncheckbox + + + + + + + + Dragbutton + + + + + + + + + + + Columnresizer + + + +