diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx index bb602fb235f..13dc782f735 100644 --- a/docs/content/ActionList.mdx +++ b/docs/content/ActionList.mdx @@ -14,7 +14,7 @@ import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react' import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code' import DeprecationBanner from '../components/DeprecationBanner' - + diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx index 582ea6eced5..243fd67b978 100644 --- a/docs/content/ActionMenu.mdx +++ b/docs/content/ActionMenu.mdx @@ -13,7 +13,7 @@ import data from '../../src/ActionMenu/ActionMenu.docs.json' import {Box, Avatar, ActionList, ActionMenu} from '@primer/react' import DeprecationBanner from '../components/DeprecationBanner' - +
diff --git a/docs/content/AnchoredOverlay.mdx b/docs/content/AnchoredOverlay.mdx index a3c2de115c5..d025974d46a 100644 --- a/docs/content/AnchoredOverlay.mdx +++ b/docs/content/AnchoredOverlay.mdx @@ -10,7 +10,7 @@ import data from '../../src/AnchoredOverlay/AnchoredOverlay.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor. The overlay can be opened and navigated using keyboard or mouse. diff --git a/docs/content/Autocomplete.mdx b/docs/content/Autocomplete.mdx index 09ad025b3b2..4667d822702 100644 --- a/docs/content/Autocomplete.mdx +++ b/docs/content/Autocomplete.mdx @@ -11,7 +11,7 @@ import data from '../../src/Autocomplete/Autocomplete.docs.json' import {Autocomplete} from '@primer/react' import DeprecationBanner from '../components/DeprecationBanner' - + The `Autocomplete` component is comprised of an `Autocomplete.Input` component that a user types into, and a `Autocomplete.Menu` component that displays the list of selectable values. diff --git a/docs/content/Avatar.mdx b/docs/content/Avatar.mdx index 4cebeb4bb92..718561b978b 100644 --- a/docs/content/Avatar.mdx +++ b/docs/content/Avatar.mdx @@ -9,7 +9,7 @@ import data from '../../src/Avatar/Avatar.docs.json' import {Avatar, Box} from '@primer/react' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Avatar} from '@primer/react' diff --git a/docs/content/AvatarPair.mdx b/docs/content/AvatarPair.mdx index 9d55f63c61d..6fe658244e8 100644 --- a/docs/content/AvatarPair.mdx +++ b/docs/content/AvatarPair.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/AvatarPair import data from '../../src/AvatarPair/AvatarPair.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {AvatarPair} from '@primer/react' diff --git a/docs/content/AvatarStack.mdx b/docs/content/AvatarStack.mdx index 25e03bf6fad..ca326e378a8 100644 --- a/docs/content/AvatarStack.mdx +++ b/docs/content/AvatarStack.mdx @@ -11,7 +11,7 @@ import data from '../../src/AvatarStack/AvatarStack.docs.json' import {AvatarStack} from '@primer/react' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {AvatarStack} from '@primer/react' diff --git a/docs/content/Box.mdx b/docs/content/Box.mdx index 1f87e187200..1fdc7fdcd18 100644 --- a/docs/content/Box.mdx +++ b/docs/content/Box.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Box.tsx import data from '../../src/Box/Box.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Box} from '@primer/react' diff --git a/docs/content/BranchName.mdx b/docs/content/BranchName.mdx index 434c336ae4f..41f5bbee151 100644 --- a/docs/content/BranchName.mdx +++ b/docs/content/BranchName.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/BranchName/BranchName.tsx import data from '../../src/BranchName/BranchName.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {BranchName} from '@primer/react' diff --git a/docs/content/Breadcrumbs.mdx b/docs/content/Breadcrumbs.mdx index 75dc045480d..d4459aad7a8 100644 --- a/docs/content/Breadcrumbs.mdx +++ b/docs/content/Breadcrumbs.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Breadcrumbs/Breadcrumbs.ts import data from '../../src/Breadcrumbs/Breadcrumbs.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Breadcrumbs} from '@primer/react' diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx index 638c7a303f6..1730d875a56 100644 --- a/docs/content/Button.mdx +++ b/docs/content/Button.mdx @@ -10,7 +10,7 @@ description: Use button for the main actions on a page or form. import data from '../../src/Button/Button.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Button} from '@primer/react' diff --git a/docs/content/ButtonGroup.mdx b/docs/content/ButtonGroup.mdx index de12cceb89b..67f447d6c3f 100644 --- a/docs/content/ButtonGroup.mdx +++ b/docs/content/ButtonGroup.mdx @@ -9,7 +9,7 @@ storybook: '/react/storybook?path=/story/components-buttongroup--default' import data from '../../src/ButtonGroup/ButtonGroup.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {ButtonGroup} from '@primer/react' diff --git a/docs/content/Checkbox.mdx b/docs/content/Checkbox.mdx index a834915c95d..7c140f7def5 100644 --- a/docs/content/Checkbox.mdx +++ b/docs/content/Checkbox.mdx @@ -10,7 +10,7 @@ componentId: checkbox import data from '../../src/Checkbox/Checkbox.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/CheckboxGroup.mdx b/docs/content/CheckboxGroup.mdx index dce9e417ed7..0bdef56a2ed 100644 --- a/docs/content/CheckboxGroup.mdx +++ b/docs/content/CheckboxGroup.mdx @@ -13,7 +13,7 @@ import {CheckboxGroup, Checkbox, Box} from '@primer/components' import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/CircleBadge.mdx b/docs/content/CircleBadge.mdx index 587a95e1755..6dfd355eecb 100644 --- a/docs/content/CircleBadge.mdx +++ b/docs/content/CircleBadge.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/CircleBadge import data from '../../src/CircleBadge/CircleBadge.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {CircleBadge} from '@primer/react' diff --git a/docs/content/CounterLabel.mdx b/docs/content/CounterLabel.mdx index 5e79ac1a4a9..e79d3eb7838 100644 --- a/docs/content/CounterLabel.mdx +++ b/docs/content/CounterLabel.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/CounterLabel/CounterLabel. import data from '../../src/CounterLabel/CounterLabel.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Example diff --git a/docs/content/Details.mdx b/docs/content/Details.mdx index c81f1f91b7d..92689216bb0 100644 --- a/docs/content/Details.mdx +++ b/docs/content/Details.mdx @@ -9,7 +9,7 @@ storybook: '/react/storybook/?path=/story/components-details--default' import data from '../../src/Details/Details.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + `Details` is a styled `details` element for use with the `useDetails` hook. The `useDetails` hook returns the `open` state, a `setOpen` function to manually change the open state, and **`getDetailsProps` which must be spread onto your `Details` element in order for `Details` to get receive the proper behaviors provided by the hook**. See [Kent Dodd's article on this pattern](https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters). diff --git a/docs/content/Dialog.mdx b/docs/content/Dialog.mdx index 88a9e6d0e3d..d277c4baef9 100644 --- a/docs/content/Dialog.mdx +++ b/docs/content/Dialog.mdx @@ -7,7 +7,7 @@ source: https://github.com/primer/react/blob/main/src/Dialog import data from '../../src/Dialog.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + The dialog component is used for all modals. It renders on top of the rest of the app with an overlay. diff --git a/docs/content/Flash.mdx b/docs/content/Flash.mdx index 52bf91e3fb7..6cf5c0ba9b9 100644 --- a/docs/content/Flash.mdx +++ b/docs/content/Flash.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/Flash import data from '../../src/Flash/Flash.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Flash} from '@primer/react' diff --git a/docs/content/FormControl.mdx b/docs/content/FormControl.mdx index c57363c5c49..0e2c07d21b7 100644 --- a/docs/content/FormControl.mdx +++ b/docs/content/FormControl.mdx @@ -24,7 +24,7 @@ import { Text, } from '@primer/react' - + ## Examples diff --git a/docs/content/Header.mdx b/docs/content/Header.mdx index d0a5ab1fafc..b89cb38d84f 100644 --- a/docs/content/Header.mdx +++ b/docs/content/Header.mdx @@ -9,7 +9,7 @@ componentId: header import data from '../../src/Header/Header.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/Heading.mdx b/docs/content/Heading.mdx index 10b8a07b875..62f0c47de4e 100644 --- a/docs/content/Heading.mdx +++ b/docs/content/Heading.mdx @@ -10,7 +10,7 @@ componentId: heading import data from '../../src/Heading/Heading.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + The Heading component will render an html `h2` tag without any default styling. Other heading level elements `h1-h6` are available through use of the `as` prop (see [System Props](/system-props) for additional explanation). Please reference the [w3 recommendations for headings](https://www.w3.org/WAI/tutorials/page-structure/headings/) to ensure your headings provide an accessible experience for screen reader users. diff --git a/docs/content/IconButton.mdx b/docs/content/IconButton.mdx index b5c35cdc2c2..10c24327d46 100644 --- a/docs/content/IconButton.mdx +++ b/docs/content/IconButton.mdx @@ -10,7 +10,7 @@ description: An accessible button component with no text and only icon. import data from '../../src/Button/IconButton.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Usage diff --git a/docs/content/Label.mdx b/docs/content/Label.mdx index 7a04b9def31..81e919cb902 100644 --- a/docs/content/Label.mdx +++ b/docs/content/Label.mdx @@ -10,7 +10,7 @@ description: Use Label components to add contextual metadata to a design. import data from '../../src/Label/Label.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/LabelGroup.mdx b/docs/content/LabelGroup.mdx index a1bc35754cc..a440d7f9f24 100644 --- a/docs/content/LabelGroup.mdx +++ b/docs/content/LabelGroup.mdx @@ -9,7 +9,7 @@ componentId: label_group import data from '../../src/LabelGroup/LabelGroup.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Example diff --git a/docs/content/Link.mdx b/docs/content/Link.mdx index a43c1892756..4b200526a8c 100644 --- a/docs/content/Link.mdx +++ b/docs/content/Link.mdx @@ -9,7 +9,7 @@ storybook: '/react/storybook/?path=/story/components-link--default' import data from '../../src/Link/Link.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + The Link component styles anchor tags with default hyperlink color cues and hover text decoration. `Link` is used for destinations, or moving from one page to another. diff --git a/docs/content/NavList.mdx b/docs/content/NavList.mdx index 364fd555758..b4a08fa6635 100644 --- a/docs/content/NavList.mdx +++ b/docs/content/NavList.mdx @@ -10,7 +10,7 @@ storybook: '/react/storybook/?path=/story/components-navlist--simple' import data from '../../src/NavList/NavList.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {NavList} from '@primer/react' diff --git a/docs/content/Overlay.mdx b/docs/content/Overlay.mdx index 05a4124100d..c26208e62c5 100644 --- a/docs/content/Overlay.mdx +++ b/docs/content/Overlay.mdx @@ -10,7 +10,7 @@ storybook: '/react/storybook?path=/story/private-components-overlay--dropdown-ov import data from '../../src/Overlay/Overlay.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Overlay} from '@primer/react' diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx index cd3e4909c63..90933a779d0 100644 --- a/docs/content/PageLayout.mdx +++ b/docs/content/PageLayout.mdx @@ -11,7 +11,7 @@ a11yReviewed: true import data from '../../src/PageLayout/PageLayout.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {PageLayout} from '@primer/react' diff --git a/docs/content/Pagehead.md b/docs/content/Pagehead.md index 422cb7eb89a..5493d53f168 100644 --- a/docs/content/Pagehead.md +++ b/docs/content/Pagehead.md @@ -9,7 +9,7 @@ status: Alpha import data from '../../src/Pagehead/Pagehead.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Pagehead} from '@primer/react' diff --git a/docs/content/Pagination.md b/docs/content/Pagination.md index c92b3936764..f10d9f4fb83 100644 --- a/docs/content/Pagination.md +++ b/docs/content/Pagination.md @@ -12,7 +12,7 @@ import data from '../../src/Pagination/Pagination.docs.json' import State from '../components/State' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Pagination} from '@primer/react' diff --git a/docs/content/PointerBox.mdx b/docs/content/PointerBox.mdx index c834b422936..a25d0d0ebf7 100644 --- a/docs/content/PointerBox.mdx +++ b/docs/content/PointerBox.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/PointerBox import data from '../../src/PointerBox/PointerBox.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/Popover.md b/docs/content/Popover.md index 827fac62dee..b5f4d622110 100644 --- a/docs/content/Popover.md +++ b/docs/content/Popover.md @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Popover import data from '../../src/Popover/Popover.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Popover} from '@primer/react' diff --git a/docs/content/ProgressBar.mdx b/docs/content/ProgressBar.mdx index af1ba92caf9..d563b137f6e 100644 --- a/docs/content/ProgressBar.mdx +++ b/docs/content/ProgressBar.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/ProgressBar import data from '../../src/ProgressBar/ProgressBar.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {ProgressBar} from '@primer/react' diff --git a/docs/content/Radio.mdx b/docs/content/Radio.mdx index a8cd818773f..095794fc792 100644 --- a/docs/content/Radio.mdx +++ b/docs/content/Radio.mdx @@ -10,7 +10,7 @@ storybook: '/react/storybook?path=/story/components-forms-radiogroup' import data from '../../src/Radio/Radio.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/RadioGroup.mdx b/docs/content/RadioGroup.mdx index b3ccf8a3f24..03e14e1c267 100644 --- a/docs/content/RadioGroup.mdx +++ b/docs/content/RadioGroup.mdx @@ -13,7 +13,7 @@ import {RadioGroup, Radio, Box} from '@primer/components' import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/RelativeTime.mdx b/docs/content/RelativeTime.mdx index 432c8ce56d0..d0ce4156286 100644 --- a/docs/content/RelativeTime.mdx +++ b/docs/content/RelativeTime.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/RelativeTime import data from '../../src/RelativeTime/RelativeTime.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {RelativeTime} from '@primer/react' diff --git a/docs/content/SegmentedControl.mdx b/docs/content/SegmentedControl.mdx index 1015ef1e4e0..2b68e4fedaf 100644 --- a/docs/content/SegmentedControl.mdx +++ b/docs/content/SegmentedControl.mdx @@ -10,7 +10,7 @@ storybook: '/react/storybook/?path=/story/components-segmentedcontrol' import data from '../../src/SegmentedControl/SegmentedControl.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + diff --git a/docs/content/Select.mdx b/docs/content/Select.mdx index 972c204c960..e9af0a3d76b 100644 --- a/docs/content/Select.mdx +++ b/docs/content/Select.mdx @@ -13,7 +13,7 @@ import data from '../../src/Select/Select.docs.json' import {Select, Text} from '@primer/react' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx index 6861ab13ef6..c7bdf3e7ab7 100644 --- a/docs/content/SelectPanel.mdx +++ b/docs/content/SelectPanel.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/SelectPanel import data from '../../src/SelectPanel/SelectPanel.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + A `SelectPanel` provides an anchor that will open an overlay with a list of selectable items, and a text input to filter the selectable items diff --git a/docs/content/Spinner.mdx b/docs/content/Spinner.mdx index faaecc2e53d..d128cfb2843 100644 --- a/docs/content/Spinner.mdx +++ b/docs/content/Spinner.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Spinner/Spinner.tsx import data from '../../src/Spinner/Spinner.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```jsx live diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx index d9b500ae643..2f717c3fe0f 100644 --- a/docs/content/SplitPageLayout.mdx +++ b/docs/content/SplitPageLayout.mdx @@ -11,7 +11,7 @@ a11yReviewed: true import data from '../../src/SplitPageLayout/SplitPageLayout.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {SplitPageLayout} from '@primer/react' diff --git a/docs/content/StateLabel.mdx b/docs/content/StateLabel.mdx index c9ebc0e6172..46524e9222a 100644 --- a/docs/content/StateLabel.mdx +++ b/docs/content/StateLabel.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/tree/main/src/StateLabel import data from '../../src/StateLabel/StateLabel.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/SubNav.mdx b/docs/content/SubNav.mdx index 414736fd76f..9aa7fd15d38 100644 --- a/docs/content/SubNav.mdx +++ b/docs/content/SubNav.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/SubNav import data from '../../src/SubNav/SubNav.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + **Attention:** Make sure to properly label your `SubNav` with an `aria-label` to provide context about the type of navigation contained in `SubNav`. diff --git a/docs/content/TabNav.mdx b/docs/content/TabNav.mdx index 5d8b78a72a6..12d6df799d3 100644 --- a/docs/content/TabNav.mdx +++ b/docs/content/TabNav.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/TabNav import data from '../../src/TabNav/TabNav.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + **Attention:** Make sure to properly label your `TabNav` with an `aria-label` to provide context about the type of navigation contained in `TabNav`. diff --git a/docs/content/Text.mdx b/docs/content/Text.mdx index ce565b5e73c..b74665c8928 100644 --- a/docs/content/Text.mdx +++ b/docs/content/Text.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Text import data from '../../src/Text/Text.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + The Text component is a wrapper component that will apply typography styles to the text inside. diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index 962c9dca719..adc99462668 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -9,7 +9,7 @@ storybook: '/react/storybook?path=/story/components-forms-textinput--default' import data from '../../src/TextInput/TextInput.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + TextInput is a form component to add default styling to the native text input. diff --git a/docs/content/Textarea.mdx b/docs/content/Textarea.mdx index cbc0060791b..123227b5d3e 100644 --- a/docs/content/Textarea.mdx +++ b/docs/content/Textarea.mdx @@ -12,7 +12,7 @@ import data from '../../src/Textarea/Textarea.docs.json' import {Textarea} from '@primer/react' import DeprecationBanner from '../components/DeprecationBanner' - +