diff --git a/.changeset/breezy-windows-speak.md b/.changeset/breezy-windows-speak.md new file mode 100644 index 00000000000..ab0cb4ecb14 --- /dev/null +++ b/.changeset/breezy-windows-speak.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Remove the CSS modules feature flag from Link component diff --git a/.changeset/dry-pens-pay.md b/.changeset/dry-pens-pay.md new file mode 100644 index 00000000000..86dc46d51d2 --- /dev/null +++ b/.changeset/dry-pens-pay.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Fixes negative and invalid pages in data table pagination on re-render. diff --git a/.changeset/dull-beans-dance.md b/.changeset/dull-beans-dance.md new file mode 100644 index 00000000000..7b3e87e49f7 --- /dev/null +++ b/.changeset/dull-beans-dance.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Set the `min-width` of `IconButton` to `unset` to resolve layout issues. diff --git a/.changeset/large-plants-unite.md b/.changeset/large-plants-unite.md new file mode 100644 index 00000000000..d0be95ef007 --- /dev/null +++ b/.changeset/large-plants-unite.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Bug fix(Avatar): Changed rounded border calculation for the "square" Avatar to better align with existing border styles diff --git a/.changeset/plenty-books-agree.md b/.changeset/plenty-books-agree.md new file mode 100644 index 00000000000..e893025c849 --- /dev/null +++ b/.changeset/plenty-books-agree.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +fix for `toggleStyledComponent` utility, When the feature flag is enabled and sx prop is passed in use, Box diff --git a/.changeset/silent-fireants-kneel.md b/.changeset/silent-fireants-kneel.md new file mode 100644 index 00000000000..9ce53633f3f --- /dev/null +++ b/.changeset/silent-fireants-kneel.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Add the `useFeatureFlag` hook to `@primer/react/experimental` diff --git a/.changeset/tidy-impalas-remain.md b/.changeset/tidy-impalas-remain.md new file mode 100644 index 00000000000..d595d5b4197 --- /dev/null +++ b/.changeset/tidy-impalas-remain.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Use the IconButton for the close button on Dialog diff --git a/.changeset/wet-apples-hide.md b/.changeset/wet-apples-hide.md new file mode 100644 index 00000000000..6aeb72adb44 --- /dev/null +++ b/.changeset/wet-apples-hide.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Correctly pass styled system typography and common props to the `Box` component in the `Text` component when the CSS modules feature flag is enabled. diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 098af6b11c3..35b89dfec66 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -144,7 +144,7 @@ jobs: if: ${{ always() }} uses: actions/upload-artifact@v4 with: - name: vrt-${{ matrix.shard }} + name: vrt-no-flag-${{ matrix.shard }} path: blob-report retention-days: 1 @@ -166,14 +166,92 @@ jobs: uses: actions/download-artifact@v4 with: path: all-blob-reports - pattern: vrt-* + pattern: vrt-no-flag-* merge-multiple: true - name: merge all reports run: npx playwright merge-reports --reporter html ./all-blob-reports - name: Upload report uses: actions/upload-artifact@v4 with: - name: vrt + name: vrt-no-flag + path: playwright-report + - name: check vrt-runner job status + if: ${{ needs.vrt-runner.result == 'failure' }} + run: exit 1 + + vrt-runner-all-flags: + runs-on: ubuntu-latest-8-cores + strategy: + fail-fast: false + matrix: + shard: [1, 2, 3, 4] + env: + VITE_PRIMER_REACT_CSS_MODULES_TEAM: 1 + VITE_PRIMER_REACT_CSS_MODULES_STAFF: 1 + VITE_PRIMER_REACT_CSS_MODULES_GA: 1 + steps: + - uses: actions/checkout@v4 + - name: Use Node.js 20.x + uses: actions/setup-node@v4 + with: + node-version: 22 + cache: 'npm' + - run: npm i -g npm@^10.5.1 + - name: Install dependencies + run: npm ci + - name: Build storybook + run: npx storybook build + working-directory: packages/react + - name: Run storybook + id: storybook + working-directory: packages/react + run: | + npx serve -l 6006 storybook-static & + pid=$! + echo "pid=$pid" >> $GITHUB_OUTPUT + sleep 5 + - name: Run VRT + uses: docker://mcr.microsoft.com/playwright:v1.43.0-jammy + env: + STORYBOOK_URL: 'http://172.17.0.1:6006' + with: + args: npx playwright test --grep @vrt --shard="${{ matrix.shard }}/${{ strategy.job-total }}" + - name: Stop storybook + run: kill ${{ steps.storybook.outputs.pid }} + - name: Upload report + if: ${{ always() }} + uses: actions/upload-artifact@v4 + with: + name: vrt-all-flags-${{ matrix.shard }} + path: blob-report + retention-days: 1 + + vrt-all-flags: + if: ${{ always() }} + runs-on: ubuntu-latest + needs: vrt-runner-all-flags + steps: + - uses: actions/checkout@v4 + - name: Use Node.js 20.x + uses: actions/setup-node@v4 + with: + node-version: 22 + cache: 'npm' + - run: npm i -g npm@^10.5.1 + - name: install dependencies + run: npm ci + - name: download all reports + uses: actions/download-artifact@v4 + with: + path: all-blob-reports + pattern: vrt-all-flags-* + merge-multiple: true + - name: merge all reports + run: npx playwright merge-reports --reporter html ./all-blob-reports + - name: Upload report + uses: actions/upload-artifact@v4 + with: + name: vrt-all-flags path: playwright-report - name: check vrt-runner job status if: ${{ needs.vrt-runner.result == 'failure' }} @@ -218,7 +296,7 @@ jobs: if: ${{ always() }} uses: actions/upload-artifact@v4 with: - name: axe-${{ matrix.shard }} + name: axe-no-flag-${{ matrix.shard }} path: blob-report retention-days: 1 @@ -240,7 +318,7 @@ jobs: uses: actions/download-artifact@v4 with: path: all-blob-reports - pattern: axe-* + pattern: axe-no-flag-* merge-multiple: true - name: merge all reports run: npx playwright merge-reports --reporter html ./all-blob-reports @@ -253,6 +331,84 @@ jobs: if: ${{ needs.aat-runner.result == 'failure' }} run: exit 1 + aat-runner-all-flags: + runs-on: ubuntu-latest-8-cores + strategy: + fail-fast: false + matrix: + shard: [1, 2, 3, 4] + env: + VITE_PRIMER_REACT_CSS_MODULES_TEAM: 1 + VITE_PRIMER_REACT_CSS_MODULES_STAFF: 1 + VITE_PRIMER_REACT_CSS_MODULES_GA: 1 + steps: + - uses: actions/checkout@v4 + - name: Use Node.js 20.x + uses: actions/setup-node@v4 + with: + node-version: 22 + cache: 'npm' + - run: npm i -g npm@^10.5.1 + - name: Install dependencies + run: npm ci + - name: Build storybook + run: npx storybook build + working-directory: packages/react + - name: Run storybook + id: storybook + working-directory: packages/react + run: | + npx serve -l 6006 storybook-static & + pid=$! + echo "pid=$pid" >> $GITHUB_OUTPUT + sleep 5 + - name: Run AAT + uses: docker://mcr.microsoft.com/playwright:v1.43.0-jammy + env: + STORYBOOK_URL: 'http://172.17.0.1:6006' + with: + args: npx playwright test --grep @aat --shard="${{ matrix.shard }}/${{ strategy.job-total }}" + - name: Stop storybook + run: kill ${{ steps.storybook.outputs.pid }} + - name: Upload report + if: ${{ always() }} + uses: actions/upload-artifact@v4 + with: + name: axe-all-flags-${{ matrix.shard }} + path: blob-report + retention-days: 1 + + aat-all-flags: + if: ${{ always() }} + runs-on: ubuntu-latest + needs: aat-runner-all-flags + steps: + - uses: actions/checkout@v4 + - name: Use Node.js 20.x + uses: actions/setup-node@v4 + with: + node-version: 22 + cache: 'npm' + - run: npm i -g npm@^10.5.1 + - name: install dependencies + run: npm ci + - name: download all reports + uses: actions/download-artifact@v4 + with: + path: all-blob-reports + pattern: axe-all-flags-* + merge-multiple: true + - name: merge all reports + run: npx playwright merge-reports --reporter html ./all-blob-reports + - name: Upload report + uses: actions/upload-artifact@v4 + with: + name: axe-all-flags + path: playwright-report + - name: Check aat-runner job status + if: ${{ needs.aat-runner.result == 'failure' }} + run: exit 1 + build-components-json: runs-on: ubuntu-latest steps: 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 5f865837797..3abac2ad943 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-Position-bottom-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-colorblind-linux.png index f6743f394e5..e9df71e78bf 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-dimmed-linux.png index a0714ba53cf..898c4156a07 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-high-contrast-linux.png index f4b199e5099..fb174f1d6f7 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-linux.png index f6743f394e5..e9df71e78bf 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-tritanopia-linux.png index f6743f394e5..e9df71e78bf 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-colorblind-linux.png index fe285469cc7..455bbb65e9f 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-high-contrast-linux.png index 04e1f365b4c..7b798c5100b 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-linux.png index fe285469cc7..455bbb65e9f 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-tritanopia-linux.png index fe285469cc7..455bbb65e9f 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-colorblind-linux.png index f6743f394e5..e9df71e78bf 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-dimmed-linux.png index a0714ba53cf..898c4156a07 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-high-contrast-linux.png index f4b199e5099..fb174f1d6f7 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-linux.png index f6743f394e5..e9df71e78bf 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-tritanopia-linux.png index f6743f394e5..e9df71e78bf 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-colorblind-linux.png index fe285469cc7..455bbb65e9f 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-high-contrast-linux.png index 04e1f365b4c..7b798c5100b 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-linux.png index fe285469cc7..455bbb65e9f 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-tritanopia-linux.png index fe285469cc7..455bbb65e9f 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png index a7ba61f5f28..fb63a4b582d 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png index da9db6dd00d..d2137b3496b 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png index 7e2c1e126bb..a83b9bc0f3e 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png index a7ba61f5f28..fb63a4b582d 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png index a7ba61f5f28..fb63a4b582d 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png index acb8b3adc50..1d70c59b77c 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png index 5f2ee1b541b..b35f1b4204e 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png index acb8b3adc50..1d70c59b77c 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png index acb8b3adc50..1d70c59b77c 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-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 c4b78b9b2a2..926012870d0 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 48c74ada840..eeb1138fc51 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 aac2bd1f5cc..ce9e29eac63 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 12fa78af014..bb91780ff88 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 4bb1ae1398e..682bb941182 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 6480afe8175..5a53f135866 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 45e2ec1b349..722a9cf272e 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 69cdf049125..29348e4b89d 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 7896c2580cd..e88c5ee3221 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-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png index 4a9c8150fb1..8fdc1ed71f3 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/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-linux.png index cfd6b5aeb88..378309a06d6 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-linux.png index cce0bb1a2fd..e89a362a300 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-linux.png index 8722c3cfc90..aa938b61166 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-linux.png index cfd6b5aeb88..378309a06d6 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-linux.png index cfd6b5aeb88..378309a06d6 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-linux.png index 4eac70cf984..d2864a52eca 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-linux.png index 50bf4a0878a..cb325b8ec78 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-linux.png index 4eac70cf984..d2864a52eca 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-linux.png index 4eac70cf984..d2864a52eca 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-linux.png differ diff --git a/e2e/components/Avatar.test.ts b/e2e/components/Avatar.test.ts index e739d794124..dab9f9de809 100644 --- a/e2e/components/Avatar.test.ts +++ b/e2e/components/Avatar.test.ts @@ -3,151 +3,139 @@ import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' test.describe('Avatar', () => { - for (const enabled of [true, false]) { - test.describe(`Feature flag enabled: ${enabled}`, () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatar--default', - globals: { - colorScheme: theme, - primer_react_css_modules_ga: enabled, - }, - }) + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatar--default', + globals: { + colorScheme: theme, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Avatar.Default.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Avatar.Default.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatar--default', - globals: { - colorScheme: theme, - primer_react_css_modules_ga: enabled, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatar--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) + } + }) - test.describe('Size', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatar-features--size', - globals: { - colorScheme: theme, - primer_react_css_modules_ga: enabled, - }, - }) + test.describe('Size', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatar-features--size', + globals: { + colorScheme: theme, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Avatar.Size.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Avatar.Size.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatar-features--size', - globals: { - colorScheme: theme, - primer_react_css_modules_ga: enabled, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatar-features--size', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) + } + }) - test.describe('Size Responsive', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatar-features--size-responsive', - globals: { - colorScheme: theme, - primer_react_css_modules_ga: enabled, - }, - }) + test.describe('Size Responsive', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatar-features--size-responsive', + globals: { + colorScheme: theme, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Avatar.Size Responsive.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Avatar.Size Responsive.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatar-features--size-responsive', - globals: { - colorScheme: theme, - primer_react_css_modules_ga: enabled, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatar-features--size-responsive', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) + } + }) - test.describe('Square', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatar-features--square', - globals: { - colorScheme: theme, - primer_react_css_modules_ga: enabled, - }, - }) + test.describe('Square', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatar-features--square', + globals: { + colorScheme: theme, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Avatar.Square.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Avatar.Square.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatar-features--square', - globals: { - colorScheme: theme, - primer_react_css_modules_ga: enabled, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatar-features--square', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) - }) - } + } + }) }) diff --git a/e2e/components/Banner.test.ts b/e2e/components/Banner.test.ts index 36162e47f88..83b93892dc3 100644 --- a/e2e/components/Banner.test.ts +++ b/e2e/components/Banner.test.ts @@ -82,24 +82,6 @@ test.describe('Banner', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Banner.${story.title}.${theme}.png`) - }) - - test('default (styled-components) @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) @@ -112,22 +94,6 @@ test.describe('Banner', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe (styled-components) @aat', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) await expect(page).toHaveNoViolations() @@ -140,29 +106,6 @@ test.describe('Banner', () => { test(`${name} @vrt`, async ({page}) => { await visit(page, { id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - const width = viewports[name] - - await page.setViewportSize({ - width, - height: 667, - }) - expect(await page.screenshot()).toMatchSnapshot(`Banner.${story.title}.${name}.png`) - }) - - test(`${name} (styled-components) @vrt`, async ({page}) => { - await visit(page, { - id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_team: false, - }, - }, }) const width = viewports[name] diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts index c86326eb1a5..1e444ac106f 100644 --- a/e2e/components/Button.test.ts +++ b/e2e/components/Button.test.ts @@ -3,748 +3,627 @@ import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' test.describe('Button', () => { - for (const featureFlagOn of [true, false]) { - test.describe(`Feature flag: ${featureFlagOn ? 'on' : 'off'}`, () => { - test.describe('Danger', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Danger.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) + test.describe('Danger', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--danger', + globals: { + colorScheme: theme, + }, + }) - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Danger.${theme}.png`) + }) - test.describe('Disabled', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--disabled', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Disabled.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--disabled', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--danger', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Invisible', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--invisible', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--invisible', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Link', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--link', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Link.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--link', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Disabled', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--disabled', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Disabled.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--disabled', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Large', () => { + test.describe('Invisible', () => { + for (const theme of themes) { + test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-button-features--large', + id: 'components-button-features--invisible', globals: { - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--invisible', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', }, }, }) + }) + }) + } + }) + + test.describe('Link', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--link', + globals: { + colorScheme: theme, + }, + }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Large.png`) + expect(await page.screenshot()).toMatchSnapshot(`Button.Link.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--link', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) }) }) + } + }) - test.describe('Leading Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--leading-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Leading Visual.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--leading-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Large', () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--large', }) - test.describe('Medium', () => { + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Large.png`) + }) + }) + + test.describe('Leading Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-button-features--medium', + id: 'components-button-features--leading-visual', globals: { - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, + colorScheme: theme, }, }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Medium.png`) + expect(await page.screenshot()).toMatchSnapshot(`Button.Leading Visual.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--leading-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) }) }) + } + }) - test.describe('Primary', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Primary.${theme}.png`) - }) - - test.fixme('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Medium', () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--medium', }) - test.describe('Small', () => { + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Medium.png`) + }) + }) + + test.describe('Primary', () => { + for (const theme of themes) { + test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-button-features--small', + id: 'components-button-features--primary', globals: { - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, + colorScheme: theme, }, }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Small.png`) + expect(await page.screenshot()).toMatchSnapshot(`Button.Primary.${theme}.png`) + }) + + test.fixme('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--primary', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) }) }) + } + }) - test.describe('Trailing Action', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--trailing-action', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Action.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--trailing-action', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Small', () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--small', }) - test.describe('Trailing Counter', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--trailing-counter', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Counter.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--trailing-counter', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Small.png`) + }) + }) + + test.describe('Trailing Action', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-action', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Action.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-action', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Trailing Counter', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-counter', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Counter.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-counter', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Trailing Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--trailing-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Visual.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--trailing-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Trailing Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-visual', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Visual.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Inactive', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--inactive', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Inactive.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--inactive', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Inactive', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--inactive', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Inactive.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--inactive', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Loading', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Button.Loading.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Loading', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Button.Loading.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Loading With Leading Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading-with-leading-visual', + globals: { + colorScheme: theme, + }, + }) - test.describe('Loading With Leading Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading-with-leading-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `Button.Loading With Leading Visual.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading-with-leading-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Button.Loading With Leading Visual.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading-with-leading-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Loading With Trailing Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading-with-trailing-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `Button.Loading With Trailing Visual.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading-with-trailing-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Loading With Trailing Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading-with-trailing-visual', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Button.Loading With Trailing Visual.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading-with-trailing-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Loading With Trailing Action', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading-with-trailing-action', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `Button.Loading With Trailing Action.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading-with-trailing-action', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Loading With Trailing Action', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading-with-trailing-action', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Button.Loading With Trailing Action.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading-with-trailing-action', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Dev: Invisible Variants', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-devonly--invisible-variants', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible Variants.${theme}.png`) - }) - }) - } + test.describe('Dev: Invisible Variants', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-devonly--invisible-variants', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible Variants.${theme}.png`) + }) }) + } + }) - test.describe('Dev: sx prop', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-devonly--test-sx-prop', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.sx prop.${theme}.png`) - }) - }) - } + test.describe('Dev: sx prop', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-devonly--test-sx-prop', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.sx prop.${theme}.png`) + }) }) + } + }) + + test.describe('Aria expanded buttons', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--expanded-button', + globals: { + colorScheme: theme, + }, + }) - test.describe('Aria expanded buttons', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--expanded-button', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `Button.Aria expanded buttons.${theme}.png`, - ) - }) - - // temporarily disabled due to a bug in primer/primitves - - // eslint-disable-next-line jest/no-commented-out-tests - // test('axe @aat', async ({page}) => { - // await visit(page, { - // id: 'components-button-features--expanded-button', - // globals: { - // colorScheme: theme, - // featureFlags: { - // primer_react_css_modules_staff: featureFlagOn, - // }, - // }, - // }) - // await expect(page).toHaveNoViolations({ - // rules: { - // 'color-contrast': { - // enabled: theme !== 'dark_dimmed', - // }, - // }, - // }) - // }) - }) - } + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Button.Aria expanded buttons.${theme}.png`, + ) + }) + + // temporarily disabled due to a bug in primer/primitves + + // eslint-disable-next-line jest/no-commented-out-tests + // test('axe @aat', async ({page}) => { + // await visit(page, { + // id: 'components-button-features--expanded-button', + // globals: { + // colorScheme: theme, + // }, + // }) + // await expect(page).toHaveNoViolations({ + // rules: { + // 'color-contrast': { + // enabled: theme !== 'dark_dimmed', + // }, + // }, + // }) + // }) }) - }) - } + } + }) }) diff --git a/e2e/components/ButtonGroup.test.ts b/e2e/components/ButtonGroup.test.ts index 4fdcd7ab984..c3ca9822ff7 100644 --- a/e2e/components/ButtonGroup.test.ts +++ b/e2e/components/ButtonGroup.test.ts @@ -11,24 +11,6 @@ test.describe('ButtonGroup', () => { id: 'components-buttongroup--default', globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Default.${theme}.png`) - }) - - test('default @vrt (styled-components)', async ({page}) => { - await visit(page, { - id: 'components-buttongroup--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) @@ -41,22 +23,6 @@ test.describe('ButtonGroup', () => { id: 'components-buttongroup--default', globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe @aat (styled-components)', async ({page}) => { - await visit(page, { - id: 'components-buttongroup--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) await expect(page).toHaveNoViolations() @@ -73,24 +39,6 @@ test.describe('ButtonGroup', () => { id: 'components-buttongroup--playground', globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Playground.${theme}.png`) - }) - - test('default @vrt (styled-components)', async ({page}) => { - await visit(page, { - id: 'components-buttongroup--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) @@ -103,22 +51,6 @@ test.describe('ButtonGroup', () => { id: 'components-buttongroup--playground', globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe @aat (styled-components)', async ({page}) => { - await visit(page, { - id: 'components-buttongroup--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) await expect(page).toHaveNoViolations() @@ -135,24 +67,6 @@ test.describe('ButtonGroup', () => { id: 'components-buttongroup-features--icon-buttons', globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Icon Buttons.${theme}.png`) - }) - - test('default @vrt (styled-components)', async ({page}) => { - await visit(page, { - id: 'components-buttongroup-features--icon-buttons', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) @@ -165,22 +79,6 @@ test.describe('ButtonGroup', () => { id: 'components-buttongroup-features--icon-buttons', globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe @aat (styled-components)', async ({page}) => { - await visit(page, { - id: 'components-buttongroup-features--icon-buttons', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) await expect(page).toHaveNoViolations() diff --git a/e2e/components/Checkbox.test.ts b/e2e/components/Checkbox.test.ts index a3ae857d7ca..68bdc98193f 100644 --- a/e2e/components/Checkbox.test.ts +++ b/e2e/components/Checkbox.test.ts @@ -42,33 +42,6 @@ test.describe('Checkbox', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - args: 'args' in story ? story.args : {}, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `Checkbox.${story.title}.${theme}.png`, - ) - - // Focus state - await page.keyboard.press('Tab') - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `Checkbox.${story.title}.focus.${theme}.png`, - ) - }) - - test('default (styled-components) @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, args: 'args' in story ? story.args : {}, }) @@ -90,21 +63,6 @@ test.describe('Checkbox', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - args: 'args' in story ? story.args : {}, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe (styled-components) @aat', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - primer_react_css_modules_team: false, }, args: 'args' in story ? story.args : {}, }) diff --git a/e2e/components/CounterLabel.test.ts b/e2e/components/CounterLabel.test.ts index 7933b5b4597..c3945c74083 100644 --- a/e2e/components/CounterLabel.test.ts +++ b/e2e/components/CounterLabel.test.ts @@ -27,24 +27,6 @@ test.describe('CounterLabel', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`CounterLabel.${story.title}.${theme}.png`) - }) - - test('default (styled-components) @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) @@ -57,22 +39,6 @@ test.describe('CounterLabel', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe (styled-components) @aat', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) await expect(page).toHaveNoViolations() diff --git a/e2e/components/IconButton.test.ts b/e2e/components/IconButton.test.ts index e045f5a4c15..86a6b3d1c26 100644 --- a/e2e/components/IconButton.test.ts +++ b/e2e/components/IconButton.test.ts @@ -3,442 +3,372 @@ import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' test.describe('IconButton', () => { - for (const featureFlagOn of [true, false]) { - test.describe(`Feature flag: ${featureFlagOn ? 'on' : 'off'}`, () => { - test.describe('Playground', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Playground.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Playground', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton--playground', + globals: { + colorScheme: theme, + }, }) - } + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Playground.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton--playground', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Danger', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--danger', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Danger.${theme}.png`) + }) - test.describe('Danger', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Danger.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--danger', + globals: { + colorScheme: theme, + }, }) - } + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton--default', + globals: { + colorScheme: theme, + }, + }) - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) + } + }) + + test.describe('Disabled', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--disabled', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Disabled.${theme}.png`) + }) - test.describe('Disabled', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--disabled', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Disabled.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--disabled', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--disabled', + globals: { + colorScheme: theme, + }, }) - } + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Invisible', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--invisible', + globals: { + colorScheme: theme, + }, + }) - test.describe('Invisible', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--invisible', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Invisible.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--invisible', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Invisible.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--invisible', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) + } + }) + + test.describe('Large', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--large', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Large.${theme}.png`) + }) - test.describe('Large', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--large', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Large.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--large', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--large', + globals: { + colorScheme: theme, + }, }) - } + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Medium', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--medium', + globals: { + colorScheme: theme, + }, + }) - test.describe('Medium', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--medium', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Medium.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--medium', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Medium.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--medium', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) + } + }) + + test.describe('Primary', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--primary', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Primary.${theme}.png`) + }) - test.describe('Primary', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Primary.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--primary', + globals: { + colorScheme: theme, + }, }) - } + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Small', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--small', + globals: { + colorScheme: theme, + }, + }) - test.describe('Small', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--small', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Small.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--small', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Small.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--small', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) - test.describe('Keyshortcuts', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--keyshortcuts', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - await page.keyboard.press('Tab') // focus on icon button - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `IconButton.Keyshortcuts.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--keyshortcuts', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await page.keyboard.press('Tab') // focus on icon button - await expect(page).toHaveNoViolations() - }) + } + }) + test.describe('Keyshortcuts', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--keyshortcuts', + globals: { + colorScheme: theme, + }, }) - } + + // Default state + await page.keyboard.press('Tab') // focus on icon button + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `IconButton.Keyshortcuts.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--keyshortcuts', + globals: { + colorScheme: theme, + }, + }) + await page.keyboard.press('Tab') // focus on icon button + await expect(page).toHaveNoViolations() + }) }) + } + }) + + test.describe('Keyshortcuts on Description', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--keyshortcuts-on-description', + globals: { + colorScheme: theme, + }, + }) - test.describe('Keyshortcuts on Description', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--keyshortcuts-on-description', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - await page.keyboard.press('Tab') // focus on icon button - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `IconButton.Keyshortcuts on Description.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--keyshortcuts-on-description', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await page.keyboard.press('Tab') // focus on icon button - await expect(page).toHaveNoViolations() - }) + // Default state + await page.keyboard.press('Tab') // focus on icon button + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `IconButton.Keyshortcuts on Description.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--keyshortcuts-on-description', + globals: { + colorScheme: theme, + }, }) - } + await page.keyboard.press('Tab') // focus on icon button + await expect(page).toHaveNoViolations() + }) }) - }) - } + } + }) }) diff --git a/e2e/components/Label.test.ts b/e2e/components/Label.test.ts index e54f64022d3..b28b9f7fffb 100644 --- a/e2e/components/Label.test.ts +++ b/e2e/components/Label.test.ts @@ -3,527 +3,445 @@ import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' test.describe('Label', () => { - for (const enabled of [true, false]) { - test.describe(`Feature flag enabled: ${enabled}`, () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Playground', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label--playground', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Playground.${theme}.png`) + }) - test.describe('Playground', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Playground.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label--playground', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Accent', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--accent', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Accent.${theme}.png`) + }) - test.describe('Accent', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--accent', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Accent.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--accent', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--accent', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Attention', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--attention', + globals: { + colorScheme: theme, + }, + }) - test.describe('Attention', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--attention', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Attention.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--attention', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Attention.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--attention', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Danger', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--danger', + globals: { + colorScheme: theme, + }, + }) - test.describe('Danger', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Danger.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Danger.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--danger', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Done', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--done', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Done.${theme}.png`) + }) - test.describe('Done', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--done', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Done.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--done', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--done', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Primary', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--primary', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Primary.${theme}.png`) + }) - test.describe('Primary', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Primary.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--primary', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Secondary', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--secondary', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Secondary.${theme}.png`) + }) - test.describe('Secondary', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--secondary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Secondary.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--secondary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--secondary', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Severe', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--severe', + globals: { + colorScheme: theme, + }, + }) - test.describe('Severe', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--severe', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Severe.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--severe', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Severe.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--severe', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Size Large', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--size-large', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Size Large.${theme}.png`) + }) - test.describe('Size Large', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--size-large', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Size Large.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--size-large', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--size-large', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Size Small', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--size-small', + globals: { + colorScheme: theme, + }, + }) - test.describe('Size Small', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--size-small', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Size Small.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--size-small', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Size Small.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--size-small', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Sponsors', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--sponsors', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Sponsors.${theme}.png`) + }) - test.describe('Sponsors', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--sponsors', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Sponsors.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--sponsors', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--sponsors', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Success', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--success', + globals: { + colorScheme: theme, + }, + }) - test.describe('Success', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--success', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Success.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--success', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Success.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--success', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) - }) - } + } + }) }) diff --git a/e2e/components/Link.test.ts b/e2e/components/Link.test.ts index 19a1b60d470..692444882f2 100644 --- a/e2e/components/Link.test.ts +++ b/e2e/components/Link.test.ts @@ -31,9 +31,6 @@ test.describe('Link', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: true, - }, }, }) @@ -50,39 +47,6 @@ test.describe('Link', () => { }) test('axe @aat', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('default (styled-component) @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.png`) - - // Hover state - await page.getByRole('link').hover() - expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.hover.png`) - - // Focus state - await page.keyboard.press('Tab') - expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.focus.png`) - }) - - test('axe (styled-component) @aat', async ({page}) => { await visit(page, { id: story.id, globals: { diff --git a/e2e/components/LinkButton.test.ts b/e2e/components/LinkButton.test.ts index eea305787fc..98a92c22704 100644 --- a/e2e/components/LinkButton.test.ts +++ b/e2e/components/LinkButton.test.ts @@ -3,447 +3,377 @@ import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' test.describe('LinkButton', () => { - for (const featureFlagOn of [true, false]) { - test.describe(`Feature flag: ${featureFlagOn ? 'on' : 'off'}`, () => { - test.describe('Playground', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Playground.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Playground', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton--playground', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Playground.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton--playground', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Danger', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--danger', + globals: { + colorScheme: theme, + }, + }) - test.describe('Danger', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Danger.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Danger.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--danger', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Default.${theme}.png`) + }) - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Invisible', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--invisible', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Invisible.${theme}.png`) + }) - test.describe('Invisible', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--invisible', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Invisible.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--invisible', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--invisible', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Large', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--large', + globals: { + colorScheme: theme, + }, + }) - test.describe('Large', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--large', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Large.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--large', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Large.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--large', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Leading Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--leading-visual', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Leading Visual.${theme}.png`) + }) - test.describe('Leading Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--leading-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Leading Visual.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--leading-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--leading-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Medium', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--medium', + globals: { + colorScheme: theme, + }, + }) - test.describe('Medium', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--medium', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Medium.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--medium', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Medium.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--medium', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Primary', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--primary', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Primary.${theme}.png`) + }) - test.describe('Primary', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Primary.${theme}.png`) - }) - - test.fixme('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.fixme('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--primary', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Small', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--small', + globals: { + colorScheme: theme, + }, + }) - test.describe('Small', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--small', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Small.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--small', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Small.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--small', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Trailing Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--trailing-visual', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Trailing Visual.${theme}.png`) + }) - test.describe('Trailing Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--trailing-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Trailing Visual.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--trailing-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--trailing-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('With React Router', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--with-react-router', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.With React Router.${theme}.png`) + }) - test.describe('With React Router', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--with-react-router', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.With React Router.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--with-react-router', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--with-react-router', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) - }) - } + } + }) }) diff --git a/e2e/components/Text.test.ts b/e2e/components/Text.test.ts index e039bac12c4..031a4adf876 100644 --- a/e2e/components/Text.test.ts +++ b/e2e/components/Text.test.ts @@ -44,25 +44,6 @@ test.describe('Text', () => { test('default @vrt', async ({page}) => { await visit(page, { id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_ga: true, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Text.${story.title}.png`) - }) - - test('default (styled-system) @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_ga: false, - }, - }, }) // Default state @@ -72,23 +53,6 @@ test.describe('Text', () => { test('axe @aat', async ({page}) => { await visit(page, { id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_ga: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe (styled-system) @aat', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_ga: false, - }, - }, }) await expect(page).toHaveNoViolations() }) diff --git a/package-lock.json b/package-lock.json index 17cb868d1f7..e22de925de1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -64,7 +64,7 @@ "name": "example-app-router", "version": "0.0.0", "dependencies": { - "@primer/react": "37.0.0-rc.6", + "@primer/react": "37.0.0-rc.9", "next": "^14.2.10", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -83,7 +83,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "37.0.0-rc.6", + "@primer/react": "37.0.0-rc.9", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.11.0", @@ -101,7 +101,7 @@ "name": "example-consumer-test", "version": "0.0.0", "dependencies": { - "@primer/react": "37.0.0-rc.6", + "@primer/react": "37.0.0-rc.9", "@types/react": "^18.2.14", "@types/react-dom": "^18.2.19", "@types/styled-components": "^5.1.11", @@ -127,7 +127,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.9.0", - "@primer/react": "37.0.0-rc.6", + "@primer/react": "37.0.0-rc.9", "clsx": "^1.2.1", "next": "^14.2.10", "react": "^18.3.1", @@ -6129,7 +6129,9 @@ } }, "node_modules/@oddbird/popover-polyfill": { - "version": "0.3.8", + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.4.4.tgz", + "integrity": "sha512-n9q0ZXYRct6aYmOjjF5E+i5i0RSjVCkoKDJWILzJAkDBk4jmWOAZFjQfExtcAiJa0buX/Lx/CzBdGgiSSAlbrw==", "license": "BSD-3-Clause" }, "node_modules/@pkgjs/parseargs": { @@ -6368,11 +6370,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@primer/view-components/node_modules/@oddbird/popover-polyfill": { - "version": "0.4.4", - "dev": true, - "license": "BSD-3-Clause" - }, "node_modules/@puppeteer/browsers": { "version": "2.1.0", "dev": true, @@ -30605,13 +30602,13 @@ }, "packages/react": { "name": "@primer/react", - "version": "37.0.0-rc.6", + "version": "37.0.0-rc.9", "license": "MIT", "dependencies": { "@github/relative-time-element": "^4.4.2", "@github/tab-container-element": "^4.8.0", "@lit-labs/react": "1.2.1", - "@oddbird/popover-polyfill": "^0.3.1", + "@oddbird/popover-polyfill": "^0.4.4", "@primer/behaviors": "^1.7.2", "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.9.0", diff --git a/packages/react/.storybook/preview.jsx b/packages/react/.storybook/preview.jsx index b2dd26b9350..05be21801da 100644 --- a/packages/react/.storybook/preview.jsx +++ b/packages/react/.storybook/preview.jsx @@ -171,6 +171,19 @@ const primerThemes = [ {value: 'dark_high_contrast', left: '🌗', title: 'Dark High Contrast'}, ] +const defaultFeatureFlags = new Map(DefaultFeatureFlags.flags) +const featureFlagEnvList = new Set([ + 'PRIMER_REACT_CSS_MODULES_TEAM', + 'PRIMER_REACT_CSS_MODULES_STAFF', + 'PRIMER_REACT_CSS_MODULES_GA', +]) + +for (const flag of featureFlagEnvList) { + if (import.meta.env[`VITE_${flag}`] === '1') { + defaultFeatureFlags.set(flag.toLocaleLowerCase(), true) + } +} + export const globalTypes = { colorScheme: { name: 'Theme', @@ -187,7 +200,7 @@ export const globalTypes = { featureFlags: { name: 'Feature flags', description: 'Toggle feature flags', - defaultValue: Object.fromEntries(DefaultFeatureFlags.flags), + defaultValue: Object.fromEntries(defaultFeatureFlags), }, } diff --git a/packages/react/package.json b/packages/react/package.json index f655e0fd744..c442041ab4d 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -92,7 +92,7 @@ "@github/relative-time-element": "^4.4.2", "@github/tab-container-element": "^4.8.0", "@lit-labs/react": "1.2.1", - "@oddbird/popover-polyfill": "^0.3.1", + "@oddbird/popover-polyfill": "^0.4.4", "@primer/behaviors": "^1.7.2", "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.9.0", diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css index f20124dedfa..9edbe1cbdce 100644 --- a/packages/react/src/Avatar/Avatar.module.css +++ b/packages/react/src/Avatar/Avatar.module.css @@ -13,7 +13,8 @@ box-shadow: 0 0 0 1px var(--avatar-borderColor); &:where([data-square]) { - border-radius: var(--borderRadius-medium); + /* stylelint-disable-next-line primer/borders */ + border-radius: clamp(4px, calc(var(--avatarSize-regular) - 24px), var(--borderRadius-medium)); } &:where([data-responsive]) { diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index 8f8efabbda4..ee184dec98b 100644 --- a/packages/react/src/Button/ButtonBase.module.css +++ b/packages/react/src/Button/ButtonBase.module.css @@ -71,7 +71,7 @@ &:where(.IconButton) { display: inline-grid; width: var(--control-medium-size); - min-width: var(--control-medium-size); + min-width: unset; /* stylelint-disable-next-line primer/spacing */ padding: unset; place-content: center; diff --git a/packages/react/src/DataTable/DataTable.stories.tsx b/packages/react/src/DataTable/DataTable.stories.tsx index f57b6843eba..7726463411d 100644 --- a/packages/react/src/DataTable/DataTable.stories.tsx +++ b/packages/react/src/DataTable/DataTable.stories.tsx @@ -195,6 +195,11 @@ export const Playground = (args: DataTableProps & ColWidthArgTypes) = const align = args.align as CellAlignment + const [pageIndex, setPageIndex] = React.useState(0) + const start = pageIndex * parseInt(args.pageSize, 10) + const end = start + parseInt(args.pageSize, 10) + const rows = data.slice(start, end) + return ( @@ -207,7 +212,7 @@ export const Playground = (args: DataTableProps & ColWidthArgTypes) = {...args} aria-labelledby="repositories" aria-describedby="repositories-subtitle" - data={data} + data={rows} columns={[ { header: 'Repository', @@ -276,12 +281,22 @@ export const Playground = (args: DataTableProps & ColWidthArgTypes) = }, ]} /> + { + setPageIndex(pageIndex) + }} + defaultPageIndex={parseInt(args.defaultPageIndex, 10)} + /> ) } Playground.args = { cellPadding: 'normal', + pageSize: 5, } Playground.argTypes = { @@ -318,6 +333,18 @@ Playground.argTypes = { disable: true, }, }, + pageSize: { + control: { + defaultValue: 5, + type: 'number', + min: 1, + }, + }, + defaultPageIndex: { + control: { + type: 'number', + }, + }, cellPadding: { control: { type: 'radio', diff --git a/packages/react/src/DataTable/Pagination.tsx b/packages/react/src/DataTable/Pagination.tsx index 938cb4fb3d4..7a3bfdfea70 100644 --- a/packages/react/src/DataTable/Pagination.tsx +++ b/packages/react/src/DataTable/Pagination.tsx @@ -192,9 +192,15 @@ export function Pagination({ totalCount, }) const truncatedPageCount = pageCount > 2 ? Math.min(pageCount - 2, MAX_TRUNCATED_STEP_COUNT) : 0 - const [offsetStartIndex, setOffsetStartIndex] = useState(() => { - return getDefaultOffsetStartIndex(pageIndex, pageCount, truncatedPageCount) - }) + const defaultOffset = getDefaultOffsetStartIndex(pageIndex, pageCount, truncatedPageCount) + const [defaultOffsetStartIndex, setDefaultOffsetStartIndex] = useState(defaultOffset) + const [offsetStartIndex, setOffsetStartIndex] = useState(defaultOffsetStartIndex) + + if (defaultOffsetStartIndex !== defaultOffset) { + setOffsetStartIndex(defaultOffset) + setDefaultOffsetStartIndex(defaultOffset) + } + const offsetEndIndex = offsetStartIndex + truncatedPageCount - 1 const hasLeadingTruncation = offsetStartIndex >= 2 const hasTrailingTruncation = pageCount - 1 - offsetEndIndex > 1 @@ -333,15 +339,15 @@ function getDefaultOffsetStartIndex(pageIndex: number, pageCount: number, trunca // When the current page is closer to the end of the list than the beginning if (pageIndex > pageCount - 1 - pageIndex) { if (pageCount - 1 - pageIndex >= truncatedPageCount) { - return pageIndex - 3 + return Math.max(pageIndex - 3, 1) } - return pageCount - 1 - truncatedPageCount + return Math.max(pageCount - 1 - truncatedPageCount, 1) } // When the current page is closer to the beginning of the list than the end if (pageIndex < pageCount - 1 - pageIndex) { if (pageIndex >= truncatedPageCount) { - return pageIndex - 3 + return Math.max(pageIndex - 3, 1) } return 1 } @@ -350,7 +356,7 @@ function getDefaultOffsetStartIndex(pageIndex: number, pageCount: number, trunca if (pageIndex < truncatedPageCount) { return pageIndex } - return pageIndex - 3 + return Math.max(pageIndex - 3, 1) } type RangeProps = { @@ -491,7 +497,7 @@ type PaginationResult = { function usePagination(config: PaginationConfig): PaginationResult { const {defaultPageIndex, onChange, pageSize, totalCount} = config const pageCount = Math.ceil(totalCount / pageSize) - const [pageIndex, setPageIndex] = useState(() => { + const [defaultIndex, setDefaultIndex] = useState(() => { if (defaultPageIndex !== undefined) { if (defaultPageIndex >= 0 && defaultPageIndex < pageCount) { return defaultPageIndex @@ -510,6 +516,13 @@ function usePagination(config: PaginationConfig): PaginationResult { return 0 }) + const [pageIndex, setPageIndex] = useState(defaultIndex) + const validDefaultPageCount = defaultPageIndex !== undefined && defaultPageIndex >= 0 && defaultPageIndex < pageCount + if (validDefaultPageCount && defaultIndex !== defaultPageIndex) { + setDefaultIndex(defaultPageIndex) + setPageIndex(defaultPageIndex) + onChange?.({pageIndex: defaultPageIndex}) + } const pageStart = pageIndex * pageSize const pageEnd = Math.min(pageIndex * pageSize + pageSize, totalCount - 1) const hasNextPage = pageIndex + 1 < pageCount diff --git a/packages/react/src/DataTable/__tests__/Pagination.test.tsx b/packages/react/src/DataTable/__tests__/Pagination.test.tsx index 0d5c93e1bb0..47338126fe9 100644 --- a/packages/react/src/DataTable/__tests__/Pagination.test.tsx +++ b/packages/react/src/DataTable/__tests__/Pagination.test.tsx @@ -84,6 +84,27 @@ describe('Table.Pagination', () => { await user.click(getPreviousPage()) expect(onChange).not.toHaveBeenCalled() }) + + it('should rerender many pages correctly', async () => { + const onChange = jest.fn() + + const {rerender} = render( + , + ) + expect(getPages()).toHaveLength(1) + expect(getCurrentPage()).toEqual(getPage(0)) + expect(getPageRange()).toEqual('1 through 25 of 25') + + rerender( + , + ) + expect(getPageRange()).toEqual('11 through 15 of 300') + expect(getCurrentPage()).toEqual(getPage(2)) + expect(getInvalidPages()).toHaveLength(0) + expect(onChange).toHaveBeenCalledWith({ + pageIndex: 2, + }) + }) }) describe('with two pages', () => { @@ -114,6 +135,32 @@ describe('Table.Pagination', () => { expect(getPageRange()).toEqual('1 through 25 of 50') }) + it('should rerender pager with correct page highlighted when clicking on pages and defaultPageIndex set', async () => { + const user = userEvent.setup() + const onChange = jest.fn() + + render( + , + ) + + expect(getPageRange()).toEqual('76 through 100 of 200') + expect(getCurrentPage()).toEqual(getPage(3)) + + await user.click(getPage(1)) + expect(onChange).toHaveBeenCalledWith({ + pageIndex: 1, + }) + expect(getPageRange()).toEqual('26 through 50 of 200') + expect(getCurrentPage()).toEqual(getPage(1)) + + await user.click(getPage(0)) + expect(onChange).toHaveBeenCalledWith({ + pageIndex: 0, + }) + expect(getPageRange()).toEqual('1 through 25 of 200') + expect(getCurrentPage()).toEqual(getPage(0)) + }) + it('should call `onChange` when using the keyboard to interact with pages', async () => { const user = userEvent.setup() const onChange = jest.fn() @@ -165,6 +212,31 @@ describe('Table.Pagination', () => { }) }) + it('should rerender pager with correct page highlighted when clicking on previous or next and defaultPageIndex set', async () => { + const user = userEvent.setup() + const onChange = jest.fn() + + render( + , + ) + + expect(getPageRange()).toEqual('76 through 100 of 200') + + await user.click(getNextPage()) + expect(onChange).toHaveBeenCalledWith({ + pageIndex: 4, + }) + expect(getPageRange()).toEqual('101 through 125 of 200') + expect(getCurrentPage()).toEqual(getPage(4)) + + await user.click(getPreviousPage()) + expect(onChange).toHaveBeenCalledWith({ + pageIndex: 3, + }) + expect(getPageRange()).toEqual('76 through 100 of 200') + expect(getCurrentPage()).toEqual(getPage(3)) + }) + it('should call `onChange` when using the keyboard to interact with previous or next', async () => { const user = userEvent.setup() const onChange = jest.fn() @@ -197,6 +269,27 @@ describe('Table.Pagination', () => { pageIndex: 0, }) }) + + it('should rerender many pages correctly', async () => { + const onChange = jest.fn() + + const {rerender} = render( + , + ) + expect(getPages()).toHaveLength(2) + expect(getCurrentPage()).toEqual(getPage(1)) + expect(getPageRange()).toEqual('26 through 50 of 50') + + rerender( + , + ) + expect(getPageRange()).toEqual('1 through 5 of 300') + expect(getCurrentPage()).toEqual(getPage(0)) + expect(getInvalidPages()).toHaveLength(0) + expect(onChange).toHaveBeenCalledWith({ + pageIndex: 0, + }) + }) }) describe('with three or more pages', () => { @@ -242,6 +335,34 @@ describe('Table.Pagination', () => { expect(pages).toHaveLength(7) }) }) + + it('should rerender many pages correctly', async () => { + const onChange = jest.fn() + const {rerender} = render( + , + ) + expect(getPages()).toHaveLength(8) + expect(getCurrentPage()).toEqual(getPage(1)) + expect(getPageRange()).toEqual('11 through 20 of 1000') + + rerender( + , + ) + expect(getPageRange()).toEqual('1 through 5 of 300') + expect(getFirstPage()).toEqual(getCurrentPage()) + expect(getInvalidPages()).toHaveLength(0) + expect(onChange).toHaveBeenCalledWith({ + pageIndex: 0, + }) + }) + + it('when rendering 3 pages and the second page is selected we should render a page number not ...', async () => { + const onChange = jest.fn() + render() + expect(getPageRange()).toEqual('3 through 4 of 6') + expect(getCurrentPage()).toEqual(getPage(1)) + expect(getInvalidPages()).toHaveLength(0) + }) }) function getPages() { @@ -288,6 +409,10 @@ function getLastPage() { return pages[pages.length - 1] } +function getInvalidPages() { + return getPages().filter(p => p.textContent?.match(/Page\s-/g) || p.textContent?.match(/Page\s0$/g)) +} + function getPageRange() { const element = document.querySelector('.TablePaginationRange') if (element && element.textContent) { diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx index 1f5b9276a2f..50e30643c12 100644 --- a/packages/react/src/Dialog/Dialog.tsx +++ b/packages/react/src/Dialog/Dialog.tsx @@ -1,14 +1,13 @@ import React, {useCallback, useEffect, useRef, useState, type SyntheticEvent} from 'react' import styled from 'styled-components' import type {ButtonProps} from '../Button' -import {Button} from '../Button' +import {Button, IconButton} from '../Button' import Box from '../Box' import {get} from '../constants' import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks' import {useFocusTrap} from '../hooks/useFocusTrap' import type {SxProp} from '../sx' import sx from '../sx' -import Octicon from '../Octicon' import {XIcon} from '@primer/octicons-react' import {useFocusZone} from '../hooks/useFocusZone' import {FocusKeys} from '@primer/behaviors' @@ -590,22 +589,11 @@ const Buttons: React.FC> ) } -const DialogCloseButton = styled(Button)` - border-radius: 4px; - background: transparent; - border: 0; - vertical-align: middle; - color: ${get('colors.fg.muted')}; - padding: ${get('space.2')}; - align-self: flex-start; - line-height: normal; - box-shadow: none; -` + const CloseButton: React.FC void}>> = ({onClose}) => { return ( - - - + // eslint-disable-next-line primer-react/a11y-remove-disable-tooltip + ) } diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx index 608ca582edf..9efb91080fa 100644 --- a/packages/react/src/Link/Link.tsx +++ b/packages/react/src/Link/Link.tsx @@ -1,13 +1,8 @@ import {clsx} from 'clsx' import React, {forwardRef, useEffect} from 'react' -import styled from 'styled-components' -import {system} from 'styled-system' -import {get} from '../constants' import {useRefObjectAsForwardedRef} from '../hooks' import type {SxProp} from '../sx' -import sx from '../sx' import classes from './Link.module.css' -import {useFeatureFlag} from '../FeatureFlags' import Box from '../Box' import type {ComponentProps} from '../utils/types' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' @@ -21,49 +16,7 @@ type StyledLinkProps = { inline?: boolean } & SxProp -const hoverColor = system({ - hoverColor: { - property: 'color', - scale: 'colors', - }, -}) - -const StyledLink = styled.a` - color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))}; - - /* By default, Link does not have underline */ - text-decoration: none; - - /* You can add one by setting underline={true} */ - text-decoration: ${props => (props.underline ? 'underline' : undefined)}; - - /* Inline links (inside a text block), however, should have underline based on accessibility setting set in data-attribute */ - /* Note: setting underline={false} does not override this */ - [data-a11y-link-underlines='true'] &[data-inline='true'] { - text-decoration: underline; - } - - &:hover { - text-decoration: ${props => (props.muted ? 'none' : 'underline')}; - ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')}; - } - &:is(button) { - display: inline-block; - padding: 0; - font-size: inherit; - white-space: nowrap; - cursor: pointer; - user-select: none; - background-color: transparent; - border: 0; - appearance: none; - } - ${sx}; -` - const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...props}, forwardedRef) => { - const enabled = useFeatureFlag('primer_react_css_modules_ga') - const innerRef = React.useRef(null) useRefObjectAsForwardedRef(forwardedRef, innerRef) @@ -91,24 +44,10 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, ... }, [innerRef]) } - if (enabled) { - if (props.sx) { - return ( - - ) - } - + if (props.sx) { return ( - `; exports[`Link passes href down to link element 1`] = ` -.c1 { - color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - -webkit-text-decoration: none; - text-decoration: none; -} - -[data-a11y-link-underlines='true'] .c0[data-inline='true'] { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c1:hover { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c1:is(button) { - display: inline-block; - padding: 0; - font-size: inherit; - white-space: nowrap; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - `; exports[`Link respects hoverColor prop 1`] = ` -.c1 { - color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - -webkit-text-decoration: none; - text-decoration: none; -} - -[data-a11y-link-underlines='true'] .c0[data-inline='true'] { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c1:hover { - -webkit-text-decoration: underline; - text-decoration: underline; - color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); -} - -.c1:is(button) { - display: inline-block; - padding: 0; - font-size: inherit; - white-space: nowrap; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - `; exports[`Link respects the "sx" prop when "muted" prop is also passed 1`] = ` -.c1 { - color: var(--fgColor-muted,var(--color-fg-muted,#656d76)); - -webkit-text-decoration: none; - text-decoration: none; +.c0 { color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff)); } -[data-a11y-link-underlines='true'] .c0[data-inline='true'] { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c1:hover { - -webkit-text-decoration: none; - text-decoration: none; - color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); -} - -.c1:is(button) { - display: inline-block; - padding: 0; - font-size: inherit; - white-space: nowrap; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - `; exports[`Link respects the "muted" prop 1`] = ` -.c1 { - color: var(--fgColor-muted,var(--color-fg-muted,#656d76)); - -webkit-text-decoration: none; - text-decoration: none; -} - -[data-a11y-link-underlines='true'] .c0[data-inline='true'] { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c1:hover { - -webkit-text-decoration: none; - text-decoration: none; - color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); -} - -.c1:is(button) { - display: inline-block; - padding: 0; - font-size: inherit; - white-space: nowrap; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - `; diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap index caf953cdb37..22a56a4bdac 100644 --- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -1,7 +1,30 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`NavList renders a simple list 1`] = ` -.c5 { +.c3 { + padding-left: 8px; + padding-right: 8px; + padding-top: 6px; + padding-bottom: 6px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + border-radius: 6px; + color: inherit; +} + +.c3:hover { + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -16,7 +39,7 @@ exports[`NavList renders a simple list 1`] = ` min-width: 0; } -.c6 { +.c5 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -25,7 +48,7 @@ exports[`NavList renders a simple list 1`] = ` word-break: break-word; } -.c8 { +.c7 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -151,7 +174,7 @@ exports[`NavList renders a simple list 1`] = ` border-radius: 6px; } -.c7 { +.c6 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -183,27 +206,27 @@ exports[`NavList renders a simple list 1`] = ` margin-bottom: unset; } -.c7[data-loading] { +.c6[data-loading] { cursor: default; } -.c7[aria-disabled], -.c7[data-inactive] { +.c6[aria-disabled], +.c6[data-inactive] { cursor: not-allowed; } -.c7[aria-disabled] [data-component="ActionList.Checkbox"], -.c7[data-inactive] [data-component="ActionList.Checkbox"] { +.c6[aria-disabled] [data-component="ActionList.Checkbox"], +.c6[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } -.c7 [data-component="ActionList.Item--DividerContainer"] { +.c6 [data-component="ActionList.Item--DividerContainer"] { position: relative; } -.c7 [data-component="ActionList.Item--DividerContainer"]::before { +.c6 [data-component="ActionList.Item--DividerContainer"]::before { content: " "; display: block; position: absolute; @@ -214,7 +237,7 @@ exports[`NavList renders a simple list 1`] = ` border-color: var(--divider-color,transparent); } -.c7:not(:first-of-type) { +.c6:not(:first-of-type) { --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48))); } @@ -222,22 +245,22 @@ exports[`NavList renders a simple list 1`] = ` --divider-color: transparent !important; } -.c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c7[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { +.c6:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c6[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1, -.c7[data-focus-visible-added] + li { +.c6:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1, +.c6[data-focus-visible-added] + li { --divider-color: transparent; } -.c7[data-is-active-descendant] { +.c6[data-is-active-descendant] { font-weight: 400; background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24))); } -.c7[data-is-active-descendant]::after { +.c6[data-is-active-descendant]::after { position: absolute; top: calc(50% - 12px); left: -8px; @@ -248,59 +271,6 @@ exports[`NavList renders a simple list 1`] = ` border-radius: 6px; } -.c4 { - color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - -webkit-text-decoration: none; - text-decoration: none; - padding-left: 8px; - padding-right: 8px; - padding-top: 6px; - padding-bottom: 6px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - border-radius: 6px; - color: inherit; -} - -[data-a11y-link-underlines='true'] .c3[data-inline='true'] { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c4:hover { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c4:is(button) { - display: inline-block; - padding: 0; - font-size: inherit; - white-space: nowrap; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.c4:hover { - color: inherit; - -webkit-text-decoration: none; - text-decoration: none; -} - @media (forced-colors:active) { .c2:focus, .c2:focus-visible, @@ -332,30 +302,30 @@ exports[`NavList renders a simple list 1`] = ` } @media (forced-colors:active) { - .c7:focus, - .c7:focus-visible, - .c7 > a.focus-visible, - .c7[data-is-active-descendant] { + .c6:focus, + .c6:focus-visible, + .c6 > a.focus-visible, + .c6[data-is-active-descendant] { outline: solid 1px transparent !important; } } @media (hover:hover) and (pointer:fine) { - .c7:hover:not([aria-disabled]):not([data-inactive]) { + .c6:hover:not([aria-disabled]):not([data-inactive]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); } - .c7:focus-visible, - .c7 > a.focus-visible, - .c7:focus.focus-visible { + .c6:focus-visible, + .c6 > a.focus-visible, + .c6:focus.focus-visible { outline: none; border: 2 solid; box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c7:active:not([aria-disabled]):not([data-inactive]) { + .c6:active:not([aria-disabled]):not([data-inactive]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -374,17 +344,17 @@ exports[`NavList renders a simple list 1`] = `
Home @@ -393,21 +363,21 @@ exports[`NavList renders a simple list 1`] = `
  • About @@ -416,21 +386,21 @@ exports[`NavList renders a simple list 1`] = `
  • Contact @@ -492,7 +462,30 @@ exports[`NavList renders with groups 1`] = ` padding-inline-start: 0; } -.c9 { +.c7 { + padding-left: 8px; + padding-right: 8px; + padding-top: 6px; + padding-bottom: 6px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + border-radius: 6px; + color: inherit; +} + +.c7:hover { + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -507,7 +500,7 @@ exports[`NavList renders with groups 1`] = ` min-width: 0; } -.c10 { +.c9 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -516,7 +509,7 @@ exports[`NavList renders with groups 1`] = ` word-break: break-word; } -.c12 { +.c11 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -642,7 +635,7 @@ exports[`NavList renders with groups 1`] = ` border-radius: 6px; } -.c11 { +.c10 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -674,27 +667,27 @@ exports[`NavList renders with groups 1`] = ` margin-bottom: unset; } -.c11[data-loading] { +.c10[data-loading] { cursor: default; } -.c11[aria-disabled], -.c11[data-inactive] { +.c10[aria-disabled], +.c10[data-inactive] { cursor: not-allowed; } -.c11[aria-disabled] [data-component="ActionList.Checkbox"], -.c11[data-inactive] [data-component="ActionList.Checkbox"] { +.c10[aria-disabled] [data-component="ActionList.Checkbox"], +.c10[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } -.c11 [data-component="ActionList.Item--DividerContainer"] { +.c10 [data-component="ActionList.Item--DividerContainer"] { position: relative; } -.c11 [data-component="ActionList.Item--DividerContainer"]::before { +.c10 [data-component="ActionList.Item--DividerContainer"]::before { content: " "; display: block; position: absolute; @@ -705,7 +698,7 @@ exports[`NavList renders with groups 1`] = ` border-color: var(--divider-color,transparent); } -.c11:not(:first-of-type) { +.c10:not(:first-of-type) { --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48))); } @@ -713,22 +706,22 @@ exports[`NavList renders with groups 1`] = ` --divider-color: transparent !important; } -.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c11[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { +.c10:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c10[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c5, -.c11[data-focus-visible-added] + li { +.c10:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c5, +.c10[data-focus-visible-added] + li { --divider-color: transparent; } -.c11[data-is-active-descendant] { +.c10[data-is-active-descendant] { font-weight: 400; background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24))); } -.c11[data-is-active-descendant]::after { +.c10[data-is-active-descendant]::after { position: absolute; top: calc(50% - 12px); left: -8px; @@ -739,59 +732,6 @@ exports[`NavList renders with groups 1`] = ` border-radius: 6px; } -.c8 { - color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - -webkit-text-decoration: none; - text-decoration: none; - padding-left: 8px; - padding-right: 8px; - padding-top: 6px; - padding-bottom: 6px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - border-radius: 6px; - color: inherit; -} - -[data-a11y-link-underlines='true'] .c7[data-inline='true'] { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c8:hover { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c8:is(button) { - display: inline-block; - padding: 0; - font-size: inherit; - white-space: nowrap; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.c8:hover { - color: inherit; - -webkit-text-decoration: none; - text-decoration: none; -} - @media (forced-colors:active) { .c6:focus, .c6:focus-visible, @@ -823,30 +763,30 @@ exports[`NavList renders with groups 1`] = ` } @media (forced-colors:active) { - .c11:focus, - .c11:focus-visible, - .c11 > a.focus-visible, - .c11[data-is-active-descendant] { + .c10:focus, + .c10:focus-visible, + .c10 > a.focus-visible, + .c10[data-is-active-descendant] { outline: solid 1px transparent !important; } } @media (hover:hover) and (pointer:fine) { - .c11:hover:not([aria-disabled]):not([data-inactive]) { + .c10:hover:not([aria-disabled]):not([data-inactive]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); } - .c11:focus-visible, - .c11 > a.focus-visible, - .c11:focus.focus-visible { + .c10:focus-visible, + .c10 > a.focus-visible, + .c10:focus.focus-visible { outline: none; border: 2 solid; box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c11:active:not([aria-disabled]):not([data-inactive]) { + .c10:active:not([aria-disabled]):not([data-inactive]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -887,17 +827,17 @@ exports[`NavList renders with groups 1`] = `
    Getting started @@ -930,21 +870,21 @@ exports[`NavList renders with groups 1`] = ` class="c4" >
  • Avatar @@ -1014,7 +954,32 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } -.c14 { +.c12 { + padding-left: 16px; + padding-right: 8px; + padding-top: 6px; + padding-bottom: 6px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + border-radius: 6px; + color: inherit; + font-size: 12px; + font-weight: 400; +} + +.c12:hover { + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c13 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -1029,12 +994,6 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav display: block; } -.c9 { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} - .c0 { margin: 0; padding-inline-start: 0; @@ -1046,8 +1005,8 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav --divider-color: transparent !important; } -.c15:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3, -.c15[data-focus-visible-added] + li { +.c14:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3, +.c14[data-focus-visible-added] + li { --divider-color: transparent; } @@ -1258,59 +1217,10 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-radius: 6px; } -.c13 { - color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - -webkit-text-decoration: none; - text-decoration: none; - padding-left: 16px; - padding-right: 8px; - padding-top: 6px; - padding-bottom: 6px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - border-radius: 6px; - color: inherit; - font-size: 12px; - font-weight: 400; -} - -[data-a11y-link-underlines='true'] .c12[data-inline='true'] { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c13:hover { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c13:is(button) { - display: inline-block; - padding: 0; - font-size: inherit; - white-space: nowrap; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.c13:hover { - color: inherit; - -webkit-text-decoration: none; - text-decoration: none; +.c9 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } @media (forced-colors:active) { @@ -1447,7 +1357,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav Sub Item @@ -1525,6 +1435,31 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t display: none; } +.c12 { + padding-left: 16px; + padding-right: 8px; + padding-top: 6px; + padding-bottom: 6px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + border-radius: 6px; + color: inherit; + font-size: 12px; + font-weight: 400; +} + +.c12:hover { + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + .c7 { -webkit-box-flex: 1; -webkit-flex-grow: 1; @@ -1534,12 +1469,6 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t word-break: break-word; } -.c9 { - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); -} - .c0 { margin: 0; padding-inline-start: 0; @@ -1551,8 +1480,8 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t --divider-color: transparent !important; } -.c14:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3, -.c14[data-focus-visible-added] + li { +.c13:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3, +.c13[data-focus-visible-added] + li { --divider-color: transparent; } @@ -1670,8 +1599,8 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t --divider-color: transparent !important; } -.c15:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3, -.c15[data-focus-visible-added] + li { +.c14:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3, +.c14[data-focus-visible-added] + li { --divider-color: transparent; } @@ -1784,59 +1713,10 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t border-radius: 6px; } -.c13 { - color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - -webkit-text-decoration: none; - text-decoration: none; - padding-left: 16px; - padding-right: 8px; - padding-top: 6px; - padding-bottom: 6px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - border-radius: 6px; - color: inherit; - font-size: 12px; - font-weight: 400; -} - -[data-a11y-link-underlines='true'] .c12[data-inline='true'] { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c13:hover { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c13:is(button) { - display: inline-block; - padding: 0; - font-size: inherit; - white-space: nowrap; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.c13:hover { - color: inherit; - -webkit-text-decoration: none; - text-decoration: none; +.c9 { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } @media (forced-colors:active) { @@ -1981,7 +1861,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t ` ${sx}; ` +const COMMON_PROP_NAMES = new Set(Object.keys(COMMON)) +const TYPOGRAPHY_PROP_NAMES = new Set(Object.keys(TYPOGRAPHY)) + +const includesSystemProps = (props: StyledTextProps) => { + if (props.sx) { + return true + } + + return Object.keys(props).some(prop => { + return TYPOGRAPHY_PROP_NAMES.has(prop) || COMMON_PROP_NAMES.has(prop) + }) +} + const Text = forwardRef(({as: Component = 'span', className, size, weight, ...props}, forwardedRef) => { const enabled = useFeatureFlag('primer_react_css_modules_ga') const innerRef = React.useRef(null) useRefObjectAsForwardedRef(forwardedRef, innerRef) - if (enabled) { - if (props.sx) { + // If props includes TYPOGRAPHY or COMMON props, pass them to the Box component + if (includesSystemProps(props)) { return ( // @ts-ignore shh ( - + Monalisa enabled auto-merge (squash) diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap index dd5d8d91184..d65ca9608e3 100644 --- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -324,6 +324,7 @@ exports[`@primer/react/experimental should not update exports without a semver c "type UnderlinePanelsPanelProps", "type UnderlinePanelsProps", "type UnderlinePanelsTabProps", + "useFeatureFlag", "useOverflow", "useSlots", ] diff --git a/packages/react/src/experimental/index.ts b/packages/react/src/experimental/index.ts index f131cf11e6b..6bd1da7b233 100644 --- a/packages/react/src/experimental/index.ts +++ b/packages/react/src/experimental/index.ts @@ -68,7 +68,7 @@ export {UnderlinePanels} from './UnderlinePanels' export type {UnderlinePanelsProps, UnderlinePanelsTabProps, UnderlinePanelsPanelProps} from './UnderlinePanels' export {SkeletonBox, SkeletonText, SkeletonAvatar} from './Skeleton' -export {FeatureFlags, DefaultFeatureFlags} from '../FeatureFlags' +export {FeatureFlags, DefaultFeatureFlags, useFeatureFlag} from '../FeatureFlags' export type {FeatureFlagsProps} from '../FeatureFlags' export {FilteredActionList} from '../FilteredActionList' diff --git a/packages/react/src/internal/utils/__tests__/toggleStyledComponent.test.tsx b/packages/react/src/internal/utils/__tests__/toggleStyledComponent.test.tsx new file mode 100644 index 00000000000..6a4206003d0 --- /dev/null +++ b/packages/react/src/internal/utils/__tests__/toggleStyledComponent.test.tsx @@ -0,0 +1,49 @@ +import React from 'react' +import {render} from '@testing-library/react' +import {FeatureFlags} from '../../../FeatureFlags' +import {toggleStyledComponent} from '../toggleStyledComponent' +import styled from 'styled-components' + +describe('toggleStyledComponent', () => { + test('renders the `as` prop when flag is enabled', () => { + const TestComponent = toggleStyledComponent('testFeatureFlag', () =>
    ) + const {container} = render( + + + , + ) + expect(container.firstChild).toBeInstanceOf(HTMLButtonElement) + }) + + test('renders a div as fallback when flag is enabled and no `as` prop is provided', () => { + const TestComponent = toggleStyledComponent('testFeatureFlag', () =>
    ) + const {container} = render( + + + , + ) + expect(container.firstChild).toBeInstanceOf(HTMLDivElement) + }) + + test('renders Box with `as` if `sx` is provided and flag is enabled', () => { + const TestComponent = toggleStyledComponent('testFeatureFlag', () => styled.div``) + const {container} = render( + + + , + ) + + expect(container.firstChild).toBeInstanceOf(HTMLButtonElement) + expect(container.firstChild).toHaveStyle('color: red') + }) + + test('renders styled component when flag is disabled', () => { + const StyledComponent = toggleStyledComponent('testFeatureFlag', styled.div.attrs({['data-styled']: true})``) + const {container} = render( + + + , + ) + expect(container.firstChild).toHaveAttribute('data-styled') + }) +}) diff --git a/packages/react/src/internal/utils/toggleStyledComponent.tsx b/packages/react/src/internal/utils/toggleStyledComponent.tsx index 4a9bbd0e00a..7b366cb0eb0 100644 --- a/packages/react/src/internal/utils/toggleStyledComponent.tsx +++ b/packages/react/src/internal/utils/toggleStyledComponent.tsx @@ -1,9 +1,12 @@ import React from 'react' import {useFeatureFlag} from '../../FeatureFlags' +import Box from '../../Box' +import {defaultSxProp} from '../../utils/defaultSxProp' type CSSModulesProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any as?: string | React.ComponentType + sx?: React.CSSProperties } /** @@ -18,12 +21,18 @@ type CSSModulesProps = { * is disabled */ export function toggleStyledComponent(flag: string, Component: React.ComponentType

    ) { - const Wrapper = React.forwardRef(function Wrapper({as: BaseComponent = 'div', ...rest}, ref) { + const Wrapper = React.forwardRef(function Wrapper( + {as: BaseComponent = 'div', sx: sxProp = defaultSxProp, ...rest}, + ref, + ) { const enabled = useFeatureFlag(flag) if (enabled) { + if (sxProp !== defaultSxProp) { + return + } return } - return + return }) return Wrapper