Skip to content

[EmptyState] Fix layout shift when image is loading with skeleton image #10963

[EmptyState] Fix layout shift when image is loading with skeleton image

[EmptyState] Fix layout shift when image is loading with skeleton image #10963

Workflow file for this run

name: Accessibility and Visual Regression Tests
on:
push:
branches:
- main
- next
paths:
- 'polaris-react/src/**'
- 'polaris-react/playground/**'
- 'polaris-react/.storybook/**'
- 'polaris-tokens/src/**'
pull_request:
paths:
- 'polaris-react/src/**'
- 'polaris-react/playground/**'
- 'polaris-react/.storybook/**'
- 'polaris-tokens/src/**'
jobs:
accessibility_test:
name: 'Accessibility test'
runs-on: ubuntu-latest
steps:
- name: Checkout branch
uses: actions/checkout@v3
- name: Free up space on GitHub image
run: |
# Based on the official advice:
# https://github.com/actions/virtual-environments/issues/2840#issuecomment-790492173
sudo rm -rf /usr/share/dotnet
sudo rm -rf /opt/ghc
sudo rm -rf "/usr/local/share/boost"
sudo rm -rf "$AGENT_TOOLSDIRECTORY"
- name: Setup Node from .nvmrc
uses: actions/setup-node@v4
with:
node-version-file: '.nvmrc'
cache: yarn
- name: Restore cache
uses: actions/cache@v3
with:
path: |
**/.turbo
node_modules/.cache/turbo
polaris-react/build-internal/cache
key: ${{ runner.os }}-accessibility-test-v2-${{ github.sha }}
restore-keys: |
${{ runner.os }}-accessibility-test-v2-
- name: Install dependencies
run: yarn --frozen-lockfile
- name: Build packages
run: yarn build --filter=@shopify/polaris
- name: Build Storybook
run: yarn workspace @shopify/polaris run storybook:build --quiet
- name: Run accessibility test
run: node ./polaris-react/scripts/accessibility-check.js
env:
STORYBOOK_DISABLE_DOCS: 1
visual_regression_test:
name: 'Visual regression test'
runs-on: ubuntu-latest
steps:
- name: Checkout branch
uses: actions/checkout@v3
with:
fetch-depth: 0 # Chromatic git history to track changes
- name: Setup Node from .nvmrc
uses: actions/setup-node@v4
with:
node-version-file: '.nvmrc'
cache: yarn
- name: Restore cache
uses: actions/cache@v3
with:
path: |
**/.turbo
node_modules/.cache/turbo
polaris-react/build-internal/cache
key: ${{ runner.os }}-visual-regression-test-v2-${{ github.sha }}
restore-keys: |
${{ runner.os }}-visual-regression-test-v2-
- name: Install dependencies
run: yarn --frozen-lockfile
- name: Build packages
run: yarn build --filter=@shopify/polaris
- name: Build Storybook
run: yarn workspace @shopify/polaris run storybook:build --quiet
env:
STORYBOOK_GITHUB_SHA: ${{ github.sha }}
STORYBOOK_GITHUB_REPO_URL: ${{ github.server_url }}/${{ github.repository }}
STORYBOOK_GITHUB_PR: ${{ github.event.number }}
- name: Run Chromatic tests
uses: chromaui/action@v1
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
autoAcceptChanges: 'main'
storybookBuildDir: 'polaris-react/build-internal/storybook/static'
exitZeroOnChanges: true
exitOnceUploaded: true
env:
STORYBOOK_GITHUB_SHA: ${{ github.sha }}
STORYBOOK_GITHUB_REPO_URL: ${{ github.server_url }}/${{ github.repository }}
STORYBOOK_GITHUB_PR: ${{ github.event.number }}