diff --git a/.changeset/blue-gorillas-lie.md b/.changeset/blue-gorillas-lie.md new file mode 100644 index 00000000000..b6268336b63 --- /dev/null +++ b/.changeset/blue-gorillas-lie.md @@ -0,0 +1,7 @@ +--- +'@primer/react': major +--- + +Update styled-components and related dependencies to v5.x + + diff --git a/.changeset/clever-wolves-move.md b/.changeset/clever-wolves-move.md new file mode 100644 index 00000000000..05364569593 --- /dev/null +++ b/.changeset/clever-wolves-move.md @@ -0,0 +1,8 @@ +--- +'@primer/react': major +--- + +Remove components from deprecated +- `BorderBox`, `ChoiceFieldset`, `Flex`, `Grid`, `Position`, `Dropdown`, `FormGroup`, `SelectMenu`, `InputField`, `Label` + + diff --git a/.changeset/early-timers-speak.md b/.changeset/early-timers-speak.md new file mode 100644 index 00000000000..41ccecac220 --- /dev/null +++ b/.changeset/early-timers-speak.md @@ -0,0 +1,43 @@ +--- +'@primer/react': major +--- + +Remove components from draft bundle + +* Move UnderlineNav2 (draft) to the main bundle + +```diff +- import {UnderlineNav} from '@primer/react/drafts' ++ import {UnderlineNav} from '@primer/react' +``` + +.... +* Remove TreeView from drafts + +```diff +- import {TreeView} from '@primer/react/drafts' ++ import {TreeView} from '@primer/react' +``` + +* Remove SegmentedControl from drafts + +```diff +- import {SegmentedControl} from '@primer/react/drafts' ++ import {SegmentedControl} from '@primer/react' +``` + +* Remove NavList from drafts + +```diff +- import {NavList} from '@primer/react/drafts' ++ import {NavList} from '@primer/react' +``` + +* Remove SplitPageLayout from drafts + +```diff +- import {SplitPageLayout} from '@primer/react/drafts' ++ import {SplitPageLayout} from '@primer/react' +``` + + diff --git a/.changeset/few-rocks-run.md b/.changeset/few-rocks-run.md new file mode 100644 index 00000000000..4a4276a6e9f --- /dev/null +++ b/.changeset/few-rocks-run.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Fixes type errors that appeared during v36 development. Likely caused by Button updates diff --git a/.changeset/flat-onions-sort.md b/.changeset/flat-onions-sort.md new file mode 100644 index 00000000000..50ba08cfec0 --- /dev/null +++ b/.changeset/flat-onions-sort.md @@ -0,0 +1,7 @@ +--- +"@primer/react": major +--- + +- Changes `leadingIcon` and `trailingIcon` to `leadingVisual` and `trailingVisual` +- Removes `Button.Counter` as a child component, replacing it with a `count` prop. This change allows us to use the `trailingVisual` slot for counters. +- Removes the `outline` button variant as we wish to only support `invisible` buttons. diff --git a/.changeset/great-spies-deliver.md b/.changeset/great-spies-deliver.md new file mode 100644 index 00000000000..3a8005ec2ef --- /dev/null +++ b/.changeset/great-spies-deliver.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Remove deprecated `extralarge` variant from `Token` and `TextInputWithToken` component diff --git a/.changeset/kind-readers-grab.md b/.changeset/kind-readers-grab.md new file mode 100644 index 00000000000..9d4356c9a2c --- /dev/null +++ b/.changeset/kind-readers-grab.md @@ -0,0 +1,7 @@ +--- +"@primer/react": major +--- + +Remove StyledOcticon component. The component was renamed to `Octicon`. Update your imports by swapping `StyledOcticon` with `Octicon` + + diff --git a/.changeset/lemon-dancers-marry.md b/.changeset/lemon-dancers-marry.md new file mode 100644 index 00000000000..5b1d1d8f81f --- /dev/null +++ b/.changeset/lemon-dancers-marry.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Deprecates FilterList and FilteredSearch components diff --git a/.changeset/lovely-windows-juggle.md b/.changeset/lovely-windows-juggle.md new file mode 100644 index 00000000000..59c50d1d53a --- /dev/null +++ b/.changeset/lovely-windows-juggle.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Makes @types/styled-components an optional peer dependency, not a dependency diff --git a/.changeset/lucky-coins-guess.md b/.changeset/lucky-coins-guess.md new file mode 100644 index 00000000000..5862e44ff31 --- /dev/null +++ b/.changeset/lucky-coins-guess.md @@ -0,0 +1,7 @@ +--- +"@primer/react": major +--- + +ConfirmationDialog: Use createRoot instead of ReactDOM.render for React 18 compatibility. + + diff --git a/.changeset/nasty-bottles-draw.md b/.changeset/nasty-bottles-draw.md new file mode 100644 index 00000000000..8ee2c976d5a --- /dev/null +++ b/.changeset/nasty-bottles-draw.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Update minimum version for react and react-dom to v18 diff --git a/.changeset/nine-news-walk.md b/.changeset/nine-news-walk.md new file mode 100644 index 00000000000..c5ae12cd1cb --- /dev/null +++ b/.changeset/nine-news-walk.md @@ -0,0 +1,7 @@ +--- +'@primer/react': major +--- + +Remove `DropdownButton` and `DropdownMenu` from deprecated and update the usages across + + diff --git a/.changeset/odd-socks-hunt.md b/.changeset/odd-socks-hunt.md new file mode 100644 index 00000000000..7843ed2f006 --- /dev/null +++ b/.changeset/odd-socks-hunt.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +The Autocomplete component no longer uses the deprecated ActionList component. There have been minor API updates, but it's largely the same. diff --git a/.changeset/old-coats-sniff.md b/.changeset/old-coats-sniff.md new file mode 100644 index 00000000000..a5ab61e987d --- /dev/null +++ b/.changeset/old-coats-sniff.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Removes 'warning' option from form components' `validationStatus` props diff --git a/.changeset/poor-wasps-stare.md b/.changeset/poor-wasps-stare.md new file mode 100644 index 00000000000..deca619ad6a --- /dev/null +++ b/.changeset/poor-wasps-stare.md @@ -0,0 +1,7 @@ +--- +"@primer/react": patch +--- + +Use IconButton instead of ButtonClose in v1 Dialog. + + diff --git a/.changeset/popular-rivers-warn.md b/.changeset/popular-rivers-warn.md new file mode 100644 index 00000000000..9e94618d6b6 --- /dev/null +++ b/.changeset/popular-rivers-warn.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Remove support for `activeClassName` for Breadcrumb, SubNav, TabNav, UnderlineNav diff --git a/.changeset/shaggy-insects-march.md b/.changeset/shaggy-insects-march.md new file mode 100644 index 00000000000..7aac422843e --- /dev/null +++ b/.changeset/shaggy-insects-march.md @@ -0,0 +1,5 @@ +--- +"@primer/react": major +--- + +Ensure ActionList item has `border-radius` on hover with `full` variant diff --git a/.changeset/weak-jokes-chew.md b/.changeset/weak-jokes-chew.md new file mode 100644 index 00000000000..1c2445cec20 --- /dev/null +++ b/.changeset/weak-jokes-chew.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +FilteredActionList now uses new ActionList as a base, and SelectPanel reflects those changes. diff --git a/.github/workflows/consumer_test.yml b/.github/workflows/consumer_test.yml index d78e1768e27..7520fa698b2 100644 --- a/.github/workflows/consumer_test.yml +++ b/.github/workflows/consumer_test.yml @@ -11,41 +11,33 @@ jobs: steps: - name: Checkout repository uses: actions/checkout@v4 - - name: Set up Node.js uses: actions/setup-node@v4 with: node-version: 18 cache: npm - - # `prepare` is a special case in `npm` and likes to run all the time, even - # with `--ignore-scripts` and even when using `npm link @primer/react - # --ignore-scripts`. This just removes it entirely for the duration of - # this workflow. - - name: Remove "prepare" script - run: npm pkg delete scripts.prepare - - name: Install dependencies run: npm ci - - name: Build run: npm run build - - - name: Install only production dependencies - run: npm ci --production - - - name: Link - run: npm link - - - name: Link and test - id: link-and-test + # Output the artifact as a tarball in `consumer-test`. Write the + # information for this package in `consumer-test/pack.json` so we can read + # from it later to install the package + - name: Create a tarball for the package + run: npm pack --pack-destination consumer-test --json > consumer-test/pack.json + - name: Clean package directory + run: | + npm run clean + rm -rf node_modules + - name: Test + id: test working-directory: consumer-test run: | + # Read the filename for the tarball from `pack.json` + npm install $(jq -r '.[0].filename' pack.json) npm install - npm link @primer/react npm run check - - name: Add annotation - if: failure() && steps.link-and-test.conclusion == 'failure' + if: failure() && steps.test.conclusion == 'failure' run: | echo "::error file=tsconfig.build.json::Test package could not build. See https://github.com/primer/react/blob/main/consumer-test" diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png index 0a9f74e6dda..1340b381d10 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png index a632fc6ab10..abcf8f35379 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png index 5b1086cdf98..4db76445f21 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png index a632fc6ab10..abcf8f35379 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png index f0ee698b533..2f3b3c2c1a6 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png index 63561f06db1..53e18df4a58 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png index a02ee2f5485..87c7eccada7 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png index 09527622b35..44a6c638bd1 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png index f0ee698b533..2f3b3c2c1a6 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png index 4f317231a6d..0716a9fc3cb 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png index eb77c5b2851..41522371feb 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png index 134e6580815..b5f557863cb 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png index 4f317231a6d..0716a9fc3cb 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png deleted file mode 100644 index cbdddbc1c78..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png index e3d5a91a66b..5d9402a7fcc 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png index 56d48dbc00a..a7908879ad1 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png index 857e7d3bc0c..27b289bc580 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-linux.png index e3d5a91a66b..5d9402a7fcc 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png index e3d5a91a66b..5d9402a7fcc 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-colorblind-linux.png index 5762cf818cd..bade62c029e 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png index cd7ea93d91a..bed6d6eb663 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-linux.png index 6eebd6ca8c7..8d898c8f5dc 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png index 5762cf818cd..bade62c029e 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png index 0fcf4df4ad0..c6b0635ca3e 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png index 0e02adb2380..cf8947d662e 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png index e10374f276c..baa24820a11 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png index 538d54243b0..fa339150834 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png index 0fcf4df4ad0..c6b0635ca3e 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png index 8aa88253456..ca56dcbd647 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png index 27c8061077b..7a7209b2679 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png index 33d27f62d66..43fa54019b0 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png index 8aa88253456..ca56dcbd647 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png index f7c33d0d62f..10743f3b5c5 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png index cec0eebef98..8e61cdfdb5b 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png index f554ed4d56a..50a169a1c17 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png index eb82fcdf672..96757c51768 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png index f7c33d0d62f..10743f3b5c5 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png index ba1b65d5281..d484a89b642 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png index 3b5686c4741..0a9407fb292 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png index c589ed4359b..2b0a2f46e66 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png index ba1b65d5281..d484a89b642 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-colorblind-linux.png deleted file mode 100644 index 4dd3808cfe2..00000000000 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-dimmed-linux.png deleted file mode 100644 index 056b04be74c..00000000000 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-dimmed-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-high-contrast-linux.png deleted file mode 100644 index 3e52d73fc21..00000000000 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-linux.png deleted file mode 100644 index 4dd3808cfe2..00000000000 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-tritanopia-linux.png deleted file mode 100644 index 4dd3808cfe2..00000000000 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-colorblind-linux.png deleted file mode 100644 index b1e5d41ff7f..00000000000 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-high-contrast-linux.png deleted file mode 100644 index 59b74e43734..00000000000 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-linux.png deleted file mode 100644 index b1e5d41ff7f..00000000000 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-tritanopia-linux.png deleted file mode 100644 index b1e5d41ff7f..00000000000 Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-colorblind-linux.png similarity index 63% rename from .playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png rename to .playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-colorblind-linux.png index e3f7ea01ccd..1f208684b9d 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-dimmed-linux.png similarity index 68% rename from .playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png rename to .playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-dimmed-linux.png index aa0f3d2ac3a..5616e749096 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-high-contrast-linux.png similarity index 67% rename from .playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png rename to .playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-high-contrast-linux.png index 35074bda2ab..cc51ee2d579 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-linux.png similarity index 63% rename from .playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png rename to .playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-linux.png index e331fe785f4..39831ec8ad0 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-tritanopia-linux.png similarity index 63% rename from .playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-linux.png rename to .playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-tritanopia-linux.png index e3f7ea01ccd..1f208684b9d 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-linux.png and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..00e4c121520 Binary files /dev/null and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-light-high-contrast-linux.png similarity index 68% rename from .playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png rename to .playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-light-high-contrast-linux.png index aa0f3d2ac3a..49a4526a51d 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-light-linux.png similarity index 68% rename from .playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-linux.png rename to .playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-light-linux.png index aa0f3d2ac3a..5438262f449 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-linux.png and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..00e4c121520 Binary files /dev/null and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-colorblind-linux.png new file mode 100644 index 00000000000..1f208684b9d Binary files /dev/null and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-dimmed-linux.png new file mode 100644 index 00000000000..5616e749096 Binary files /dev/null and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-colorblind-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-high-contrast-linux.png similarity index 64% rename from .playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-colorblind-linux.png rename to .playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-high-contrast-linux.png index e3f7ea01ccd..cc51ee2d579 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-colorblind-linux.png and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-linux.png new file mode 100644 index 00000000000..39831ec8ad0 Binary files /dev/null and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-linux.png differ diff --git a/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-tritanopia-linux.png new file mode 100644 index 00000000000..1f208684b9d Binary files /dev/null and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-light-colorblind-linux.png new file mode 100644 index 00000000000..00e4c121520 Binary files /dev/null and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-light-high-contrast-linux.png new file mode 100644 index 00000000000..49a4526a51d Binary files /dev/null and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-light-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-light-linux.png new file mode 100644 index 00000000000..5438262f449 Binary files /dev/null and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-light-linux.png differ diff --git a/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-light-tritanopia-linux.png new file mode 100644 index 00000000000..00e4c121520 Binary files /dev/null and b/.playwright/snapshots/components/Octicon.test.ts-snapshots/Octicon-Playground-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png index 2544604262a..122b3fac8da 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png index 20259a01751..e2e5c20535b 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png index 4fd5240edfc..3a9ee1b4a2e 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png index 860e98764bb..7cd0a615f62 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png index a6cdb08418a..d96ed482ba5 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png index 539c6375f01..f23d0f77b7c 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png index 1fc8a8822d8..b87e3f1c719 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png index df37763aeb4..9e6aaf2805f 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png index a95f82b090a..facc86b63ce 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png index 2544604262a..122b3fac8da 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png index 20259a01751..e2e5c20535b 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png index 4fd5240edfc..3a9ee1b4a2e 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png index 860e98764bb..7cd0a615f62 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png index a6cdb08418a..d96ed482ba5 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png index 539c6375f01..f23d0f77b7c 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png index 1fc8a8822d8..b87e3f1c719 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png index df37763aeb4..9e6aaf2805f 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png index a95f82b090a..facc86b63ce 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png index 6e0888102a6..bb85294eb08 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png index 31eb26852f4..1f8a8ba8573 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png index 87c931248dd..0dd41bd0261 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png index 45147619dda..81bff546325 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png index 396b438b2d9..0aaba0effb4 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png index a3cd82dd771..31541b70283 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png index 0c6964e4a94..7c739735eb3 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png index d7eddf23499..6ea202b82cf 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png index c9f90b217ae..af9b4208bb3 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png index 12420c24b7f..9c354e5c96a 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png index b6b4c11b5e7..cae14c595d0 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png index 9af5cce2051..4e3280c9fc9 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png index 1c45d34c3e2..d669e2bec0f 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png index 8652f5be69f..1ab6c128162 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png index 7da2310b237..01c69bda291 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png index 54f1fcf895b..4eca5fb6d58 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png index 8589749cc9a..1c3155c0a12 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png index 4d52424a967..76274d6df00 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png differ diff --git a/consumer-test/App.tsx b/consumer-test/App.tsx index a34d321edf8..0d947c6888d 100644 --- a/consumer-test/App.tsx +++ b/consumer-test/App.tsx @@ -1,3 +1,4 @@ +import React from 'react' import {Box} from '@primer/react' export default function App() { diff --git a/consumer-test/package.json b/consumer-test/package.json index 41915e5fab5..fd56c86bf03 100644 --- a/consumer-test/package.json +++ b/consumer-test/package.json @@ -3,7 +3,13 @@ "check": "tsc --noEmit" }, "dependencies": { + "@types/react": "^18.2.14", + "@types/react-dom": "^18.2.6", + "@types/styled-components": "^5.1.11", "@primer/react": "*", + "react": "^18.0.0", + "react-dom": "^18.0.0", + "styled-components": "^5.3.11", "typescript": "~4.7.2" } } diff --git a/docs/components/ThemeReferenceTree.js b/docs/components/ThemeReferenceTree.js index 5391eb8d821..a7366b1c5a1 100644 --- a/docs/components/ThemeReferenceTree.js +++ b/docs/components/ThemeReferenceTree.js @@ -1,6 +1,5 @@ import React, {useState} from 'react' -import {Box, Text} from '@primer/react' -import {TreeView} from '@primer/react/drafts' +import {Box, Text, TreeView} from '@primer/react' export default function ThemeReferenceTree({themeData}) { return ( diff --git a/docs/content/Autocomplete.mdx b/docs/content/Autocomplete.mdx index 8ae137f25d5..0e17532b77f 100644 --- a/docs/content/Autocomplete.mdx +++ b/docs/content/Autocomplete.mdx @@ -66,14 +66,14 @@ A function may be passed to the `filterFn` prop if this default filtering behavi { - const [tokens, setTokens] = React.useState([{text: 'zero', id: 0}]) + const [tokens, setTokens] = React.useState([{text: 'zero', id: '0'}]) const selectedTokenIds = tokens.map(token => token.id) const [selectedItemIds, setSelectedItemIds] = React.useState(selectedTokenIds) const onTokenRemove = tokenId => { @@ -125,14 +125,14 @@ const CustomTextInputExample = () => { ) { const [tokens, setTokens] = React.useState([ - {text: 'enhancement', id: 1, fillColor: '#a2eeef'}, - {text: 'bug', id: 2, fillColor: '#d73a4a'}, - {text: 'good first issue', id: 3, fillColor: '#0cf478'}, + {text: 'enhancement', id: '1', fillColor: '#a2eeef'}, + {text: 'bug', id: '2', fillColor: '#d73a4a'}, + {text: 'good first issue', id: '3', fillColor: '#0cf478'}, ]) const selectedTokenIds = tokens.map(token => token.id) const [selectedItemIds, setSelectedItemIds] = React.useState(selectedTokenIds) @@ -239,18 +239,23 @@ const CustomRenderedItemExample = () => { { { { ) ```javascript live noinline const MultiSelect = () => { const items = [ - {text: 'main', id: 0}, - {text: 'autocomplete-tests', id: 1}, - {text: 'a11y-improvements', id: 22}, - {text: 'button-bug-fixes', id: 3}, - {text: 'radio-input-component', id: 4}, - {text: 'release-1.0.0', id: 5}, - {text: 'text-input-implementation', id: 6}, - {text: 'visual-design-tweaks', id: 7}, + {text: 'main', id: '0'}, + {text: 'autocomplete-tests', id: '1'}, + {text: 'a11y-improvements', id: '2'}, + {text: 'button-bug-fixes', id: '3'}, + {text: 'radio-input-component', id: '4'}, + {text: 'release-1.0.0', id: '5'}, + {text: 'text-input-implementation', id: '6'}, + {text: 'visual-design-tweaks', id: '7'}, ] const [selectedItemIds, setSelectedItemIds] = React.useState([]) const onSelectedChange = newlySelectedItems => { @@ -517,14 +522,14 @@ const MultiSelectAddNewItem = () => { } const [localItemsState, setLocalItemsState] = React.useState([ - {text: 'main', id: 0}, - {text: 'autocomplete-tests', id: 1}, - {text: 'a11y-improvements', id: 22}, - {text: 'button-bug-fixes', id: 3}, - {text: 'radio-input-component', id: 4}, - {text: 'release-1.0.0', id: 5}, - {text: 'text-input-implementation', id: 6}, - {text: 'visual-design-tweaks', id: 7}, + {text: 'main', id: '0'}, + {text: 'autocomplete-tests', id: '1'}, + {text: 'a11y-improvements', id: '2'}, + {text: 'button-bug-fixes', id: '3'}, + {text: 'radio-input-component', id: '4'}, + {text: 'release-1.0.0', id: '5'}, + {text: 'text-input-implementation', id: '6'}, + {text: 'visual-design-tweaks', id: '7'}, ]) const getItemById = id => localItemsState.find(item => item.id === id) const [filterVal, setFilterVal] = React.useState('') @@ -628,14 +633,14 @@ export function AutocompleteWithContextInternal() { Danger ``` -### Outline button - -The `outline` variant of `Button` is typically used as a secondary button - -```jsx live - -``` - ### Invisible button The `invisible` variant of `Button` indicates that the action is a low priority one. @@ -71,11 +63,11 @@ It is recommended to use an octicon here. ```jsx live <> - - + - @@ -101,17 +93,12 @@ A separate component called `IconButton` is used if the action shows only an ico ``` -### Counter component +### Button with counter -A common use case for primer is a button with a counter component which shows the child count value. -We provide `Button.Counter` as a composite component which requires you to provide a number as child. -The counter will match the `variant` styles of the parent button. +To show a count value as a trailing visual inside `Button`, pass a value to the `count` prop. The counter will match the `variant` styles of the parent button. ```jsx live - + ``` ### Block button diff --git a/docs/content/FilterList.mdx b/docs/content/FilterList.mdx index 26435fb3a58..cf9eba4cbe5 100644 --- a/docs/content/FilterList.mdx +++ b/docs/content/FilterList.mdx @@ -1,13 +1,16 @@ --- componentId: filter_list title: FilterList -status: Alpha +status: Deprecated +description: The FilterList component is a menu with filter options that filter the main content of the page. source: https://github.com/primer/react/blob/main/src/FilterList --- -import data from '../../src/FilterList/FilterList.docs.json' +import data from '../../src/deprecated/FilterList/FilterList.docs.json' -The FilterList component is a menu with filter options that filter the main content of the page. +## Deprecation + +Use [ActionList](/ActionList) instead. ## Examples diff --git a/docs/content/FilteredSearch.mdx b/docs/content/FilteredSearch.mdx index 2e510a92b4d..a043b00efd1 100644 --- a/docs/content/FilteredSearch.mdx +++ b/docs/content/FilteredSearch.mdx @@ -1,16 +1,21 @@ --- componentId: filtered_search title: FilteredSearch -status: Alpha +status: Deprecated +description: The FilteredSearch component helps style an ActionMenu and a TextInput side-by-side. source: https://github.com/primer/react/blob/main/src/FilteredSearch --- -import data from '../../src/FilteredSearch/FilteredSearch.docs.json' - -The FilteredSearch component helps style an ActionMenu and a TextInput side-by-side. +import data from '../../src/deprecated/FilteredSearch/FilteredSearch.docs.json' **Note:** You _must_ use a `TextInput` and `ActionMenu` (or native `
` and ``) in order for this component to work properly. +## Deprecation + +A new filter component is in progress. + +Until the new filter component is ready, you can use Button + TextInput + ActionList to reproduce this pattern. + ## Examples ```jsx live diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx index 501489b5f87..1edff11dd65 100644 --- a/docs/content/SelectPanel.mdx +++ b/docs/content/SelectPanel.mdx @@ -16,20 +16,18 @@ A `SelectPanel` provides an anchor that will open an overlay with a list of sele ```javascript live noinline function getColorCircle(color) { - return function () { - return ( - - ) - } + return ( + + ) } const items = [ diff --git a/docs/content/SubNav.mdx b/docs/content/SubNav.mdx index 7dac4ef49ed..414736fd76f 100644 --- a/docs/content/SubNav.mdx +++ b/docs/content/SubNav.mdx @@ -10,13 +10,6 @@ import DeprecationBanner from '../components/DeprecationBanner' -Use the SubNav component for navigation on a dashboard-type interface with another set of navigation components above it. This helps distinguish navigation hierarchy. - -To use SubNav with [react-router](https://github.com/ReactTraining/react-router) or -[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass -`as={NavLink}` and omit the `selected` prop. -This ensures that the NavLink gets `activeClassName='selected'` - **Attention:** Make sure to properly label your `SubNav` with an `aria-label` to provide context about the type of navigation contained in `SubNav`. ## Examples diff --git a/docs/content/TabNav.mdx b/docs/content/TabNav.mdx index d235d9fcc32..5d8b78a72a6 100644 --- a/docs/content/TabNav.mdx +++ b/docs/content/TabNav.mdx @@ -10,11 +10,6 @@ import DeprecationBanner from '../components/DeprecationBanner' -To use TabNav with [react-router](https://github.com/ReactTraining/react-router) or -[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass -`as={NavLink}` and omit the `selected` prop. -This ensures that the NavLink gets `activeClassName='selected'` - **Attention:** Make sure to properly label your `TabNav` with an `aria-label` to provide context about the type of navigation contained in `TabNav`. ## Examples diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index d70fbd1d7a4..962c9dca719 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -155,26 +155,16 @@ render() ``` -### With error and warning states +### With error state ```jsx live -<> - - - - + ``` ### Block text input diff --git a/docs/content/TreeView.mdx b/docs/content/TreeView.mdx index d0335fcc288..3531a1957da 100644 --- a/docs/content/TreeView.mdx +++ b/docs/content/TreeView.mdx @@ -120,7 +120,7 @@ import {TreeView} from '@primer/react' ```jsx import {Link, useMatch, useResolvedPath, navigate} from 'react-router-dom' -import {TreeView} from '@primer/react/drafts' +import {TreeView} from '@primer/react' function TreeLinkItem({id, to, children}) { const resolved = useResolvedPath(to) diff --git a/docs/content/UnderlineNav.mdx b/docs/content/UnderlineNav.mdx index 9d4b11cc02f..d2d87cc386b 100644 --- a/docs/content/UnderlineNav.mdx +++ b/docs/content/UnderlineNav.mdx @@ -1,8 +1,11 @@ --- -componentId: underline_nav title: UnderlineNav +componentId: underline_nav status: Alpha +a11yReviewed: true +description: Use an underlined nav to allow tab like navigation with overflow behaviour in your UI. source: https://github.com/primer/react/tree/main/src/UnderlineNav +storybook: '/react/storybook/?path=/story/components-underlinenav--playground' --- import data from '../../src/UnderlineNav/UnderlineNav.docs.json' @@ -10,31 +13,185 @@ import DeprecationBanner from '../components/DeprecationBanner' -Use the UnderlineNav component to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page. +```js +import {UnderlineNav} from '@primer/react' +``` -## Deprecation +## Examples -UnderlineNav is deprecated and will be replaced by the draft `UnderlineNav` in the next major release. See [the draft UnderlineNav's docs](/drafts/UnderlineNav2) for more details. +### Simple -To use UnderlineNav with [react-router](https://github.com/ReactTraining/react-router) or -[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass -`as={NavLink}` and omit the `selected` prop. -This ensures that the NavLink gets `activeClassName='selected'` +```jsx live drafts + + Code + Issues + Pull Requests + +``` -**Attention:** Make sure to properly label your `UnderlineNav` with an `aria-label` to provide context about the type of navigation contained in `UnderlineNav`. +### With Icons -## Examples +```jsx live drafts + + + Code + + + Issues + + + Pull Requests + + Discussions + + Actions + + + Projects + + +``` + +### Overflow Behaviour + +Component first hides icons if they present to optimize for space and show as many items as possible. If there is still an overflow, it will display the items that don't fit in the `More` menu. + +```javascript noinline live drafts +const Navigation = () => { + const items = [ + {navigation: 'Code', icon: CodeIcon}, + {navigation: 'Issues', icon: IssueOpenedIcon, counter: 120}, + {navigation: 'Pull Requests', icon: GitPullRequestIcon, counter: 13}, + {navigation: 'Discussions', icon: CommentDiscussionIcon, counter: 5}, + {navigation: 'Actions', icon: PlayIcon, counter: 4}, + {navigation: 'Projects', icon: ProjectIcon, counter: 9}, + {navigation: 'Insights', icon: GraphIcon}, + {navigation: 'Settings', icon: GearIcon, counter: 10}, + {navigation: 'Security', icon: ShieldLockIcon}, + ] + const [selectedIndex, setSelectedIndex] = React.useState(0) + return ( + + + {items.map((item, index) => ( + { + setSelectedIndex(index) + e.preventDefault() + }} + counter={item.counter} + > + {item.navigation} + + ))} + + + ) +} +render() +``` -```jsx live - - - Home - - Documentation - Support +### Loading State For Counters + +```jsx live drafts + + + Code + + Issues + Pull Requests ``` +### With React Router + +```jsx +import {Link, useMatch, useResolvedPath} from 'react-router-dom' +import {UnderlineNav} from '@primer/react' + +function UnderlineNavItem({to, children, ...rest}) { + const resolved = useResolvedPath(to) + const isCurrent = useMatch({path: resolved.pathname, end: true}) + return ( + + {children} + + ) +} + +const Navigation = () => { + return ( + + + Code + + + Issues + + Pull Requests + + ) +} +``` + +### With Next.js + +```jsx +import {useRouter} from 'next/router' +import Link from 'next/link' +import {UnderlineNav} from '@primer/react' + +function UnderlineNavItem({href, children, ...rest}) { + const router = useRouter() + const isCurrent = typeof href === 'string' ? router.asPath === href : router.pathname === href.pathname + return ( + + {children} + + ) +} + +const Navigation = () => { + return ( + + + Code + + + Issues + + Pull Requests + + ) +} +``` + ## Props + +## Status + + diff --git a/docs/content/deprecated/ActionList.mdx b/docs/content/deprecated/ActionList.mdx index 13bfce59100..cccbdbe6642 100644 --- a/docs/content/deprecated/ActionList.mdx +++ b/docs/content/deprecated/ActionList.mdx @@ -4,7 +4,7 @@ status: Deprecated source: https://github.com/primer/react/tree/main/src/deprecated/ActionList --- -An `ActionList` is a list of items which can be activated or selected. `ActionList` is the base component for many of our menu-type components, including `DropdownMenu` and `ActionMenu`. +An `ActionList` is a list of items which can be activated or selected. `ActionList` is the base component for many of our menu-type components, including and `ActionMenu`. ## Deprecation diff --git a/docs/content/deprecated/BorderBox.md b/docs/content/deprecated/BorderBox.md deleted file mode 100644 index 151a410d746..00000000000 --- a/docs/content/deprecated/BorderBox.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: BorderBox -status: Deprecated ---- - -BorderBox is a Box component with a border. When no `borderColor` is present, the component defaults to a primary border. - -## Deprecation - -Use [Box](/Box) instead. - -### Before - -```jsx deprecated -Item 1 -``` - -### After - -```jsx deprecated - - Item 1 - -``` - -## Default example - -```jsx live deprecated -This is a BorderBox -``` - -Note that `BorderBox` has default props set for `borderWidth`, `borderStyle`, and `borderColor`. This means that you cannot use `border={0} borderBottom={1}` or similar patterns; instead, use individual properties like `borderWidth={0} borderBottomWidth={1}`. - -## System props - -BorderBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props. - -## Component props - -| Prop name | Type | Default | Description | -| :----------- | :--------------- | :---------------------------: | :------------------------------------------------------------ | -| borderWidth | String | '1px' | Sets the border, use theme values or provide your own. | -| borderStyle | String | 'solid' | Sets the border style, use theme values or provide your own. | -| borderColor | String | 'border.primary' (from theme) | Sets the border color, use theme values or provide your own. | -| borderRadius | String or Number | 2 (from theme) | Sets the border radius, use theme values or provide your own. | -| boxShadow | String | | Sets box shadow, use theme values or provide your own. | diff --git a/docs/content/deprecated/ChoiceFieldset.mdx b/docs/content/deprecated/ChoiceFieldset.mdx deleted file mode 100644 index fddae43210a..00000000000 --- a/docs/content/deprecated/ChoiceFieldset.mdx +++ /dev/null @@ -1,405 +0,0 @@ ---- -title: ChoiceFieldset -status: Deprecated -source: https://github.com/primer/react/blob/main/src/ChoiceFieldset/ChoiceFieldset.tsx -storybook: '/react/storybook/?path=/story/forms-choicefieldset--radio-group' ---- - -import {ChoiceFieldset, Box} from '@primer/components' -import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react' - -A `ChoiceFieldset` is a controlled component that is used to render a related set of checkbox or radio inputs. - -## Deprecation - -Use [CheckboxGroup](/CheckboxGroup) or [RadioGroup](/RadioGroup) instead. - -## Examples - -### Basic - -```jsx live deprecated - - Color mode - - Dark - High-contrast dark - Light - High-contrast light - - -``` - -### Using an onSelect handler - -```javascript live noinline deprecated -const WithOnSelectHandler = () => { - const [selectedChoices, setSelectedChoices] = React.useState([]) - const choices = [ - { - value: 'figma', - displayName: 'Figma library', - description: 'The Figma file where we have Figma symbols and light documentation', - }, - { - value: 'css', - displayName: 'Primer CSS', - description: 'The OG. A CSS library with utility styles and component styles', - }, - { - value: 'react', - displayName: 'Primer React components', - description: 'The React component library that these docs belong to', - }, - { - value: 'viewcomponents', - displayName: 'Primer ViewComponents', - description: 'The Rails and Web Components implementation of our components', - }, - ] - - return ( - <> - { - setSelectedChoices(selectedValues) - }} - selected={selectedChoices} - > - Prefered Primer component interface - - Your choice won't be used for anything, this is just a React example - - - {choices.map(choice => ( - - {choice.displayName} - {choice.description} - - ))} - - - {selectedChoices.length ? ( - - {choices.find(choice => choice.value === selectedChoices[0]).displayName} is your favorite? Ours too. - - ) : null} - - ) -} - -render() -``` - -### Checkbox group - -```jsx live deprecated - - Prefered Primer component interface - - - Figma library - Primer CSS - Primer React components - Primer ViewComponents - - -``` - -### Disabled - -```jsx live deprecated - - Color mode - - Dark - High-contrast dark - Light - High-contrast light - - -``` - -### Required - -```jsx live deprecated - - Color mode - - Dark - High-contrast dark - Light - High-contrast light - - -``` - -### With pre-selected choices - -```jsx live deprecated - - Prefered Primer component interface - - - Figma library - Primer CSS - Primer React components - Primer ViewComponents - - -``` - -### With validation - -```javascript live noinline deprecated -const choices = [ - { - value: 'figma', - displayName: 'Figma library', - description: 'The Figma file where we have Figma symbols and light documentation', - }, - { - value: 'css', - displayName: 'Primer CSS', - description: 'The OG. A CSS library with utility styles and component styles', - }, - { - value: 'react', - displayName: 'Primer React components', - description: 'The React component library that these docs belong to', - }, - { - value: 'viewcomponents', - displayName: 'Primer ViewComponents', - description: 'The Rails and Web Components implementation of our components', - }, -] - -const ChoiceFieldsetWithValidation = () => { - const [selectedChoices, setSelectedChoices] = React.useState([]) - const [validationResult, setValidationResult] = React.useState() - - React.useEffect(() => { - if (selectedChoices.length && selectedChoices.length > 2) { - setValidationResult('tooManySelections') - } else { - setValidationResult(undefined) - } - }, [selectedChoices]) - - return ( - { - setSelectedChoices(selectedValues) - }} - validationMap={{tooManySelections: 'error'}} - validationResult={validationResult} - selected={selectedChoices} - > - Prefered Primer component interface - Pick your top two - - - {choices.map(choice => ( - - {choice.displayName} - {choice.description} - - ))} - - - - Only two selections are allowed - - - ) -} - -render() -``` - -### A visually hidden legend - -```jsx live deprecated - - Color mode - - Dark - High-contrast dark - Light - High-contrast light - - -``` - -### With a ChoiceFieldset.Description - -```jsx live deprecated - - Notification preferences - - Your selection will affect notifications sent to your email and mobile device - - - - - - - - All notifications - Every possible notification - - - - - - Relevant notifications - Only the ones you'll care about - - - - - - No notifications - Notifications won't be sent - - - -``` - -### With one disabled item - -```jsx live deprecated - - Color mode - - - Dark - - High-contrast dark - Light - High-contrast light - - -``` - -### Items with a caption and a leading visual - -```jsx live deprecated - - Notification preferences - - - - - - - All notifications - Every possible notification - - - - - - Relevant notifications - Only the ones you'll care about - - - - - - No notifications - Notifications won't be sent - - - -``` - -## Props - -### ChoiceFieldset - -| Name | Type | Default | Description | -| :--------------- | :-------------------------------------------------------------------------------------------------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| children\* | `ChoiceFieldset.Legend`, `ChoiceFieldset.Description`, `ChoiceFieldset.List`, `ChoiceFieldset.Validation` | – | The list of choices and contextual information | -| disabled | `boolean` | – | Whether the fieldset is NOT ready for user input | -| id | `string` | – | The unique identifier for this fieldset. Used to associate the validation text with the fieldset
If an ID is not passed, one will be automatically generated | -| name | `string` | – | The unique identifier used to associate radio inputs with eachother
If a name is not passed and the fieldset renders radio inputs, a name will be automatically generated | -| onSelect | `(selectedValues?: string[]) => void` | – | The callback that is called when a user toggles a choice on or off | -| required | `boolean` | – | Whether this field must have a value for the user to complete their task | -| selected | `string[]` | – | The selected values | -| validationMap | `Record` | – | A map of validation statuses and their associated validation keys. When one of the validation keys is passed to the `validationResult` prop, the associated validation message will be rendered in the correct style | -| validationResult | `keyof validationMap` | – | The key of the validation message to show | - -### ChoiceFieldset.Legend - -A title for the set of choices. A `ChoiceFieldset.Legend` must be passed, but it may be visually hidden. - -| Name | Type | Default | Description | -| :------------- | :-------- | :-----: | :------------------------------------------- | -| visuallyHidden | `boolean` | – | Whether to visually hide the fieldset legend | - -### ChoiceFieldset.List - -The list choices are rendered in. - -| Name | Type | Default | Description | -| :--------------- | :--------------------- | :-----: | :------------------------------------------------------ | -| children\* | `ChoiceFieldset.Item` | – | The choices that render as a checkbox or radio field | -| selectionVariant | `'single'\|'multiple'` | – | Whether multiple items or a single item can be selected | - -### ChoiceFieldset.Item - -Renders a choice to the list as a checkbox or radio field. - -| Name | Type | Default | Description | -| :--------- | :-------------------------------------------------------------------------------------------------- | :-----: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| children\* | `ChoiceFieldset.Caption`, `ChoiceFieldset.Label`, `ChoiceFieldset.LeadingVisual`, `React.ReactNode` | – | The parts that make up the checkbox or radio field used to select the choice.
If you **only** need a label, it's fine to pass in a string or JSX instead of wrapping it in the `Item.Label` component | -| value\* | `string` | – | The value that is being selected | -| disabled | `boolean` | – | Whether the field is ready for user input | -| id | `string` | – | The unique identifier for this field. Used to associate the label, validation text, and caption text.
If an ID is not provided, one will be automatically generated. | - -### ChoiceFieldset.Description - -A `ChoiceFieldset.Description` may be used to render hint text if this list needs additional context to guide a user to make their selection - -| Name | Type | Default | Description | -| :--------- | :---------------- | :-----: | :---------------------- | -| children\* | `React.ReactNode` | – | The description content | - -### ChoiceFieldset.Validation - -If the user's selection has been flagged during validation, `ChoiceFieldset.Validation` may be used to render contextual validation information to help the user complete their task - -| Name | Type | Default | Description | -| :-------------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------- | -| children\* | `React.ReactNode` | – | The validation message | -| validationKey\* | `string` | – | When this matches the `validationResult` prop on the parent `ChoiceFieldset` component, this validation component will be rendered | - -## Status - - - -## Related components - -- [ChoiceInputField](/ChoiceInputField) -- [Checkbox](/Checkbox) -- [Radio](/Radio) diff --git a/docs/content/deprecated/ChoiceInputField.mdx b/docs/content/deprecated/ChoiceInputField.mdx deleted file mode 100644 index fc9cef58607..00000000000 --- a/docs/content/deprecated/ChoiceInputField.mdx +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: ChoiceInputField -status: Deprecated -description: The ChoiceInputField component is used to render a labelled checkbox or radio inputs with optional hint text. -source: https://github.com/primer/react/blob/main/src/ChoiceInputField.tsx -storybook: '/react/storybook?path=/story/forms-choiceinputfield--checkbox-input-field' ---- - -import {Checkbox, Radio} from '@primer/react' -import {MarkGithubIcon} from '@primer/octicons-react' - -## Deprecation - -Use [FormControl](/FormControl) instead. - -## Examples - -### Checkbox - -```jsx live deprecated - - Option one - - -``` - -### Radio - -```jsx live deprecated -
- - Option one - - - - Option two - - -
-``` - -### Disabled field - -```jsx live deprecated - - Option one - - -``` - -### With a caption - -```jsx live deprecated - - Option One - - Hint: the first and only option - -``` - -### With a LeadingVisual - -```jsx live deprecated -<> - - Option one - - - - - - - - Option two - - - - - This one has a caption - - -``` - -## Props - -### ChoiceInputField - -The container that handles the layout and passes the relevant IDs and ARIA attributes it's children. - -`ChoiceInputField.Label` and `ChoiceInputField.Input` are required children. - - - - - - - -### ChoiceInputField.Label - -A `ChoiceInputField.Label` must be passed, but it may be visually hidden. - - - - - -### ChoiceInputField.Caption - -If this field needs additional context, a `ChoiceInputField.Caption` may be used to render hint text. - - - - - -### ChoiceInputField.LeadingVisual - -If the selectable option would be easier to understand with a visual, the `ChoiceInputField.LeadingVisual` component may be used. - - - - - -## Status - - diff --git a/docs/content/deprecated/Dropdown.md b/docs/content/deprecated/Dropdown.md deleted file mode 100644 index 92c1fda1269..00000000000 --- a/docs/content/deprecated/Dropdown.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Dropdown -status: Deprecated ---- - -import DeprecationBanner from '../../components/DeprecationBanner' - - - -## Deprecation - -Use [ActionMenu](/ActionMenu) instead. - ---- - -The Dropdown component is a lightweight context menu for housing navigation and actions. - -Use `Dropdown.Button` as the trigger for the dropdown, or use a custom `summary` element if you would like. **You must use a `summary` tag in order for the dropdown to behave properly!**. You should also add `aria-haspopup="true"` to custom dropdown triggers for accessibility purposes. You can use the `Dropdown.Caret` component to add a caret to a custom dropdown trigger. - -Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to this component to position the menu in relation to the Dropdown.Button. - -## Default example - -```jsx live deprecated - - Dropdown - - Item 1 - Item 2 - Item 3 - - -``` - -## With custom button - -```jsx live deprecated - - - Dropdown - - - - Item 1 - Item 2 - Item 3 - - -``` - -## Component props - -The Dropdown component is extended from the [`Details`](/Details) component and gets all props that the [`Details`](/Details) component gets. - -### Dropdown.Menu - -| Name | Type | Default | Description | -| :-------- | :---------------- | :-----: | :------------------------------------------------------------------------------------ | -| direction | String | 'sw' | Sets the direction of the dropdown menu. Pick from 'ne', 'e', 'se', 's', 'sw', or 'w' | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -### Dropdown.Button - -See https://primer.style/react/Buttons#component-props - -### Dropdown.Caret - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -### Dropdown.Item - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | diff --git a/docs/content/deprecated/DropdownMenu.mdx b/docs/content/deprecated/DropdownMenu.mdx deleted file mode 100644 index bd4ba02bc67..00000000000 --- a/docs/content/deprecated/DropdownMenu.mdx +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: DropdownMenu -status: Deprecated ---- - -A `DropdownMenu` provides an anchor (button by default) that will open a floating menu of selectable items. The menu can be opened and navigated using keyboard or mouse. When an item is selected, the menu will close and the `onChange` callback will be called. If the default anchor button is used, the anchor contents will be updated with the selection. - -## Deprecation - -Use [new version of ActionMenu](/ActionMenu#with-selection) with composable API, design updates and accessibility fixes. - -### Before - -```jsx -const fieldTypes = [ - {key: 0, text: 'Text'}, - {key: 1, text: 'Number'}, - {key: 3, text: 'Date'}, - {key: 4, text: 'Single select'}, - {key: 5, text: 'Iteration'}, -] - -const Example = () => { - const [selectedType, setSelectedType] = React.useState() - - return ( - ( - - {children} - - )} - placeholder="Field type" - items={fieldTypes} - selectedItem={selectedType} - onChange={setSelectedType} - /> - ) -} -``` - -### After - -Instead of `DropdownMenu`, you can use the `ActionMenu` with `ActionList selectionVariant=single`, this will give menu items the correct semantics: - -```jsx -const fieldTypes = [ - {id: 0, text: 'Text'}, - {id: 1, text: 'Number'}, - {id: 3, text: 'Date'}, - {id: 4, text: 'Single select'}, - {id: 5, text: 'Iteration'}, -] - -const Example = () => { - const [selectedType, setSelectedType] = React.useState() - - render( - - {selectedType.name || 'Field type'} - - - {fieldTypes.map(type => ( - setSelectedType(type)} - > - {type.name} - - ))} - - - , - ) -} -``` - -Or continue using deprecated API: - -```js -import {DropdownMenu} from '@primer/react/deprecated' -``` - -## Example - -```javascript live noinline deprecated -function DemoComponent() { - const items = React.useMemo( - () => [ - {text: '🔵 Cyan', id: 5, key: 'cyan'}, - {text: '🔴 Magenta', key: 'magenta'}, - {text: '🟡 Yellow', key: 'yellow'}, - ], - [], - ) - const [selectedItem, setSelectedItem] = React.useState() - - return ( - ( - - {children} - - )} - placeholder="🎨" - items={items} - selectedItem={selectedItem} - onChange={setSelectedItem} - /> - ) -} - -render() -``` - -## Component props - -| Name | Type | Default | Description | -| :------------ | :-------------------------------------------- | :---------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| items | `ItemProps[]` | `undefined` | Required. A list of item objects to display in the menu | -| selectedItem | `ItemInput` | `undefined` | An `ItemProps` item from the list of `items` which is currently selected. This item will receive a checkmark next to it in the menu. | -| onChange? | (item?: ItemInput) => unknown | `undefined` | A callback which receives the selected item or `undefined` when an item is activated in the menu. If the activated item is the same as the current `selectedItem`, `undefined` will be passed. | -| placeholder | `string` | `undefined` | Optional. A placeholder value to display when there is no current selection. | -| renderAnchor | `(props: DropdownButtonProps) => JSX.Element` | `DropdownButton` | Optional. If defined, provided component will be used to render the menu anchor. Will receive the selected `Item` text as `children` prop when an item is activated. | -| renderItem | `(props: ItemProps) => JSX.Element` | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for custom item rendering. | -| groupMetadata | `GroupProps[]` | `undefined` | Optional. If defined, `DropdownMenu` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. | diff --git a/docs/content/deprecated/Flex.md b/docs/content/deprecated/Flex.md deleted file mode 100644 index a272f1ad12b..00000000000 --- a/docs/content/deprecated/Flex.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Flex -status: Deprecated ---- - -The `Flex` component behaves the same as the `Box` component except that it has `display: flex` set by default. - -## Deprecation - -Use [Box](/Box) instead. - -### Before - -```jsx deprecated - - - Item 1 - - -``` - -### After - -```jsx deprecated - - - Item 1 - - -``` - -## Default example - -```jsx deprecated live - - - - Item 1 - - - Item 2 - - - Item 3 - - - -``` - -## System props - -Flex components get `FLEX`, `COMMON`, and `LAYOUT` system props. - -Read our [System Props](/system-props) doc page for a full list of available props. - -## Component props - -`Flex` does not get any additional props other than the system props mentioned above. diff --git a/docs/content/deprecated/FormGroup.md b/docs/content/deprecated/FormGroup.md deleted file mode 100644 index cb0a3143274..00000000000 --- a/docs/content/deprecated/FormGroup.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: FormGroup -status: Deprecated ---- - -Adds styles for multiple form elements used together. - -## Deprecation - -Use [FormControl](/FormControl) instead. - -## Default example - -```jsx live deprecated -<> - - Example text - - - - - Example text - - - -``` - -## Component props - -### FormGroup - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| as | String | `div` | Sets the HTML tag for the component | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -### FormGroup.Label - -| Name | Type | Default | Description | -| :------ | :---------------- | :-----: | :----------------------------------------------------------------------------- | -| as | String | `label` | Sets the HTML tag for the component | -| htmlFor | String | | The value of `htmlFor` needs to be the same as the `id` of the input it labels | -| sx | SystemStyleObject | {} | Style to be applied to the component | diff --git a/docs/content/deprecated/Grid.md b/docs/content/deprecated/Grid.md deleted file mode 100644 index d01036e31c5..00000000000 --- a/docs/content/deprecated/Grid.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Grid -status: Deprecated ---- - -Grid is a component that exposes grid system props. See the [CSS Tricks Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) to learn more about Grid Layout. - -## Deprecation - -Use [Box](/Box) instead. - -### Before - -```jsx deprecated - - - 1 - - - 2 - - -``` - -### After - -```jsx deprecated - - - 1 - - - 2 - - -``` - -## Default example - -```jsx deprecated live - - - 1 - - - 2 - - -``` - -## System props - -Grid components get `GRID`, `COMMON`, and `LAYOUT` system props. - -Read our [System Props](/system-props) doc page for a full list of available props. - -## Component props - -`Grid` does not get any additional props other than the system props mentioned above. diff --git a/docs/content/deprecated/InputField.mdx b/docs/content/deprecated/InputField.mdx deleted file mode 100644 index 347afe1f3c1..00000000000 --- a/docs/content/deprecated/InputField.mdx +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: InputField -status: Deprecated -description: The InputField component is used to render a labelled text input and, optionally, associated validation text and hint text. -source: https://github.com/primer/react/blob/main/src/InputField/InputField.tsx -storybook: '/react/storybook?path=/story/forms-inputfield--text-input-field' ---- - -import {TextInputWithTokens, Autocomplete, Select} from '@primer/react' - -## Deprecation - -Use [FormControl](/FormControl) instead. - -## Examples - -### Basic - -```jsx live deprecated - - Name - - -``` - -### Required - -```jsx live deprecated - - Name - - -``` - -### Disabled - -```jsx live deprecated - - Name - - -``` - -### Using different input components - -```javascript live noinline deprecated -const TextInputWithTokensExample = () => { - const [tokens, setTokens] = React.useState([ - {text: 'zero', id: 0}, - {text: 'one', id: 1}, - {text: 'two', id: 2}, - ]) - const onTokenRemove = tokenId => { - setTokens(tokens.filter(token => token.id !== tokenId)) - } - - return ( - * + *': { - marginTop: 4, - }, - }} - > - - TextInputWithTokens - - - - Autocomplete - - - - - - - - - Select - - - - ) -} - -render(TextInputWithTokensExample) -``` - -### With a visually hidden label - - - -Every input must have a corresponding label to be accessible to assistive technology. That's why you'd use `InputField` instead of using [`TextInput`](/TextInput) directly. - -`InputField` also provides an interface for showing a hint text caption and a validation message, and associating those with the input for assistive technology. - - - -```jsx live deprecated - - Name - - -``` - -### With a caption - -```jsx live deprecated - - Name - - Hint: your first name - -``` - -### With validation - -```javascript live noinline deprecated -const ValidationExample = () => { - const [value, setValue] = React.useState('mona lisa') - const [validationResult, setValidationResult] = React.useState() - const doesValueContainSpaces = inputValue => /\s/g.test(inputValue) - const handleInputChange = e => { - setValue(e.currentTarget.value) - } - - React.useEffect(() => { - if (doesValueContainSpaces(value)) { - setValidationResult('noSpaces') - } else if (value) { - setValidationResult('validName') - } - }, [value]) - - return ( - - GitHub handle - - GitHub handles cannot contain spaces - Valid name - With or without "@". For example "monalisa" or "@monalisa" - - ) -} - -render(ValidationExample) -``` - -## Props - -### InputField - -The container that handles the layout and passes the relevant IDs and ARIA attributes it's children. - - - - - - - - - - -### InputField.Label - -A `InputField.Label` must be passed for the field to be accessible to assistive technology, but it may be visually hidden. - - - - - -### InputField.Caption - -`InputField.Caption` may be used to render hint text for fields that require additional context. - - - - - -### InputField.Validation - -`InputField.Validation` may be used to render contextual validation information if the field was flagged during validation. - - - - - - -## Component status - - - -## Related components - -- [ChoiceInputField](/ChoiceInputField) -- [TextInput](/TextInput) diff --git a/docs/content/deprecated/Label.mdx b/docs/content/deprecated/Label.mdx deleted file mode 100644 index 99e3b054a54..00000000000 --- a/docs/content/deprecated/Label.mdx +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Label (legacy) -description: Use Label components to add contextual metadata to a design. -status: Deprecated -source: https://github.com/primer/react/blob/main/src/Label.tsx -componentId: legacy_label ---- - -## Deprecation - -Use the new [Label](/Label) instead. - -## Example - -```jsx live deprecated -<> - - - - - - - - - - - - -``` - -## Props - - - - - - - - -## Status - - diff --git a/docs/content/deprecated/Position.md b/docs/content/deprecated/Position.md deleted file mode 100644 index 6efa8d557af..00000000000 --- a/docs/content/deprecated/Position.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Position -status: Deprecated ---- - -The Position component is a wrapper component that gives the containing component css positioning abilities. - -## Deprecation - -Use [Box](/Box) instead. - -### Before - -```jsx deprecated -<> - ... - ... - ... - ... - ... - -``` - -### After - -```jsx deprecated -<> - ... - ... - ... - ... - ... - -``` - -## Default examples - -```jsx deprecated live - - Relative + Absolute - - - - rt - - - lt - - - rb - - - lb - - - bl - - - br - - - tl - - - tr - - - - - Sticky - - - - I'm sticky! - - - - Fixed -

(see the bottom right of the screen)

- - - I'm fixed to the bottom right. - - -``` - -## System props - -Position components get `POSITION`, `LAYOUT`, `FLEX`, and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. - -## Component props - -Position does not get any additional props other than the system props mentioned above. diff --git a/docs/content/deprecated/SelectMenu.md b/docs/content/deprecated/SelectMenu.md deleted file mode 100644 index 974ede74178..00000000000 --- a/docs/content/deprecated/SelectMenu.md +++ /dev/null @@ -1,378 +0,0 @@ ---- -title: SelectMenu -status: Deprecated ---- - -import DeprecationBanner from '../../components/DeprecationBanner' - - - -## Deprecation - -Use [ActionMenu](/ActionMenu) instead. - ---- - -The `SelectMenu` components are a suite of components which can be combined together to make several different variations of our GitHub select menu. At it's most basic form, a select menu is comprised of a `SelectMenu` wrapper, which contains a `summary` component of your choice and a `Select.Modal` which contains the select menu content. Use `SelectMenu.List` to wrap items in the select menu, and `SelectMenu.Item` to wrap each item. - -Several additional components exist to provide even more functionality: `SelectMenu.Header`, `SelectMenu.Filter`, `SelectMenu.Tabs`, `SelectMenu.TabPanel` `SelectMenu.Footer` and `SelectMenu.Divider`. - -## Basic Example - -```jsx deprecated live - - - - Projects - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - - - -``` - -## SelectMenu - -Main wrapper component for select menu. - -```jsx deprecated -{/* all other sub components are wrapped here*/} -``` - -### Component Props - -| Name | Type | Default | Description | -| :--------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------- | -| initialTab | String | | If using the `SelectMenu.Tabs` component, you can use this prop to change the tab shown on open. By default, the first tab will be used. | -| ref | React ref | | ref to pass down to SelectMenu component | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.MenuContext - -SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.html#reactcreatecontext) that exposes some helpful state values to be used via [`React.useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext) in consuming applications. SelectMenu.MenuContext can only be used in components that are already wrapped in a `SelectMenu` as `SelectMenu` contains the [context provider](https://reactjs.org/docs/context.html#contextprovider). - -### Values available on MenuContext - -| Name | Type | Description | -| :------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | -| selectedTab | string | The currently selected tab | -| setSelectedTab | function | Used to update the currently selected tab state | -| open | boolean | State for open/closed status of the menu modal | -| setOpen | function | Used to update the `open` state | -| initialTab | string | Mostly used internally to pass down which tab should be set to open by default. To change this value use the `initialTab` prop on `SelectMenu`. | - -### Example Usage - -```jsx deprecated -import {SelectMenu, Button} from '@primer/react' -import React, {useContext} from 'react' - -const MyMenu = () => ( - - - content - -) - -// note that we can only use the context in components that are already wrapped by SelectMenu (and thus the Context.Provider) -const MyButton = () => { - const menuContext = useContext(SelectMenu.MenuContext) - - return -} -``` - -## SelectMenu.Modal - -Used to wrap the content in a `SelectMenu`. - -```jsx deprecated -{/* all menu content is wrapped in the modal*/} -``` - -### Right-aligned modal - -Use the `align='right'` prop to align the modal to the right. Note that this only modifies alignment for the modal, and not the SelectMenu itself. You will need to wrap the SelectMenu in a relatively positioned element for this to work properly. - -```jsx deprecated live - - - - - Projects - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - - - - -``` - -### Component Props - -| Prop name | Type | Default | Description | -| :-------- | :---------------- | :------ | ------------------------------------------------- | -| align | String | 'left' | Use `right` to align the select menu to the right | -| width | String or Number | 300px | Sets the modal width | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.List - -Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessibility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper. - -```jsx deprecated -{/* all menu list items are wrapped in the list*/} -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Item - -Individual items in a select menu. SelectMenu.Item renders an anchor tag by default, you'll need to make sure to provide the appropriate `href`. - -You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#the-as-prop). Be sure to consider [which HTML element is the right choice](https://marcysutton.com/links-vs-buttons-in-modern-web-applications) for your usage of the component. - -```jsx deprecated - - {/* wraps an individual list item*/} - -``` - -### Component Props - -| Name | Type | Default | Description | -| :------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| selected | boolean | | Used to apply styles to the selected items in the list. | -| onClick | function | | Function called when item is clicked. By default we also close the menu when items are clicked. If you would like the menu to stay open, pass an `e.preventDefault()` to your onClick handler. | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Filter - -Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expected to implement their own filtering and manage the state of the `value` prop on the input. This gives users more flexibility over the type of filtering and type of content passed into each select menu item. - -```jsx deprecated live - - - - Filter by Project - - - Primer React bugs - Primer React roadmap - More Options - Project 3 - Project 4 - - - -``` - -### Component Props - -SelectMenu.Filter components receive all the props that the [TextInput](/TextInput) component gets. - -| Name | Type | Default | Description | -| :---- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------- | -| value | String | | Users of this component must provide a value for the filter input that is managed in the consuming application | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Tabs - -Use `SelectMenu.Tabs` to wrap the tab navigation and `SelectMenu.Tab` for each tab in the navigation. - -`SelectMenu.TabPanel` should wrap each corresponding panel for each of the tabs. The `tabName` prop for each `SelectMenu.TabPanel` must match the name provided in the `tabName` prop on `SelectMenu.Tab`. - -To set one of the tabs to be open by default, use `initialTab` on the main `SelectMenu` component. Otherwise, the first tab will be shown by default. - -Each `Select.Menu` tab will need to have an `index` prop. The first tab should be at index `0`, the second at index `1` and so forth. The `index` prop is used to show the first tab by default. - -If you need access to the selected tab state, you can find it in the MenuContext object exported from `SelectMenu` as `MenuContext.selectedTab`. - -```jsx deprecated live - - - - Projects - - - - - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - - - Project 2 - - Showing 3 of 3 - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Tab - -Used for each individual tab inside of a `SelectMenu.Tabs`. Be sure to set the `index` prop to correspond to the order the tab is in. The `tabName` prop should correspond to the `tabName` set on the `SelectMenu.TabPanel`. - -The `onClick` prop is optional and can be used for any events or data fetching you might need to trigger on tab clicks. - -```jsx deprecated -<> - - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- | -| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. | -| index | Number | | The index at which the tab is in the list of tabs | -| onClick | Function | | Function to be called when the tab is clicked. Optional. | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.TabPanel - -Wraps the content for each tab. Make sure to use the `tabName` prop to identify each tab panel with the correct tab in the tab navigation. - -**Note**: SelectMenu.TabPanel wraps content in a SelectMenu.List, so adding a SelectMenu.List manually is not necessary. - -```jsx deprecated -{/* Wraps content for each tab */} -``` - -### Component Props - -| Name | Type | Default | Description | -| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- | -| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Divider - -Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.List`. - -```jsx deprecated live - - - - Projects - - Primer React bugs - Primer React roadmap - More Options - Project 3 - Project 4 - - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Footer - -Use a `SelectMenu.Footer` to add content to the bottom of the select menu. - -```jsx deprecated live - - - - Projects - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - Use ⌥ + click/return to exclude labels. - - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Header - -Use a `SelectMenu.Header` to add a header to the top of the select menu content. - -```jsx deprecated live - - - - Projects - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - Use ⌥ + click/return to exclude labels. - - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.LoadingAnimation - -Use a `SelectMenu.LoadingAnimation` to add a loading animation inside of the SelectMenu. - -**Note**: You will need to handle showing/hiding the appropriate modal content for your application during the loading state. We recommend always showing the `SelectMenu.Filter` and `SelectMenu.Header` (if used) and hiding the rest of the modal content during the loading state. - -```jsx deprecated live - - - - Projects - - {true ? ( - - ) : ( - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - Use ⌥ + click/return to exclude labels. - - )} - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | diff --git a/docs/content/deprecated/UnderlineNav.mdx b/docs/content/deprecated/UnderlineNav.mdx new file mode 100644 index 00000000000..efecffd117f --- /dev/null +++ b/docs/content/deprecated/UnderlineNav.mdx @@ -0,0 +1,31 @@ +--- +componentId: legacy_underline_nav +title: UnderlineNav (legacy) +status: Deprecated +--- + +import data from '../../../src/deprecated/UnderlineNav/UnderlineNav.docs.json' + +Use the UnderlineNav component to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page. + +## Deprecation + +Use [the new version of UnderlineNav](/UnderlineNav) with design and accessibility updates. + +**Attention:** Make sure to properly label your `UnderlineNav` with an `aria-label` to provide context about the type of navigation contained in `UnderlineNav`. + +## Examples + +```jsx live + + + Home + + Documentation + Support + +``` + +## Props + + diff --git a/docs/content/drafts/PageHeader.mdx b/docs/content/drafts/PageHeader.mdx index 44f751767bd..40891f04462 100644 --- a/docs/content/drafts/PageHeader.mdx +++ b/docs/content/drafts/PageHeader.mdx @@ -125,7 +125,7 @@ import {PageHeader} from '@primer/react/drafts' - @@ -162,20 +162,20 @@ import {PageHeader} from '@primer/react/drafts' Pull request title - - + + Conversation - - + + Commits - - + + Checks - - + + Files Changes - - + + ``` @@ -212,7 +212,7 @@ import {PageHeader} from '@primer/react/drafts' Parent Link - @@ -241,7 +241,7 @@ import {PageHeader} from '@primer/react/drafts' - @@ -274,7 +274,7 @@ import {PageHeader} from '@primer/react/drafts'