chromatic.yml

name: Chromatic
on:
  push:
    branches: [rc, dev]
  pull_request:
    branches: [rc, dev]
    types: [opened, labeled, synchronize]
jobs:
  run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version-file: package.json
      - name: Build storybook
        env:
          STORYBOOK_SCREENSHOT_TEST_BUILD: true
          CHROMATIC_DIFF_THRESHOLD: ${{ secrets.CHROMATIC_DIFF_THRESHOLD }}
        run: |
          npm install
          npm --workspace="packages/calcite-design-tokens" run build
          npm --workspace="packages/calcite-ui-icons" run build
          npm --workspace="packages/calcite-components" run build-storybook
      - name: Publish to Chromatic
        if: |
          (github.event.action == 'labeled' && github.event.label.name == 'pr ready for visual snapshots') || github.event_name == 'push'
        uses: chromaui/action@v11
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          zip: true
          exitOnceUploaded: true
          autoAcceptChanges: ${{ github.base_ref || github.ref_name }}
          workingDir: packages/calcite-components
          storybookBuildDir: docs
        env:
          STORYBOOK_SCREENSHOT_TEST_BUILD: true
          CHROMATIC_DIFF_THRESHOLD: ${{ secrets.CHROMATIC_DIFF_THRESHOLD }}
  skip:
    if: contains(github.event.pull_request.labels.*.name, 'skip visual snapshots')
    runs-on: ubuntu-latest
    steps:
      - name: Skip Chromatic
        uses: Sibz/github-status-action@v1
        with:
          authToken: ${{ secrets.GITHUB_TOKEN }}
          context: UI Tests
          description: Chromatic run skipped
          state: success
          sha: ${{github.event.pull_request.head.sha || github.sha}}