From 3cc1d5a4c274189b7b0777d10d823d6412de3cd8 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Mon, 20 Jul 2026 12:45:19 -0500 Subject: [PATCH 1/2] docs: add new React Aria hooks docs (#10153) * init new hooks docs: useButton, useListBox, useSelect * ts docs fix * fix links * update useSelect example to use Button, Popover, and Listbox components from RAC vanilla starter * add useComboBox docs * add useMenu docs * add useDatePicker docs * add useDateRangePicker docs * add usePopover docs * add useModalOverlay docs * add useDIalog docs * add useTooltipTrigger docs * add useCalendar docs * add useRangeCalendar docs * add useDisclosure docs * add useToolbar docs * add useToast docs * add useNumberField docs * add useSeparator docs * add useLink docs * add useBreadcrumbs docs * add useMeter docs * add useProgressBar docs * add useCheckbox docs * add useSwitch docs * add useToggleButton docs * add useRadioGroup docs * add useCheckboxGroup docs * add useToggleButtonGroup docs * add useTextField docs * add useDateField docs * add useTimeField docs * add useSearchField docs * add useSlider docs * add useColorSwatch docs * add useColorField docs * add useColorArea docs * add useColorSlider docs * add useColorWheel docs * add useTagGroup docs * add useGridList docs * add useTable docs * add useDraggableCollection docs * add useDroppableCollection docs * add
between adjacent FunctionAPIs * add useTabList docs * add useListFormatter docs * add docs for composeRenderProps and useRenderProps to Customization page * document focus containment behavior in useModalOverlay * add tags to Customization page * map hooks to component illustrations * Fix FunctionAPI, remove Features sections, add anatomy diagrams * update examples to use Typescript * add hooks starter * clean up hooks starter * clean up hook docs * highlight hook usage in example code * move useDialog to useModalOverlay * add anatomy diagrams * more highlighting hook usage * migrate Listbox and GridList examples to new collections * fix Toast and Tooltip z-indexes * update Calendar, RangeCalendar, and TagGroup to use RAC Button * fix Calender/RangeCalender horizontal scrolling * group properties in interface table * add FunctionAPIGroup for better styles for hook API section * add state interface tables * use new collections in TagGroup * use new collections in ListBox * use new collections in Tabs * fix Combobox starter * fix Select starter * fix Menu starter * fix Modal example * fix Tooltip example * fix Popover example * fix Table example * fix Checkbox example * fix Switch example * fix Toast example * fix Button example * fix GridList example * fix DatePicker example * fix DateRangePicker example * fix Calendar/RangeCalender examples * fix ListBox example * add yarn-4.2.2.cjs * update registry build to include every directly imported CSS file in registry items * add remaining JSX anatomy snippets * move hook-specific customization guidance to Hooks page * removed duplicated render props introduction from Customization page * remove redundant explanatory paragraphs from hook pages * fix missing react key issue in examples * add JSDoc for useToggleButtonGroup * sync styles and add script to check for drift * lint * improve types by replacing ReturnType{docs.exports.useBreadcrumbs.description} + +```tsx render files={["starters/hooks/src/Breadcrumbs.tsx", "starters/hooks/src/Breadcrumbs.css", "starters/hooks/src/Link.css"]} +"use client"; +import {Breadcrumbs, Breadcrumb} from 'hooks-starter/Breadcrumbs'; + + + alert('Pressed Folder 1')}>Folder 1 + alert('Pressed Folder 2')}>Folder 2 + Folder 3 + +``` + +## API + + + +```tsx + + + + + +``` + + + +### AriaBreadcrumbsProps + + + +### BreadcrumbsAria + + + +### AriaBreadcrumbItemProps + + + +### BreadcrumbItemAria + + diff --git a/packages/dev/s2-docs/pages/react-aria/Button.mdx b/packages/dev/s2-docs/pages/react-aria/Button.mdx index 22065cb4fb5..33478c4307c 100644 --- a/packages/dev/s2-docs/pages/react-aria/Button.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Button.mdx @@ -12,7 +12,7 @@ import '../../tailwind/tailwind.css'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; export const tags = ['btn']; -export const relatedPages = [{'title': 'useButton', 'url': 'Button/useButton.html'}]; +export const relatedPages = [{'title': 'useButton', 'url': './Button/useButton'}]; export const description = 'Allows a user to perform an action, with mouse, touch, and keyboard interactions.'; # Button diff --git a/packages/dev/s2-docs/pages/react-aria/Button/useButton.mdx b/packages/dev/s2-docs/pages/react-aria/Button/useButton.mdx new file mode 100644 index 00000000000..300ed80ada3 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/Button/useButton.mdx @@ -0,0 +1,41 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/button'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a button.'; +export const isSubpage = true; + +# useButton + +{docs.exports.useButton.description} + +```tsx render files={["starters/hooks/src/Button.tsx", "starters/hooks/src/Button.css"]} +"use client"; +import {Button} from 'hooks-starter/Button'; + + +``` + +## API + + + +### AriaButtonProps + + + +### ButtonAria + + diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx index 7a3ec7657ce..95f0cad2472 100644 --- a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx @@ -9,7 +9,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '/packages/react-aria/docs/calendar/calendar-anatomy.svg'; export const tags = ['date']; -export const relatedPages = [{'title': 'useCalendar', 'url': 'Calendar/useCalendar.html'}]; +export const relatedPages = [{'title': 'useCalendar', 'url': './Calendar/useCalendar'}]; export const description = 'Displays one or more date grids and allows users to select a single date.'; # Calendar diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx new file mode 100644 index 00000000000..29c3aa9bde8 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx @@ -0,0 +1,91 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPIGroup} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/calendar'; +import statelyDocs from 'docs:@react-stately/calendar'; +import Anatomy from '/packages/react-aria/docs/calendar/calendar-anatomy.svg'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a calendar component.'; +export const isSubpage = true; + +# useCalendar + +{docs.exports.useCalendar.description} + +```tsx render files={["starters/hooks/src/Calendar.tsx", "starters/hooks/src/Calendar.css", "starters/docs/src/Button.tsx", "starters/docs/src/Button.css"]} +"use client"; +import {Calendar} from 'hooks-starter/Calendar'; + + +``` + +## API + + + +```tsx + + + + + + } + +``` + +## useDialog + +`useDialog` is the dialog primitive itself, so the `Dialog` component is built from scratch. To render it interactively, this example reuses the [Modal](../Modal), [Button](../Button), and `DialogTrigger` components from React Aria Components to provide the overlay container and trigger. A dialog may also be placed within a [popover](../Popover/usePopover). + +```tsx render files={["starters/hooks/src/Modal.tsx", "starters/hooks/src/Modal.css", "starters/hooks/src/Dialog.css", "starters/hooks/src/Button.css"]} +"use client"; +import {CloseButton, Dialog, ModalTrigger} from 'hooks-starter/Modal'; + + + {() => + +

This dialog is built with useDialog.

+ + } + +``` + +A dialog consists of a container element and an optional title. `useDialog` handles exposing this to assistive technology using ARIA. It can be combined with `useModalOverlay` or [usePopover](../Popover/usePopover) to create modal dialogs, popovers, and other types of overlays. + +If a dialog does not have a visible title element, an `aria-label` or `aria-labelledby` prop must be passed instead to identify the element to assistive technology. + +Focus containment must be enabled from a component rendered _inside_ the [<Overlay>](../Popover) — `useDialog` does this automatically, which is why focus is contained in the examples above. If you render content that does not use `useDialog` (or another hook that enables containment), make sure `useModalOverlay` is called from a component rendered inside `` so that focus is properly contained. + +## API + + + +```tsx links={{DialogTrigger: '#dialogtrigger', Button: 'Button', ModalOverlay: '#modaloverlay', Modal: '#modal', Dialog: '#dialog'}} + +