diff --git a/packages/dev/s2-docs/pages/index.mdx b/packages/dev/s2-docs/pages/index.mdx index 4996f81cd33..4d27ba3323c 100644 --- a/packages/dev/s2-docs/pages/index.mdx +++ b/packages/dev/s2-docs/pages/index.mdx @@ -13,7 +13,7 @@ The React Spectrum docs have a new look! This is a **beta preview** so keep in m ## What's new? - Docs for [Spectrum 2](https://s2.spectrum.adobe.com) components -- New docs for [React Aria](/react-aria/Autocomplete.html) and [Internationalized](/internationalized/date/index.html) +- New docs for [React Aria](react-aria/Autocomplete.html) and [Internationalized](internationalized/date/index.html) - A new search menu experience - Interactive controls for examples - New concept guides diff --git a/packages/dev/s2-docs/pages/internationalized/number/NumberParser.mdx b/packages/dev/s2-docs/pages/internationalized/number/NumberParser.mdx index 497b0d66a86..0ba0c3ce3f9 100644 --- a/packages/dev/s2-docs/pages/internationalized/number/NumberParser.mdx +++ b/packages/dev/s2-docs/pages/internationalized/number/NumberParser.mdx @@ -26,7 +26,7 @@ Numbers can be formatted in many different ways, including percentages, units, d Parsing numbers while taking into account all locale-specific detail is quite complex and error-prone. `NumberParser` uses information about the locale and expected format for a number in order to parse it correctly. This means it is somewhat strict about the accepted formats. It is not designed to handle use cases where the user can enter numbers in an unknown format (e.g. either a unit value _or_ a percentage), this must be known up front or selected via an external UI control. -Read our [blog post](../../blog/how-we-internationalized-our-numberfield.html) for more details on how the number parser is implemented. +Read our [blog post](https://react-spectrum.adobe.com/blog/how-we-internationalized-our-numberfield.html) for more details on how the number parser is implemented. ### Example diff --git a/packages/dev/s2-docs/pages/react-aria/Button.mdx b/packages/dev/s2-docs/pages/react-aria/Button.mdx index b70de8be5ab..e9d2f02b200 100644 --- a/packages/dev/s2-docs/pages/react-aria/Button.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Button.mdx @@ -44,9 +44,9 @@ export const tags = ['btn']; ## Events -Use the `onPress` prop to handle interactions via mouse, keyboard, and touch. This is similar to `onClick`, but normalized for consistency across browsers, devices, and interaction methods. Read our [blog post](/blog/building-a-button-part-1.html) to learn more. +Use the `onPress` prop to handle interactions via mouse, keyboard, and touch. This is similar to `onClick`, but normalized for consistency across browsers, devices, and interaction methods. Read our [blog post](https://react-spectrum.adobe.com/blog/building-a-button-part-1.html) to learn more. -The `onPressStart`, `onPressEnd`, and `onPressChange` events are also emitted as the user interacts with the button. Each of these handlers receives a , which provides information about the target and interaction method. See [usePress](usePress.html) for more details. +The `onPressStart`, `onPressEnd`, and `onPressChange` events are also emitted as the user interacts with the button. Each of these handlers receives a , which provides information about the target and interaction method. See [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) for more details. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx index ab0bc35b03b..560fed91a6b 100644 --- a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx @@ -33,7 +33,7 @@ export const tags = ['date']; ## Value -Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](../internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. +Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](../internationalized/date/index.html) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/react-aria/DateField.mdx b/packages/dev/s2-docs/pages/react-aria/DateField.mdx index ec72926a3d2..0d590f6135b 100644 --- a/packages/dev/s2-docs/pages/react-aria/DateField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DateField.mdx @@ -35,7 +35,7 @@ export const tags = ['calendar', 'input']; ## Value -Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](../internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. +Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](../internationalized/date/index.html) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx index e5de0824a4e..fb2fc58d2a8 100644 --- a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx @@ -35,7 +35,7 @@ export const tags = ['calendar', 'input']; ## Value -Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](../internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. +Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](../internationalized/date/index.html) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx index 1fe107c4d0f..7b14ba61960 100644 --- a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx @@ -35,7 +35,7 @@ export const tags = ['calendar', 'input']; ## Value -Use the `value` or `defaultValue` prop to set the selected date range, using objects in the [@internationalized/date](../internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. +Use the `value` or `defaultValue` prop to set the selected date range, using objects in the [@internationalized/date](../internationalized/date/index.html) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx index e57dce90ed3..65faff1d806 100644 --- a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx +++ b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx @@ -42,7 +42,7 @@ function Example(props) { ## Custom trigger -`FileTrigger` works with any pressable React Aria component (e.g. [Button](Button.html), [Link](Link.html), etc.). Use the `` component or [usePress](usePress.html) hook to wrap a custom trigger element such as a third party component or DOM element. +`FileTrigger` works with any pressable React Aria component (e.g. [Button](Button.html), [Link](Link.html), etc.). Use the `` component or [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) hook to wrap a custom trigger element such as a third party component or DOM element. ```tsx render "use client" diff --git a/packages/dev/s2-docs/pages/react-aria/Link.mdx b/packages/dev/s2-docs/pages/react-aria/Link.mdx index f66e0ea2a5a..e0e725efa10 100644 --- a/packages/dev/s2-docs/pages/react-aria/Link.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Link.mdx @@ -34,7 +34,7 @@ export const tags = ['anchor', 'hyperlink', 'href']; ## Events -Links with an `href` will be handled by the browser, or via a [client side router](routing.html). Links without an `href` will be rendered as a `` instead of an ``. Use the `onPress` event to handle user interaction. +Links with an `href` will be handled by the browser, or via a [client side router](https://react-spectrum.adobe.com/react-aria/routing.html). Links without an `href` will be rendered as a `` instead of an ``. Use the `onPress` event to handle user interaction. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/react-aria/Menu.mdx b/packages/dev/s2-docs/pages/react-aria/Menu.mdx index d2738a00ee0..bbfcde42091 100644 --- a/packages/dev/s2-docs/pages/react-aria/Menu.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Menu.mdx @@ -282,7 +282,7 @@ import {MenuTrigger, Menu, MenuItem, Button, Popover} from 'react-aria-component ### Autocomplete -Popovers can include additional components as siblings of a menu. This example uses an [Autocomplete](../react-aria/Autocomplete.html) with a [SearchField](SearchField.html) to let the user filter the items. +Popovers can include additional components as siblings of a menu. This example uses an [Autocomplete](Autocomplete.html) with a [SearchField](SearchField.html) to let the user filter the items. ```tsx render "use client"; @@ -413,7 +413,7 @@ function Example() { ### Custom trigger -`MenuTrigger` works with any pressable React Aria component (e.g. [Button](Button.html), [Link](Link.html), etc.). Use the `` component or [usePress](usePress.html) hook to wrap a custom trigger element such as a third party component or DOM element. +`MenuTrigger` works with any pressable React Aria component (e.g. [Button](Button.html), [Link](Link.html), etc.). Use the `` component or [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) hook to wrap a custom trigger element such as a third party component or DOM element. ```tsx render hideImports "use client"; diff --git a/packages/dev/s2-docs/pages/react-aria/Modal.mdx b/packages/dev/s2-docs/pages/react-aria/Modal.mdx index 60dfc6d683f..e2f5b0ca18b 100644 --- a/packages/dev/s2-docs/pages/react-aria/Modal.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Modal.mdx @@ -123,7 +123,7 @@ function Example() { ## Custom trigger -`DialogTrigger` works with any pressable React Aria component (e.g. [Button](Button.html), [Link](Link.html), etc.). Use the `` component or [usePress](usePress.html) hook to wrap a custom trigger element such as a third party component or DOM element. +`DialogTrigger` works with any pressable React Aria component (e.g. [Button](Button.html), [Link](Link.html), etc.). Use the `` component or [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) hook to wrap a custom trigger element such as a third party component or DOM element. ```tsx render "use client" diff --git a/packages/dev/s2-docs/pages/react-aria/Popover.mdx b/packages/dev/s2-docs/pages/react-aria/Popover.mdx index 7276072f117..be564168bc6 100644 --- a/packages/dev/s2-docs/pages/react-aria/Popover.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Popover.mdx @@ -69,7 +69,7 @@ export const tags = ['popup', 'overlay']; ## Custom trigger -`DialogTrigger` works with any pressable React Aria component (e.g. [Button](Button.html), [Link](Link.html), etc.). Use the `` component or [usePress](usePress.html) hook to wrap a custom trigger element such as a third party component or DOM element. +`DialogTrigger` works with any pressable React Aria component (e.g. [Button](Button.html), [Link](Link.html), etc.). Use the `` component or [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) hook to wrap a custom trigger element such as a third party component or DOM element. ```tsx render "use client" diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx index 8e5d2edfcfb..f8fd68b60c7 100644 --- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx @@ -33,7 +33,7 @@ export const tags = ['calendar']; ## Value -Use the `value` or `defaultValue` prop to set the selected date range, using objects in the [@internationalized/date](../internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. +Use the `value` or `defaultValue` prop to set the selected date range, using objects in the [@internationalized/date](../internationalized/date/index.html) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx index a9a78292c97..c369a981148 100644 --- a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx @@ -35,7 +35,7 @@ export const tags = ['date', 'input']; ## Value -Use the `value` or `defaultValue` prop to set the time value, using objects in the [@internationalized/date](../internationalized/date/) package. `TimeField` accepts plain [Time](../internationalized/date/Time.html), [CalendarDateTime](../internationalized/date/CalendarDateTime.html), or [ZonedDateTime](../internationalized/date/ZonedDate), but only displays the time. +Use the `value` or `defaultValue` prop to set the time value, using objects in the [@internationalized/date](../internationalized/date/index.html) package. `TimeField` accepts plain [Time](../internationalized/date/Time.html), [CalendarDateTime](../internationalized/date/CalendarDateTime.html), or [ZonedDateTime](../internationalized/date/ZonedDateTime.html), but only displays the time. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx index b29394ffcc8..0948d740c9c 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx @@ -134,7 +134,7 @@ const CustomTrigger = React.forwardRef((props, ref) => ( )); ``` -[DialogTrigger](Dialog.html#custom-trigger) or [MenuTrigger](Menu.html#custom-trigger) with a `` trigger also works with `TooltipTrigger`. All `` elements are already focusable, so there's no need to wrap them in ``. +[DialogTrigger](Modal.html#custom-trigger) or [MenuTrigger](Menu.html#custom-trigger) with a `` trigger also works with `TooltipTrigger`. All `` elements are already focusable, so there's no need to wrap them in ``. ## API diff --git a/packages/dev/s2-docs/pages/react-aria/collections.mdx b/packages/dev/s2-docs/pages/react-aria/collections.mdx index 724c0bd9da2..820768f3fc7 100644 --- a/packages/dev/s2-docs/pages/react-aria/collections.mdx +++ b/packages/dev/s2-docs/pages/react-aria/collections.mdx @@ -118,7 +118,7 @@ function Example() { useListData - For convenience, React Aria provides a built-in [useListData](../react-stately/useListData.html) hook to manage state for an immutable list of items. It includes methods to add, remove, update, and re-order items, and manage corresponding selection state. See the docs for more details. + For convenience, React Aria provides a built-in [useListData](https://react-spectrum.adobe.com/react-stately/useListData.html) hook to manage state for an immutable list of items. It includes methods to add, remove, update, and re-order items, and manage corresponding selection state. See the docs for more details. ### Unique ids @@ -270,7 +270,7 @@ let people = [ ## Asynchronous loading -Data can be loaded asynchronously using any data fetching library. [useAsyncList](../react-stately/useAsyncList.html) is a built-in option. +Data can be loaded asynchronously using any data fetching library. [useAsyncList](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) is a built-in option. Several components also support infinite scrolling by rendering a `LoadMoreItem` at the end of the list. These trigger loading of additional pages of items and display a loading spinner. Multiple load more items can be rendered at once, e.g. when loading multiple levels of a tree or sections in a list. diff --git a/packages/dev/s2-docs/pages/react-aria/styling.mdx b/packages/dev/s2-docs/pages/react-aria/styling.mdx index 6ed303c51c0..bbe1422e335 100644 --- a/packages/dev/s2-docs/pages/react-aria/styling.mdx +++ b/packages/dev/s2-docs/pages/react-aria/styling.mdx @@ -46,7 +46,7 @@ Components often support multiple UI states (e.g. pressed, hovered, selected, et } ``` -In order to ensure high quality interactions across browsers and devices, React Aria Components includes states such as `data-hovered` and `data-pressed` which are similar to CSS pseudo classes such as `:hover` and `:active`, but work consistently between mouse, touch, and keyboard modalities. You can read more about this in our [blog post series](../blog/building-a-button-part-1.html) and our [Interactions](interactions.html) overview. +In order to ensure high quality interactions across browsers and devices, React Aria Components includes states such as `data-hovered` and `data-pressed` which are similar to CSS pseudo classes such as `:hover` and `:active`, but work consistently between mouse, touch, and keyboard modalities. You can read more about this in our [blog post series](https://react-spectrum.adobe.com/blog/building-a-button-part-1.html) and our [Interactions](https://react-spectrum.adobe.com/react-aria/interactions.html) overview. All states supported by each component are listed in the Styling section of their documentation. diff --git a/packages/dev/s2-docs/pages/s2/Calendar.mdx b/packages/dev/s2-docs/pages/s2/Calendar.mdx index ab780c0bcde..3d1b9119d2a 100644 --- a/packages/dev/s2-docs/pages/s2/Calendar.mdx +++ b/packages/dev/s2-docs/pages/s2/Calendar.mdx @@ -28,7 +28,7 @@ export const tags = ['date']; ## Value -Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](../internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. +Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](../internationalized/date/index.html) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/s2/DateField.mdx b/packages/dev/s2-docs/pages/s2/DateField.mdx index db23c7a9e48..9d88a4e60a8 100644 --- a/packages/dev/s2-docs/pages/s2/DateField.mdx +++ b/packages/dev/s2-docs/pages/s2/DateField.mdx @@ -20,7 +20,7 @@ export const tags = ['calendar']; ## Value -Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](../internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. +Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](../internationalized/date/index.html) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/s2/DatePicker.mdx b/packages/dev/s2-docs/pages/s2/DatePicker.mdx index d9d0b779732..f0c83851e4f 100644 --- a/packages/dev/s2-docs/pages/s2/DatePicker.mdx +++ b/packages/dev/s2-docs/pages/s2/DatePicker.mdx @@ -20,7 +20,7 @@ export const tags = ['calendar']; ## Value -Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](../internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. +Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](../internationalized/date/index.html) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx b/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx index b1f2e0fe9c0..7a8b8792244 100644 --- a/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx +++ b/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx @@ -26,7 +26,7 @@ export const tags = ['calendar']; ## Value -Use the `value` or `defaultValue` prop to set the selected date range, using objects in the [@internationalized/date](../internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. +Use the `value` or `defaultValue` prop to set the selected date range, using objects in the [@internationalized/date](../internationalized/date/index.html) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/s2/Link.mdx b/packages/dev/s2-docs/pages/s2/Link.mdx index 48746705590..844832dc262 100644 --- a/packages/dev/s2-docs/pages/s2/Link.mdx +++ b/packages/dev/s2-docs/pages/s2/Link.mdx @@ -20,7 +20,7 @@ export const tags = ['anchor', 'hyperlink', 'href']; ## Events -Links with an `href` will be handled by the browser, or via a [client side router](routing.html). Links without an `href` will be rendered as a `` instead of an ``. Use the `onPress` event to handle user interaction. +Links with an `href` will be handled by the browser, or via a [client side router](https://react-spectrum.adobe.com/react-spectrum/routing.html). Links without an `href` will be rendered as a `` instead of an ``. Use the `onPress` event to handle user interaction. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/s2/Menu.mdx b/packages/dev/s2-docs/pages/s2/Menu.mdx index 67e5a8f292a..248d3471389 100644 --- a/packages/dev/s2-docs/pages/s2/Menu.mdx +++ b/packages/dev/s2-docs/pages/s2/Menu.mdx @@ -330,7 +330,7 @@ import Settings from '@react-spectrum/s2/icons/Settings'; ### Autocomplete -Use [Autocomplete](Autocomplete.html) from React Aria Components with a [SearchField](SearchField.html) to make a menu searchable. +Use [Autocomplete](react-aria/Autocomplete.html) from React Aria Components with a [SearchField](SearchField.html) to make a menu searchable. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/s2/Popover.mdx b/packages/dev/s2-docs/pages/s2/Popover.mdx index 637d4955be2..54725f3ee48 100644 --- a/packages/dev/s2-docs/pages/s2/Popover.mdx +++ b/packages/dev/s2-docs/pages/s2/Popover.mdx @@ -61,7 +61,7 @@ function Example() { let triggerRef = useRef(null); return ( -
+
diff --git a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx index 48d7eacb1c2..7b8fc8cbda5 100644 --- a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx @@ -27,7 +27,7 @@ export const tags = ['calendar']; ## Value -Use the `value` or `defaultValue` prop to set the selected date range, using objects in the [@internationalized/date](../internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. +Use the `value` or `defaultValue` prop to set the selected date range, using objects in the [@internationalized/date](../internationalized/date/index.html) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/s2/TimeField.mdx b/packages/dev/s2-docs/pages/s2/TimeField.mdx index 700172a0871..1f86da27d77 100644 --- a/packages/dev/s2-docs/pages/s2/TimeField.mdx +++ b/packages/dev/s2-docs/pages/s2/TimeField.mdx @@ -21,7 +21,7 @@ export const tags = ['date', 'input']; ## Value -Use the `value` or `defaultValue` prop to set the time value, using objects in the [@internationalized/date](../internationalized/date/) package. `TimeField` accepts plain [Time](../internationalized/date/Time.html), [CalendarDateTime](../internationalized/date/CalendarDateTime.html), or [ZonedDateTime](../internationalized/date/ZonedDate), but only displays the time. +Use the `value` or `defaultValue` prop to set the time value, using objects in the [@internationalized/date](../internationalized/date/index.html) package. `TimeField` accepts plain [Time](../internationalized/date/Time.html), [CalendarDateTime](../internationalized/date/CalendarDateTime.html), or [ZonedDateTime](../internationalized/date/ZonedDate), but only displays the time. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/s2/getting-started.mdx b/packages/dev/s2-docs/pages/s2/getting-started.mdx index ad4a37f6e8c..87741997513 100644 --- a/packages/dev/s2-docs/pages/s2/getting-started.mdx +++ b/packages/dev/s2-docs/pages/s2/getting-started.mdx @@ -97,7 +97,7 @@ Then, configure your bundler to use the plugin: - Note that plugin order is important: `unplugin-parcel-macros` must run before other plugins like Babel. - You may also need to configure other tools such as TypeScript, Babel, ESLint, and Jest to support parsing import attributes. See [Usage with other tools](https://parceljs.org/features/macros/#usage-with-other-tools). - See the [examples folder](https://github.com/adobe/react-spectrum/tree/main/examples) for working setups with various build tools. -- For details on optimizing the output CSS, see [CSS Optimization](/s2/styling.html#css-optimization). +- For details on optimizing the output CSS, see [CSS Optimization](styling.html#css-optimization). ## Setting up your app diff --git a/packages/dev/s2-docs/pages/s2/index.mdx b/packages/dev/s2-docs/pages/s2/index.mdx index 26d6fde438a..1262de7169b 100644 --- a/packages/dev/s2-docs/pages/s2/index.mdx +++ b/packages/dev/s2-docs/pages/s2/index.mdx @@ -10,78 +10,78 @@ export const section = 'Getting started'; A React implementation of Spectrum, Adobe's design system. -[Getting started](/s2/getting-started.html) • [GitHub](https://github.com/adobe/react-spectrum) +[Getting started](getting-started.html) • [GitHub](https://github.com/adobe/react-spectrum) diff --git a/packages/dev/s2-docs/pages/s2/Migrating.mdx b/packages/dev/s2-docs/pages/s2/migrating.mdx similarity index 100% rename from packages/dev/s2-docs/pages/s2/Migrating.mdx rename to packages/dev/s2-docs/pages/s2/migrating.mdx diff --git a/packages/dev/s2-docs/pages/s2/release-notes.mdx b/packages/dev/s2-docs/pages/s2/release-notes.mdx index 868bb66d70e..1f6cc33097d 100644 --- a/packages/dev/s2-docs/pages/s2/release-notes.mdx +++ b/packages/dev/s2-docs/pages/s2/release-notes.mdx @@ -12,12 +12,12 @@ export const tags = ['changelog', 'versions', 'updates']; * [ActionButton](ActionButton.html): Add pending state * [ColorSlider](ColorSlider.html): Fix `ColorLoupe` position in RTL locales * [ComboBox](ComboBox.html): Support avatars and onAction -* [CustomDialog](CustomDialog.html): Support custom widths +* [CustomDialog](Dialog.html#custom-dialog): Support custom widths * [Dialog](Dialog.html): Add XL size * [Disclosure](Disclosure.html): Add animation to disclosure * [InlineAlert](InlineAlert.html): Support heading-less Inline Alerts * [Picker](Picker.html): Support multiple selection and avatars -* [Tags](Tags.html): Fix Tag collapse calculation for removeable tags +* [Tags](TagGroup.html): Fix Tag collapse calculation for removable tags * [Tooltip](Tooltip.html): Prevent text overflow by default * Allow placeholders in supported S2 components (e.g. ColorArea, ComboBox, NumberField, SearchField, TextArea, TextField) * Apply `page.css` styles to the Shadow DOM @@ -59,7 +59,7 @@ If you previously used `page.css` without a `Provider`, you'll need to add a `Pr * [CardView](CardView.html): Fix ActionBar from not scrolling * [ActionButton](ActionButton.html): Fix avatar-only ActionButtons to have square dimensions -* [Tabs](Tabs.html): Improve selection indicator animation, fix collasped tabs +* [Tabs](Tabs.html): Improve selection indicator animation, fix collapsed tabs * [ProgressCircle](ProgressCircle.html): Add track outline in High Contrast Mode * [Switch](Switch.html): Fix the toggle in RTL locales * [TreeView](TreeView.html): Support async loading @@ -76,7 +76,7 @@ If you previously used `page.css` without a `Provider`, you'll need to add a `Pr ### Updates -* [Combobox](Combobox.html): Support for virtualization and async loading +* [ComboBox](ComboBox.html): Support for virtualization and async loading * [Dialog](Dialog.html): Update sizes * [Picker](Picker.html): Support for virtualization and async loading * [Popover](Popover.html): Add `triggerRef` prop diff --git a/packages/dev/s2-docs/pages/s2/Styling.mdx b/packages/dev/s2-docs/pages/s2/styling.mdx similarity index 100% rename from packages/dev/s2-docs/pages/s2/Styling.mdx rename to packages/dev/s2-docs/pages/s2/styling.mdx diff --git a/packages/dev/s2-docs/src/ComponentCardView.tsx b/packages/dev/s2-docs/src/ComponentCardView.tsx index da466183acb..b20e9700b83 100644 --- a/packages/dev/s2-docs/src/ComponentCardView.tsx +++ b/packages/dev/s2-docs/src/ComponentCardView.tsx @@ -85,8 +85,11 @@ export interface ComponentCardItem { } const componentIllustrations: Record = { + 'Accordion': DisclosureGroupSvg, 'ActionButton': ActionButtonSvg, + 'ActionButtonGroup': ButtonGroupSvg, // TODO: get better illustration 'ActionGroup': ActionGroupSvg, + 'ActionMenu': MenuSvg, 'Badge': BadgeSvg, 'Breadcrumbs': BreadcrumbsSvg, 'Button': ButtonSvg, @@ -121,6 +124,7 @@ const componentIllustrations: Record = 'Label': LabelSvg, 'LabeledValue': LabeledValueSvg, 'Link': LinkSvg, + 'LinkButton': ButtonSvg, // TODO: get better illustration 'ListBox': ListBoxSvg, 'ListView': ListViewSvg, 'Menu': MenuSvg, @@ -140,6 +144,7 @@ const componentIllustrations: Record = 'StatusLight': StatusLightSvg, 'Switch': SwitchSvg, 'Table': TableSvg, + 'TableView': TableSvg, 'Tabs': TabsSvg, 'TagGroup': TagGroupSvg, 'TextArea': TextAreaSvg, @@ -150,6 +155,7 @@ const componentIllustrations: Record = 'ToggleButtonGroup': ActionGroupSvg, // ToggleButtonGroup -> ActionGroup 'Tooltip': TooltipSvg, 'Tree': TreeSvg, + 'TreeView': TreeSvg, 'useFocus': useFocusSvg, 'useFocusRing': useFocusRingSvg, 'useFocusWithin': useFocusWithinSvg, diff --git a/packages/react-aria-components/docs/FileTrigger.mdx b/packages/react-aria-components/docs/FileTrigger.mdx index 4b42f2f4735..7743307537c 100644 --- a/packages/react-aria-components/docs/FileTrigger.mdx +++ b/packages/react-aria-components/docs/FileTrigger.mdx @@ -70,7 +70,7 @@ function Example(){ A file input can be created with an `` element, but this supports limited styling options and may not integrate well with the overall design of a website or application. To overcome this, `FileTrigger` extends the functionality of the standard file input element by working with a pressable child such as a `Button` to create accessible file inputs that can be styled as needed. -* **Customizable** – Works with any pressable React Aria or React Spectrum component, and custom components built with [usePress](usePress.html). +* **Customizable** – Works with any pressable React Aria or React Spectrum component, and custom components built with [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html). ## Anatomy diff --git a/packages/react-aria-components/docs/Form.mdx b/packages/react-aria-components/docs/Form.mdx index 8c743b09f88..4b748a546b1 100644 --- a/packages/react-aria-components/docs/Form.mdx +++ b/packages/react-aria-components/docs/Form.mdx @@ -78,7 +78,7 @@ The HTML [<form>](https://developer.mozilla.org/en-US/docs/Web/HTML/Elemen * **Accessible** – Uses a native `
` element, with support for ARIA labelling to create a [form landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/form.html). * **Validation** – Support for native HTML constraint validation with customizable UI, custom validation functions, realtime validation, and server-side validation errors. -See the [Forms](forms.html) guide to learn more about React Aria's form components, including submitting data, and form validation techniques. +See the [Forms](https://react-spectrum.adobe.com/react-aria/forms.html) guide to learn more about React Aria's form components, including submitting data, and form validation techniques. ## Anatomy @@ -158,7 +158,7 @@ To provide validation errors, the `validationErrors` prop should be set to an ob
``` -See the [Forms](forms.html) guide to learn more about form validation in React Aria, including client-side validation, and integration with other frameworks and libraries. +See the [Forms](https://react-spectrum.adobe.com/react-aria/forms.html) guide to learn more about form validation in React Aria, including client-side validation, and integration with other frameworks and libraries. ### Validation behavior