Skip to content

Improve the click area for horizontal FormControls (checkboxes and radios) #25537

Improve the click area for horizontal FormControls (checkboxes and radios)

Improve the click area for horizontal FormControls (checkboxes and radios) #25537

Workflow file for this run

name: CI
on:
push:
branches:
- main
- next-major
pull_request:
merge_group:
branches:
- main
- next-major
types:
- checks_requested
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
jobs:
format:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 22
cache: 'npm'
- run: npm i -g npm@^10.5.1
- name: Install dependencies
run: npm ci
- name: Check for unformatted files
run: npm run format:diff
lint:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 22
cache: 'npm'
- run: npm i -g npm@^10.5.1
- name: Install dependencies
run: npm ci
- name: Lint JavaScript
run: npm run lint
- name: Lint CSS
run: npm run lint:css
- name: Lint markdown
run: npm run lint:md
test:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 22
cache: 'npm'
- run: npm i -g npm@^10.5.1
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Test
run: npm run test -- --coverage
type-check:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 22
cache: 'npm'
- run: npm i -g npm@^10.5.1
- name: Install dependencies
run: npm ci
- name: Build project
run: npm run build
- name: Type check
run: npm run type-check
examples:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 22
cache: 'npm'
- run: npm i -g npm@^10.5.1
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build -ws --if-present
vrt-runner:
runs-on: ubuntu-latest-16-cores
strategy:
fail-fast: false
matrix:
shard: [1, 2, 3, 4]
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.47.2-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-no-flag-${{ matrix.shard }}
path: blob-report
retention-days: 1
vrt:
if: ${{ always() }}
runs-on: ubuntu-latest
needs: vrt-runner
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-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-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-16-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.47.2-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-all-flags job status
if: ${{ needs.vrt-runner-all-flags.result == 'failure' }}
run: exit 1
aat-runner:
runs-on: ubuntu-latest-16-cores
strategy:
fail-fast: false
matrix:
shard: [1, 2, 3, 4]
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.47.2-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-no-flag-${{ matrix.shard }}
path: blob-report
retention-days: 1
aat:
if: ${{ always() }}
runs-on: ubuntu-latest
needs: aat-runner
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-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: axe
path: playwright-report
- name: Check aat-runner job status
if: ${{ needs.aat-runner.result == 'failure' }}
run: exit 1
aat-runner-all-flags:
runs-on: ubuntu-latest-16-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.47.2-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-all-flags job status
if: ${{ needs.aat-runner-all-flags.result == 'failure' }}
run: exit 1
build-components-json:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
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 components.json
run: npm run build:components.json
sizes:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 22
cache: 'npm'
- run: npm i -g npm@^10.5.1
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Get export sizes
run: node packages/react/script/get-export-sizes.js