Reorganize React Aria Components docs (#4999)

Author: devongovett

packages/@react-spectrum/combobox/docs/ComboBox.mdx

@@ -130,13 +130,14 @@ function Example() {
       <ComboBox
         label="Adobe product (Uncontrolled)"
         defaultItems={options}
-        defaultInputValue={"Adobe XD"}>
+        defaultInputValue="Adobe XD">
         {item => <Item>{item.name}</Item>}
       </ComboBox>
 
       <ComboBox
         label="Pick an Adobe product (Controlled)"
-        defaultItems={options} inputValue={value}
+        defaultItems={options}
+        inputValue={value}
         onInputChange={setValue}>
         {item => <Item>{item.name}</Item>}
       </ComboBox>

packages/dev/docs/pages/assets/component-illustrations/Collections.svg

@@ -37,7 +37,7 @@ import {ToC} from './ToC';
 import typographyStyles from '@adobe/spectrum-css-temp/components/typography/vars.css';
 import {VersionBadge} from './VersionBadge';
 
-const ENABLE_PAGE_TYPES = false;
+const ENABLE_PAGE_TYPES = true;
 const INDEX_RE = /^(?:[^/]+\/)?index\.html$/;
 const TLD = 'react-spectrum.adobe.com';
 const HERO = {

packages/dev/docs/pages/assets/component-illustrations/InternationalizedDate.svg

@@ -667,6 +667,11 @@ h2.sectionHeader {
   margin-bottom: 8px;
 }
 
+h3.sectionHeader.sectionHeader,
+h4.sectionHeader.sectionHeader  {
+  margin-top: 2em;
+}
+
 .anchor {
   opacity: 0;
   transition: all 125ms ease-in-out;

packages/dev/docs/pages/assets/component-illustrations/Selection.svg

@@ -21,6 +21,7 @@ import {Divider} from '@react-spectrum/divider';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
 import {Keyboard} from '@react-spectrum/text';
 import Link from '@react-spectrum/docs/pages/assets/component-illustrations/Link.svg';
+import Collections from '@react-spectrum/docs/pages/assets/component-illustrations/Collections.svg';
 
 ---
 category: Navigation
@@ -147,11 +148,29 @@ parent pages of the current page. Each of these parent links can be clicked, tap
 triggered via the <Keyboard>Enter</Keyboard> key to navigate to that page. Optionally, breadcrumbs can be used
 in place of a page title, in which case the last breadcrumb acts as a heading.
 
+```tsx
+import {Breadcrumbs, Item, Link, Heading} from 'react-aria-components';
+
+<Breadcrumbs>
+  <Item><Link /></Item>
+  <Item><Heading /></Item>
+</Breadcrumbs>
+```
+
 ### Concepts
 
 `Breadcrumbs` makes use of the following concepts:
 
-* [Collections](../react-stately/collections.html)
+<section className={styles.cardGroup} data-size="small">
+
+<ExampleCard
+  url="../react-stately/collections.html"
+  title="Collections"
+  description="Defining collections of items, async loading, and updating items over time.">
+  <Collections />
+</ExampleCard>
+
+</section>
 
 ### Composed components
 
@@ -168,69 +187,7 @@ in place of a page title, in which case the last breadcrumb acts as a heading.
 
 </section>
 
-## Props
-
-<PropTable component={docs.exports.Breadcrumbs} links={docs.links} />
-
-## Styling
-
-React Aria components can be styled in many ways, including using CSS classes, inline styles, utility classes (e.g. Tailwind), CSS-in-JS (e.g. Styled Components), etc. By default, all components include a builtin `className` attribute which can be targeted using CSS selectors. These follow the `react-aria-ComponentName` naming convention.
-
-```css
-.react-aria-Breadcrumbs {
-  /* ... */
-}
-```
-
-A custom `className` can also be specified on any component. This overrides the default `className` provided by React Aria with your own.
-
-```jsx
-<Breadcrumbs className="my-breadcrumbs">
-  {/* ... */}
-</Breadcrumbs>
-```
-
-In addition, some components support multiple UI states (e.g. focused, placeholder, readonly, etc.). React Aria components expose states using data attributes, which you can target in CSS selectors. For example:
-
-```css
-.react-aria-Link[data-current] {
-  /* ... */
-}
-```
-
-The `className` and `style` props also accept functions which receive states for styling. This lets you dynamically determine the classes or styles to apply, which is useful when using utility CSS libraries like [Tailwind](https://tailwindcss.com/).
-
-```jsx
-<Link className={({isCurrent}) => isCurrent ? 'bg-gray-700' : 'bg-gray-600'} />
-```
-
-The states, selectors, and render props for all components used in `Breadcrumbs` are documented below.
-
-### Breadcrumbs
-
-`Breadcrumbs` can be targed with the `.react-aria-Breadcrumbs` CSS selector, or by overriding with a custom `className`. It is rendered as a `<nav>` element, and contains an `<ol>` element representing the list of items. This additional element can be targed with the `ol` selector.
-
-```css render=false
-.react-aria-Breadcrumbs {
-  & ol {
-    /* ... */
-  }
-}
-```
-
-### Item
-
-An `Item` can be targeted with the `.react-aria-Item` CSS selector, or by overriding with a custom `className`. It is rendered as an `<li>` element, and should contain a `<Link>` or `<Heading>`. It may also include another element such as a [separator icon](#separator-icons).
-
-### Link
-
-A `Link` can be targeted with the `.react-aria-Link` CSS selector, or by overriding with a custom `className`. It clones its only child element (e.g. `<a>`) and adds additional props, which should be passed through to the underlying DOM node. If only text is provided, it is rendered as a `<span>`. Links support the following states and render props:
-
-<StateTable properties={docs.exports.LinkRenderProps.properties} />
-
-## Usage
-
-### Dynamic collections
+## Content
 
 `Breadcrumbs` follows the [Collection Components API](../react-stately/collections.html), accepting both static and dynamic collections.
 The examples above show static collections, which can be used when the full list of options is known ahead of time. Dynamic collections,
@@ -259,7 +216,7 @@ function Example() {
 }
 ```
 
-### Heading
+## Heading
 
 The last breadcrumb may be used as a heading for the page by placing a `<Heading>` element within the `<Item>` instead of a `<Link>`. By default, this is an `h3` element, but this can be changed with the `level` prop on the `Heading`.
 
@@ -273,7 +230,7 @@ import {Heading} from 'react-aria-components';
 </Breadcrumbs>
 ```
 
-### Router links
+## Router links
 
 The `<Link>` component can wrap a custom link element provided by a router like [React Router](https://reactrouter.com/en/main).
 
@@ -286,7 +243,7 @@ import {Link as RouterLink} from 'react-router-dom';
 </Breadcrumbs>
 ```
 
-### Separator icons
+## Separator icons
 
 The above examples use the CSS `:after` pseudo class to add separators between each item. These may also be DOM elements instead, e.g. SVG icons. Be sure that they have `aria-hidden="true"` so they are hidden from assistive technologies.
 
@@ -315,7 +272,7 @@ import ChevronIcon from '@spectrum-icons/workflow/ChevronDoubleRight';
 
 </details>
 
-### Disabled
+## Disabled
 
 Breadcrumbs can be disabled using the `isDisabled` prop. This indicates that navigation is not currently available. When a breadcrumb is disabled, `onPress` will not be triggered, navigation will not occur, and links will be marked as `aria-disabled` for assistive technologies.
 
@@ -337,6 +294,66 @@ Individual breadcrumbs can also be disabled by passing the `isDisabled` prop to
 </Breadcrumbs>
 ```
 
+## Props
+
+<PropTable component={docs.exports.Breadcrumbs} links={docs.links} />
+
+## Styling
+
+React Aria components can be styled in many ways, including using CSS classes, inline styles, utility classes (e.g. Tailwind), CSS-in-JS (e.g. Styled Components), etc. By default, all components include a builtin `className` attribute which can be targeted using CSS selectors. These follow the `react-aria-ComponentName` naming convention.
+
+```css
+.react-aria-Breadcrumbs {
+  /* ... */
+}
+```
+
+A custom `className` can also be specified on any component. This overrides the default `className` provided by React Aria with your own.
+
+```jsx
+<Breadcrumbs className="my-breadcrumbs">
+  {/* ... */}
+</Breadcrumbs>
+```
+
+In addition, some components support multiple UI states (e.g. focused, placeholder, readonly, etc.). React Aria components expose states using data attributes, which you can target in CSS selectors. For example:
+
+```css
+.react-aria-Link[data-current] {
+  /* ... */
+}
+```
+
+The `className` and `style` props also accept functions which receive states for styling. This lets you dynamically determine the classes or styles to apply, which is useful when using utility CSS libraries like [Tailwind](https://tailwindcss.com/).
+
+```jsx
+<Link className={({isCurrent}) => isCurrent ? 'bg-gray-700' : 'bg-gray-600'} />
+```
+
+The states, selectors, and render props for all components used in `Breadcrumbs` are documented below.
+
+### Breadcrumbs
+
+`Breadcrumbs` can be targed with the `.react-aria-Breadcrumbs` CSS selector, or by overriding with a custom `className`. It is rendered as a `<nav>` element, and contains an `<ol>` element representing the list of items. This additional element can be targed with the `ol` selector.
+
+```css render=false
+.react-aria-Breadcrumbs {
+  & ol {
+    /* ... */
+  }
+}
+```
+
+### Item
+
+An `Item` can be targeted with the `.react-aria-Item` CSS selector, or by overriding with a custom `className`. It is rendered as an `<li>` element, and should contain a `<Link>` or `<Heading>`. It may also include another element such as a [separator icon](#separator-icons).
+
+### Link
+
+A `Link` can be targeted with the `.react-aria-Link` CSS selector, or by overriding with a custom `className`. It clones its only child element (e.g. `<a>`) and adds additional props, which should be passed through to the underlying DOM node. If only text is provided, it is rendered as a `<span>`. Links support the following states and render props:
+
+<StateTable properties={docs.exports.LinkRenderProps.properties} />
+
 ## Advanced customization
 
 ### Contexts