diff --git a/Makefile b/Makefile index e72170a0147..ffd71f5e5a1 100644 --- a/Makefile +++ b/Makefile @@ -156,6 +156,7 @@ build-s2-docs: yarn workspace @react-spectrum/s2-docs generate:og REGISTRY_URL=$(PUBLIC_URL)/registry node scripts/buildRegistry.mjs REGISTRY_URL=$(PUBLIC_URL)/registry yarn build:s2-docs --public-url $(PUBLIC_URL) + node scripts/createFeedS2.mjs mkdir -p $(DIST_DIR) mv packages/dev/s2-docs/dist/* $(DIST_DIR) mkdir -p $(DIST_DIR)/registry diff --git a/package.json b/package.json index f77ecdaec3e..d3420e1df55 100644 --- a/package.json +++ b/package.json @@ -185,6 +185,7 @@ "recast": "^0.23", "recursive-readdir": "^2.2.2", "regenerator-runtime": "0.13.3", + "rehype-stringify": "^9.0.4", "rimraf": "^6.0.1", "sharp": "^0.33.5", "storybook": "^8.6.14", diff --git a/packages/@react-spectrum/s2/src/Content.tsx b/packages/@react-spectrum/s2/src/Content.tsx index e7086d4a568..662dff0a2a2 100644 --- a/packages/@react-spectrum/s2/src/Content.tsx +++ b/packages/@react-spectrum/s2/src/Content.tsx @@ -24,7 +24,12 @@ interface ContentProps extends UnsafeStyles, SlotProps { children: ReactNode, styles?: StyleString, isHidden?: boolean, - id?: string + id?: string, + itemProp?: string, + itemScope?: boolean, + itemType?: string, + itemID?: string, + itemRef?: string } interface HeadingProps extends Omit { diff --git a/packages/dev/docs/pages/assets/rtl-actual-placeholder.svg b/packages/dev/docs/pages/assets/rtl-actual-placeholder.svg index f5ff855aafb..3cbbf951f0b 100644 --- a/packages/dev/docs/pages/assets/rtl-actual-placeholder.svg +++ b/packages/dev/docs/pages/assets/rtl-actual-placeholder.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/dev/docs/pages/assets/rtl-timefield.svg b/packages/dev/docs/pages/assets/rtl-timefield.svg index ea621765b97..35ab77640e8 100644 --- a/packages/dev/docs/pages/assets/rtl-timefield.svg +++ b/packages/dev/docs/pages/assets/rtl-timefield.svg @@ -1,4 +1,4 @@ - + Incorrect (he-IL) diff --git a/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx index 2794f68a93d..df70de58d99 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx +++ b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx @@ -75,7 +75,9 @@ export function ColorEditorExample() { padding: { default: 12, lg: 24 - } + }, + maxWidth: '--text-width', + marginX: 'auto' })}> {({color}) => ( diff --git a/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx b/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx index 2114063e38d..f34749333b6 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx +++ b/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx @@ -120,7 +120,6 @@ export function SubmenuAnimation(): JSX.Element { className={style({ backgroundColor: 'layer-1', borderRadius: 'xl', - marginY: 32, padding: { default: 12, lg: 24 diff --git a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx index db256aee4e8..fad57e3c933 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx @@ -16,7 +16,6 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; import React from 'react'; -import {Byline} from '../../../src/BlogList'; import {ColorEditorExample} from './ColorEditorExample'; export const hideNav = true; @@ -29,7 +28,6 @@ export const section = 'Blog'; export const isSubpage = true; # Accessible Color Descriptions for Improved Color Pickers - Recently, we released a suite of color picker components in React Aria and React Spectrum. These components help users choose a color in various ways, including a 2D [ColorArea](../ColorArea.html), channel-based [ColorSlider](../ColorSlider.html), circular [ColorWheel](../ColorWheel.html), preset [ColorSwatchPicker](../ColorSwatchPicker.html), and a hex value [ColorField](../ColorField.html). You can compose these individual pieces together to create a full [ColorPicker](../ColorPicker.html) with whatever custom layout or configuration you need. diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx index 689c04abd07..4f4caff2327 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx @@ -16,7 +16,6 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; import React from 'react'; -import {Byline} from '../../../src/BlogList'; export const hideNav = true; export const tags = ['react aria', 'react spectrum', 'react', 'spectrum', 'interactions', 'button', 'touch']; @@ -28,7 +27,6 @@ export const section = 'Blog'; export const isSubpage = true; # Building a Button Part 1: Press Events - UI development is really hard. While building components has become much easier with modern UI frameworks like React, handling interactions across devices and supporting proper accessibility and internationalization is still extraordinarily difficult. Building UIs has a very [long tail](https://en.wikipedia.org/wiki/Long_tail): it's fairly easy to get the basics for a given component working, but there are many details to consider, and these add up to a majority of the work. diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx index 260b201ccf0..55394c6e9ed 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx @@ -15,7 +15,6 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; import React from 'react'; -import {Byline} from '../../../src/BlogList'; export const hideNav = true; export const tags = ['react aria', 'react spectrum', 'react', 'interactions', 'button', 'touch', 'hover', 'web development', 'javascript', 'css']; @@ -27,7 +26,6 @@ export const section = 'Blog'; export const isSubpage = true; # Building a Button Part 2: Hover Interactions - This is the second post in our three part series on building a button component. In the [first post](building-a-button-part-1.html), we covered how React Spectrum and React Aria implement adaptive press events across mouse, touch, keyboard, and screen readers. Today, we'll cover hover interactions. diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx index fa696c101b3..d30bcc62e88 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx @@ -15,7 +15,6 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; import React from 'react'; -import {Byline} from '../../../src/BlogList'; export const hideNav = true; export const tags = ['react aria', 'react spectrum', 'react', 'interactions', 'button', 'keyboard', 'focus', 'web development', 'javascript', 'css']; @@ -27,7 +26,6 @@ export const section = 'Blog'; export const isSubpage = true; # Building a Button Part 3: Keyboard Focus Behavior - This is the last post in our three part series on building a button component. In the [first post](building-a-button-part-1.html), we covered how React Spectrum and React Aria implement adaptive press events across mouse, touch, keyboard, and screen readers. In the [second post](building-a-button-part-2.html), we covered hover interactions. Today, we'll cover keyboard focus behavior. diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx index 165ce6d7250..ca6f56e6074 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx @@ -19,7 +19,6 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; import React from 'react'; -import {Byline} from '../../../src/BlogList'; export const hideNav = true; export const tags = ['combobox', 'accessibility', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch']; @@ -31,7 +30,6 @@ export const section = 'Blog'; export const isSubpage = true; # Creating an accessible autocomplete experience - After many months of research, development, and extensive testing across browsers, devices, and assistive technology, we're excited to announce that the React Spectrum [ComboBox](../../s2/ComboBox.html) component and React Aria [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) hook are now available! We've focused on the following areas to help you build quality autocomplete experiences. diff --git a/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx b/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx index ddf143f1433..b49c8240a21 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx @@ -17,7 +17,6 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; import React from 'react'; -import {Byline} from '../../../src/BlogList'; export const hideNav = true; export const tags = ['react aria', 'react spectrum', 'react', 'spectrum', 'interactions', 'submenu', 'pointer']; @@ -29,7 +28,6 @@ export const section = 'Blog'; export const isSubpage = true; # Creating a pointer-friendly submenu experience - We are excited to announce support of submenus in the latest release of [React Spectrum](../../s2/Menu.html#submenus) and [React Aria](../Menu.html#submenus)! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the way. diff --git a/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx b/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx index d949f021ff2..9908aebd1e4 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx @@ -18,7 +18,6 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; import React from 'react'; -import {Byline} from '../../../src/BlogList'; import {DateField, RangeCalendar} from '@react-spectrum/s2'; import {today, getLocalTimeZone} from '@internationalized/date'; import RangeCalendarExample from './RangeCalendarExample'; @@ -34,7 +33,6 @@ export const section = 'Blog'; export const isSubpage = true; # Date and Time Pickers for All - We are very excited to announce the release of the [React Aria](https://react-spectrum.adobe.com/react-aria/useNumberField.html) and [React Spectrum](../../s2/DatePicker.html) date and time picker components! This includes a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes [@internationalized/date](../../internationalized/date/index.html), a brand new framework-agnostic library for locale-aware date and time manipulation. diff --git a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx index ce7b80f9b79..316a3001653 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx @@ -22,7 +22,6 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; import React from 'react'; -import {Byline} from '../../../src/BlogList'; export const hideNav = true; export const tags = ['drag and drop', 'dnd', 'components', 'accessibility', 'keyboard', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch']; @@ -34,7 +33,6 @@ export const section = 'Blog'; export const isSubpage = true; # Taming the dragon: Accessible drag and drop - We are excited to announce the release of drag and drop support in [React Aria](../dnd.html) and [React Spectrum](../../s2/dnd.html)! This includes a suite of hooks for implementing drag and drop interactions, with support for both mouse and touch, as well as full parity for keyboard and screen reader input. We've designed these hooks with the following features in mind: @@ -59,7 +57,9 @@ After years of research, development, and extensive testing across many devices Drag and drop starts with a drag source, implemented using the [useDrag](../useDrag.html) hook, which provides data to be dragged. Multiple items can be dragged at once, and each item can include several representations in different data formats so that they can be dropped in many compatible locations. The [useDrop](../useDrop.html) hook can be used to implement a drop target, which accepts dragged items containing specific data types. - +
+ +
For mouse and touch screen users, React Aria uses the native [HTML drag and drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) under the hood. This means items can be dragged within the browser window, between browser windows, or even outside the browser into external native applications (e.g. email programs). External items such as files or directories from the user's device may also be dragged in. @@ -82,7 +82,7 @@ All of these accessibility features are implemented behind the scenes using the Collection components such as lists or tables are treated as a single drop target, so that users can easily tab past them to get to the next drop target without going through every item. Within a droppable collection, keys such as `ArrowDown` and `ArrowUp` can be used to select a drop position, such as on the collection itself, on an item, or between items. Drop indicator elements may be added between items to show the user where dropped data will be inserted, and include accessibility labels such as "Insert between item A and item B".
-
+
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx b/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx index aab5a684550..c6f7b191a37 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx @@ -19,7 +19,6 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; import React from 'react'; -import {Byline} from '../../../src/BlogList'; import {NumberField} from '@react-spectrum/s2'; export const hideNav = true; @@ -32,7 +31,6 @@ export const section = 'Blog'; export const isSubpage = true; # How we internationalized our number field - Number fields are commonly used form components, but are frequently not a great user experience. They often lack support for advanced formatting, such as currency and unit values, and do not provide a localized experience for users around the world. In this post, we'll discuss how we approached building our number field component with support for formatting and internationalization in mind. diff --git a/packages/dev/s2-docs/pages/react-aria/blog/index.mdx b/packages/dev/s2-docs/pages/react-aria/blog/index.mdx index afaa1cca139..dd6e3fcb049 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/index.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/index.mdx @@ -8,7 +8,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */} import {Layout} from '../../../src/Layout'; -import {BlogList} from '../../../src/BlogList'; +import {PostList} from '../../../src/PostList'; export default Layout; @@ -17,8 +17,9 @@ export const section = 'Blog'; export const title = 'Blog'; export const hideFromSearch = true; export const tags = ['blog', 'articles', 'posts']; +export const isPostList = true; # Blog - page.name.startsWith('react-aria/blog/') && !page.name.endsWith('index.html')) ?? []} /> + page.name.startsWith('react-aria/blog/') && !page.name.endsWith('index.html')) ?? []} /> diff --git a/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx b/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx index d11503ebaee..9f0f2912ed1 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx @@ -18,7 +18,6 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; import React from 'react'; -import {Byline} from '../../../src/BlogList'; export const hideNav = true; export const tags = ['date picker', 'date', 'time', 'calendar', 'components', 'accessibility', 'react spectrum', 'react', 'spectrum']; @@ -30,7 +29,6 @@ export const section = 'Blog'; export const isSubpage = true; # Improving Internationalization Support in Our Date and Time Components - Internationalization is a core feature of our Date and Time components. We support 13 different calendar systems as well as locale-specific formatting, number systems, and 12 and 24 hour time. However, we identified an issue in our support for several right-to-left (RTL) languages where in some, the format of the date and time fields was incorrect. While investigating this bug, we faced several challenges in ensuring accurate date and time representation in RTL languages and implemented various strategies that we'd like to share. diff --git a/packages/dev/s2-docs/pages/react-aria/examples/crud.mdx b/packages/dev/s2-docs/pages/react-aria/examples/crud.mdx index a95ecbf1479..c1520d9b46e 100644 --- a/packages/dev/s2-docs/pages/react-aria/examples/crud.mdx +++ b/packages/dev/s2-docs/pages/react-aria/examples/crud.mdx @@ -8,6 +8,7 @@ import {ExampleApp} from '../../../src/ExampleApp'; import {ComponentList} from '../../../src/ComponentCard'; export const hideNav = true; +export const isSubpage = true; export const section = 'Examples'; export const keywords = ['react-aria', 'example', 'table', 'search', 'filters', 'taggroup', 'actions', 'form', 'menu', 'popover', 'searchfield', 'dropzone', 'crud']; export const description = 'Table with search, filters, column resizing, and form validation.'; diff --git a/packages/dev/s2-docs/pages/react-aria/examples/emoji-picker.mdx b/packages/dev/s2-docs/pages/react-aria/examples/emoji-picker.mdx index e0867069831..05b9e2648a3 100644 --- a/packages/dev/s2-docs/pages/react-aria/examples/emoji-picker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/examples/emoji-picker.mdx @@ -4,6 +4,7 @@ export default Layout; import {ComponentList} from '../../../src/ComponentCard'; export const hideNav = true; +export const isSubpage = true; export const section = 'Examples'; export const keywords = ['react-aria', 'example', 'select', 'popover', 'autocomplete', 'search', 'searchfield', 'virtualizer', 'listbox']; export const description = 'With autocomplete, virtualized scrolling, and keyboard navigation.'; diff --git a/packages/dev/s2-docs/pages/react-aria/examples/index.mdx b/packages/dev/s2-docs/pages/react-aria/examples/index.mdx index 7d7bb8bdba7..202a3363822 100644 --- a/packages/dev/s2-docs/pages/react-aria/examples/index.mdx +++ b/packages/dev/s2-docs/pages/react-aria/examples/index.mdx @@ -4,6 +4,7 @@ export default Layout; export const section = 'Overview'; export const hideFromSearch = true; export const title = 'Examples'; +export const isPostList = true; # Examples diff --git a/packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx b/packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx index cb9cbac4b31..545494c7ead 100644 --- a/packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx +++ b/packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx @@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css'; import {ComponentList} from '../../../src/ComponentCard'; export const hideNav = true; +export const isSubpage = true; export const section = 'Examples'; export const keywords = ['react-aria', 'example', 'gridlist', 'gesture', 'framer motion', 'tailwind']; export const description = 'A GridList with Framer Motion swipe gestures and layout animations.'; diff --git a/packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx b/packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx index 8f4a7984ba6..27348081c72 100644 --- a/packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx +++ b/packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx @@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css'; import {ComponentList} from '../../../src/ComponentCard'; export const hideNav = true; +export const isSubpage = true; export const section = 'Examples'; export const keywords = ['react-aria', 'example', 'gridlist', 'kanban', 'drag and drop', 'tailwind']; export const description = 'A kanban board with accessible drag and drop, styled with Tailwind CSS.'; diff --git a/packages/dev/s2-docs/pages/react-aria/examples/photos.mdx b/packages/dev/s2-docs/pages/react-aria/examples/photos.mdx index c1c7a744713..d1463b67e33 100644 --- a/packages/dev/s2-docs/pages/react-aria/examples/photos.mdx +++ b/packages/dev/s2-docs/pages/react-aria/examples/photos.mdx @@ -6,6 +6,7 @@ import {ExampleApp} from '../../../src/ExampleApp'; import {ComponentList} from '../../../src/ComponentCard'; export const hideNav = true; +export const isSubpage = true; export const section = 'Examples'; export const keywords = ['react-aria', 'example', 'gridlist', 'autocomplete', 'searchfield', 'virtualizer', 'view transition', 'tree', 'selection', 'drag and drop', 'slider']; export const description = 'Virtualized photo grid, view transitions, folder tree, search, and drag and drop.'; diff --git a/packages/dev/s2-docs/pages/react-aria/examples/ripple-button.mdx b/packages/dev/s2-docs/pages/react-aria/examples/ripple-button.mdx index a5f4cb02242..fdec2c85b16 100644 --- a/packages/dev/s2-docs/pages/react-aria/examples/ripple-button.mdx +++ b/packages/dev/s2-docs/pages/react-aria/examples/ripple-button.mdx @@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css'; import {ComponentList} from '../../../src/ComponentCard'; export const hideNav = true; +export const isSubpage = true; export const section = 'Examples'; export const keywords = ['react-aria', 'example', 'button', 'tailwind']; export const description = 'A button with an animated ripple effect styled with Tailwind CSS.'; diff --git a/packages/dev/s2-docs/pages/react-aria/examples/sheet.mdx b/packages/dev/s2-docs/pages/react-aria/examples/sheet.mdx index 14f22ae7bd6..10f888d7247 100644 --- a/packages/dev/s2-docs/pages/react-aria/examples/sheet.mdx +++ b/packages/dev/s2-docs/pages/react-aria/examples/sheet.mdx @@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css'; import {ComponentList} from '../../../src/ComponentCard'; export const hideNav = true; +export const isSubpage = true; export const section = 'Examples'; export const keywords = ['react-aria', 'example', 'dialog', 'modal', 'sheet', 'motion', 'tailwind']; export const description = 'An iOS-style gesture driven modal sheet built with Framer Motion.'; diff --git a/packages/dev/s2-docs/pages/react-aria/examples/swipeable-tabs.mdx b/packages/dev/s2-docs/pages/react-aria/examples/swipeable-tabs.mdx index b0639e51ff4..57fc6c3c085 100644 --- a/packages/dev/s2-docs/pages/react-aria/examples/swipeable-tabs.mdx +++ b/packages/dev/s2-docs/pages/react-aria/examples/swipeable-tabs.mdx @@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css'; import {ComponentList} from '../../../src/ComponentCard'; export const hideNav = true; +export const isSubpage = true; export const section = 'Examples'; export const keywords = ['react-aria', 'example', 'tabs', 'tailwind']; export const description = 'With CSS scroll snapping, scroll-driven animations, and anchor positioning.'; diff --git a/packages/dev/s2-docs/pages/react-aria/index.mdx b/packages/dev/s2-docs/pages/react-aria/index.mdx index 1d8ea951a54..7bc8eef1ec3 100644 --- a/packages/dev/s2-docs/pages/react-aria/index.mdx +++ b/packages/dev/s2-docs/pages/react-aria/index.mdx @@ -49,9 +49,9 @@ export const hideFromSearch = true; dangerouslySetInnerHTML={{__html: JSON.stringify( { '@context': 'http://schema.org', - '@type': 'Article', + '@type': 'WebPage', author: 'Adobe Inc', - headline: 'React Aria', + name: 'React Aria', description: 'Craft world-class accessible components with custom styles.', image: ogImage, publisher: { diff --git a/packages/dev/s2-docs/pages/react-aria/releases/index.mdx b/packages/dev/s2-docs/pages/react-aria/releases/index.mdx index d9478e971c2..f10e1b48439 100644 --- a/packages/dev/s2-docs/pages/react-aria/releases/index.mdx +++ b/packages/dev/s2-docs/pages/react-aria/releases/index.mdx @@ -8,7 +8,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */} import {Layout} from '../../../src/Layout'; -import {ReleasesList} from '../../../src/ReleasesList'; +import {PostList} from '../../../src/PostList'; export default Layout; export const hideNav = true; @@ -16,7 +16,10 @@ export const section = 'Releases'; export const tags = ['changelog', 'versions', 'updates']; export const title = 'Releases'; export const hideFromSearch = true; +export const isPostList = true; # Releases - page.name.includes('react-aria') && page.name.includes('releases') && !page.name.includes('index.html')) ?? []} /> + page.name.includes('react-aria') && page.name.includes('releases') && !page.name.includes('index.html')) ?? []} /> + +For all previous releases, see the [Archived releases](https://react-spectrum.adobe.com/releases/index.html) page. diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx index 5f7a1811a0f..4f113cc3894 100644 --- a/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx +++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx @@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout'; export default Layout; import docs from 'docs:@react-spectrum/s2'; -import {Time} from '../../../src/ReleasesList'; export const hideNav = true; export const section = 'Releases'; @@ -22,7 +21,6 @@ export const description = 'In this release, we\'re promoting React Aria Compone export const isSubpage = true; # v1.0.0 -