diff --git a/.changeset/cold-pigs-shop.md b/.changeset/cold-pigs-shop.md deleted file mode 100644 index 793a2d90046..00000000000 --- a/.changeset/cold-pigs-shop.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": minor ---- - -Deprecate `MarkdownEditor`, `MarkdownViewer`, `InlineAutocomplete`, and related hooks diff --git a/.changeset/empty-starfishes-relate.md b/.changeset/empty-starfishes-relate.md deleted file mode 100644 index 5f3277601f9..00000000000 --- a/.changeset/empty-starfishes-relate.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Tooltip2: Do not wrap the tooltip span and its trigger in a div diff --git a/.changeset/fresh-hotels-begin.md b/.changeset/fresh-hotels-begin.md deleted file mode 100644 index 70d2c545718..00000000000 --- a/.changeset/fresh-hotels-begin.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Sync theme in effect diff --git a/.changeset/khaki-rules-breathe.md b/.changeset/khaki-rules-breathe.md deleted file mode 100644 index 99489c91f19..00000000000 --- a/.changeset/khaki-rules-breathe.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@primer/react": patch ---- - -Use `aria-required` instead of `required` on required form elements - - diff --git a/.changeset/light-frogs-leave.md b/.changeset/light-frogs-leave.md deleted file mode 100644 index 4351a1c1c5a..00000000000 --- a/.changeset/light-frogs-leave.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@primer/react': patch ---- - -TextInput, Textarea: Does not pass `aria-required` attribute to input or textarea if it is undefined. This fixes some tests that were breaking in dotcom. - - diff --git a/.changeset/many-ants-pump.md b/.changeset/many-ants-pump.md deleted file mode 100644 index 4032eefb4bd..00000000000 --- a/.changeset/many-ants-pump.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@primer/react': patch ---- - -Adapts Blankslate to render proportionally in narrow areas. - - diff --git a/.changeset/mighty-ghosts-swim.md b/.changeset/mighty-ghosts-swim.md deleted file mode 100644 index 64c492888c7..00000000000 --- a/.changeset/mighty-ghosts-swim.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Fix an issue where the scrollable Dialog body could not be focused with the keyboard diff --git a/.changeset/rotten-apples-bake.md b/.changeset/rotten-apples-bake.md deleted file mode 100644 index 8b1f686da37..00000000000 --- a/.changeset/rotten-apples-bake.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -use in confirm() diff --git a/.changeset/selfish-guests-stare.md b/.changeset/selfish-guests-stare.md new file mode 100644 index 00000000000..7d65f66d225 --- /dev/null +++ b/.changeset/selfish-guests-stare.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Update mono font in theme to use font stack as fallback to custom property diff --git a/.changeset/smooth-tips-breathe.md b/.changeset/smooth-tips-breathe.md deleted file mode 100644 index e0334b3f905..00000000000 --- a/.changeset/smooth-tips-breathe.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@primer/react': minor ---- - -Supports inactive ActionList items by letting users pass the required message to the `inactiveText` prop. - - diff --git a/.changeset/sweet-onions-heal.md b/.changeset/sweet-onions-heal.md deleted file mode 100644 index 488b98447d7..00000000000 --- a/.changeset/sweet-onions-heal.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Fixed confirm() leaving
s in the DOM. diff --git a/.changeset/unlucky-boats-film.md b/.changeset/unlucky-boats-film.md new file mode 100644 index 00000000000..6ac1e3f7927 --- /dev/null +++ b/.changeset/unlucky-boats-film.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Checkbox: Add `not-allowed` cursor to unchecked disabled state diff --git a/.changeset/weak-balloons-search.md b/.changeset/weak-balloons-search.md deleted file mode 100644 index da2ea95bd71..00000000000 --- a/.changeset/weak-balloons-search.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Portal avoids useless createElement diff --git a/.eslintrc.js b/.eslintrc.js index 7c5cb359fcb..16df2e60671 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -121,7 +121,7 @@ module.exports = { argsIgnorePattern: '^_', }, ], - '@typscript-eslint/no-shadow': 'off', + '@typescript-eslint/no-shadow': 'off', '@typescript-eslint/no-empty-function': 'off', '@typescript-eslint/ban-ts-comment': [ 'error', diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 88fb0f36ea8..00929b8d16a 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -42,7 +42,7 @@ jobs: # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@v2 + uses: github/codeql-action/init@v3 with: languages: ${{ matrix.language }} # If you wish to specify custom queries, you can do so here or in a config file. @@ -55,7 +55,7 @@ jobs: # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). # If this step fails, then you should remove it and run the build manually (see below) - name: Autobuild - uses: github/codeql-action/autobuild@v2 + uses: github/codeql-action/autobuild@v3 # ℹī¸ Command-line programs to run using the OS shell. # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun @@ -68,4 +68,4 @@ jobs: # ./location_of_script_within_repo/buildscript.sh - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v2 + uses: github/codeql-action/analyze@v3 diff --git a/.github/workflows/deploy_preview.yml b/.github/workflows/deploy_preview.yml index aa0603c5651..ebbfddf8c73 100644 --- a/.github/workflows/deploy_preview.yml +++ b/.github/workflows/deploy_preview.yml @@ -8,7 +8,7 @@ concurrency: jobs: build: - if: ${{ github.repository == 'primer/react' }} + if: ${{ github.event.pull_request.head.repo.full_name == 'primer/react' }} runs-on: ubuntu-latest steps: - name: Checkout repository @@ -25,13 +25,13 @@ jobs: working-directory: docs - name: Build docs preview run: npm run build:docs:preview - - uses: actions/upload-pages-artifact@v2 + - uses: actions/upload-pages-artifact@v3 with: name: github-pages path: docs/public deploy-preview: - if: ${{ github.repository == 'primer/react' }} + if: ${{ github.event.pull_request.head.repo.full_name == 'primer/react' }} needs: build permissions: pages: write @@ -45,13 +45,13 @@ jobs: steps: - name: Deploy to GitHub Pages id: deployment - uses: actions/deploy-pages@v3 + uses: actions/deploy-pages@v4 with: preview: true deploy-storybook: name: Preview Storybook - if: ${{ github.repository == 'primer/react' }} + if: ${{ github.event.pull_request.head.repo.full_name == 'primer/react' }} needs: deploy-preview permissions: deployments: write diff --git a/.github/workflows/deploy_preview_forks.yml b/.github/workflows/deploy_preview_forks.yml index 3c7660e9c92..6f2f23cf2ef 100644 --- a/.github/workflows/deploy_preview_forks.yml +++ b/.github/workflows/deploy_preview_forks.yml @@ -1,24 +1,51 @@ -name: Deploy (fork) +name: Deploy Preview (fork) on: pull_request_target: -permissions: - contents: read - pages: write - id-token: write +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true jobs: - deploy-preview: + build: # target repository for pull_request is different from source repository if: ${{ github.repository != github.event.pull_request.head.repo.full_name }} - name: Preview - uses: primer/.github/.github/workflows/deploy_preview.yml@0cec9b9914f358846163f2428663b58da41028c9 + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: 'npm' + - name: Install dependencies + run: npm ci + - name: Install docs dependencies + run: npm ci --legacy-peer-deps + working-directory: docs + - name: Build docs preview + run: npm run build:docs:preview + - uses: actions/upload-pages-artifact@v3 + with: + name: github-pages + path: docs/public + + deploy-preview: + if: ${{ github.repository != github.event.pull_request.head.repo.full_name }} + needs: build permissions: - contents: read pages: write id-token: write - with: - node_version: 18 - install: npm ci --legacy-peer-deps && cd docs && npm ci --legacy-peer-deps && cd .. - build: npm run build:docs:preview - output_dir: docs/public + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + outputs: + deployment_url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 + with: + preview: true diff --git a/.github/workflows/deploy_production.yml b/.github/workflows/deploy_production.yml index 93382bcd390..f328716a89b 100644 --- a/.github/workflows/deploy_production.yml +++ b/.github/workflows/deploy_production.yml @@ -51,7 +51,7 @@ jobs: name: Production needs: [guard] if: ${{ needs.guard.outputs.should_deploy == 'true' }} - uses: primer/.github/.github/workflows/deploy.yml@0cec9b9914f358846163f2428663b58da41028c9 + uses: primer/.github/.github/workflows/deploy.yml@bb0b18fb589038a93a49a24624be0559c01ed0b9 secrets: gh_token: ${{ secrets.GITHUB_TOKEN }} with: diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-colorblind-linux.png index 4053e0c036e..3d14f0850f6 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-dimmed-linux.png index 1fc9c4fa147..49b8772d861 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-high-contrast-linux.png index 2a23b3f5f37..6c68dbefbdb 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-linux.png index 04a69659694..9b7a6eab745 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-tritanopia-linux.png index 4053e0c036e..3d14f0850f6 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-colorblind-linux.png index 23bc4ab9d9c..3232c2f7f28 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-high-contrast-linux.png index d907d468538..85b74f23a2d 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-linux.png index c1cf1a2d2f0..79a6673eb1d 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-tritanopia-linux.png index 23bc4ab9d9c..3232c2f7f28 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-colorblind-linux.png index 243ca167400..d6185a2b103 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-dimmed-linux.png index 03ba005c8f5..ac47acc1ee7 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-high-contrast-linux.png index dacfcd52739..f6d42cce5dc 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-linux.png index 520d82ca4ba..a84d5b023c5 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-tritanopia-linux.png index 243ca167400..d6185a2b103 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-colorblind-linux.png index 9fea6189661..849b2c07b22 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-high-contrast-linux.png index 8eb80bc9b20..959e14a5fd0 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-linux.png index cab1a46559b..9c887c9fcf5 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-tritanopia-linux.png index 4baee192ac5..849b2c07b22 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-colorblind-linux.png index f0521ec0123..b285466fee4 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-dimmed-linux.png index 69e67439356..7c99d45afa2 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-high-contrast-linux.png index 0246471fcfb..7ab705c109e 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-linux.png index db63349c2e6..36be345a219 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-tritanopia-linux.png index f0521ec0123..b285466fee4 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-colorblind-linux.png index cad4a3046cf..7ba268719d3 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-high-contrast-linux.png index 46f3f32bbb6..2197de8d1dd 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-linux.png index bb4b6717633..7f986c8d89e 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-tritanopia-linux.png index cad4a3046cf..7ba268719d3 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-colorblind-linux.png index 16cc7447068..baf1fccbf63 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-dimmed-linux.png index 24084656627..290fec4324b 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-high-contrast-linux.png index 7532942cef7..6ca60db4000 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-linux.png index 16cc7447068..baf1fccbf63 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-tritanopia-linux.png index 16cc7447068..baf1fccbf63 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inside-Overlay-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-colorblind-linux.png index bf799823463..ccfb8242bd3 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-dimmed-linux.png index 1c17f52eb35..72c18fb961c 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-high-contrast-linux.png index f276c39e58b..7d1950a4912 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-linux.png index ed29e3619dc..3d5312cf08e 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-tritanopia-linux.png index bf799823463..ccfb8242bd3 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-colorblind-linux.png index a25ce079027..e5b3e0b0803 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-high-contrast-linux.png index 9a788f134db..db6afee5da5 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-linux.png index d616702d470..3ef1e0b756f 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-tritanopia-linux.png index a25ce079027..e5b3e0b0803 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png index 9b76e122a65..e4e9a41a395 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png differ 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 1340b381d10..02f891af0bc 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-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png index 795d5d1fe02..f62c2e3ab28 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png index 237f9d8aa73..6a9dcd55c18 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png index 9b76e122a65..e4e9a41a395 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-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 abcf8f35379..425a179a4db 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-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png index 1d1f079b5d2..2bc0e11807d 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-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 4db76445f21..5af933d70ac 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 abcf8f35379..425a179a4db 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/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-default-vrt-1-linux.png index e96b6b1f646..7d47904ca65 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-default-vrt-1-linux.png index 722a3de6e46..937fe3c75df 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-default-vrt-1-linux.png index 7d70f8b6a33..566e4755547 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-default-vrt-1-linux.png index 336e9c5a737..4f0a0ba1d0e 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-default-vrt-1-linux.png index cc8b89efd33..ccfce3a1cbd 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-default-vrt-1-linux.png index de804b70eaa..1f318c865e4 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-default-vrt-1-linux.png index 9e7fda8048b..730a4322a64 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-default-vrt-1-linux.png index f10ab247f93..ec6ecc5a558 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-default-vrt-1-linux.png index de804b70eaa..1f318c865e4 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-colorblind-linux.png index 2c1af7f7658..38b544c82c0 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-dimmed-linux.png index 78009be2dc8..ec1f8766393 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-linux.png index 05c10effda8..df1c041abd1 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-tritanopia-linux.png index 2c1af7f7658..38b544c82c0 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-colorblind-linux.png index ade76c864c0..a28c745393a 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-linux.png index 642b7781174..927610bd04f 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-tritanopia-linux.png index ade76c864c0..a28c745393a 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png index bd9c8c55212..bec867c9eee 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png index 28a30952955..bec867c9eee 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png index bd9c8c55212..bec867c9eee 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-focus-linux.png index 20dd070fb72..8e8e9784dec 100644 Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-focus-linux.png index fd670bdd919..1f626b47c56 100644 Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-focus-linux.png index 20dd070fb72..08b7de3d66e 100644 Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-focus-linux.png index 69652b9d407..785c25a76bc 100644 Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-focus-linux.png index 20dd070fb72..8e8e9784dec 100644 Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-colorblind-focus-linux.png index 1f0787a279b..7c2d8e4d3c8 100644 Binary files a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-colorblind-focus-linux.png and b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-dimmed-focus-linux.png index 636625a6a34..044818921f3 100644 Binary files a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-dimmed-focus-linux.png and b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-focus-linux.png b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-focus-linux.png index 1f0787a279b..5bae67924c3 100644 Binary files a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-focus-linux.png and b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-high-contrast-focus-linux.png index 5d29c7760aa..a1d8e4203ef 100644 Binary files a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-tritanopia-focus-linux.png index 1f0787a279b..7c2d8e4d3c8 100644 Binary files a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-Default-dark-tritanopia-focus-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 87c7eccada7..2e6c5bb9d0a 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/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png index 4ade13d1164..391e8ddda0e 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png index 9145e1d4d00..fcc5a9376f2 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png index 8da4b5d1a10..be4b5d69bee 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png index 0a21cb90295..783b1daaa88 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png index d38cfd9ec4a..0fe3894fb61 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png index 8a91df84971..4a350f021be 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png index 9944f0684e6..04bf671a934 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png index dcd8a43c24c..9cece02c62e 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png index 01863d37c89..c3510b18660 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png index df5c8ca4157..304040711a8 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png index d80273a6153..f72ac7b90bb 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png index fd1c0eb1171..f748f336d71 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png index 49d7d9d048e..95832458825 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png index a94fd6f73ee..e345db8a985 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png index 99b276f4e6a..9451f77c8b8 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png index 51e087edc6d..d76e58cc8e8 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png index 22f2387bc05..260a68b1361 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png index c9b7b4dc628..c09b6919eda 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png index 788b8879f86..ca50e1e1c1a 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png index 44e4755718a..f2a27d6486a 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png index 6572a74c19a..f8d6c5a27cc 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png index bd38664f3ca..d1134be3719 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png index 3440426eec0..d90d3360b40 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png index 94168902683..76f93cb515f 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png index 380af28d9dc..e9dba1a061b 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png index f7cb338eb12..f2a7e6f4563 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png index 8e9e05cfac5..b3c5ecde99c 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialogv1.test.ts-snapshots/Dialogv1-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialogv1.test.ts-snapshots/Dialogv1-Default-dark-high-contrast-linux.png index 382d869458a..4d470f42cd5 100644 Binary files a/.playwright/snapshots/components/Dialogv1.test.ts-snapshots/Dialogv1-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialogv1.test.ts-snapshots/Dialogv1-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png index 678cdcf2d27..8da124c94e2 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png index 79c93e143b8..da437eaea9b 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png index 4250d1c091a..a6ce76707cd 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png index 678cdcf2d27..8da124c94e2 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png index 678cdcf2d27..8da124c94e2 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png index 8eb9badcadc..df8513d7dc9 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png index 23381372f26..98b75993318 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png index 8eb9badcadc..d78e1632609 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png index 8eb9badcadc..df8513d7dc9 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-high-contrast-linux.png index d7ad996b931..2973acf8456 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-focus-linux.png index 7cb7d7f7e5c..0ef209fd861 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-focus-linux.png index c8578a0f372..d52a114a090 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-focus-linux.png index 7cb7d7f7e5c..37ba98e5746 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-focus-linux.png index 20bf1cab4c5..6112d1a0361 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-focus-linux.png index 7cb7d7f7e5c..0ef209fd861 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-colorblind-focus-linux.png index 0a1f30f9283..7b6dd1f4069 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-colorblind-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-dimmed-focus-linux.png index 5fab9487056..089ee36e98c 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-dimmed-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-focus-linux.png index 0a1f30f9283..6b0099c3853 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-high-contrast-focus-linux.png index d00eb90115d..300a5cef22a 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-tritanopia-focus-linux.png index 0a1f30f9283..7b6dd1f4069 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-colorblind-focus-linux.png index 7cb7d7f7e5c..0ef209fd861 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-colorblind-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-dimmed-focus-linux.png index c8578a0f372..d52a114a090 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-dimmed-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-focus-linux.png index 7cb7d7f7e5c..37ba98e5746 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-high-contrast-focus-linux.png index 20bf1cab4c5..6112d1a0361 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-tritanopia-focus-linux.png index 7cb7d7f7e5c..0ef209fd861 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Underline-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png index 807d9bd3efe..34bd710b65d 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-focus-linux.png index 4c41c11d214..f6d56b1d621 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-focus-linux.png index 6a68c3983b0..dd62f599237 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-focus-linux.png index 4c41c11d214..fc4e8b953e6 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-focus-linux.png index bbdd037c7d8..119351abe40 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-focus-linux.png index 4c41c11d214..f6d56b1d621 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-colorblind-linux.png b/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-colorblind-linux.png index 5b80a53345e..83de7826643 100644 Binary files a/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-colorblind-linux.png and b/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-dimmed-linux.png b/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-dimmed-linux.png index fcc1766d12f..98f4ae62705 100644 Binary files a/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-dimmed-linux.png and b/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-high-contrast-linux.png b/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-high-contrast-linux.png index 3a218b7f43d..b1a6898498d 100644 Binary files a/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-linux.png b/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-linux.png index 87a08fc9903..a6a1533abbd 100644 Binary files a/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-linux.png and b/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-linux.png differ diff --git a/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-tritanopia-linux.png b/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-tritanopia-linux.png index 5b80a53345e..83de7826643 100644 Binary files a/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Tooltip--experimental.test.ts-snapshots/Tooltip--experimental-Label-Type-dark-tritanopia-linux.png differ diff --git a/.storybook/preview.js b/.storybook/preview.js index 1ceaa10a151..2441ecb5936 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,15 +1,11 @@ -import {addons} from '@storybook/addons' -import {withThemeProvider, withSurroundingElements, toolbarTypes} from '../src/utils/story-helpers' import {PrimerBreakpoints} from '../src/utils/layout' +import {useEffect} from 'react' +import {ThemeProvider, BaseStyles, theme} from '../src' +import clsx from 'clsx' -// primitives v8 +import './storybook.css' import './primitives-v8.css' -// primitives v7 for fallback, commented out by default -// uncomment it for testing -// import './primitives-v7.css' - -export const globalTypes = toolbarTypes -export const decorators = [withThemeProvider, withSurroundingElements] +import './primitives-v7.css' let storybookViewports = {} Object.entries(PrimerBreakpoints).forEach(([viewport, value]) => { @@ -23,139 +19,218 @@ Object.entries(PrimerBreakpoints).forEach(([viewport, value]) => { } }) -export const parameters = { - actions: {argTypesRegex: '^on[A-Z].*'}, - html: { - root: '#html-addon-root', - removeEmptyComments: true, - }, - controls: { - hideNoControlsWarning: true, - }, - options: { - storySort: (a, b) => { - const defaultOrder = [ - [ - // Match on any story that leads with "Components" - 'Components', - // This is the ordering of stories under "Components", by default - // we'll sort alphabetically +const preview = { + parameters: { + actions: {argTypesRegex: '^on[A-Z].*'}, + html: { + root: '#html-addon-root', + removeEmptyComments: true, + }, + controls: { + hideNoControlsWarning: true, + }, + options: { + storySort: (a, b) => { + const defaultOrder = [ [ + // Match on any story that leads with "Components" + 'Components', + // This is the ordering of stories under "Components", by default + // we'll sort alphabetically [ - '*', - // Within a set of stories, set the order to the following - ['*', 'Playground', /Playground$/, 'Features', 'Examples'], + [ + '*', + // Within a set of stories, set the order to the following + ['*', 'Playground', /Playground$/, 'Features', 'Examples'], + ], ], ], - ], - 'Behaviors', - 'Hooks', - 'Deprecated', - 'Drafts', - 'Private', - '*', - ] - - /** - * Get the position of an item within a given order. This will return the - * index if the item is defined in the given array, or the wildcard index - * if it is not explicitlyd efined - */ - function getPosition(order, item) { - const position = order.findIndex(value => { - if (Array.isArray(value)) { - if (typeof value[0] === 'string') { - return value[0] === item + 'Behaviors', + 'Hooks', + 'Deprecated', + 'Drafts', + 'Private', + '*', + ] + + /** + * Get the position of an item within a given order. This will return the + * index if the item is defined in the given array, or the wildcard index + * if it is not explicitlyd efined + */ + function getPosition(order, item) { + const position = order.findIndex(value => { + if (Array.isArray(value)) { + if (typeof value[0] === 'string') { + return value[0] === item + } + return value[0].exec(item) } - return value[0].exec(item) - } - if (typeof value === 'string') { - return value === item - } + if (typeof value === 'string') { + return value === item + } - return value.exec(item) - }) + return value.exec(item) + }) - if (position === -1) { - return order.indexOf('*') + if (position === -1) { + return order.indexOf('*') + } + + return position } - return position - } - - /** - * Compare two separate stories at the given level for the given order. - * The order will be relative at each level and is resolved based on the - * current order and values of the stories - */ - function compare(a, b, level = 0, order = defaultOrder) { - const valueA = a[level] - const valueB = b[level] - - // If the stories match at the same point in the hierarchy, we'll want - // to compare them using a relative ordering for the scheme - if (valueA === valueB) { - // Find the "nested order" for the hierarchy, if one exists. This - // will correspond with the ordering of the stories within this - // hierarchy - const nestedOrder = order.find(value => { - if (Array.isArray(value)) { - return value[0] === valueA + /** + * Compare two separate stories at the given level for the given order. + * The order will be relative at each level and is resolved based on the + * current order and values of the stories + */ + function compare(a, b, level = 0, order = defaultOrder) { + const valueA = a[level] + const valueB = b[level] + + // If the stories match at the same point in the hierarchy, we'll want + // to compare them using a relative ordering for the scheme + if (valueA === valueB) { + // Find the "nested order" for the hierarchy, if one exists. This + // will correspond with the ordering of the stories within this + // hierarchy + const nestedOrder = order.find(value => { + if (Array.isArray(value)) { + return value[0] === valueA + } + return value === valueA + }) + + if (nestedOrder && Array.isArray(nestedOrder)) { + return compare(a, b, level + 1, nestedOrder[1]) } - return value === valueA - }) - if (nestedOrder && Array.isArray(nestedOrder)) { - return compare(a, b, level + 1, nestedOrder[1]) - } - - // If there is no nested order that we can find, look for wildcard - // patterns - const wildcard = order.find(value => { - if (Array.isArray(value)) { - return value[0] === '*' + // If there is no nested order that we can find, look for wildcard + // patterns + const wildcard = order.find(value => { + if (Array.isArray(value)) { + return value[0] === '*' + } + return value === '*' + }) + + // If we have a wildcard pattern with sub-patterns to include for + // ordering, pass them along + if (wildcard && Array.isArray(wildcard)) { + return compare(a, b, level + 1, wildcard[1]) } - return value === '*' - }) - // If we have a wildcard pattern with sub-patterns to include for - // ordering, pass them along - if (wildcard && Array.isArray(wildcard)) { - return compare(a, b, level + 1, wildcard[1]) + // Otherwise, everything is a wildcard pattern and should be sorted + // alphabetically at this level + return compare(a, b, level + 1, ['*']) } - // Otherwise, everything is a wildcard pattern and should be sorted - // alphabetically at this level - return compare(a, b, level + 1, ['*']) - } + // If the stories do not currently match in the same hierarchy, get the + // position of each and compare them. + const positionA = getPosition(order, valueA) + const positionB = getPosition(order, valueB) - // If the stories do not currently match in the same hierarchy, get the - // position of each and compare them. - const positionA = getPosition(order, valueA) - const positionB = getPosition(order, valueB) + // If the positions are the same, sort them alphabetically + if (positionA === positionB) { + return valueA.localeCompare(valueB) + } - // If the positions are the same, sort them alphabetically - if (positionA === positionB) { - return valueA.localeCompare(valueB) + // Otherwise, compare by position in the given order + return positionA - positionB } - // Otherwise, compare by position in the given order - return positionA - positionB - } - - function getHierarchy(story) { - const hierarchy = story.title.split('/') - hierarchy.push(story.name) - return hierarchy - } + function getHierarchy(story) { + const hierarchy = story.title.split('/') + hierarchy.push(story.name) + return hierarchy + } - return compare(getHierarchy(a), getHierarchy(b)) + return compare(getHierarchy(a), getHierarchy(b)) + }, + }, + viewport: { + viewports: { + ...storybookViewports, + }, }, }, - viewport: { - viewports: { - ...storybookViewports, +} + +const primerThemes = [ + {value: 'light', left: '☀ī¸', title: 'Light'}, + {value: 'light_colorblind', left: '☀ī¸', title: 'Light Protanopia & Deuteranopia'}, + {value: 'light_tritanopia', left: '☀ī¸', title: 'Light Tritanopia'}, + {value: 'light_high_contrast', left: '☀ī¸', title: 'Light High Contrast'}, + {value: 'dark', left: '🌗', title: 'Dark'}, + {value: 'dark_dimmed', left: '🌗', title: 'Dark Dimmed'}, + {value: 'dark_colorblind', left: '🌗', title: 'Dark Protanopia & Deuteranopia'}, + {value: 'dark_tritanopia', left: '🌗', title: 'Dark Tritanopia'}, + {value: 'dark_high_contrast', left: '🌗', title: 'Dark High Contrast'}, +] + +export const globalTypes = { + colorScheme: { + name: 'Theme', + description: 'Switch themes', + defaultValue: 'light', + toolbar: { + icon: 'contrast', + items: [...primerThemes, {value: 'all', left: '', title: 'All'}], + showName: true, + dynamicTitle: true, }, + showSurroundingElements: {}, }, } + +export const decorators = [ + (Story, context) => { + const {colorScheme} = context.globals + + useEffect(() => { + const colorMode = colorScheme.startsWith('light') ? 'light' : 'dark' + document.body.setAttribute('data-color-mode', colorMode) + + const lightTheme = colorScheme.startsWith('light') ? colorScheme : undefined + document.body.setAttribute('data-light-theme', lightTheme) + + const darkTheme = colorScheme.startsWith('dark') ? colorScheme : undefined + document.body.setAttribute('data-dark-theme', darkTheme) + }, [colorScheme]) + + const showSurroundingElements = + context.globals.showSurroundingElements ?? window.localStorage.getItem('showSurroundingElements') === 'true' + return context.globals.colorScheme === 'all' ? ( + primerThemes.map(({value: theme}) => ( + +
+ + + {context.globals.colorScheme === 'all' &&

{theme}

} + +
+ + )) + ) : ( + +
+ + {showSurroundingElements ? Primer documentation : ''} + + {showSurroundingElements ? Primer documentation : ''} + +
+ + ) + }, +] + +export default preview diff --git a/.storybook/primitives-v7.css b/.storybook/primitives-v7.css index dc20bc48e36..1f2a3de40e6 100644 --- a/.storybook/primitives-v7.css +++ b/.storybook/primitives-v7.css @@ -1,2 +1 @@ -@import '@primer/css/dist/primitives.css'; -@import '@primer/css/dist/color-modes.css'; +@import 'https://unpkg.com/@primer/css@latest/dist/color-modes.css'; diff --git a/.storybook/src/accessibility-tool.tsx b/.storybook/src/accessibility-tool.tsx index fe2625ae68c..4b27f55ce08 100644 --- a/.storybook/src/accessibility-tool.tsx +++ b/.storybook/src/accessibility-tool.tsx @@ -6,7 +6,7 @@ export const ADDON_ID = 'show-surrounding-links' export const TOOL_ID = `${ADDON_ID}/tool` export const Tool = () => { - const [{showSurroundingElements, colorScheme}, updateGlobals] = useGlobals() + const [{showSurroundingElements}, updateGlobals] = useGlobals() const toggleMyTool = useCallback(() => { const currentValue = showSurroundingElements ?? window?.localStorage.getItem('showSurroundingElements') === 'true' diff --git a/.storybook/storybook.css b/.storybook/storybook.css new file mode 100644 index 00000000000..5ee0d5b8a6c --- /dev/null +++ b/.storybook/storybook.css @@ -0,0 +1,54 @@ +/* ignore CSS modules */ +:global { + .story-wrap { + font-family: var(--fontStack-system); + color: var(--fgColor-default); + } + + #storybook-preview-wrapper { + background-color: var(--bgColor-default) !important; + width: 100% !important; + height: 100% !important; + } + + .theme-wrap-grid { + display: grid; + grid-template-columns: repeat(4, minmax(var(--breakpoint-xsmall, 20rem), auto)); + grid-gap: 1px; + height: 100vh; + } + + .story-wrap-grid { + outline: 1px solid #d4d4d8; + padding-bottom: 40px; + position: relative; + } + + @media (max-width: calc(20rem * 4)) { + .theme-wrap-grid { + grid-template-columns: repeat(3, minmax(var(--breakpoint-xsmall, 20rem), auto)); + } + } + + @media (max-width: calc(20rem * 3)) { + .theme-wrap-grid { + grid-template-columns: repeat(2, minmax(var(--breakpoint-xsmall, 20rem), auto)); + } + } + + @media (max-width: calc(20rem * 2)) { + .theme-wrap-grid { + display: block; + } + } + + .theme-name { + position: absolute; + bottom: 0; + right: 0; + background-color: var(--bgColor-muted); + padding: var(--base-size-4) var(--base-size-8); + font: var(--text-caption-shorthand); + margin: 0; + } +} diff --git a/CHANGELOG.md b/CHANGELOG.md index e996df673be..e26ab97ab3c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,107 @@ # @primer/components +## 36.7.0 + +### Minor Changes + +- [#4157](https://github.com/primer/react/pull/4157) [`aafa257e1`](https://github.com/primer/react/commit/aafa257e1df4e0d73bb328edbfca2f23976d4756) Thanks [@langermank](https://github.com/langermank)! - - Adds CSS variable color values to the legacy Primitive design tokens. + - Three values include: the new v8 color CSS variable, a fallback of the old color CSS variable, and the raw value. + +### Patch Changes + +- [#4193](https://github.com/primer/react/pull/4193) [`c4193d680`](https://github.com/primer/react/commit/c4193d680b9b392bd1e60b1db1dd3efe0119af2d) Thanks [@langermank](https://github.com/langermank)! - Add missing CSS vars to legacy-theme + +## 36.6.0 + +### Minor Changes + +- [#3787](https://github.com/primer/react/pull/3787) [`c9d74219d`](https://github.com/primer/react/commit/c9d74219de81378cabd9df7b3bb379b30322148e) Thanks [@langermank](https://github.com/langermank)! - - Moves legacy color primitives from `primer/primitives` directly into Primer React + + - Cleans up unused dependencies on primitives other than color + - Preparing for the upgrade to CSS variables (Primitives v8) + +- [#3994](https://github.com/primer/react/pull/3994) [`c40f76562`](https://github.com/primer/react/commit/c40f76562ceb5d4c4d54610871487ab1b5481288) Thanks [@maximedegreve](https://github.com/maximedegreve)! - ActionMenu: Only use checkmarks in menus instead of checkboxes + +- [#4135](https://github.com/primer/react/pull/4135) [`c2b069cfd`](https://github.com/primer/react/commit/c2b069cfd49491109d9eec2c895f6ddc5eb939bc) Thanks [@dipree](https://github.com/dipree)! - Deprecate the `underline` property of the Link component in favor of the new `inline` property to better handle link visibility and accessibility when adjacent to text. + +- [#4145](https://github.com/primer/react/pull/4145) [`996475f7b`](https://github.com/primer/react/commit/996475f7b6a70d8bd0109758368d61d46eacb638) Thanks [@siddharthkp](https://github.com/siddharthkp)! - experimental/SelectPanel: Add SelectPanel.SecondaryAction + +- [#4128](https://github.com/primer/react/pull/4128) [`359213b29`](https://github.com/primer/react/commit/359213b294bbc38c384d3db382fa8803453a6dfe) Thanks [@joshblack](https://github.com/joshblack)! - Add "use client" to package entrypoints to support React Server Components + +### Patch Changes + +- [#4146](https://github.com/primer/react/pull/4146) [`4e7404c37`](https://github.com/primer/react/commit/4e7404c3743140d19a36c3818c68357968afdc9b) Thanks [@siddharthkp](https://github.com/siddharthkp)! - experimental/SelectPanel: Clear action in search input is only visible when there is text to clear + +- [#4120](https://github.com/primer/react/pull/4120) [`cbdd98a83`](https://github.com/primer/react/commit/cbdd98a838e5d1fd9cc1a97016466c3b6ecbf14e) Thanks [@siddharthkp](https://github.com/siddharthkp)! - experimental/SelectPanel: Add `modal` variant + +- [#4131](https://github.com/primer/react/pull/4131) [`91a899ea2`](https://github.com/primer/react/commit/91a899ea267c74f2935bd7ec433fca1607cffd1c) Thanks [@siddharthkp](https://github.com/siddharthkp)! - experimental/SelectPanel: Fix bug where onSubmit also called onCancel! + +- [#4098](https://github.com/primer/react/pull/4098) [`dc97a9b3f`](https://github.com/primer/react/commit/dc97a9b3fd754409b46c7de996a7d44c07a9c1f9) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Tooltip2: Fix the anchor position mapping to reflect the directions correctly + +- [#4170](https://github.com/primer/react/pull/4170) [`18d16092d`](https://github.com/primer/react/commit/18d16092d59cab7331e65cb81a3810c5ea466acb) Thanks [@siddharthkp](https://github.com/siddharthkp)! - experimental/SelectPanel: Fix height for `fit-content` in Safari + +## 36.5.0 + +### Minor Changes + +- [#4090](https://github.com/primer/react/pull/4090) [`6f043bc34`](https://github.com/primer/react/commit/6f043bc34c712991f074c246ba8df718d387b66f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Deprecate `MarkdownEditor`, `MarkdownViewer`, `InlineAutocomplete`, and related hooks + +- [#4049](https://github.com/primer/react/pull/4049) [`f0d38bc39`](https://github.com/primer/react/commit/f0d38bc390b9bbe99227f1c7b36730188e37ea5e) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Replaces deprecated `Button` component in `Dialog` with newest version + +- [#4061](https://github.com/primer/react/pull/4061) [`f46c07189`](https://github.com/primer/react/commit/f46c07189c849d727f567c85e985695e75acc4cf) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds a new prop, `animated`, to the ProgressBar component. This allows the "filled" segment(s) to animate and indicate some process is still in progress. + + + +- [#4090](https://github.com/primer/react/pull/4090) [`6f043bc34`](https://github.com/primer/react/commit/6f043bc34c712991f074c246ba8df718d387b66f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Supports inactive ActionList items by letting users pass the required message to the `inactiveText` prop. + + + +- [#4028](https://github.com/primer/react/pull/4028) [`bbe58b8e1`](https://github.com/primer/react/commit/bbe58b8e1c7cca0ebec46fffd184c1db23bebcdf) Thanks [@joshblack](https://github.com/joshblack)! - Use a CSS variable for the monospace font stack + +### Patch Changes + +- [#4082](https://github.com/primer/react/pull/4082) [`c2809d677`](https://github.com/primer/react/commit/c2809d677a44686573f0bd31fc1988e73ef80b84) Thanks [@mperrotti](https://github.com/mperrotti)! - - Corrects the math to calculate the width of AvatarStack containers. + + - Prevents `.pc-AvatarStackBody` from being removed from document flow by `position: absolute`. This isn't strictly necessary now that we're correctly setting the width of the stack, but it's an extra level of safety for preserving the correct layout. + + + +- [#4020](https://github.com/primer/react/pull/4020) [`c2a53a003`](https://github.com/primer/react/commit/c2a53a003fb392b97cd33aa5eea0329e4f726874) Thanks [@siddharthkp](https://github.com/siddharthkp)! - experimental/SelectPanel2: Use `` element + +- [#4090](https://github.com/primer/react/pull/4090) [`6f043bc34`](https://github.com/primer/react/commit/6f043bc34c712991f074c246ba8df718d387b66f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Tooltip2: Do not wrap the tooltip span and its trigger in a div + +- [#4090](https://github.com/primer/react/pull/4090) [`6f043bc34`](https://github.com/primer/react/commit/6f043bc34c712991f074c246ba8df718d387b66f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Sync theme in effect + +- [#4090](https://github.com/primer/react/pull/4090) [`6f043bc34`](https://github.com/primer/react/commit/6f043bc34c712991f074c246ba8df718d387b66f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Use `aria-required` instead of `required` on required form elements + + + +- [#4090](https://github.com/primer/react/pull/4090) [`6f043bc34`](https://github.com/primer/react/commit/6f043bc34c712991f074c246ba8df718d387b66f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - TextInput, Textarea: Does not pass `aria-required` attribute to input or textarea if it is undefined. This fixes some tests that were breaking in dotcom. + + + +- [#4090](https://github.com/primer/react/pull/4090) [`6f043bc34`](https://github.com/primer/react/commit/6f043bc34c712991f074c246ba8df718d387b66f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Adapts Blankslate to render proportionally in narrow areas. + + + +- [#4090](https://github.com/primer/react/pull/4090) [`6f043bc34`](https://github.com/primer/react/commit/6f043bc34c712991f074c246ba8df718d387b66f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Fix an issue where the scrollable Dialog body could not be focused with the keyboard + +- [#4002](https://github.com/primer/react/pull/4002) [`1a1d89ce0`](https://github.com/primer/react/commit/1a1d89ce048e51c4d59e9873d8b76c0da07a786a) Thanks [@peterbe](https://github.com/peterbe)! - Adds the ability to unset `emptyStateText` in Autocomplete.Menu. This results in no menu being rendered. + + + +- [#3926](https://github.com/primer/react/pull/3926) [`4e4c5ec68`](https://github.com/primer/react/commit/4e4c5ec68a9c744aedc15cadb7a9a7024e997426) Thanks [@strackoverflow](https://github.com/strackoverflow)! - Allow overflow scrolling to be controlled via an optional `overflow` property on Overlay + +- [#4096](https://github.com/primer/react/pull/4096) [`1b9011da4`](https://github.com/primer/react/commit/1b9011da4e0a0f20547b2e1146bb78f3892b96ea) Thanks [@strackoverflow](https://github.com/strackoverflow)! - Fix missing `aria-selected` & `aria-checked` attributes in ActionList items + +- [#4090](https://github.com/primer/react/pull/4090) [`6f043bc34`](https://github.com/primer/react/commit/6f043bc34c712991f074c246ba8df718d387b66f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - use in confirm() + +- [#4090](https://github.com/primer/react/pull/4090) [`6f043bc34`](https://github.com/primer/react/commit/6f043bc34c712991f074c246ba8df718d387b66f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Fixed confirm() leaving
s in the DOM. + +- [#4074](https://github.com/primer/react/pull/4074) [`06c7c6c1d`](https://github.com/primer/react/commit/06c7c6c1d126520ced0c5641b7e0a69e343aacdd) Thanks [@dependabot](https://github.com/apps/dependabot)! - Update types for Select to include `placeholder` + +- [#4090](https://github.com/primer/react/pull/4090) [`6f043bc34`](https://github.com/primer/react/commit/6f043bc34c712991f074c246ba8df718d387b66f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Portal avoids useless createElement + ## 36.4.0 ### Minor Changes diff --git a/CODEOWNERS b/CODEOWNERS index 36ebb00b8c5..a9194688330 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1,2 +1,3 @@ # All changes should be reviewed by a member of the @react-reviewers team * @primer/react-reviewers +./src/legacy-theme/ @langermank diff --git a/README.md b/README.md index 241a92b6f85..ba5eb7685fd 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@

- + Primer logo

Primer React

@@ -8,17 +8,17 @@

- + npm package - + contributors graph - - + license

diff --git a/contributor-docs/CONTRIBUTING.md b/contributor-docs/CONTRIBUTING.md index d65e5436712..70722150289 100644 --- a/contributor-docs/CONTRIBUTING.md +++ b/contributor-docs/CONTRIBUTING.md @@ -23,7 +23,7 @@ ## Roadmap -If you're looking for ways to contribute, a great place to start is our issues labeled [good first issue](https://github.com/primer/react/issues?q=is%3Aissue+is%3Aclosed+label%3A%22good+first+issue%22)! If you've got a feature that you'd like to implement, be sure to check out our [Primer Roadmap](https://github.com/orgs/github/projects/2759) (GitHub staff only) to make sure it hasn't already been started on. +If you're looking for ways to contribute, a great place to start is our issues labeled [good first issue](https://github.com/primer/react/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)! If you've got a feature that you'd like to implement, be sure to check out our [Primer Roadmap](https://github.com/orgs/github/projects/2759) (GitHub staff only) to make sure it hasn't already been started on. ## Before Getting Started diff --git a/contributor-docs/adrs/adr-015-npm-workspaces.md b/contributor-docs/adrs/adr-015-npm-workspaces.md index c45fd6aee6c..a6e304775b3 100644 --- a/contributor-docs/adrs/adr-015-npm-workspaces.md +++ b/contributor-docs/adrs/adr-015-npm-workspaces.md @@ -80,6 +80,6 @@ The current `@primer/react` package will move to the `packages/react` package. W - Performance from installing node modules for entire workspace - Find workarounds in cases where legacy-peer-deps is required as an option -### Looking forward +### Explorations - Exploration into https://nx.dev/ for build tooling as npm workspaces does not support topological script ordering diff --git a/contributor-docs/behaviors.md b/contributor-docs/behaviors.md index c6c15b8777e..c0f69b4fee2 100644 --- a/contributor-docs/behaviors.md +++ b/contributor-docs/behaviors.md @@ -53,7 +53,7 @@ Generic behaviors provide functionality that is not specific to any single compo Component behaviors specifically implement behaviors for components. Therefore, hooks that implement component behaviors should always return an object containing props objects to be spread across the elements that make up the component's JSX. While component behaviors do not necessarily have to be one-to-one, **a component may only use one component behavior**. Sometimes it makes sense to use the same component behavior on several components. For example: the Dialog, Popover, and PointerBox components may all use the `usePopover` component behavior. -### Examples +### Component behavior examples - `usePopover` - `useComboBox` diff --git a/contributor-docs/testing.md b/contributor-docs/testing.md index e9be59dbaf8..303ea38c437 100644 --- a/contributor-docs/testing.md +++ b/contributor-docs/testing.md @@ -78,22 +78,6 @@ To make assertions about the elements we use [Jest](https://jestjs.io/) and [jes We are slowly moving away from using `Jest` snapshots as a way to test visual changes of our components. You can read more about the decision in this [ADR](https://github.com/primer/react/blob/main/contributor-docs/adrs/adr-011-snapshot-tests.md). We are in the process of migrating our existing snapshot tests to use [Playwright](https://playwright.dev/) for visual regression testing. If you are writing a new test and you need to test the visual changes of the component, please refer to the [Visual Regression Tests](#visual-regression-tests) section. -#### Updating `theme-preval` snapshots - -If you need to update the `theme-preval` snapshots, make sure to first update the cache-busting timestamp in [src/theme-preval.js](https://github.com/primer/react/blob/main/src/theme-preval.js) - -```diff -- // Cache bust: 2022-02-23 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file) -+ // Cache bust: 2023-02-24 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file) -``` - -After you will need to run the following commands and commit changes to the `themePreval.test.ts.snap` file: - -```sh -npm run build -npm run test -- -u -``` - ### Running Tests | Task | Command | @@ -120,8 +104,6 @@ Storybook tests are authored within the components's source directory with the f ## Visual Regression Tests -### Overview - We use Playwright to run visual regression tests against our components along with automated accessibility checks. These tests are authored within the `e2e` directory and match the file pattern: `*-test.ts`. @@ -238,9 +220,3 @@ and downloading the relevant report. The browser executables need to be installed so that playwright can run tests inside chromium, firefox, etc. They can be installed by running `npx playwright install --with-deps` - - - -### Why do I see the `theme-preval` snapshots being updated when I run `npm test -- -u` even though I didn't change anything theme related? - -It is likely that you are using the previous version of the theme values. To fix this, you can run `npm run build` to re-build the components with the latest theme values. diff --git a/contributor-docs/versioning.md b/contributor-docs/versioning.md index 448f542d6f8..1c79e97b64d 100644 --- a/contributor-docs/versioning.md +++ b/contributor-docs/versioning.md @@ -1,3 +1,5 @@ + + # Versioning @@ -5,14 +7,15 @@ ## Table of Contents -* [Overview](#overview) -* [Changes](#changes) -* [Reference](#reference) - * [The type of a prop is broadened](#the-type-of-a-prop-is-broadened) - * [The type of a prop is narrowed](#the-type-of-a-prop-is-narrowed) - * [The `display` property used for the container of `children` is changed](#the-display-property-used-for-the-container-of-children-is-changed) - * [A component includes a landmark role](#a-component-includes-a-landmark-role) - * [A component no longer includes a landmark role](#a-component-no-longer-includes-a-landmark-role) +- [Overview](#overview) +- [Changes](#changes) +- [Reference](#reference) + - [The type of a prop is broadened](#the-type-of-a-prop-is-broadened) + - [The type of a prop is narrowed](#the-type-of-a-prop-is-narrowed) + - [The `display` property used for the container of `children` is changed](#the-display-property-used-for-the-container-of-children-is-changed) + - [A component includes a landmark role](#a-component-includes-a-landmark-role) + - [A component no longer includes a landmark role](#a-component-no-longer-includes-a-landmark-role) + - [The element onto which props are spread is changed](#the-element-onto-which-props-are-spread-is-changed) @@ -52,6 +55,7 @@ For a full list of releases, visit our [releases](https://github.com/primer/reac | | [The type of a prop is narrowed](#the-type-of-a-prop-is-narrowed) | `major` | | | A prop is deprecated | `minor` | | | A prop is removed | `major` | +| | [The element onto which props are spread is changed](#the-element-onto-which-props-are-spread-is-changed) | potentially `major` | | Package | A dependency is added | `minor` | | | A dependency is removed and it does not affect the public API of the package | `minor` | | | A dependency is removed and it does affect the public API of the package | `major` | @@ -163,3 +167,82 @@ of products and should be treated carefully. In certain situations, it may be possible to remove a landmark role that is superfluous in a `minor` release. However, most cases should treat this as a breaking change and should draft a migration plan accordingly for product teams. + +### The element onto which props are spread is changed + +semver bump: potentially **major** + +This situation has a couple of scenarios where it may be considered a breaking change: + +- When the changes to the public types for `props` do not overlap due to the change in element +- When the values provided as `props` may contribute to layout + +These scenarios can occur when either adding a new container element or when +moving `props` that are spread from a container to an element contained within +the container. + +
+When the changes to the public types for `props` do not overlap due to the change in element + +**Before** + +```tsx +type Props = React.ComponentPropsWithoutRef<'input'> + +function Component(props: Props) { + return +} +``` + +**After** + +```tsx +// This type does not fully overlap with the previous type and is a breaking +// change +type Props = React.ComponentPropsWithoutRef<'div'> + +function Component(props: Props) { + return ( +
+ +
+ ) +} +``` + +
+ +
+When the values provided as `props` may contribute to layout + +**Before** + +```tsx +type Props = { + /* ... */ +} + +function Component(props: Props) { + return +} +``` + +**After** + +```tsx +type Props = { + /* ... */ +} + +// When adding the new container element, values that may have influenced layout +// will no longer apply as the `` element is within the container element. +function Component(props: Props) { + return ( +
+ +
+ ) +} +``` + +
diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx index bb602fb235f..13dc782f735 100644 --- a/docs/content/ActionList.mdx +++ b/docs/content/ActionList.mdx @@ -14,7 +14,7 @@ import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react' import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code' import DeprecationBanner from '../components/DeprecationBanner' - + diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx index 582ea6eced5..243fd67b978 100644 --- a/docs/content/ActionMenu.mdx +++ b/docs/content/ActionMenu.mdx @@ -13,7 +13,7 @@ import data from '../../src/ActionMenu/ActionMenu.docs.json' import {Box, Avatar, ActionList, ActionMenu} from '@primer/react' import DeprecationBanner from '../components/DeprecationBanner' - +
diff --git a/docs/content/AnchoredOverlay.mdx b/docs/content/AnchoredOverlay.mdx index a3c2de115c5..d025974d46a 100644 --- a/docs/content/AnchoredOverlay.mdx +++ b/docs/content/AnchoredOverlay.mdx @@ -10,7 +10,7 @@ import data from '../../src/AnchoredOverlay/AnchoredOverlay.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor. The overlay can be opened and navigated using keyboard or mouse. diff --git a/docs/content/Autocomplete.mdx b/docs/content/Autocomplete.mdx index 0e17532b77f..4667d822702 100644 --- a/docs/content/Autocomplete.mdx +++ b/docs/content/Autocomplete.mdx @@ -4,14 +4,14 @@ title: Autocomplete status: Alpha description: Used to render a text input that allows a user to quickly filter through a list of options to pick one or more values. source: https://github.com/primer/react/tree/main/src/Autocomplete -storybook: '/react/storybook?path=/story/components-forms-autocomplete' +storybook: '/react/storybook?path=/story/components-autocomplete' --- import data from '../../src/Autocomplete/Autocomplete.docs.json' import {Autocomplete} from '@primer/react' import DeprecationBanner from '../components/DeprecationBanner' - + The `Autocomplete` component is comprised of an `Autocomplete.Input` component that a user types into, and a `Autocomplete.Menu` component that displays the list of selectable values. diff --git a/docs/content/Avatar.mdx b/docs/content/Avatar.mdx index 4cebeb4bb92..718561b978b 100644 --- a/docs/content/Avatar.mdx +++ b/docs/content/Avatar.mdx @@ -9,7 +9,7 @@ import data from '../../src/Avatar/Avatar.docs.json' import {Avatar, Box} from '@primer/react' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Avatar} from '@primer/react' diff --git a/docs/content/AvatarPair.mdx b/docs/content/AvatarPair.mdx index 9d55f63c61d..6fe658244e8 100644 --- a/docs/content/AvatarPair.mdx +++ b/docs/content/AvatarPair.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/AvatarPair import data from '../../src/AvatarPair/AvatarPair.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {AvatarPair} from '@primer/react' diff --git a/docs/content/AvatarStack.mdx b/docs/content/AvatarStack.mdx index 25e03bf6fad..ca326e378a8 100644 --- a/docs/content/AvatarStack.mdx +++ b/docs/content/AvatarStack.mdx @@ -11,7 +11,7 @@ import data from '../../src/AvatarStack/AvatarStack.docs.json' import {AvatarStack} from '@primer/react' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {AvatarStack} from '@primer/react' diff --git a/docs/content/Box.mdx b/docs/content/Box.mdx index 1f87e187200..1fdc7fdcd18 100644 --- a/docs/content/Box.mdx +++ b/docs/content/Box.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Box.tsx import data from '../../src/Box/Box.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Box} from '@primer/react' diff --git a/docs/content/BranchName.mdx b/docs/content/BranchName.mdx index 434c336ae4f..41f5bbee151 100644 --- a/docs/content/BranchName.mdx +++ b/docs/content/BranchName.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/BranchName/BranchName.tsx import data from '../../src/BranchName/BranchName.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {BranchName} from '@primer/react' diff --git a/docs/content/Breadcrumbs.mdx b/docs/content/Breadcrumbs.mdx index 75dc045480d..d4459aad7a8 100644 --- a/docs/content/Breadcrumbs.mdx +++ b/docs/content/Breadcrumbs.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Breadcrumbs/Breadcrumbs.ts import data from '../../src/Breadcrumbs/Breadcrumbs.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Breadcrumbs} from '@primer/react' diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx index 638c7a303f6..1730d875a56 100644 --- a/docs/content/Button.mdx +++ b/docs/content/Button.mdx @@ -10,7 +10,7 @@ description: Use button for the main actions on a page or form. import data from '../../src/Button/Button.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Button} from '@primer/react' diff --git a/docs/content/ButtonGroup.mdx b/docs/content/ButtonGroup.mdx index de12cceb89b..67f447d6c3f 100644 --- a/docs/content/ButtonGroup.mdx +++ b/docs/content/ButtonGroup.mdx @@ -9,7 +9,7 @@ storybook: '/react/storybook?path=/story/components-buttongroup--default' import data from '../../src/ButtonGroup/ButtonGroup.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {ButtonGroup} from '@primer/react' diff --git a/docs/content/Checkbox.mdx b/docs/content/Checkbox.mdx index a834915c95d..7c140f7def5 100644 --- a/docs/content/Checkbox.mdx +++ b/docs/content/Checkbox.mdx @@ -10,7 +10,7 @@ componentId: checkbox import data from '../../src/Checkbox/Checkbox.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/CheckboxGroup.mdx b/docs/content/CheckboxGroup.mdx index dce9e417ed7..0bdef56a2ed 100644 --- a/docs/content/CheckboxGroup.mdx +++ b/docs/content/CheckboxGroup.mdx @@ -13,7 +13,7 @@ import {CheckboxGroup, Checkbox, Box} from '@primer/components' import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/CircleBadge.mdx b/docs/content/CircleBadge.mdx index 587a95e1755..6dfd355eecb 100644 --- a/docs/content/CircleBadge.mdx +++ b/docs/content/CircleBadge.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/CircleBadge import data from '../../src/CircleBadge/CircleBadge.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {CircleBadge} from '@primer/react' diff --git a/docs/content/CounterLabel.mdx b/docs/content/CounterLabel.mdx index 5e79ac1a4a9..e79d3eb7838 100644 --- a/docs/content/CounterLabel.mdx +++ b/docs/content/CounterLabel.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/CounterLabel/CounterLabel. import data from '../../src/CounterLabel/CounterLabel.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Example diff --git a/docs/content/Details.mdx b/docs/content/Details.mdx index c81f1f91b7d..92689216bb0 100644 --- a/docs/content/Details.mdx +++ b/docs/content/Details.mdx @@ -9,7 +9,7 @@ storybook: '/react/storybook/?path=/story/components-details--default' import data from '../../src/Details/Details.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + `Details` is a styled `details` element for use with the `useDetails` hook. The `useDetails` hook returns the `open` state, a `setOpen` function to manually change the open state, and **`getDetailsProps` which must be spread onto your `Details` element in order for `Details` to get receive the proper behaviors provided by the hook**. See [Kent Dodd's article on this pattern](https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters). diff --git a/docs/content/Dialog.mdx b/docs/content/Dialog.mdx index 88a9e6d0e3d..d277c4baef9 100644 --- a/docs/content/Dialog.mdx +++ b/docs/content/Dialog.mdx @@ -7,7 +7,7 @@ source: https://github.com/primer/react/blob/main/src/Dialog import data from '../../src/Dialog.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + The dialog component is used for all modals. It renders on top of the rest of the app with an overlay. diff --git a/docs/content/Flash.mdx b/docs/content/Flash.mdx index 52bf91e3fb7..6cf5c0ba9b9 100644 --- a/docs/content/Flash.mdx +++ b/docs/content/Flash.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/Flash import data from '../../src/Flash/Flash.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Flash} from '@primer/react' diff --git a/docs/content/FormControl.mdx b/docs/content/FormControl.mdx index c57363c5c49..0e2c07d21b7 100644 --- a/docs/content/FormControl.mdx +++ b/docs/content/FormControl.mdx @@ -24,7 +24,7 @@ import { Text, } from '@primer/react' - + ## Examples diff --git a/docs/content/Header.mdx b/docs/content/Header.mdx index d0a5ab1fafc..b89cb38d84f 100644 --- a/docs/content/Header.mdx +++ b/docs/content/Header.mdx @@ -9,7 +9,7 @@ componentId: header import data from '../../src/Header/Header.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/Heading.mdx b/docs/content/Heading.mdx index 10b8a07b875..62f0c47de4e 100644 --- a/docs/content/Heading.mdx +++ b/docs/content/Heading.mdx @@ -10,7 +10,7 @@ componentId: heading import data from '../../src/Heading/Heading.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + The Heading component will render an html `h2` tag without any default styling. Other heading level elements `h1-h6` are available through use of the `as` prop (see [System Props](/system-props) for additional explanation). Please reference the [w3 recommendations for headings](https://www.w3.org/WAI/tutorials/page-structure/headings/) to ensure your headings provide an accessible experience for screen reader users. diff --git a/docs/content/IconButton.mdx b/docs/content/IconButton.mdx index b5c35cdc2c2..10c24327d46 100644 --- a/docs/content/IconButton.mdx +++ b/docs/content/IconButton.mdx @@ -10,7 +10,7 @@ description: An accessible button component with no text and only icon. import data from '../../src/Button/IconButton.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Usage diff --git a/docs/content/Label.mdx b/docs/content/Label.mdx index 7a04b9def31..81e919cb902 100644 --- a/docs/content/Label.mdx +++ b/docs/content/Label.mdx @@ -10,7 +10,7 @@ description: Use Label components to add contextual metadata to a design. import data from '../../src/Label/Label.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/LabelGroup.mdx b/docs/content/LabelGroup.mdx index a1bc35754cc..a440d7f9f24 100644 --- a/docs/content/LabelGroup.mdx +++ b/docs/content/LabelGroup.mdx @@ -9,7 +9,7 @@ componentId: label_group import data from '../../src/LabelGroup/LabelGroup.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Example diff --git a/docs/content/Link.mdx b/docs/content/Link.mdx index a43c1892756..4b200526a8c 100644 --- a/docs/content/Link.mdx +++ b/docs/content/Link.mdx @@ -9,7 +9,7 @@ storybook: '/react/storybook/?path=/story/components-link--default' import data from '../../src/Link/Link.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + The Link component styles anchor tags with default hyperlink color cues and hover text decoration. `Link` is used for destinations, or moving from one page to another. diff --git a/docs/content/NavList.mdx b/docs/content/NavList.mdx index aebe8c50c45..b4a08fa6635 100644 --- a/docs/content/NavList.mdx +++ b/docs/content/NavList.mdx @@ -10,7 +10,7 @@ storybook: '/react/storybook/?path=/story/components-navlist--simple' import data from '../../src/NavList/NavList.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {NavList} from '@primer/react' @@ -97,7 +97,7 @@ import {NavList} from '@primer/react' ```jsx live drafts <> - + Workflows diff --git a/docs/content/Overlay.mdx b/docs/content/Overlay.mdx index 05a4124100d..c26208e62c5 100644 --- a/docs/content/Overlay.mdx +++ b/docs/content/Overlay.mdx @@ -10,7 +10,7 @@ storybook: '/react/storybook?path=/story/private-components-overlay--dropdown-ov import data from '../../src/Overlay/Overlay.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Overlay} from '@primer/react' diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx index cd3e4909c63..90933a779d0 100644 --- a/docs/content/PageLayout.mdx +++ b/docs/content/PageLayout.mdx @@ -11,7 +11,7 @@ a11yReviewed: true import data from '../../src/PageLayout/PageLayout.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {PageLayout} from '@primer/react' diff --git a/docs/content/Pagehead.md b/docs/content/Pagehead.md index 422cb7eb89a..5493d53f168 100644 --- a/docs/content/Pagehead.md +++ b/docs/content/Pagehead.md @@ -9,7 +9,7 @@ status: Alpha import data from '../../src/Pagehead/Pagehead.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Pagehead} from '@primer/react' diff --git a/docs/content/Pagination.md b/docs/content/Pagination.md index c92b3936764..f10d9f4fb83 100644 --- a/docs/content/Pagination.md +++ b/docs/content/Pagination.md @@ -12,7 +12,7 @@ import data from '../../src/Pagination/Pagination.docs.json' import State from '../components/State' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Pagination} from '@primer/react' diff --git a/docs/content/PointerBox.mdx b/docs/content/PointerBox.mdx index c834b422936..a25d0d0ebf7 100644 --- a/docs/content/PointerBox.mdx +++ b/docs/content/PointerBox.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/PointerBox import data from '../../src/PointerBox/PointerBox.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/Popover.md b/docs/content/Popover.md index 827fac62dee..b5f4d622110 100644 --- a/docs/content/Popover.md +++ b/docs/content/Popover.md @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Popover import data from '../../src/Popover/Popover.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {Popover} from '@primer/react' diff --git a/docs/content/ProgressBar.mdx b/docs/content/ProgressBar.mdx index af1ba92caf9..d563b137f6e 100644 --- a/docs/content/ProgressBar.mdx +++ b/docs/content/ProgressBar.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/ProgressBar import data from '../../src/ProgressBar/ProgressBar.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {ProgressBar} from '@primer/react' diff --git a/docs/content/Radio.mdx b/docs/content/Radio.mdx index a8cd818773f..095794fc792 100644 --- a/docs/content/Radio.mdx +++ b/docs/content/Radio.mdx @@ -10,7 +10,7 @@ storybook: '/react/storybook?path=/story/components-forms-radiogroup' import data from '../../src/Radio/Radio.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/RadioGroup.mdx b/docs/content/RadioGroup.mdx index b3ccf8a3f24..03e14e1c267 100644 --- a/docs/content/RadioGroup.mdx +++ b/docs/content/RadioGroup.mdx @@ -13,7 +13,7 @@ import {RadioGroup, Radio, Box} from '@primer/components' import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/RelativeTime.mdx b/docs/content/RelativeTime.mdx index 432c8ce56d0..d0ce4156286 100644 --- a/docs/content/RelativeTime.mdx +++ b/docs/content/RelativeTime.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/RelativeTime import data from '../../src/RelativeTime/RelativeTime.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {RelativeTime} from '@primer/react' diff --git a/docs/content/SegmentedControl.mdx b/docs/content/SegmentedControl.mdx index 1015ef1e4e0..2b68e4fedaf 100644 --- a/docs/content/SegmentedControl.mdx +++ b/docs/content/SegmentedControl.mdx @@ -10,7 +10,7 @@ storybook: '/react/storybook/?path=/story/components-segmentedcontrol' import data from '../../src/SegmentedControl/SegmentedControl.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + diff --git a/docs/content/Select.mdx b/docs/content/Select.mdx index 972c204c960..e9af0a3d76b 100644 --- a/docs/content/Select.mdx +++ b/docs/content/Select.mdx @@ -13,7 +13,7 @@ import data from '../../src/Select/Select.docs.json' import {Select, Text} from '@primer/react' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx index 6861ab13ef6..c7bdf3e7ab7 100644 --- a/docs/content/SelectPanel.mdx +++ b/docs/content/SelectPanel.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/SelectPanel import data from '../../src/SelectPanel/SelectPanel.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + A `SelectPanel` provides an anchor that will open an overlay with a list of selectable items, and a text input to filter the selectable items diff --git a/docs/content/Spinner.mdx b/docs/content/Spinner.mdx index faaecc2e53d..d128cfb2843 100644 --- a/docs/content/Spinner.mdx +++ b/docs/content/Spinner.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Spinner/Spinner.tsx import data from '../../src/Spinner/Spinner.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```jsx live diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx index d9b500ae643..2f717c3fe0f 100644 --- a/docs/content/SplitPageLayout.mdx +++ b/docs/content/SplitPageLayout.mdx @@ -11,7 +11,7 @@ a11yReviewed: true import data from '../../src/SplitPageLayout/SplitPageLayout.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ```js import {SplitPageLayout} from '@primer/react' diff --git a/docs/content/StateLabel.mdx b/docs/content/StateLabel.mdx index c9ebc0e6172..46524e9222a 100644 --- a/docs/content/StateLabel.mdx +++ b/docs/content/StateLabel.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/tree/main/src/StateLabel import data from '../../src/StateLabel/StateLabel.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + ## Examples diff --git a/docs/content/SubNav.mdx b/docs/content/SubNav.mdx index 414736fd76f..9aa7fd15d38 100644 --- a/docs/content/SubNav.mdx +++ b/docs/content/SubNav.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/SubNav import data from '../../src/SubNav/SubNav.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + **Attention:** Make sure to properly label your `SubNav` with an `aria-label` to provide context about the type of navigation contained in `SubNav`. diff --git a/docs/content/TabNav.mdx b/docs/content/TabNav.mdx index 5d8b78a72a6..12d6df799d3 100644 --- a/docs/content/TabNav.mdx +++ b/docs/content/TabNav.mdx @@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/TabNav import data from '../../src/TabNav/TabNav.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + **Attention:** Make sure to properly label your `TabNav` with an `aria-label` to provide context about the type of navigation contained in `TabNav`. diff --git a/docs/content/Text.mdx b/docs/content/Text.mdx index ce565b5e73c..b74665c8928 100644 --- a/docs/content/Text.mdx +++ b/docs/content/Text.mdx @@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Text import data from '../../src/Text/Text.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + The Text component is a wrapper component that will apply typography styles to the text inside. diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index 962c9dca719..adc99462668 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -9,7 +9,7 @@ storybook: '/react/storybook?path=/story/components-forms-textinput--default' import data from '../../src/TextInput/TextInput.docs.json' import DeprecationBanner from '../components/DeprecationBanner' - + TextInput is a form component to add default styling to the native text input. diff --git a/docs/content/Textarea.mdx b/docs/content/Textarea.mdx index cbc0060791b..123227b5d3e 100644 --- a/docs/content/Textarea.mdx +++ b/docs/content/Textarea.mdx @@ -12,7 +12,7 @@ import data from '../../src/Textarea/Textarea.docs.json' import {Textarea} from '@primer/react' import DeprecationBanner from '../components/DeprecationBanner' - +