diff --git a/.storybook-s2/docs/Intro.jsx b/.storybook-s2/docs/Intro.jsx index b3ef25052cd..933882036af 100644 --- a/.storybook-s2/docs/Intro.jsx +++ b/.storybook-s2/docs/Intro.jsx @@ -249,6 +249,7 @@ import {ActionButton} from '@react-spectrum/s2';
  • insetY
  • insetStart
  • insetEnd
    • +
  • visibility

    • UNSAFE Style Overrides

    We highly discourage overriding the styles of React Spectrum components because it may break at any time when we change our implementation, making it difficult for you to update in the future. Consider using React Aria Components with our style macro to build a custom component with Spectrum styles instead.

    diff --git a/packages/dev/mcp/package.json b/packages/dev/mcp/package.json index 7b9f4df6829..88a78d1f6e9 100644 --- a/packages/dev/mcp/package.json +++ b/packages/dev/mcp/package.json @@ -16,7 +16,6 @@ "zod": "^3.23.8" }, "devDependencies": { - "@adobe/spectrum-css-temp": "3.0.0-alpha.1", "typescript": "^5.8.2" }, "engines": { diff --git a/packages/dev/s2-docs/pages/index.mdx b/packages/dev/s2-docs/pages/index.mdx index 03cac99e67b..4996f81cd33 100644 --- a/packages/dev/s2-docs/pages/index.mdx +++ b/packages/dev/s2-docs/pages/index.mdx @@ -1,30 +1,25 @@ import {Layout} from '../src/Layout'; +import {LinkButton} from '@react-spectrum/s2'; export default Layout; export const section = 'Getting started'; -# Test page +# Welcome! -Hello world! some `inline code` and **bold** stuff... +The React Spectrum docs have a new look! This is a **beta preview** so keep in mind that we will be continuing to make improvements before the full release. -Bulleted list: +Get Started with Spectrum 2 -* One -* Two -* Three +## What's new? -Numbered list: +- 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) +- A new search menu experience +- Interactive controls for examples +- New concept guides +- AI-friendly markdown docs +- Much more... -1. Do this -2. Then that -3. Then this other thing +## Roadmap -## H2 - -### H3 - -#### H4 - -## Another H2 - -### Another H3 +The existing docs are still available [here](https://react-spectrum.adobe.com/react-spectrum/index.html). We plan to do a full release of the new docs site by early 2026, so we welcome any and all feedback! diff --git a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx index e76026b6351..98d37b1b987 100644 --- a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx @@ -5,6 +5,8 @@ import docs from 'docs:react-aria-components'; import vanillaDocs from 'docs:vanilla-starter/Autocomplete'; import '../../tailwind/tailwind.css'; +export const tags = ['combobox', 'typeahead', 'input']; + # Autocomplete {docs.exports.Autocomplete.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx index 40c907ba6f5..996252b0426 100644 --- a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx @@ -6,6 +6,8 @@ import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/breadcrumbs/docs/anatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2'; +export const tags = ['navigation']; + # Breadcrumbs {docs.exports.Breadcrumbs.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Button.mdx b/packages/dev/s2-docs/pages/react-aria/Button.mdx index 1e4a1e13d3e..5a33d2e962e 100644 --- a/packages/dev/s2-docs/pages/react-aria/Button.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Button.mdx @@ -10,6 +10,8 @@ import tailwindDocs from 'docs:tailwind-starter/Button'; import '../../tailwind/tailwind.css'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; +export const tags = ['btn']; + # Button {docs.exports.Button.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx index f41e81ef254..53dd5510e35 100644 --- a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx @@ -8,6 +8,8 @@ import {Calendar as TailwindCalendar} from 'tailwind-starter/Calendar'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/calendar/docs/calendar-anatomy.svg'; +export const tags = ['date']; + # Calendar {docs.exports.Calendar.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx index 4993b448529..a2bf72b8e6a 100644 --- a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx @@ -7,6 +7,8 @@ import {Checkbox as TailwindCheckbox} from 'tailwind-starter/Checkbox'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/checkbox/docs/checkbox-anatomy.svg'; +export const tags = ['input']; + # Checkbox {docs.exports.Checkbox.description} diff --git a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx index 5a6c420d82f..9897e078944 100644 --- a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx @@ -6,6 +6,8 @@ import vanillaDocs from 'docs:vanilla-starter/CheckboxGroup'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/checkbox/docs/checkboxgroup-anatomy.svg'; +export const tags = ['input']; + # CheckboxGroup {docs.exports.CheckboxGroup.description} diff --git a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx index 35b04d0f34f..a8ec4c4095d 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx @@ -7,6 +7,8 @@ import {ColorArea as TailwindColorArea} from 'tailwind-starter/ColorArea'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/color/docs/ColorAreaAnatomy.svg'; +export const tags = []; + # ColorArea {docs.exports.ColorArea.description} diff --git a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx index 443bbe0f552..3db74874820 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx @@ -8,6 +8,8 @@ import vanillaDocs from 'docs:vanilla-starter/ColorField'; import docs from 'docs:react-aria-components'; import Anatomy from '@react-aria/color/docs/ColorFieldAnatomy.svg'; +export const tags = ['input']; + # ColorField {docs.exports.ColorField.description} diff --git a/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx b/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx index 78cabad0040..60d981ff4fb 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx @@ -7,6 +7,8 @@ import {ColorPicker as VanillaColorPicker} from 'vanilla-starter/ColorPicker'; import {ColorPicker as TailwindColorPicker} from 'tailwind-starter/ColorPicker'; import '../../tailwind/tailwind.css'; +export const tags = ['input']; + # ColorPicker {docs.exports.ColorPicker.description} diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx index 5f75aeb59fd..36fea4f04b5 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx @@ -8,6 +8,8 @@ import {ColorSlider as TailwindColorSlider} from 'tailwind-starter/ColorSlider'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/color/docs/ColorSliderAnatomy.svg'; +export const tags = ['input']; + # ColorSlider {docs.exports.ColorSlider.description} diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx index 8087fde84dd..bade31f1a6e 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx @@ -7,6 +7,8 @@ import {ColorSwatch as VanillaColorSwatch} from 'vanilla-starter/ColorSwatch'; import {ColorSwatch as TailwindColorSwatch} from 'tailwind-starter/ColorSwatch'; import '../../tailwind/tailwind.css'; +export const tags = []; + # ColorSwatch {docs.exports.ColorSwatch.description} diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx index 7e72e7bc316..6507f370aa9 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx @@ -6,6 +6,8 @@ import {ColorSwatchPicker as VanillaColorSwatchPicker, ColorSwatchPickerItem} fr import '../../tailwind/tailwind.css'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' +export const tags = ['input']; + # ColorSwatchPicker {docs.exports.ColorSwatchPicker.description} diff --git a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx index 97f2c7a4e82..c77b5ff8521 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx @@ -7,6 +7,8 @@ import {ColorWheel as TailwindColorWheel} from 'tailwind-starter/ColorWheel'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/color/docs/ColorWheelAnatomy.svg'; +export const tags = ['input']; + # ColorWheel {docs.exports.ColorWheel.description} diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx index 32615e63185..31a6ba4092b 100644 --- a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx @@ -7,6 +7,8 @@ import vanillaDocs from 'docs:vanilla-starter/ComboBox'; import '../../tailwind/tailwind.css'; import Anatomy from 'react-aria-components/docs/ComboBoxAnatomy.svg'; +export const tags = ['autocomplete', 'search', 'typeahead', 'input']; + # ComboBox {docs.exports.ComboBox.description} @@ -234,7 +236,7 @@ function ControlledComboBox() { ## Item actions -Use the `onAction` prop on a `` to perform a custom action when the item is selected. This example adds a "Create" action for the current input value. +Use the `onAction` prop on a `` to perform a custom action when the item is pressed. This example adds a "Create" action for the current input value. ```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 7486ec9a2bc..9cfb715efb9 100644 --- a/packages/dev/s2-docs/pages/react-aria/DateField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DateField.mdx @@ -8,6 +8,8 @@ import {DateField as TailwindDateField} from 'tailwind-starter/DateField'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/datepicker/docs/datefield-anatomy.svg'; +export const tags = ['calendar', 'input']; + # DateField {docs.exports.DateField.description} diff --git a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx index 6b00d085405..76392bbe1b8 100644 --- a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx @@ -8,6 +8,8 @@ import {DatePicker as TailwindDatePicker} from 'tailwind-starter/DatePicker'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/datepicker/docs/datepicker-anatomy.svg'; +export const tags = ['calendar', 'input']; + # DatePicker {docs.exports.DatePicker.description} diff --git a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx index e0ed0dc0d68..594284c0a39 100644 --- a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx @@ -8,6 +8,8 @@ import {DateRangePicker as TailwindDateRangePicker} from 'tailwind-starter/DateR import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/datepicker/docs/daterangepicker-anatomy.svg'; +export const tags = ['calendar', 'input']; + # DateRangePicker {docs.exports.DateRangePicker.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx b/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx index 1dcd6352b53..976330b2e80 100644 --- a/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx @@ -6,6 +6,8 @@ import vanillaDocs from 'docs:vanilla-starter/Disclosure'; import '../../tailwind/tailwind.css'; import Anatomy from 'react-aria-components/docs/DisclosureAnatomy.svg'; +export const tags = ['accordion', 'collapsible', 'expandable', 'details']; + # Disclosure {docs.exports.Disclosure.description} diff --git a/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx b/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx index d29f783f11e..e7d4482aa07 100644 --- a/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx @@ -6,6 +6,8 @@ import vanillaDocs from 'docs:vanilla-starter/DisclosureGroup'; import '../../tailwind/tailwind.css'; import Anatomy from 'react-aria-components/docs/DisclosureGroupAnatomy.svg'; +export const tags = ['accordion', 'collapsible', 'expandable', 'details']; + # DisclosureGroup {docs.exports.DisclosureGroup.description} diff --git a/packages/dev/s2-docs/pages/react-aria/DropZone.mdx b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx index a9ae584563c..6935cc9f37f 100644 --- a/packages/dev/s2-docs/pages/react-aria/DropZone.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx @@ -4,6 +4,8 @@ export default Layout; import docs from 'docs:react-aria-components'; import '../../tailwind/tailwind.css'; +export const tags = ['file', 'drag', 'dnd', 'upload']; + # DropZone {docs.exports.DropZone.description} diff --git a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx index 3611cf18a50..e57dce90ed3 100644 --- a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx +++ b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx @@ -5,6 +5,8 @@ import docs from 'docs:react-aria-components'; import '../../tailwind/tailwind.css'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' +export const tags = ['upload', 'input']; + # FileTrigger {docs.exports.FileTrigger.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Form.mdx b/packages/dev/s2-docs/pages/react-aria/Form.mdx index a2db61ac1dd..88a106efb32 100644 --- a/packages/dev/s2-docs/pages/react-aria/Form.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Form.mdx @@ -4,6 +4,8 @@ export default Layout; import docs from 'docs:react-aria-components'; import '../../tailwind/tailwind.css'; +export const tags = ['input', 'field']; + # Form {docs.exports.Form.description} diff --git a/packages/dev/s2-docs/pages/react-aria/GridList.mdx b/packages/dev/s2-docs/pages/react-aria/GridList.mdx index 894d2be8efb..79a2074fe6b 100644 --- a/packages/dev/s2-docs/pages/react-aria/GridList.mdx +++ b/packages/dev/s2-docs/pages/react-aria/GridList.mdx @@ -7,6 +7,8 @@ import vanillaDocs from 'docs:vanilla-starter/GridList'; import '../../tailwind/tailwind.css'; import Anatomy from 'react-aria-components/docs/GridListAnatomy.svg'; +export const tags = ['list view']; + # GridList {docs.exports.GridList.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Group.mdx b/packages/dev/s2-docs/pages/react-aria/Group.mdx index 02f37c1615a..50e6a310257 100644 --- a/packages/dev/s2-docs/pages/react-aria/Group.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Group.mdx @@ -5,6 +5,8 @@ import docs from 'docs:react-aria-components'; import vanillaDocs from 'docs:vanilla-starter/InputGroup'; import '../../tailwind/tailwind.css'; +export const tags = []; + # Group {docs.exports.Group.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Link.mdx b/packages/dev/s2-docs/pages/react-aria/Link.mdx index 6d4fe5df439..e3036dfe068 100644 --- a/packages/dev/s2-docs/pages/react-aria/Link.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Link.mdx @@ -7,6 +7,8 @@ import {Link as TailwindLink} from 'tailwind-starter/Link'; import tailwindDocs from 'docs:tailwind-starter/Link'; import '../../tailwind/tailwind.css'; +export const tags = ['anchor', 'hyperlink', 'href']; + # Link {docs.exports.Link.description} diff --git a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx index 1737a7ff767..b78a4def22b 100644 --- a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx @@ -8,6 +8,8 @@ import '../../tailwind/tailwind.css'; import Anatomy from 'react-aria-components/docs/ListBoxAnatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' +export const tags = ['options']; + # ListBox {docs.exports.ListBox.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Menu.mdx b/packages/dev/s2-docs/pages/react-aria/Menu.mdx index a375873ff6e..f417dfe3fea 100644 --- a/packages/dev/s2-docs/pages/react-aria/Menu.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Menu.mdx @@ -6,6 +6,8 @@ import '../../tailwind/tailwind.css'; import Anatomy from 'react-aria-components/docs/MenuAnatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' +export const tags = ['dropdown']; + # Menu {docs.exports.Menu.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Meter.mdx b/packages/dev/s2-docs/pages/react-aria/Meter.mdx index 3fac214f3d9..e78fe80d2d9 100644 --- a/packages/dev/s2-docs/pages/react-aria/Meter.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Meter.mdx @@ -8,6 +8,8 @@ import {Meter as TailwindMeter} from 'tailwind-starter/Meter'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/meter/docs/anatomy.svg'; +export const tags = ['gauge', 'progress', 'level']; + # Meter {docs.exports.Meter.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Modal.mdx b/packages/dev/s2-docs/pages/react-aria/Modal.mdx index 5081ba50b5e..ebe154987ff 100644 --- a/packages/dev/s2-docs/pages/react-aria/Modal.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Modal.mdx @@ -7,6 +7,8 @@ import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/overlays/docs/modal-anatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' +export const tags = ['dialog', 'popup', 'overlay']; + # Modal {docs.exports.Modal.description} diff --git a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx index 95098240eb1..24d328e12ba 100644 --- a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx @@ -8,6 +8,8 @@ import {NumberField as TailwindNumberField} from 'tailwind-starter/NumberField'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/numberfield/docs/anatomy.svg'; +export const tags = ['input']; + # NumberField {docs.exports.NumberField.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Popover.mdx b/packages/dev/s2-docs/pages/react-aria/Popover.mdx index b3d0ce28ab6..3a1e936c328 100644 --- a/packages/dev/s2-docs/pages/react-aria/Popover.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Popover.mdx @@ -7,6 +7,8 @@ import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/overlays/docs/popover-anatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' +export const tags = ['popup', 'overlay']; + # Popover {docs.exports.Popover.description} diff --git a/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx b/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx index 6051718bd9b..de08ee662b8 100644 --- a/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx @@ -10,6 +10,8 @@ import {ProgressBar as TailwindProgressBar} from 'tailwind-starter/ProgressBar'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/progress/docs/anatomy.svg'; +export const tags = ['loading', 'progress']; + # ProgressBar {docs.exports.ProgressBar.description} diff --git a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx index 749ab7297fe..06a1c84703a 100644 --- a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx @@ -6,6 +6,8 @@ import vanillaDocs from 'docs:vanilla-starter/RadioGroup'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/radio/docs/anatomy.svg'; +export const tags = ['input']; + # RadioGroup {docs.exports.RadioGroup.description} diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx index f087d0d3683..7c48c7d51c0 100644 --- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx @@ -8,6 +8,8 @@ import {RangeCalendar as TailwindRangeCalendar} from 'tailwind-starter/RangeCale import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/calendar/docs/rangecalendar-anatomy.svg'; +export const tags = ['calendar']; + # RangeCalendar {docs.exports.RangeCalendar.description} diff --git a/packages/dev/s2-docs/pages/react-aria/SearchField.mdx b/packages/dev/s2-docs/pages/react-aria/SearchField.mdx index ef2594c640b..e20c652fda2 100644 --- a/packages/dev/s2-docs/pages/react-aria/SearchField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/SearchField.mdx @@ -8,6 +8,8 @@ import {SearchField as TailwindSearchField} from 'tailwind-starter/SearchField'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/searchfield/docs/anatomy.svg'; +export const tags = ['input']; + # SearchField {docs.exports.SearchField.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Select.mdx b/packages/dev/s2-docs/pages/react-aria/Select.mdx index 1f364142b20..c0aca087ceb 100644 --- a/packages/dev/s2-docs/pages/react-aria/Select.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Select.mdx @@ -6,6 +6,8 @@ import vanillaDocs from 'docs:vanilla-starter/Select'; import '../../tailwind/tailwind.css'; import Anatomy from 'react-aria-components/docs/SelectAnatomy.svg'; +export const tags = ['picker', 'dropdown', 'menu', 'input']; + # Select {docs.exports.Select.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Slider.mdx b/packages/dev/s2-docs/pages/react-aria/Slider.mdx index eb197c8cdd6..7814628066d 100644 --- a/packages/dev/s2-docs/pages/react-aria/Slider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Slider.mdx @@ -8,6 +8,8 @@ import tailwindDocs from 'docs:tailwind-starter/Slider'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/slider/docs/anatomy.svg'; +export const tags = ['range input', 'track', 'scrubber']; + # Slider {docs.exports.Slider.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Switch.mdx b/packages/dev/s2-docs/pages/react-aria/Switch.mdx index 6428136437e..561f6448efe 100644 --- a/packages/dev/s2-docs/pages/react-aria/Switch.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Switch.mdx @@ -7,6 +7,8 @@ import {Switch as TailwindSwitch} from 'tailwind-starter/Switch'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/switch/docs/anatomy.svg'; +export const tags = ['toggle', 'input']; + # Switch {docs.exports.Switch.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Table.mdx b/packages/dev/s2-docs/pages/react-aria/Table.mdx index 7674fb584ce..79cdd6207e5 100644 --- a/packages/dev/s2-docs/pages/react-aria/Table.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Table.mdx @@ -7,6 +7,8 @@ import '../../tailwind/tailwind.css'; import Anatomy from 'react-aria-components/docs/TableAnatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' +export const tags = ['data', 'grid']; + # Table {docs.exports.Table.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx index 6528867280f..39c808d326b 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx @@ -7,6 +7,8 @@ import vanillaDocs from 'docs:vanilla-starter/Tabs'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/tabs/docs/anatomy.svg'; +export const tags = ['navigation']; + # Tabs {docs.exports.Tabs.description} diff --git a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx index fc35de3e5fd..f601d910e9b 100644 --- a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx @@ -7,6 +7,8 @@ import vanillaDocs from 'docs:vanilla-starter/TagGroup'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/tag/docs/anatomy.svg'; +export const tags = ['chips', 'pills']; + # TagGroup {docs.exports.TagGroup.description} diff --git a/packages/dev/s2-docs/pages/react-aria/TextField.mdx b/packages/dev/s2-docs/pages/react-aria/TextField.mdx index 67903766ee4..9d80ded4d70 100644 --- a/packages/dev/s2-docs/pages/react-aria/TextField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/TextField.mdx @@ -8,6 +8,8 @@ import {TextField as TailwindTextField} from 'tailwind-starter/TextField'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/textfield/docs/anatomy.svg'; +export const tags = ['input']; + # TextField {docs.exports.TextField.description} diff --git a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx index eaffcdc2857..19a0a1d25c3 100644 --- a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx @@ -8,6 +8,8 @@ import {TimeField as TailwindTimeField} from 'tailwind-starter/TimeField'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/datepicker/docs/timefield-anatomy.svg'; +export const tags = ['date', 'input']; + # TimeField {docs.exports.TimeField.description} diff --git a/packages/dev/s2-docs/pages/react-aria/ToggleButton.mdx b/packages/dev/s2-docs/pages/react-aria/ToggleButton.mdx index 7c21325355b..18fc796135c 100644 --- a/packages/dev/s2-docs/pages/react-aria/ToggleButton.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ToggleButton.mdx @@ -7,6 +7,8 @@ import {ToggleButton as TailwindToggleButton} from 'tailwind-starter/ToggleButto import tailwindDocs from 'docs:tailwind-starter/ToggleButton'; import '../../tailwind/tailwind.css'; +export const tags = ['button', 'btn']; + # ToggleButton {docs.exports.ToggleButton.description} diff --git a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx index 60a642b1acb..604764f1cf6 100644 --- a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx @@ -5,6 +5,8 @@ import docs from 'docs:react-aria-components'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/button/docs/ToggleButtonGroupAnatomy.svg'; +export const tags = ['toggle', 'btn']; + # ToggleButtonGroup {docs.exports.ToggleButtonGroup.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx index b77c81190c7..00645e48778 100644 --- a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx @@ -5,6 +5,8 @@ import docs from 'docs:react-aria-components'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/toolbar/docs/toolbar-anatomy.svg'; +export const tags = ['group']; + # Toolbar {docs.exports.Toolbar.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx index df101ed3442..e7f3454f23c 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx @@ -7,6 +7,8 @@ import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/tooltip/docs/anatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' +export const tags = ['hint', 'popup', 'info']; + # Tooltip {docs.exports.Tooltip.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Tree.mdx b/packages/dev/s2-docs/pages/react-aria/Tree.mdx index 31c7d597628..0d267d93b39 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx @@ -7,6 +7,8 @@ import vanillaDocs from 'docs:vanilla-starter/Tree'; import '../../tailwind/tailwind.css'; import Anatomy from 'react-aria-components/docs/TreeAnatomy.svg'; +export const tags = ['data', 'tree', 'nested', 'hierarchy']; + # Tree {docs.exports.Tree.description} diff --git a/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx b/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx index 6c5436f6c91..f05b92efac4 100644 --- a/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx @@ -4,6 +4,8 @@ export default Layout; import docs from 'docs:react-aria-components'; import {GroupedPropTable} from '../../src/PropTable'; +export const tags = ['windowing', 'list', 'grid', 'infinite']; + # Virtualizer {docs.exports.Virtualizer.description} diff --git a/packages/dev/s2-docs/pages/s2/Accordion.mdx b/packages/dev/s2-docs/pages/s2/Accordion.mdx index f2cebe13100..d8b12ac3907 100644 --- a/packages/dev/s2-docs/pages/s2/Accordion.mdx +++ b/packages/dev/s2-docs/pages/s2/Accordion.mdx @@ -3,6 +3,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['collapsible', 'expandable', 'disclosure']; + # Accordion {docs.exports.Accordion.description} @@ -10,8 +12,9 @@ import docs from 'docs:@react-spectrum/s2'; ```tsx render docs={docs.exports.Accordion} links={docs.links} props={['size', 'density', 'isQuiet', 'isDisabled', 'allowsMultipleExpanded']} type="s2" "use client"; import {Accordion, Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2'; +import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; - + Personal Information Personal information form here. diff --git a/packages/dev/s2-docs/pages/s2/ActionBar.mdx b/packages/dev/s2-docs/pages/s2/ActionBar.mdx index 55d85b65022..6793685fca7 100644 --- a/packages/dev/s2-docs/pages/s2/ActionBar.mdx +++ b/packages/dev/s2-docs/pages/s2/ActionBar.mdx @@ -3,6 +3,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['toolbar']; + # ActionBar {docs.exports.ActionBar.description} diff --git a/packages/dev/s2-docs/pages/s2/ActionButton.mdx b/packages/dev/s2-docs/pages/s2/ActionButton.mdx index f00f600b345..67d396871f7 100644 --- a/packages/dev/s2-docs/pages/s2/ActionButton.mdx +++ b/packages/dev/s2-docs/pages/s2/ActionButton.mdx @@ -4,6 +4,8 @@ export default Layout; import {ActionButton} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = []; + # ActionButton {docs.exports.ActionButton.description} diff --git a/packages/dev/s2-docs/pages/s2/ActionButtonGroup.mdx b/packages/dev/s2-docs/pages/s2/ActionButtonGroup.mdx index 14b648b62ac..8ff16cf5942 100644 --- a/packages/dev/s2-docs/pages/s2/ActionButtonGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/ActionButtonGroup.mdx @@ -3,6 +3,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['group']; + # ActionButtonGroup {docs.exports.ActionButtonGroup.description} diff --git a/packages/dev/s2-docs/pages/s2/ActionMenu.mdx b/packages/dev/s2-docs/pages/s2/ActionMenu.mdx index d80d40ce599..3a90c41eeef 100644 --- a/packages/dev/s2-docs/pages/s2/ActionMenu.mdx +++ b/packages/dev/s2-docs/pages/s2/ActionMenu.mdx @@ -3,6 +3,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['dropdown']; + # ActionMenu {docs.exports.ActionMenu.description} diff --git a/packages/dev/s2-docs/pages/s2/Avatar.mdx b/packages/dev/s2-docs/pages/s2/Avatar.mdx index 018abb50721..39e9a138afe 100644 --- a/packages/dev/s2-docs/pages/s2/Avatar.mdx +++ b/packages/dev/s2-docs/pages/s2/Avatar.mdx @@ -4,6 +4,8 @@ export default Layout; import {Avatar} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['profile', 'user']; + # Avatar {docs.exports.Avatar.description} diff --git a/packages/dev/s2-docs/pages/s2/AvatarGroup.mdx b/packages/dev/s2-docs/pages/s2/AvatarGroup.mdx index 4f41d07e6ca..abe911f1e0c 100644 --- a/packages/dev/s2-docs/pages/s2/AvatarGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/AvatarGroup.mdx @@ -3,6 +3,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['profile', 'user']; + # AvatarGroup {docs.exports.AvatarGroup.description} diff --git a/packages/dev/s2-docs/pages/s2/Badge.mdx b/packages/dev/s2-docs/pages/s2/Badge.mdx index 0eedb0af8f0..63b0efc7b00 100644 --- a/packages/dev/s2-docs/pages/s2/Badge.mdx +++ b/packages/dev/s2-docs/pages/s2/Badge.mdx @@ -4,6 +4,8 @@ export default Layout; import {Badge, Text} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['label', 'tag', 'chip']; + # Badge {docs.exports.Badge.description} diff --git a/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx b/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx index 5035931cad6..c8480681a01 100644 --- a/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx +++ b/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx @@ -4,6 +4,8 @@ export default Layout; import {InlineAlert, Heading, Content} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['navigation']; + # Breadcrumbs {docs.exports.Breadcrumbs.description} diff --git a/packages/dev/s2-docs/pages/s2/Button.mdx b/packages/dev/s2-docs/pages/s2/Button.mdx index 3d2f4c90ef4..e6640c6946c 100644 --- a/packages/dev/s2-docs/pages/s2/Button.mdx +++ b/packages/dev/s2-docs/pages/s2/Button.mdx @@ -4,6 +4,8 @@ export default Layout; import {Button} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['btn']; + # Button {docs.exports.Button.description} diff --git a/packages/dev/s2-docs/pages/s2/ButtonGroup.mdx b/packages/dev/s2-docs/pages/s2/ButtonGroup.mdx index a1369a23093..3a37dacfd52 100644 --- a/packages/dev/s2-docs/pages/s2/ButtonGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/ButtonGroup.mdx @@ -4,6 +4,8 @@ export default Layout; import {ButtonGroup, Button} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = []; + # ButtonGroup {docs.exports.ButtonGroup.description} diff --git a/packages/dev/s2-docs/pages/s2/Calendar.mdx b/packages/dev/s2-docs/pages/s2/Calendar.mdx index 15bb482b3d1..ab780c0bcde 100644 --- a/packages/dev/s2-docs/pages/s2/Calendar.mdx +++ b/packages/dev/s2-docs/pages/s2/Calendar.mdx @@ -4,6 +4,8 @@ export default Layout; import {Calendar} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['date']; + # Calendar {docs.exports.Calendar.description} diff --git a/packages/dev/s2-docs/pages/s2/Card.mdx b/packages/dev/s2-docs/pages/s2/Card.mdx index 8fe399b54a1..b663040d504 100644 --- a/packages/dev/s2-docs/pages/s2/Card.mdx +++ b/packages/dev/s2-docs/pages/s2/Card.mdx @@ -3,6 +3,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['box']; + # Card {docs.exports.Card.description} diff --git a/packages/dev/s2-docs/pages/s2/CardView.mdx b/packages/dev/s2-docs/pages/s2/CardView.mdx index b867b8f4c1a..bf76ff3e2a9 100644 --- a/packages/dev/s2-docs/pages/s2/CardView.mdx +++ b/packages/dev/s2-docs/pages/s2/CardView.mdx @@ -3,6 +3,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['grid', 'gallery']; + # CardView {docs.exports.CardView.description} diff --git a/packages/dev/s2-docs/pages/s2/Checkbox.mdx b/packages/dev/s2-docs/pages/s2/Checkbox.mdx index 709ca6366ef..fb56f3f0bf6 100644 --- a/packages/dev/s2-docs/pages/s2/Checkbox.mdx +++ b/packages/dev/s2-docs/pages/s2/Checkbox.mdx @@ -4,6 +4,8 @@ export default Layout; import {Checkbox} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = []; + # Checkbox {docs.exports.Checkbox.description} diff --git a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx index 590669c36fb..076dca3ab08 100644 --- a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx @@ -4,6 +4,8 @@ export default Layout; import {CheckboxGroup} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = []; + # CheckboxGroup {docs.exports.CheckboxGroup.description} diff --git a/packages/dev/s2-docs/pages/s2/ColorArea.mdx b/packages/dev/s2-docs/pages/s2/ColorArea.mdx index 2a9178e03b1..e4ed78b1ab1 100644 --- a/packages/dev/s2-docs/pages/s2/ColorArea.mdx +++ b/packages/dev/s2-docs/pages/s2/ColorArea.mdx @@ -5,6 +5,8 @@ import {ColorArea} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; import racDocs from 'docs:react-aria-components'; +export const tags = []; + # ColorArea {docs.exports.ColorArea.description} diff --git a/packages/dev/s2-docs/pages/s2/ColorField.mdx b/packages/dev/s2-docs/pages/s2/ColorField.mdx index 54a0a302b5e..a28337dcad8 100644 --- a/packages/dev/s2-docs/pages/s2/ColorField.mdx +++ b/packages/dev/s2-docs/pages/s2/ColorField.mdx @@ -4,6 +4,8 @@ export default Layout; import {ColorField} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = []; + # ColorField {docs.exports.ColorField.description} diff --git a/packages/dev/s2-docs/pages/s2/ColorSlider.mdx b/packages/dev/s2-docs/pages/s2/ColorSlider.mdx index 761a1821388..179aad8bc09 100644 --- a/packages/dev/s2-docs/pages/s2/ColorSlider.mdx +++ b/packages/dev/s2-docs/pages/s2/ColorSlider.mdx @@ -4,6 +4,8 @@ export default Layout; import {ColorSlider} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = []; + # ColorSlider {docs.exports.ColorSlider.description} diff --git a/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx b/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx index 028de165b03..96ce289a0bb 100644 --- a/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx +++ b/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx @@ -4,6 +4,8 @@ export default Layout; import {ColorSwatch} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = []; + # ColorSwatch {docs.exports.ColorSwatch.description} diff --git a/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx b/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx index 3b71425a8d5..cd9810677e6 100644 --- a/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx +++ b/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx @@ -4,6 +4,8 @@ export default Layout; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' import docs from 'docs:@react-spectrum/s2'; +export const tags = []; + # ColorSwatchPicker {docs.exports.ColorSwatchPicker.description} diff --git a/packages/dev/s2-docs/pages/s2/ColorWheel.mdx b/packages/dev/s2-docs/pages/s2/ColorWheel.mdx index adb6054830d..b0fc043c98a 100644 --- a/packages/dev/s2-docs/pages/s2/ColorWheel.mdx +++ b/packages/dev/s2-docs/pages/s2/ColorWheel.mdx @@ -4,6 +4,8 @@ export default Layout; import {ColorWheel} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = []; + # ColorWheel {docs.exports.ColorWheel.description} diff --git a/packages/dev/s2-docs/pages/s2/ComboBox.mdx b/packages/dev/s2-docs/pages/s2/ComboBox.mdx index 51213a1fc1e..7738d59a6c6 100644 --- a/packages/dev/s2-docs/pages/s2/ComboBox.mdx +++ b/packages/dev/s2-docs/pages/s2/ComboBox.mdx @@ -4,6 +4,8 @@ export default Layout; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' import docs from 'docs:@react-spectrum/s2'; +export const tags = ['autocomplete', 'search', 'typeahead']; + # ComboBox {docs.exports.ComboBox.description} @@ -189,7 +191,7 @@ function Example() { ### Actions -Use the `onAction` prop on a `` to perform a custom action when the item is selected. This example adds a "Create" action for the current input value. +Use the `onAction` prop on a `` to perform a custom action when the item is pressed. This example adds a "Create" action for the current input value. ```tsx render "use client"; diff --git a/packages/dev/s2-docs/pages/s2/ContextualHelp.mdx b/packages/dev/s2-docs/pages/s2/ContextualHelp.mdx index 49132bddfaa..2f76b45567d 100644 --- a/packages/dev/s2-docs/pages/s2/ContextualHelp.mdx +++ b/packages/dev/s2-docs/pages/s2/ContextualHelp.mdx @@ -4,6 +4,8 @@ export default Layout; import {ContextualHelp, Heading, Content, Footer} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['help']; + # ContextualHelp {docs.exports.ContextualHelp.description} diff --git a/packages/dev/s2-docs/pages/s2/DateField.mdx b/packages/dev/s2-docs/pages/s2/DateField.mdx index 90f4b751b77..db23c7a9e48 100644 --- a/packages/dev/s2-docs/pages/s2/DateField.mdx +++ b/packages/dev/s2-docs/pages/s2/DateField.mdx @@ -4,6 +4,8 @@ export default Layout; import {DateField} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['calendar']; + # DateField {docs.exports.DateField.description} diff --git a/packages/dev/s2-docs/pages/s2/DatePicker.mdx b/packages/dev/s2-docs/pages/s2/DatePicker.mdx index 99f7163afac..d9d0b779732 100644 --- a/packages/dev/s2-docs/pages/s2/DatePicker.mdx +++ b/packages/dev/s2-docs/pages/s2/DatePicker.mdx @@ -4,6 +4,8 @@ export default Layout; import {DatePicker} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['calendar']; + # DatePicker {docs.exports.DatePicker.description} diff --git a/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx b/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx index d8fb36447ab..b1f2e0fe9c0 100644 --- a/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx +++ b/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx @@ -4,6 +4,8 @@ export default Layout; import {DateRangePicker} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['calendar']; + # DateRangePicker {docs.exports.DateRangePicker.description} diff --git a/packages/dev/s2-docs/pages/s2/Dialog.mdx b/packages/dev/s2-docs/pages/s2/Dialog.mdx index c450babf450..dfc3e176a13 100644 --- a/packages/dev/s2-docs/pages/s2/Dialog.mdx +++ b/packages/dev/s2-docs/pages/s2/Dialog.mdx @@ -4,6 +4,8 @@ export default Layout; import {Dialog, FullscreenDialog, CustomDialog, DialogTrigger, DialogContainer, Button, ButtonGroup, Heading, Header, Content, Footer, Image, TextField, Checkbox, CloseButton, ActionButton, IllustratedMessage} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['modal', 'popup', 'overlay']; + # Dialog {docs.exports.Dialog.description} diff --git a/packages/dev/s2-docs/pages/s2/Disclosure.mdx b/packages/dev/s2-docs/pages/s2/Disclosure.mdx index a324190d427..7aa0cf0b2cf 100644 --- a/packages/dev/s2-docs/pages/s2/Disclosure.mdx +++ b/packages/dev/s2-docs/pages/s2/Disclosure.mdx @@ -4,6 +4,8 @@ export default Layout; import {Disclosure, DisclosureTitle, DisclosurePanel, DisclosureHeader, ActionButton} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['accordion', 'collapsible', 'expandable']; + # Disclosure {docs.exports.Disclosure.description} diff --git a/packages/dev/s2-docs/pages/s2/Divider.mdx b/packages/dev/s2-docs/pages/s2/Divider.mdx index 94f265bb630..02dd3c132ce 100644 --- a/packages/dev/s2-docs/pages/s2/Divider.mdx +++ b/packages/dev/s2-docs/pages/s2/Divider.mdx @@ -4,6 +4,8 @@ export default Layout; import {Divider} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['separator', 'hr', 'horizontal rule', 'line']; + # Divider {docs.exports.Divider.description} diff --git a/packages/dev/s2-docs/pages/s2/DropZone.mdx b/packages/dev/s2-docs/pages/s2/DropZone.mdx index 84aa077be0b..b5c3612a2ff 100644 --- a/packages/dev/s2-docs/pages/s2/DropZone.mdx +++ b/packages/dev/s2-docs/pages/s2/DropZone.mdx @@ -3,6 +3,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['file', 'drag', 'upload']; + # DropZone {docs.exports.DropZone.description} diff --git a/packages/dev/s2-docs/pages/s2/Form.mdx b/packages/dev/s2-docs/pages/s2/Form.mdx index 6b16a635277..85b788497ea 100644 --- a/packages/dev/s2-docs/pages/s2/Form.mdx +++ b/packages/dev/s2-docs/pages/s2/Form.mdx @@ -4,6 +4,8 @@ export default Layout; import {Form, TextField, Checkbox, Button, RadioGroup, Radio, InlineAlert, Heading, Content, ButtonGroup} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['input', 'field']; + # Form {docs.exports.Form.description} diff --git a/packages/dev/s2-docs/pages/s2/Icons.mdx b/packages/dev/s2-docs/pages/s2/Icons.mdx index 249694d3fad..d27f1f4e83e 100644 --- a/packages/dev/s2-docs/pages/s2/Icons.mdx +++ b/packages/dev/s2-docs/pages/s2/Icons.mdx @@ -8,6 +8,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['svg', 'workflow', 'symbol']; + # Icons React Spectrum offers a set of open source icons that can be imported from `@react-spectrum/s2/icons`. @@ -39,11 +41,44 @@ import Edit from '@react-spectrum/s2/icons/Edit'; ### Icon colors - + ### Icon sizes - + ## Custom icons diff --git a/packages/dev/s2-docs/pages/s2/IllustratedMessage.mdx b/packages/dev/s2-docs/pages/s2/IllustratedMessage.mdx index 227b80b84fb..565cf212191 100644 --- a/packages/dev/s2-docs/pages/s2/IllustratedMessage.mdx +++ b/packages/dev/s2-docs/pages/s2/IllustratedMessage.mdx @@ -4,6 +4,8 @@ export default Layout; import {IllustratedMessage, Heading, Content, Button} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['empty', 'placeholder', 'error']; + # IllustratedMessage {docs.exports.IllustratedMessage.description} diff --git a/packages/dev/s2-docs/pages/s2/Illustrations.mdx b/packages/dev/s2-docs/pages/s2/Illustrations.mdx index 2899806ed46..183ba392d91 100644 --- a/packages/dev/s2-docs/pages/s2/Illustrations.mdx +++ b/packages/dev/s2-docs/pages/s2/Illustrations.mdx @@ -6,6 +6,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['svg', 'gradient', 'linear', 'symbol']; + # Illustrations React Spectrum offers a collection of illustrations that can be imported from `@react-spectrum/s2/illustrations`. diff --git a/packages/dev/s2-docs/pages/s2/Image.mdx b/packages/dev/s2-docs/pages/s2/Image.mdx index 65c47c19e75..4134048208e 100644 --- a/packages/dev/s2-docs/pages/s2/Image.mdx +++ b/packages/dev/s2-docs/pages/s2/Image.mdx @@ -4,6 +4,8 @@ export default Layout; import {Image} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['img', 'picture', 'photo']; + # Image {docs.exports.Image.description} diff --git a/packages/dev/s2-docs/pages/s2/InlineAlert.mdx b/packages/dev/s2-docs/pages/s2/InlineAlert.mdx index 7fc0c7a370f..0c48908605e 100644 --- a/packages/dev/s2-docs/pages/s2/InlineAlert.mdx +++ b/packages/dev/s2-docs/pages/s2/InlineAlert.mdx @@ -4,6 +4,8 @@ export default Layout; import {InlineAlert} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['alert', 'notification', 'banner', 'message']; + # InlineAlert {docs.exports.InlineAlert.description} diff --git a/packages/dev/s2-docs/pages/s2/Link.mdx b/packages/dev/s2-docs/pages/s2/Link.mdx index 9d4e4872e0f..48746705590 100644 --- a/packages/dev/s2-docs/pages/s2/Link.mdx +++ b/packages/dev/s2-docs/pages/s2/Link.mdx @@ -4,6 +4,8 @@ export default Layout; import {Link, Text} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['anchor', 'hyperlink', 'href']; + # Link {docs.exports.Link.description} diff --git a/packages/dev/s2-docs/pages/s2/LinkButton.mdx b/packages/dev/s2-docs/pages/s2/LinkButton.mdx index c3bf7a21436..2c1853cc3ac 100644 --- a/packages/dev/s2-docs/pages/s2/LinkButton.mdx +++ b/packages/dev/s2-docs/pages/s2/LinkButton.mdx @@ -4,6 +4,8 @@ export default Layout; import {LinkButton, Text} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['button']; + # LinkButton {docs.exports.LinkButton.description} diff --git a/packages/dev/s2-docs/pages/s2/Menu.mdx b/packages/dev/s2-docs/pages/s2/Menu.mdx index 9bd1a57a77f..67e5a8f292a 100644 --- a/packages/dev/s2-docs/pages/s2/Menu.mdx +++ b/packages/dev/s2-docs/pages/s2/Menu.mdx @@ -4,6 +4,8 @@ export default Layout; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' import docs from 'docs:@react-spectrum/s2'; +export const tags = ['dropdown']; + # Menu {docs.exports.Menu.description} diff --git a/packages/dev/s2-docs/pages/s2/Meter.mdx b/packages/dev/s2-docs/pages/s2/Meter.mdx index 1bd65455c98..60c35b2c4d1 100644 --- a/packages/dev/s2-docs/pages/s2/Meter.mdx +++ b/packages/dev/s2-docs/pages/s2/Meter.mdx @@ -4,6 +4,8 @@ export default Layout; import {Meter} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['gauge', 'progress', 'level']; + # Meter {docs.exports.Meter.description} diff --git a/packages/dev/s2-docs/pages/s2/Migrating.mdx b/packages/dev/s2-docs/pages/s2/Migrating.mdx index c71a445664d..1b42d053070 100644 --- a/packages/dev/s2-docs/pages/s2/Migrating.mdx +++ b/packages/dev/s2-docs/pages/s2/Migrating.mdx @@ -5,6 +5,7 @@ import {StaticTable} from '../../src/StaticTable'; export default Layout; export const section = 'Guides'; +export const tags = ['codemod', 'upgrade', 'update']; # Migrating to Spectrum 2 @@ -127,7 +128,6 @@ No updates needed. ### ColorField - Remove `isQuiet` (it is no longer supported in Spectrum 2) -- Remove `placeholder` (it has been removed due to accessibility issues) - Change `validationState="invalid"` to `isInvalid` - Remove `validationState="valid"` (it is no longer supported in Spectrum 2) @@ -147,7 +147,6 @@ No updates needed. - Change `menuWidth` value from a `DimensionValue` to a pixel value - Remove `isQuiet` (it is no longer supported in Spectrum 2) -- Remove `placeholder` (it is no longer supported in Spectrum 2) - Change `validationState="invalid"` to `isInvalid` - Remove `validationState="valid"` (it is no longer supported in Spectrum 2) - Update `Item` to be a `ComboBoxItem` @@ -275,6 +274,7 @@ No updates needed. - Remove `validationState="valid"` (it is no longer supported in Spectrum 2) - Update `Item` to be a `PickerItem` - Change `isLoading` to `loadingState` and provide the appropriate loading state. +- Update `defaultSelectedKey` and `selectedKey` to be `defaultValue` and `value` respectively. See the [Picker](Picker.html#value) documentation for more details. ### ProgressBar @@ -308,7 +308,6 @@ No updates needed. ### SearchField -- Remove `placeholder` (it has been removed due to accessibility issues) - Comment out icon (it has not been implemented yet) - Remove `isQuiet` (it is no longer supported in Spectrum 2) - Change `validationState="invalid"` to `isInvalid` @@ -370,7 +369,6 @@ No updates needed. - Comment out `icon` (it has not been implemented yet) - Remove `isQuiet` (it is no longer supported in Spectrum 2) -- Remove `placeholder` (it has been removed due to accessibility issues) - Change `validationState="invalid"` to `isInvalid` - Remove `validationState="valid"` (it is no longer supported in Spectrum 2) @@ -378,7 +376,6 @@ No updates needed. - Comment out `icon` (it has not been implemented yet) - Remove `isQuiet` (it is no longer supported in Spectrum 2) -- Remove `placeholder` (it has been removed due to accessibility issues) - Change `validationState="invalid"` to `isInvalid` - Remove `validationState="valid"` (it is no longer supported in Spectrum 2) diff --git a/packages/dev/s2-docs/pages/s2/NumberField.mdx b/packages/dev/s2-docs/pages/s2/NumberField.mdx index b8837eb2dbc..0b2d777374c 100644 --- a/packages/dev/s2-docs/pages/s2/NumberField.mdx +++ b/packages/dev/s2-docs/pages/s2/NumberField.mdx @@ -4,6 +4,8 @@ export default Layout; import {NumberField} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['input']; + # NumberField {docs.exports.NumberField.description} diff --git a/packages/dev/s2-docs/pages/s2/Picker.mdx b/packages/dev/s2-docs/pages/s2/Picker.mdx index 8c03add9b8e..4c314dd4f34 100644 --- a/packages/dev/s2-docs/pages/s2/Picker.mdx +++ b/packages/dev/s2-docs/pages/s2/Picker.mdx @@ -4,6 +4,8 @@ export default Layout; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' import docs from 'docs:@react-spectrum/s2'; +export const tags = ['select', 'dropdown']; + # Picker {docs.exports.Picker.description} diff --git a/packages/dev/s2-docs/pages/s2/Popover.mdx b/packages/dev/s2-docs/pages/s2/Popover.mdx index 00adc011849..637d4955be2 100644 --- a/packages/dev/s2-docs/pages/s2/Popover.mdx +++ b/packages/dev/s2-docs/pages/s2/Popover.mdx @@ -3,6 +3,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['popup', 'overlay']; + # Popover {docs.exports.Popover.description} diff --git a/packages/dev/s2-docs/pages/s2/ProgressBar.mdx b/packages/dev/s2-docs/pages/s2/ProgressBar.mdx index 0aabd14b623..6175ec944e0 100644 --- a/packages/dev/s2-docs/pages/s2/ProgressBar.mdx +++ b/packages/dev/s2-docs/pages/s2/ProgressBar.mdx @@ -4,6 +4,8 @@ export default Layout; import {ProgressBar} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['loading', 'progress']; + # ProgressBar {docs.exports.ProgressBar.description} diff --git a/packages/dev/s2-docs/pages/s2/ProgressCircle.mdx b/packages/dev/s2-docs/pages/s2/ProgressCircle.mdx index d5a7bc8b83c..026c69f62ea 100644 --- a/packages/dev/s2-docs/pages/s2/ProgressCircle.mdx +++ b/packages/dev/s2-docs/pages/s2/ProgressCircle.mdx @@ -4,6 +4,8 @@ export default Layout; import {ProgressCircle} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['spinner', 'circular', 'loading']; + # ProgressCircle {docs.exports.ProgressCircle.description} diff --git a/packages/dev/s2-docs/pages/s2/RadioGroup.mdx b/packages/dev/s2-docs/pages/s2/RadioGroup.mdx index 7b7d28b07aa..30ae82b98eb 100644 --- a/packages/dev/s2-docs/pages/s2/RadioGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/RadioGroup.mdx @@ -4,6 +4,8 @@ export default Layout; import {RadioGroup, Radio} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['input']; + # RadioGroup {docs.exports.RadioGroup.description} diff --git a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx index 24fbc1fb088..48d7eacb1c2 100644 --- a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx @@ -4,6 +4,8 @@ export default Layout; import {RangeCalendar} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['calendar']; + # RangeCalendar {docs.exports.RangeCalendar.description} diff --git a/packages/dev/s2-docs/pages/s2/RangeSlider.mdx b/packages/dev/s2-docs/pages/s2/RangeSlider.mdx index c71dc0b86f8..3689090ed77 100644 --- a/packages/dev/s2-docs/pages/s2/RangeSlider.mdx +++ b/packages/dev/s2-docs/pages/s2/RangeSlider.mdx @@ -4,6 +4,8 @@ export default Layout; import {RangeSlider} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['slider']; + # RangeSlider {docs.exports.RangeSlider.description} diff --git a/packages/dev/s2-docs/pages/s2/SearchField.mdx b/packages/dev/s2-docs/pages/s2/SearchField.mdx index b935438595c..ba718f1ae8e 100644 --- a/packages/dev/s2-docs/pages/s2/SearchField.mdx +++ b/packages/dev/s2-docs/pages/s2/SearchField.mdx @@ -4,6 +4,8 @@ export default Layout; import {SearchField} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['input']; + # SearchField {docs.exports.SearchField.description} diff --git a/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx b/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx index 17c87cd239c..c38da282644 100644 --- a/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx +++ b/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx @@ -4,6 +4,8 @@ export default Layout; import {SegmentedControl, SegmentedControlItem, Text} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['toggle group', 'tabs']; + # SegmentedControl {docs.exports.SegmentedControl.description} diff --git a/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx b/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx index 4ec76532118..140e21dba65 100644 --- a/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx @@ -4,6 +4,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['box']; + # SelectBoxGroup {docs.exports.SelectBoxGroup.description} diff --git a/packages/dev/s2-docs/pages/s2/Skeleton.mdx b/packages/dev/s2-docs/pages/s2/Skeleton.mdx index 32c157f8a03..becbeda279e 100644 --- a/packages/dev/s2-docs/pages/s2/Skeleton.mdx +++ b/packages/dev/s2-docs/pages/s2/Skeleton.mdx @@ -3,6 +3,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['loading', 'placeholder', 'shimmer', 'ghost']; + # Skeleton {docs.exports.Skeleton.description} diff --git a/packages/dev/s2-docs/pages/s2/Slider.mdx b/packages/dev/s2-docs/pages/s2/Slider.mdx index cf651717926..256d892b842 100644 --- a/packages/dev/s2-docs/pages/s2/Slider.mdx +++ b/packages/dev/s2-docs/pages/s2/Slider.mdx @@ -4,6 +4,8 @@ export default Layout; import {Slider} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['range input', 'track', 'scrubber']; + # Slider {docs.exports.Slider.description} diff --git a/packages/dev/s2-docs/pages/s2/StatusLight.mdx b/packages/dev/s2-docs/pages/s2/StatusLight.mdx index 2e2c3486882..4accd00bd9a 100644 --- a/packages/dev/s2-docs/pages/s2/StatusLight.mdx +++ b/packages/dev/s2-docs/pages/s2/StatusLight.mdx @@ -4,6 +4,8 @@ export default Layout; import {StatusLight} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['indicator', 'dot', 'badge']; + # StatusLight {docs.exports.StatusLight.description} diff --git a/packages/dev/s2-docs/pages/s2/Styling.mdx b/packages/dev/s2-docs/pages/s2/Styling.mdx index 98d6a52aaaf..59e257b206d 100644 --- a/packages/dev/s2-docs/pages/s2/Styling.mdx +++ b/packages/dev/s2-docs/pages/s2/Styling.mdx @@ -6,6 +6,7 @@ import {S2StyleProperties} from '../../src/S2StyleProperties'; export default Layout; export const section = 'Guides'; +export const tags = ['style', 'macro', 'spectrum', 'custom']; # Styling @@ -48,7 +49,41 @@ import {Button} from '@react-spectrum/s2'; ### Supported CSS properties - + ### UNSAFE Style Overrides diff --git a/packages/dev/s2-docs/pages/s2/Switch.mdx b/packages/dev/s2-docs/pages/s2/Switch.mdx index ed8a5dbcf38..c6335487386 100644 --- a/packages/dev/s2-docs/pages/s2/Switch.mdx +++ b/packages/dev/s2-docs/pages/s2/Switch.mdx @@ -4,6 +4,8 @@ export default Layout; import {Switch} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['toggle', 'input']; + # Switch {docs.exports.Switch.description} diff --git a/packages/dev/s2-docs/pages/s2/TableView.mdx b/packages/dev/s2-docs/pages/s2/TableView.mdx index 112db0017f0..88ff5431a98 100644 --- a/packages/dev/s2-docs/pages/s2/TableView.mdx +++ b/packages/dev/s2-docs/pages/s2/TableView.mdx @@ -4,6 +4,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' +export const tags = ['table', 'data', 'grid']; + # TableView {docs.exports.TableView.description} diff --git a/packages/dev/s2-docs/pages/s2/Tabs.mdx b/packages/dev/s2-docs/pages/s2/Tabs.mdx index 4a65648e854..2257c66bf12 100644 --- a/packages/dev/s2-docs/pages/s2/Tabs.mdx +++ b/packages/dev/s2-docs/pages/s2/Tabs.mdx @@ -2,6 +2,8 @@ import {Layout} from '../../src/Layout'; export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['navigation']; + # Tabs {docs.exports.Tabs.description} diff --git a/packages/dev/s2-docs/pages/s2/TagGroup.mdx b/packages/dev/s2-docs/pages/s2/TagGroup.mdx index 22d576eae4e..054b22f7ad8 100644 --- a/packages/dev/s2-docs/pages/s2/TagGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/TagGroup.mdx @@ -3,6 +3,8 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['chips', 'pills']; + # TagGroup {docs.exports.TagGroup.description} diff --git a/packages/dev/s2-docs/pages/s2/TextArea.mdx b/packages/dev/s2-docs/pages/s2/TextArea.mdx index d4310b80a35..02e71c1522d 100644 --- a/packages/dev/s2-docs/pages/s2/TextArea.mdx +++ b/packages/dev/s2-docs/pages/s2/TextArea.mdx @@ -4,6 +4,8 @@ export default Layout; import {TextArea} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['multiline', 'input']; + # TextArea {docs.exports.TextArea.description} diff --git a/packages/dev/s2-docs/pages/s2/TextField.mdx b/packages/dev/s2-docs/pages/s2/TextField.mdx index f1b437afc33..35fcb4217cc 100644 --- a/packages/dev/s2-docs/pages/s2/TextField.mdx +++ b/packages/dev/s2-docs/pages/s2/TextField.mdx @@ -4,6 +4,8 @@ export default Layout; import {TextField} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['input']; + # TextField {docs.exports.TextField.description} diff --git a/packages/dev/s2-docs/pages/s2/TimeField.mdx b/packages/dev/s2-docs/pages/s2/TimeField.mdx index 32b3ee5301f..700172a0871 100644 --- a/packages/dev/s2-docs/pages/s2/TimeField.mdx +++ b/packages/dev/s2-docs/pages/s2/TimeField.mdx @@ -4,6 +4,8 @@ export default Layout; import {TimeField} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['date', 'input']; + # TimeField {docs.exports.TimeField.description} diff --git a/packages/dev/s2-docs/pages/s2/Toast.mdx b/packages/dev/s2-docs/pages/s2/Toast.mdx index 33638abbe48..2ed3f80e3de 100644 --- a/packages/dev/s2-docs/pages/s2/Toast.mdx +++ b/packages/dev/s2-docs/pages/s2/Toast.mdx @@ -6,6 +6,8 @@ import docs from 'docs:@react-spectrum/s2'; import {InterfaceType} from '../../src/types'; import {VersionBadge} from '../../src/VersionBadge'; +export const tags = ['snackbar', 'notification', 'alert']; + # Toast {docs.exports.UNSTABLE_ToastContainer.description} diff --git a/packages/dev/s2-docs/pages/s2/ToggleButton.mdx b/packages/dev/s2-docs/pages/s2/ToggleButton.mdx index 8e9787d7711..0363494bbd6 100644 --- a/packages/dev/s2-docs/pages/s2/ToggleButton.mdx +++ b/packages/dev/s2-docs/pages/s2/ToggleButton.mdx @@ -4,6 +4,8 @@ export default Layout; import {ToggleButton, Text} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['button', 'btn']; + # ToggleButton {docs.exports.ToggleButton.description} diff --git a/packages/dev/s2-docs/pages/s2/ToggleButtonGroup.mdx b/packages/dev/s2-docs/pages/s2/ToggleButtonGroup.mdx index e4050604e67..dbec0acb6ed 100644 --- a/packages/dev/s2-docs/pages/s2/ToggleButtonGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/ToggleButtonGroup.mdx @@ -4,6 +4,8 @@ export default Layout; import {ToggleButtonGroup, ToggleButton, Text} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['toggle', 'btn']; + # ToggleButtonGroup {docs.exports.ToggleButtonGroup.description} diff --git a/packages/dev/s2-docs/pages/s2/Tooltip.mdx b/packages/dev/s2-docs/pages/s2/Tooltip.mdx index b79fc97102f..614e169e3c8 100644 --- a/packages/dev/s2-docs/pages/s2/Tooltip.mdx +++ b/packages/dev/s2-docs/pages/s2/Tooltip.mdx @@ -4,6 +4,8 @@ export default Layout; import {InlineAlert, Heading, Content} from '@react-spectrum/s2' import docs from 'docs:@react-spectrum/s2'; +export const tags = ['hint', 'popup', 'info']; + # Tooltip {docs.exports.Tooltip.description} diff --git a/packages/dev/s2-docs/pages/s2/TreeView.mdx b/packages/dev/s2-docs/pages/s2/TreeView.mdx index b0a2ad6ab81..715d459cdd3 100644 --- a/packages/dev/s2-docs/pages/s2/TreeView.mdx +++ b/packages/dev/s2-docs/pages/s2/TreeView.mdx @@ -4,6 +4,8 @@ export default Layout; import {TreeView, TreeViewItem, TreeViewItemContent, Collection, Text, ActionMenu, MenuItem} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2'; +export const tags = ['hierarchy', 'data', 'nested']; + # TreeView {docs.exports.TreeView.description} diff --git a/packages/dev/s2-docs/pages/s2/collections.mdx b/packages/dev/s2-docs/pages/s2/collections.mdx index 86fa9abd71e..8dacb61c5c7 100644 --- a/packages/dev/s2-docs/pages/s2/collections.mdx +++ b/packages/dev/s2-docs/pages/s2/collections.mdx @@ -4,6 +4,8 @@ export default Layout; export const section = 'Guides'; +export const tags = ['lists']; + # Collections Many components display a collection of items, and provide functionality such as keyboard navigation, selection, and more. React Spectrum has a consistent, compositional API to define the items displayed in these components. diff --git a/packages/dev/s2-docs/pages/s2/dnd.mdx b/packages/dev/s2-docs/pages/s2/dnd.mdx index 9dc7a2e46eb..63b2ecfd2df 100644 --- a/packages/dev/s2-docs/pages/s2/dnd.mdx +++ b/packages/dev/s2-docs/pages/s2/dnd.mdx @@ -4,6 +4,8 @@ export default Layout; export const section = 'Guides'; +export const tags = ['drag', 'drop']; + # Drag and Drop Drag and drop is an intuitive way for users to transfer data between locations. React Spectrum implements drag and drop for mouse and touch interactions, and provides full keyboard and screen reader accessibility. diff --git a/packages/dev/s2-docs/pages/s2/getting-started.mdx b/packages/dev/s2-docs/pages/s2/getting-started.mdx index be9601baca4..ad4a37f6e8c 100644 --- a/packages/dev/s2-docs/pages/s2/getting-started.mdx +++ b/packages/dev/s2-docs/pages/s2/getting-started.mdx @@ -5,6 +5,7 @@ export default Layout; import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2'; export const section = 'Getting started'; +export const tags = ['introduction', 'installation']; # Getting started diff --git a/packages/dev/s2-docs/pages/s2/release-notes.mdx b/packages/dev/s2-docs/pages/s2/release-notes.mdx index 210989276da..0bfaec273e0 100644 --- a/packages/dev/s2-docs/pages/s2/release-notes.mdx +++ b/packages/dev/s2-docs/pages/s2/release-notes.mdx @@ -2,6 +2,7 @@ import {Layout} from '../../src/Layout'; export default Layout; export const section = 'Releases'; +export const tags = ['changelog', 'versions', 'updates']; # Release Notes diff --git a/packages/dev/s2-docs/pages/s2/selection.mdx b/packages/dev/s2-docs/pages/s2/selection.mdx index 0f6d3b36383..2bc589dd40e 100644 --- a/packages/dev/s2-docs/pages/s2/selection.mdx +++ b/packages/dev/s2-docs/pages/s2/selection.mdx @@ -3,6 +3,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2'; export default Layout; export const section = 'Guides'; +export const tags = ['collections']; # Selection diff --git a/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs b/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs index 49e9dceb414..d522e54ce21 100644 --- a/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs +++ b/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs @@ -16,6 +16,74 @@ const RAC_SRC_ROOT = path.join(REPO_ROOT, 'packages/react-aria-components/src'); const COMPONENT_SRC_ROOTS = [S2_SRC_ROOT, RAC_SRC_ROOT]; const S2_DOCS_PAGES_ROOT = path.join(REPO_ROOT, 'packages/dev/s2-docs/pages'); const DIST_ROOT = path.join(REPO_ROOT, 'packages/dev/s2-docs/dist'); +const LICENSE_COMMENT_REGEX = /^\s*\{\/\*[\s\S]*?Copyright\s+20\d{2}\s+Adobe[\s\S]*?\*\/\}\s*/; +const S2_ICON_ROOT = path.join(REPO_ROOT, 'packages/@react-spectrum/s2/s2wf-icons'); +const S2_ILLUSTRATION_ROOT = path.join(REPO_ROOT, 'packages/@react-spectrum/s2/spectrum-illustrations'); + +let iconNamesCache = null; +let illustrationNamesCache = null; + +function getIconNames() { + if (iconNamesCache) { + return iconNamesCache; + } + + try { + const files = fs.readdirSync(S2_ICON_ROOT); + const names = new Set(); + + for (const fileName of files) { + if (!fileName.toLowerCase().endsWith('.svg')) { + continue; + } + + const normalized = fileName.replace(/^S2_Icon_(.*?)(Size\d+)?_2.*/, '$1'); + const cleaned = normalized.trim(); + if (cleaned) { + names.add(cleaned); + } + } + + iconNamesCache = Array.from(names).sort((a, b) => a.localeCompare(b)); + } catch { + iconNamesCache = []; + } + + return iconNamesCache; +} + +function getIllustrationNames() { + if (illustrationNamesCache) { + return illustrationNamesCache; + } + + try { + const names = new Set(); + const directories = ['linear', 'gradient/generic1', 'gradient/generic2']; + + for (const dir of directories) { + const illustrationPath = path.join(S2_ILLUSTRATION_ROOT, dir); + if (!fs.existsSync(illustrationPath)) { + continue; + } + + const files = fs.readdirSync(illustrationPath); + for (const fileName of files) { + if (fileName.endsWith('.tsx')) { + // Extract name without extension + const name = fileName.replace(/\.tsx$/, ''); + names.add(name); + } + } + } + + illustrationNamesCache = Array.from(names).sort((a, b) => a.localeCompare(b)); + } catch { + illustrationNamesCache = []; + } + + return illustrationNamesCache; +} // Pre-load a ts-morph project so we can query type information. const project = new Project({ @@ -269,6 +337,123 @@ function remarkDocsComponentsToMarkdown() { const relatedTypes = new Set(); visit(tree, ['mdxJsxFlowElement', 'mdxJsxTextElement'], (node, index, parent) => { const name = node.name; + if (name === 'InstallCommand') { + const pkgAttr = node.attributes?.find(a => a.name === 'pkg'); + if (!pkgAttr) { + parent.children.splice(index, 1); + return index; + } + + let pkg = ''; + if (pkgAttr.value?.type === 'mdxJsxAttributeValueExpression') { + pkg = pkgAttr.value.value.replace(/['"`]/g, '').trim(); + } else if (typeof pkgAttr.value === 'string') { + pkg = pkgAttr.value.trim(); + } + + if (!pkg) { + parent.children.splice(index, 1); + return index; + } + + const flagsAttr = node.attributes?.find(a => a.name === 'flags'); + let flags = ''; + if (flagsAttr) { + if (flagsAttr.value?.type === 'mdxJsxAttributeValueExpression') { + flags = flagsAttr.value.value.replace(/['"`]/g, '').trim(); + } else if (typeof flagsAttr.value === 'string') { + flags = flagsAttr.value.trim(); + } + } + + const commandText = `npm install ${pkg}${flags ? ' ' + flags : ''}`.trim(); + + const codeNode = { + type: 'code', + lang: 'bash', + meta: '', + value: commandText + }; + + parent.children.splice(index, 1, codeNode); + return index; + } + if (name === 'IconCards') { + const iconList = getIconNames(); + const header = ['| Icon |', '|------|']; + const rows = iconList.map(iconName => `| ${iconName} |`); + const tableMarkdown = iconList.length ? `${header.join('\n')}\n${rows.join('\n')}` : '> Icon list unavailable in this build.'; + const iconCardsNode = unified().use(remarkParse).parse(tableMarkdown); + parent.children.splice(index, 1, ...iconCardsNode.children); + return index; + } + if (name === 'IllustrationCards') { + const illustrationList = getIllustrationNames(); + const header = ['| Illustration |', '|--------------|']; + const rows = illustrationList.map(illustrationName => `| ${illustrationName} |`); + const tableMarkdown = illustrationList.length ? `${header.join('\n')}\n${rows.join('\n')}` : '> Illustration list unavailable in this build.'; + const illustrationCardsNode = unified().use(remarkParse).parse(tableMarkdown); + parent.children.splice(index, 1, ...illustrationCardsNode.children); + return index; + } + if (name === 'IconColors') { + const colorsAttr = node.attributes?.find(a => a.name === 'colors'); + let colorList = []; + + if (colorsAttr && colorsAttr.value?.type === 'mdxJsxAttributeValueExpression') { + // Extract string literals from array expression: ['white', 'black', ...] + const expr = colorsAttr.value.value; + const matches = expr.match(/['"]([^'"]+)['"]/g); + if (matches) { + colorList = matches.map(m => m.slice(1, -1)); // Remove quotes + } + } + + if (colorList.length > 0) { + const header = ['| Color |', '|-------|']; + const rows = colorList.map(color => `| ${color} |`); + const tableMarkdown = `${header.join('\n')}\n${rows.join('\n')}`; + const iconColorsNode = unified().use(remarkParse).parse(tableMarkdown); + parent.children.splice(index, 1, ...iconColorsNode.children); + } else { + // If no colors found, remove the node + parent.children.splice(index, 1); + } + return index; + } + if (name === 'IconSizes') { + const sizesAttr = node.attributes?.find(a => a.name === 'sizes'); + let sizeList = []; + + if (sizesAttr && sizesAttr.value?.type === 'mdxJsxAttributeValueExpression') { + // Extract objects from array expression: [{size: 'XS', pixels: '14px'}, ...] + const expr = sizesAttr.value.value; + // Match {size: 'X', pixels: 'Ypx'} patterns + const objectMatches = expr.match(/\{[^}]+\}/g); + if (objectMatches) { + sizeList = objectMatches.map(obj => { + const sizeMatch = obj.match(/size:\s*['"]([^'"]+)['"]/); + const pixelsMatch = obj.match(/pixels:\s*['"]([^'"]+)['"]/); + return { + size: sizeMatch ? sizeMatch[1] : '', + pixels: pixelsMatch ? pixelsMatch[1] : '' + }; + }).filter(item => item.size && item.pixels); + } + } + + if (sizeList.length > 0) { + const header = ['| Size | Pixels |', '|------|--------|']; + const rows = sizeList.map(({size, pixels}) => `| ${size} | ${pixels} |`); + const tableMarkdown = `${header.join('\n')}\n${rows.join('\n')}`; + const iconSizesNode = unified().use(remarkParse).parse(tableMarkdown); + parent.children.splice(index, 1, ...iconSizesNode.children); + } else { + // If no sizes found, remove the node + parent.children.splice(index, 1); + } + return index; + } if (name === 'PageDescription') { // Assume first child is expression "docs.exports.Component.description". const exprNode = node.children?.find((c) => c.type === 'mdxFlowExpression' || c.type === 'mdxTextExpression'); @@ -278,7 +463,6 @@ function remarkDocsComponentsToMarkdown() { const desc = getComponentDescription(m[1], file); if (desc) { // Replace with normal paragraph node. - // eslint-disable-next-line max-depth if (node.type === 'mdxJsxFlowElement') { parent.children[index] = { type: 'paragraph', @@ -406,6 +590,44 @@ function remarkDocsComponentsToMarkdown() { return index + newNodes.length; } + if (name === 'BundlerSwitcher') { + const bundlerItems = (node.children || []).filter(c => c.type === 'mdxJsxFlowElement' && c.name === 'BundlerSwitcherItem'); + const newNodes = []; + + const extractLabel = (itemNode) => { + const labelAttr = itemNode.attributes?.find(a => a.name === 'label'); + if (!labelAttr) {return null;} + + if (labelAttr.value?.type === 'mdxJsxAttributeValueExpression') { + return labelAttr.value.value.replace(/['"`]/g, '').trim(); + } + + if (typeof labelAttr.value === 'string') { + return labelAttr.value.trim(); + } + + return null; + }; + + bundlerItems.forEach((itemNode) => { + const label = extractLabel(itemNode) || 'Configuration'; + + newNodes.push({ + type: 'heading', + depth: 3, + children: [{type: 'text', value: label}] + }); + + const itemChildren = (itemNode.children || []).filter(child => child.type !== 'text' || child.value.trim() !== ''); + if (itemChildren.length) { + newNodes.push(...itemChildren); + } + }); + + parent.children.splice(index, 1, ...newNodes); + return index + newNodes.length; + } + // Handle standalone VisualExample, generate a minimal snippet if (name === 'VisualExample') { const evalExpression = (expr) => { @@ -510,6 +732,113 @@ function remarkDocsComponentsToMarkdown() { parent.children[index] = {type: 'text', value: ''}; return index; } + if (name === 'S2StyleProperties') { + const propertiesAttr = node.attributes?.find(a => a.name === 'properties'); + let propertyList = []; + + if (propertiesAttr && propertiesAttr.value?.type === 'mdxJsxAttributeValueExpression') { + // Extract string literals from array expression: ['margin', 'marginStart', ...] + const expr = propertiesAttr.value.value; + const matches = expr.match(/['"]([^'"]+)['"]/g); + if (matches) { + propertyList = matches.map(m => m.slice(1, -1)); // Remove quotes + } + } + + if (propertyList.length > 0) { + // Generate markdown bullet list with inline code + const listItems = propertyList.map(prop => `- \`${prop}\``).join('\n'); + const listNode = unified().use(remarkParse).parse(listItems); + parent.children.splice(index, 1, ...listNode.children); + return index + listNode.children.length; + } else { + // If no properties found, remove the node + parent.children.splice(index, 1); + } + return index; + } + if (name === 'S2Colors') { + const colorSections = [ + { + title: 'Background colors', + description: 'The backgroundColor property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible.', + colors: [ + 'base', 'layer-1', 'layer-2', 'pasteboard', 'elevated', + 'accent', 'accent-subtle', 'neutral', 'neutral-subdued', 'neutral-subtle', + 'negative', 'negative-subtle', 'informative', 'informative-subtle', + 'positive', 'positive-subtle', 'notice', 'notice-subtle', + 'gray', 'gray-subtle', 'red', 'red-subtle', 'orange', 'orange-subtle', + 'yellow', 'yellow-subtle', 'chartreuse', 'chartreuse-subtle', + 'celery', 'celery-subtle', 'green', 'green-subtle', 'seafoam', 'seafoam-subtle', + 'cyan', 'cyan-subtle', 'blue', 'blue-subtle', 'indigo', 'indigo-subtle', + 'purple', 'purple-subtle', 'fuchsia', 'fuchsia-subtle', + 'magenta', 'magenta-subtle', 'pink', 'pink-subtle', + 'turquoise', 'turquoise-subtle', 'cinnamon', 'cinnamon-subtle', + 'brown', 'brown-subtle', 'silver', 'silver-subtle', 'disabled' + ] + }, + { + title: 'Text colors', + description: 'The color property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible.', + colors: [ + 'accent', 'neutral', 'neutral-subdued', 'negative', 'disabled', + 'heading', 'title', 'body', 'detail', 'code' + ] + }, + { + title: 'Semantic colors', + description: 'The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.', + scales: ['accent-color', 'informative-color', 'negative-color', 'notice-color', 'positive-color'] + }, + { + title: 'Global colors', + description: 'The following values are available across all color properties.', + scales: [ + 'gray', 'blue', 'red', 'orange', 'yellow', 'chartreuse', 'celery', + 'green', 'seafoam', 'cyan', 'indigo', 'purple', 'fuchsia', + 'magenta', 'pink', 'turquoise', 'brown', 'silver', 'cinnamon' + ] + } + ]; + + const newNodes = []; + for (const section of colorSections) { + // Add heading + newNodes.push({ + type: 'heading', + depth: 4, + children: [{type: 'text', value: section.title}] + }); + + // Add description + newNodes.push({ + type: 'paragraph', + children: [{type: 'text', value: section.description}] + }); + + // Add color list + if (section.colors) { + const listItems = section.colors.map(color => `- \`${color}\``).join('\n'); + const listNode = unified().use(remarkParse).parse(listItems); + newNodes.push(...listNode.children); + } else if (section.scales) { + // For scales, note that they include numbered variants (e.g., gray-100, gray-200, etc.) + const scaleNote = section.scales.map(scale => { + const baseName = scale.replace(/-color$/, ''); + // Gray scale includes 25, 50, 75, while others start at 100 + if (baseName === 'gray') { + return `- \`${baseName}\` scale (e.g., \`${baseName}-25\`, \`${baseName}-50\`, \`${baseName}-75\`, \`${baseName}-100\`, ..., \`${baseName}-1600\`)`; + } + return `- \`${baseName}\` scale (e.g., \`${baseName}-100\`, \`${baseName}-200\`, ..., \`${baseName}-1600\`)`; + }).join('\n'); + const scaleNode = unified().use(remarkParse).parse(scaleNote); + newNodes.push(...scaleNode.children); + } + } + + parent.children.splice(index, 1, ...newNodes); + return index + newNodes.length; + } if (name === 'StateTable') { // Extract interface name from properties attribute const propertiesAttr = node.attributes?.find(a => a.name === 'properties'); @@ -851,7 +1180,8 @@ async function main() { }; for (const filePath of mdxFiles) { - const mdContent = fs.readFileSync(filePath, 'utf8'); + const rawContent = fs.readFileSync(filePath, 'utf8'); + const mdContent = rawContent.replace(LICENSE_COMMENT_REGEX, ''); const processor = unified() .use(remarkParse) .use(remarkMdx) diff --git a/packages/dev/s2-docs/src/AdobeLogo.tsx b/packages/dev/s2-docs/src/AdobeLogo.tsx deleted file mode 100644 index 1657dd8091f..00000000000 --- a/packages/dev/s2-docs/src/AdobeLogo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -export const AdobeLogo = ({className = '', size = 32}) => { - return ( - - - - ); -}; diff --git a/packages/dev/s2-docs/src/IconColors.tsx b/packages/dev/s2-docs/src/IconColors.tsx index ba85af506fa..7a3af19cf52 100644 --- a/packages/dev/s2-docs/src/IconColors.tsx +++ b/packages/dev/s2-docs/src/IconColors.tsx @@ -1,4 +1,6 @@ 'use client'; + +import React from 'react'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; function ColorSwatch({name}) { @@ -47,35 +49,12 @@ function ColorSwatch({name}) { ); } -export function IconColors() { +export function IconColors({colors}: {colors: string[]}) { return (
    - - - - - - - - - - - - - - - - - - - - - - - - - - + {colors.map((color) => ( + + ))}
    ); } diff --git a/packages/dev/s2-docs/src/IconSizes.tsx b/packages/dev/s2-docs/src/IconSizes.tsx index 99ccd18e8d8..9ae6212b1d3 100644 --- a/packages/dev/s2-docs/src/IconSizes.tsx +++ b/packages/dev/s2-docs/src/IconSizes.tsx @@ -1,30 +1,47 @@ 'use client'; + import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle'; import {iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'}; -export function IconSizes() { +type SizeInfo = { + size: string, + pixels: string +}; + +const labelStyle = style({ + font: 'ui-sm', + fontWeight: { + size: { + 'M': 'bold', + default: 'normal' + } + } +}); + +let renderCheckMark = (size: string) => { + if (size === 'XS') { + return ; + } else if (size === 'S') { + return ; + } else if (size === 'M') { + return ; + } else if (size === 'L') { + return ; + } else if (size === 'XL') { + return ; + } + return null; +}; + +export function IconSizes({sizes}: {sizes: SizeInfo[]}) { return (
    -
    - - XS (14px) -
    -
    - - S (16px) -
    -
    - - M (20px) -
    -
    - - L (22px) -
    -
    - - XL (26px) -
    + {sizes.map(({size, pixels}) => ( +
    + {renderCheckMark(size)} + {size} ({pixels}) +
    + ))}
    ); } diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx index d8a0aeae6ce..f27827e874c 100644 --- a/packages/dev/s2-docs/src/Layout.tsx +++ b/packages/dev/s2-docs/src/Layout.tsx @@ -177,8 +177,10 @@ export function Layout(props: PageProps & {children: ReactElement}) { lg: 'block' } })}> -
    Contents
    - + {currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents[0].children.length > 0 && ( +
    Contents
    + )} + diff --git a/packages/dev/s2-docs/src/MobileHeader.tsx b/packages/dev/s2-docs/src/MobileHeader.tsx index 07f4f215dd9..d7f2d39cb1b 100644 --- a/packages/dev/s2-docs/src/MobileHeader.tsx +++ b/packages/dev/s2-docs/src/MobileHeader.tsx @@ -1,7 +1,7 @@ 'use client'; import {ActionButton, DialogTrigger} from '@react-spectrum/s2'; -import {AdobeLogo} from './AdobeLogo'; +import {AdobeLogo} from './icons/AdobeLogo'; import {keyframes} from '../../../@react-spectrum/s2/style/style-macro' with {type: 'macro'}; import MenuHamburger from '@react-spectrum/s2/icons/MenuHamburger'; import {Modal} from '../../../@react-spectrum/s2/src/Modal'; @@ -156,7 +156,7 @@ export function MobileHeader({toc, pages, currentPage}) { - + diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx index bf737f61ff5..eb340150f44 100644 --- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx +++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx @@ -1,16 +1,16 @@ 'use client'; -import {CloseButton, Content, Heading, IllustratedMessage, SearchField, Tab, TabList, TabPanel, Tabs, Tag, TagGroup} from '@react-spectrum/s2'; +import {baseColor, focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'}; +import {CloseButton, Content, Heading, IllustratedMessage, SearchField, Tag, TagGroup, TextContext} from '@react-spectrum/s2'; import {ComponentCardItem, ComponentCardView} from './ComponentCardView'; -import {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components'; import {getLibraryFromPage} from './library'; import {type Library, TAB_DEFS} from './constants'; // eslint-disable-next-line monorepo/no-internal-import import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults'; +import {OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps, Tab as RACTab, TabList as RACTabList, TabPanel as RACTabPanel, TabPanelProps as RACTabPanelProps, TabProps as RACTabProps, Tabs as RACTabs, SelectionIndicator, TabRenderProps} from 'react-aria-components'; import type {PageProps} from '@parcel/rsc'; -import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; -import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; - +import React, {ReactNode, useCallback, useEffect, useMemo, useRef, useState} from 'react'; +import {useId} from '@react-aria/utils'; interface MobileDialogProps extends Omit { size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover', @@ -38,10 +38,156 @@ const dialogStyle = style({ maxSize: 'inherit' }); +// Mobile tabs styles - horizontal layout with scrolling +const mobileTabsWrapper = style({ + position: 'relative', + display: 'flex', + flexDirection: 'column', + font: 'ui' +}); + +const mobileTabListContainer = style({ + position: 'sticky', + top: 0, + zIndex: 2, + backgroundColor: 'layer-2' +}); + +const mobileTabListWrapper = style({ + position: 'relative', + display: 'flex', + alignItems: 'center', + gap: 8 +}); + +const mobileTabList = style({ + display: 'flex', + flexDirection: 'row', + gap: 8, + paddingX: 12, + paddingY: 8, + overflow: 'auto', + flexGrow: 1, + scrollbarWidth: 'none', + '::-webkit-scrollbar': { + display: 'none' + } +}); + +const mobileTab = style({ + ...focusRing(), + display: 'flex', + gap: 8, + color: { + default: baseColor('neutral-subdued'), + isSelected: baseColor('neutral'), + forcedColors: { + isSelected: 'Highlight' + } + }, + borderRadius: 'sm', + paddingX: 12, + paddingY: 8, + alignItems: 'center', + position: 'relative', + cursor: 'default', + flexShrink: 0, + transition: 'default', + disableTapHighlight: true, + whiteSpace: 'nowrap', + fontSize: 'body', + fontWeight: { + default: 'normal', + isSelected: 'medium' + } +}); + +const mobileSelectionIndicator = style({ + position: 'absolute', + left: 0, + bottom: 0, + width: 'full', + height: 2, + backgroundColor: { + default: 'neutral', + forcedColors: 'Highlight' + }, + borderStyle: 'none', + borderRadius: 'full', + transition: '[translate, width, height]' +}); + +const mobileTabPanel = style({ + ...focusRing(), + flexGrow: 1, + display: 'flex', + flexDirection: 'column', + outlineStyle: 'none' +}); + +const stickySearchContainer = style({ + width: 'full', + position: 'sticky', + top: 64, + zIndex: 1, + backgroundColor: 'layer-2', + display: 'flex', + flexDirection: 'column', + gap: 8, + paddingTop: 8 +}); + +function MobileTab(props: Omit & {children: ReactNode}) { + let contentId = useId(); + return ( + mobileTab(renderProps)}> + + {props.children} + + + + ); +} + +interface MobileTabListProps { + children: ReactNode +} + +function MobileTabList({children}: MobileTabListProps) { + return ( +
    +
    + + {children} + +
    +
    + +
    +
    + ); +} + +function MobileTabPanel(props: Omit & {children: ReactNode}) { + return ( + + {props.children} + + ); +} + export function MobileSearchMenu({pages, currentPage}) { return ( - ); @@ -56,24 +202,18 @@ const MobileCustomDialog = function MobileCustomDialog(props: MobileDialogProps) - {composeRenderProps(props.children, (children) => ( - - {children} - - ))} + {props.children} ); }; function MobileNav({pages, currentPage}: PageProps) { + let overlayTriggerState = React.useContext(OverlayTriggerStateContext); let [searchFocused, setSearchFocused] = useState(false); let [searchValue, setSearchValue] = useState(''); let [selectedSection, setSelectedSection] = useState(undefined); let prevSearchWasEmptyRef = useRef(true); - let headerRef = useRef(null); let scrollContainerRef = useRef(null); - let tabListRef = useRef(null); - let [tabListHeight, setTabListHeight] = useState(0); let [selectedLibrary, setSelectedLibrary] = useState(getLibraryFromPage(currentPage)); let getSectionsForLibrary = useCallback((libraryId: string) => { @@ -106,7 +246,7 @@ function MobileNav({pages, currentPage}: PageProps) { useEffect(() => { - // Auto-select first section initially or when library changes + // Auto-select first section initially or when library changes if (currentLibrarySectionArray.length > 0 && !selectedSection) { setSelectedSection(currentLibrarySectionArray[0]); } @@ -119,20 +259,8 @@ function MobileNav({pages, currentPage}: PageProps) { } }, [selectedLibrary, currentLibrarySectionArray, searchFocused]); - useEffect(() => { - let measure = () => { - if (tabListRef.current) { - setTabListHeight(tabListRef.current.getBoundingClientRect().height); - } - }; - - measure(); - window.addEventListener('resize', measure); - return () => window.removeEventListener('resize', measure); - }, [selectedLibrary]); - let getOrderedLibraries = () => { - let allLibraries = (Object.keys(TAB_DEFS) as Library[]).map(id => ({id, label: TAB_DEFS[id].label})); + let allLibraries = (Object.keys(TAB_DEFS) as Library[]).map(id => ({id, label: TAB_DEFS[id].label, icon: TAB_DEFS[id].icon})); let currentLibId = getLibraryFromPage(currentPage); // Move current library to first position @@ -170,9 +298,30 @@ function MobileNav({pages, currentPage}: PageProps) { } let searchLower = searchValue.toLowerCase(); - return pages.filter(page => { + + // Filter items where name or tags start with search value + let matchedPages = pages.filter(page => { let pageTitle = title(page).toLowerCase(); - return pageTitle.includes(searchLower); + let nameMatch = pageTitle.startsWith(searchLower); + let tags: string[] = page.exports?.tags || []; + let tagMatch = tags.some(tag => tag.toLowerCase().startsWith(searchLower)); + return nameMatch || tagMatch; + }); + + // Sort to prioritize name matches over tag matches + return matchedPages.sort((a, b) => { + let aNameMatch = title(a).toLowerCase().startsWith(searchLower); + let bNameMatch = title(b).toLowerCase().startsWith(searchLower); + + if (aNameMatch && !bNameMatch) { + return -1; + } + if (!aNameMatch && bNameMatch) { + return 1; + } + + // If both match by name or both match by tag, maintain original order + return 0; }); }; @@ -200,10 +349,30 @@ function MobileNav({pages, currentPage}: PageProps) { if (!section) { return []; } + let items: ComponentCardItem[] = []; if (section === 'all') { - return getAllContent(libraryId, searchValue); + items = getAllContent(libraryId, searchValue); + } else { + items = getSectionContent(section, libraryId, searchValue); } - return getSectionContent(section, libraryId, searchValue); + + // Sort to show "Introduction" first when search is empty + if (searchValue.trim().length === 0) { + items = [...items].sort((a, b) => { + const aIsIntro = a.name === 'Introduction'; + const bIsIntro = b.name === 'Introduction'; + + if (aIsIntro && !bIsIntro) { + return -1; + } + if (!aIsIntro && bIsIntro) { + return 1; + } + return 0; + }); + } + + return items; }; let getSectionNamesForLibrary = (libraryId: string) => { @@ -262,79 +431,87 @@ function MobileNav({pages, currentPage}: PageProps) { // Ensure newly selected section starts at the top of the vertical scroll area scrollContainerRef.current.scrollTo({top: 0, behavior: 'auto'}); } - }, [selectedSection, selectedLibrary]); + }, [selectedSection, selectedLibrary, searchValue]); return (
    - { - let newLib = key as Library; - setSelectedLibrary(newLib); - if (!searchFocused) { - let nextSections = getSectionNamesForLibrary(newLib); - if (nextSections.length > 0) { - setSelectedSection(nextSections[0]); +
    + { + let newLib = key as Library; + setSelectedLibrary(newLib); + if (!searchFocused) { + let nextSections = getSectionNamesForLibrary(newLib); + if (nextSections.length > 0) { + setSelectedSection(nextSections[0]); + } } - } - }} - styles={style({marginX: 12, marginTop: 12})}> -
    - - {libraries.map(library => ( - {library.label} - ))} - -
    - {libraries.map(library => ( - -
    - - - {tag => {tag.name}} - -
    -
    - ( - - - No results - {searchValue.trim().length > 0 ? ( - - No results found for {searchValue} in {selectedLibrary}. - - ) : ( - - No results found in {selectedLibrary}. - - )} - - )} /> -
    -     - ))} - + }}> +
    + + {libraries.map(library => ( + +
    + {library.icon} +
    + {library.label} +     + ))} +     +
    + {libraries.map(library => ( + +
    + +
    + + {tag => {tag.name}} + +
    +
    +
    + { + setSearchValue(''); + overlayTriggerState?.close(); + }} + items={getItemsForSelection(selectedSection, library.id, searchValue)} + ariaLabel="Pages" + size="S" + renderEmptyState={() => ( + + + No results + {searchValue.trim().length > 0 ? ( + + No results found for {searchValue} in {selectedLibrary}. + + ) : ( + + No results found in {selectedLibrary}. + + )} + + )} /> +
    +     + ))} +     +
    ); } diff --git a/packages/dev/s2-docs/src/S2Colors.jsx b/packages/dev/s2-docs/src/S2Colors.tsx similarity index 98% rename from packages/dev/s2-docs/src/S2Colors.jsx rename to packages/dev/s2-docs/src/S2Colors.tsx index fb113e72e9c..8aab16355dc 100644 --- a/packages/dev/s2-docs/src/S2Colors.jsx +++ b/packages/dev/s2-docs/src/S2Colors.tsx @@ -1,6 +1,7 @@ -import {getColorScale, colorSwatch} from './color.macro' with {type: 'macro'}; +import {colorSwatch, getColorScale} from './color.macro' with {type: 'macro'}; +import {Disclosure, DisclosurePanel, DisclosureTitle} from '@react-spectrum/s2'; +import React from 'react'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; -import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2'; export function S2Colors() { return ( @@ -135,7 +136,7 @@ export function S2Colors() { function ColorScale({scale}) { return scale.map(([name, className]) => ( - )) + )); } function Color({name, className}) { @@ -177,5 +178,5 @@ export function IconColors() { - ) + ); } diff --git a/packages/dev/s2-docs/src/S2StyleProperties.jsx b/packages/dev/s2-docs/src/S2StyleProperties.jsx deleted file mode 100644 index 0dfad843340..00000000000 --- a/packages/dev/s2-docs/src/S2StyleProperties.jsx +++ /dev/null @@ -1,53 +0,0 @@ -import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; - -const Code = ({children}) => {children}; - -export function S2StyleProperties() { - return ( -
      -
    • margin
      • -
    • marginStart
      • -
    • marginEnd
      • -
    • marginTop
      • -
    • marginBottom
      • -
    • marginX
      • -
    • marginY
      • -
    • width
      • -
    • minWidth
      • -
    • maxWidth
      • -
    • flexGrow
      • -
    • flexShrink
      • -
    • flexBasis
      • -
    • justifySelf
      • -
    • alignSelf
      • -
    • order
      • -
    • gridArea
      • -
    • gridRow
      • -
    • gridRowStart
      • -
    • gridRowEnd
      • -
    • gridColumn
      • -
    • gridColumnStart
      • -
    • gridColumnEnd
      • -
    • position
      • -
    • zIndex
      • -
    • top
      • -
    • bottom
      • -
    • inset
      • -
    • insetX
      • -
    • insetY
      • -
    • insetStart
      • -
    • insetEnd
      • -
    - ); -} diff --git a/packages/dev/s2-docs/src/S2StyleProperties.tsx b/packages/dev/s2-docs/src/S2StyleProperties.tsx new file mode 100644 index 00000000000..3ccd5057c7e --- /dev/null +++ b/packages/dev/s2-docs/src/S2StyleProperties.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; + +const Code = ({children}) => {children}; + +export function S2StyleProperties({properties}: {properties: string[]}) { + return ( +
      + {properties.map(property => ( +
    • {property}
      • + ))} +
    + ); +} diff --git a/packages/dev/s2-docs/src/S2Typography.jsx b/packages/dev/s2-docs/src/S2Typography.tsx similarity index 88% rename from packages/dev/s2-docs/src/S2Typography.jsx rename to packages/dev/s2-docs/src/S2Typography.tsx index f55a0cfd07b..b490cda231b 100644 --- a/packages/dev/s2-docs/src/S2Typography.jsx +++ b/packages/dev/s2-docs/src/S2Typography.tsx @@ -1,12 +1,14 @@ +import React from 'react'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; + const Strong = ({children}) => {children}; export function S2Typography() { return ( <>

    There are several different type scales.

    -
      +
      • UI – use within interactive UI components.
      • Body – use for the content of pages that are primarily text.
      • Heading – use for headings in content pages.
        • @@ -25,7 +27,7 @@ export function S2Typography() { }, justifyContent: 'space-between' })}> -
          +
          • ui-xs
          • ui-sm
          • ui
            • @@ -34,7 +36,7 @@ export function S2Typography() {
          • ui-2xl
          • ui-3xl
          -
            +
            • body-2xs
            • body-xs
            • body-sm
              • @@ -44,7 +46,7 @@ export function S2Typography() {
            • body-2xl
            • body-3xl
            -
              +
              • heading-2xs
              • heading-xs
              • heading-sm
                • @@ -54,7 +56,7 @@ export function S2Typography() {
              • heading-2xl
              • heading-3xl
              -
                +
                • title-xs
                • title-sm
                • title
                  • @@ -63,13 +65,13 @@ export function S2Typography() {
                • title-2xl
                • title-3xl
                -
                  +
                  • detail-sm
                  • detail
                  • detail-lg
                  • detail-xl
                  -
                    +
                    • code-sm
                    • code
                    • code-lg
                      • diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx index e5b58c6abfe..e49cd6ff416 100644 --- a/packages/dev/s2-docs/src/SearchMenu.tsx +++ b/packages/dev/s2-docs/src/SearchMenu.tsx @@ -1,7 +1,7 @@ 'use client'; import {ActionButton, Content, Heading, IllustratedMessage, SearchField, Tag, TagGroup} from '@react-spectrum/s2'; -import {Autocomplete, AutocompleteProps, Dialog, Key, OverlayTriggerStateContext, Provider, useFilter} from 'react-aria-components'; +import {Autocomplete, Dialog, Key, OverlayTriggerStateContext, Provider} from 'react-aria-components'; import Close from '@react-spectrum/s2/icons/Close'; import {ComponentCardView} from './ComponentCardView'; import {getLibraryFromPage, getLibraryFromUrl} from './library'; @@ -55,6 +55,15 @@ export function SearchMenu(props: SearchMenuProps) { const searchRef = useRef | null>(null); + // Auto-focus search field when menu opens + // We don't put autoFocus on the SearchField because it will cause a flicker when switching tabs + useEffect(() => { + const timer = setTimeout(() => { + searchRef.current?.focus(); + }, 0); + return () => clearTimeout(timer); + }, []); + // Transform pages data into component data structure const transformedComponents = useMemo(() => { if (!pages || !Array.isArray(pages)) { @@ -67,12 +76,14 @@ export function SearchMenu(props: SearchMenuProps) { const name = page.url.replace(/^\//, '').replace(/\.html$/, ''); const title = page.tableOfContents?.[0]?.title || name; const section: string = (page.exports?.section as string) || 'Components'; + const tags: string[] = (page.exports?.tags as string[]) || []; return { id: name, name: title, href: page.url, - section + section, + tags }; }); @@ -118,21 +129,54 @@ export function SearchMenu(props: SearchMenuProps) { prevSearchWasEmptyRef.current = isEmpty; }, [searchValue]); - let {contains} = useFilter({sensitivity: 'base'}); - - const filter: NonNullable['filter']> = React.useCallback((textValue, inputValue) => { - return textValue != null && contains(textValue, inputValue); - }, [contains]); - let filteredComponents = useMemo(() => { if (!searchValue) { return sections; } - return sections.map(section => ({ - ...section, - children: section.children.filter(item => contains(item.name, searchValue)) - })).filter(section => section.children.length > 0); - }, [sections, searchValue, contains]); + + const searchLower = searchValue.toLowerCase(); + const allItems = sections.flatMap(section => section.children); + + // Filter items where name or tags start with search value + const matchedItems = allItems.filter(item => { + const nameMatch = item.name.toLowerCase().startsWith(searchLower); + const tagMatch = item.tags.some(tag => tag.toLowerCase().startsWith(searchLower)); + return nameMatch || tagMatch; + }); + + // Sort to prioritize name matches over tag matches + const sortedItems = matchedItems.sort((a, b) => { + const aNameMatch = a.name.toLowerCase().startsWith(searchLower); + const bNameMatch = b.name.toLowerCase().startsWith(searchLower); + + if (aNameMatch && !bNameMatch) { + return -1; + } + if (!aNameMatch && bNameMatch) { + return 1; + } + + // If both match by name or both match by tag, maintain original order + return 0; + }); + + const resultsBySection = new Map(); + + sortedItems.forEach(item => { + const section = item.section || 'Components'; + if (!resultsBySection.has(section)) { + resultsBySection.set(section, []); + } + resultsBySection.get(section)!.push(item); + }); + + return sections + .map(section => ({ + ...section, + children: resultsBySection.get(section.name) || [] + })) + .filter(section => section.children.length > 0); + }, [sections, searchValue]); const tags = useMemo(() => { if (searchValue.trim().length > 0) { @@ -142,13 +186,6 @@ export function SearchMenu(props: SearchMenuProps) { return sections; }, [searchValue, sections]); - let handleSearchFieldKeyDown = React.useCallback((e: React.KeyboardEvent) => { - if (e.key === 'Escape' && !searchValue.trim()) { - e.preventDefault(); - onClose(); - } - }, [onClose, searchValue]); - const handleTabSelectionChange = React.useCallback((key: Key) => { if (searchValue) { setSearchValue(''); @@ -172,10 +209,30 @@ export function SearchMenu(props: SearchMenuProps) { }, []); const selectedItems = useMemo(() => { + let items: typeof transformedComponents = []; if (searchValue.trim().length > 0 && selectedSectionId === 'all') { - return filteredComponents.flatMap(s => s.children) || []; + items = filteredComponents.flatMap(s => s.children) || []; + } else { + items = (filteredComponents.find(s => s.id === selectedSectionId)?.children) || []; + } + + // Sort to show "Introduction" first when search is empty + if (searchValue.trim().length === 0) { + items = [...items].sort((a, b) => { + const aIsIntro = a.name === 'Introduction'; + const bIsIntro = b.name === 'Introduction'; + + if (aIsIntro && !bIsIntro) { + return -1; + } + if (!aIsIntro && bIsIntro) { + return 1; + } + return 0; + }); } - return (filteredComponents.find(s => s.id === selectedSectionId)?.children) || []; + + return items; }, [filteredComponents, selectedSectionId, searchValue]); const selectedSectionName = useMemo(() => { @@ -214,11 +271,9 @@ export function SearchMenu(props: SearchMenuProps) { {orderedTabs.map((tab, i) => ( - +
                      { +export const InternationalizedLogo = ({size = 32}) => { return ( + viewBox="15 17 135 128" + style={{width: size, height: size}}> { +export const ReactAriaLogo = ({size = 32}) => { return ( - + ` to perform a custom action when the item is pressed. This example adds a "Create" action for the current input value. + +```tsx example +function Example() { + let [inputValue, setInputValue] = React.useState(''); + + return ( + + {/*- begin highlight -*/} + {inputValue.length > 0 && ( + alert('Creating ' + inputValue)}> + {`Create "${inputValue}"`} + + )} + {/*- end highlight -*/} + Aardvark + Cat + Dog + Kangaroo + Panda + Snake + + ); +} +``` + ## Links -By default, interacting with an item in a ComboBox selects it and updates the input value. Alternatively, items may be links to another page or website. This can be achieved by passing the `href` prop to the `` component. Interacting with link items navigates to the provided URL and does not update the selection or input value. +Items may be links to another page or website. This can be achieved by passing the `href` prop to the `` component. Interacting with link items navigates to the provided URL and does not update the selection or input value. ```tsx example diff --git a/packages/react-aria-components/docs/Modal.mdx b/packages/react-aria-components/docs/Modal.mdx index eabc05c0d27..ef3f090acca 100644 --- a/packages/react-aria-components/docs/Modal.mdx +++ b/packages/react-aria-components/docs/Modal.mdx @@ -422,12 +422,21 @@ A `Modal` can be targeted with the `.react-aria-Modal` CSS selector, or by overr By default, `Modal` includes a builtin `ModalOverlay`, which renders a backdrop over the page when a modal is open. This can be targeted using the `.react-aria-ModalOverlay` CSS selector. To customize the `ModalOverlay` with a different class name or other attributes, render a `ModalOverlay` and place a `Modal` inside. -The `--visual-viewport-height` CSS custom property will be set on the `ModalOverlay`, which you can use to set the height to account for the virtual keyboard on mobile. +The `--page-height` and `--visual-viewport-height` CSS custom property will be set on the `ModalOverlay`, the latter of which you can use to set the height of the Modal to account for the virtual keyboard on mobile. ```css render=false .react-aria-ModalOverlay { + position: absolute; + height: var(--page-height); +} + +.react-aria-Modal { + /* Center modal without adding a extra wrapping div. */ position: fixed; - height: var(--visual-viewport-height); + max-height: var(--visual-viewport-height); + top: calc(var(--visual-viewport-height) / 2); + left: 50%; + translate: -50% -50%; } ``` diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts index dc9bdfb3909..dd3d1db5a38 100644 --- a/packages/react-aria-components/src/index.ts +++ b/packages/react-aria-components/src/index.ts @@ -45,7 +45,7 @@ export {Header, HeaderContext} from './Header'; export {Heading} from './Heading'; export {Input, InputContext} from './Input'; export {Section, CollectionRendererContext, DefaultCollectionRenderer} from './Collection'; -export {Collection, createLeafComponent as UNSTABLE_createLeafComponent, createBranchComponent as UNSTABLE_createBranchComponent, CollectionBuilder as UNSTABLE_CollectionBuilder} from '@react-aria/collections'; +export {Collection, createLeafComponent, createBranchComponent, CollectionBuilder} from '@react-aria/collections'; export {Keyboard, KeyboardContext} from './Keyboard'; export {Label, LabelContext} from './Label'; export {Link, LinkContext} from './Link'; diff --git a/yarn.config.cjs b/yarn.config.cjs index 2ae1ddeedab..87fc6cd0c17 100644 --- a/yarn.config.cjs +++ b/yarn.config.cjs @@ -55,7 +55,7 @@ function enforceConsistentDependenciesAcrossTheProject({Yarn}) { workspace.set('dependencies.@swc/helpers', '^0.5.0'); workspace.set('dependencies.@adobe/spectrum-css-temp'); - if (workspace.ident.startsWith('@react-spectrum') && !workspace.ident.endsWith('/utils')) { + if (workspace.ident.startsWith('@react-spectrum') && !workspace.ident.endsWith('/utils') && !workspace.ident.endsWith('/mcp')) { workspace.set('devDependencies.@adobe/spectrum-css-temp', '3.0.0-alpha.1'); } // these should not be in dependencies, but should be in dev or peer diff --git a/yarn.lock b/yarn.lock index 04e951a25b3..641355725e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7211,7 +7211,6 @@ __metadata: version: 0.0.0-use.local resolution: "@react-spectrum/mcp@workspace:packages/dev/mcp" dependencies: - "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@modelcontextprotocol/sdk": "npm:^1.17.3" "@swc/helpers": "npm:^0.5.0" fast-glob: "npm:^3.3.3"