chore(ci): split Storybook tests from Chromatic (#5120)

.changeset/shy-games-enjoy.md

@@ -0,0 +1,2 @@
+---
+---

.github/workflows/chromatic-main.yaml

@@ -1,7 +1,7 @@
 # Chromatic action from https://www.chromatic.com/docs/github-actions
 
 # Update the baseline snapshots in Chromatic (only applies to `main`)
-name: chromatic
+name: Chromatic (main)
 
 on:
   push:

.github/workflows/chromatic-pr.yaml

@@ -0,0 +1,78 @@
+# Chromatic action from https://www.chromatic.com/docs/github-actions
+
+# Publish to Chromatic for snapshot tests then use storybook/test-runner to test stories
+name: Chromatic (PR)
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - ready_for_review
+
+  # When Changesets opens a PR it does not trigger GitHub actions,
+  # because its token does not have permission to. This is a hack
+  # to allow one of us to trigger GitHub actions for a changesets PR
+  # by enabling automerge on the PR.
+  pull_request_target:
+    types:
+      - auto_merge_enabled
+    branches:
+      - main # the target branch of the PR
+    paths:
+      - "**/CHANGELOG.md" # only changesets releases touch changelogs
+
+jobs:
+  run-check:
+    name: Check if we should run Chromatic tests
+    if: github.head_ref != 'changeset-release/main' && github.event.pull_request.draft == false
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo "Run the Chromatic tests"
+
+  chromatic:
+    needs: run-check
+    runs-on: ubuntu-latest
+    outputs:
+      storybookUrl: ${{ steps.publishChromatic.outputs.storybookUrl }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: ./.github/actions/setup
+      - name: Build Storybook for Chromatic
+        # We want both stories and docs for the branch preview
+        run: pnpm turbo @docs/storybook#build:chromatic
+      - id: publishChromatic
+        name: Publish to Chromatic
+        uses: chromaui/action@v11
+        with:
+          token: ${{ github.token }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          storybookBuildDir: "./docs/storybook-static"
+          storybookBaseDir: "./docs"
+          onlyChanged: "!(main)"
+          externals: |
+            **/!(*.module).scss
+            packages/components/**/*.css
+
+  update-branch-preview:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    needs: chromatic
+    env:
+      COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ env.COMMIT_SHA }}
+      - name: Get commit message
+        id: getCommitMessage
+        run: echo "commitMessage=$(git show -s --format=%s)" >> "$GITHUB_OUTPUT"
+      - uses: ./.github/actions/branch-preview
+        with:
+          prNumber: ${{ github.event.pull_request.number }}
+          commitSha: ${{ env.COMMIT_SHA }}
+          commitMessage: ${{ steps.getCommitMessage.outputs.commitMessage }}
+          storybookUrl: ${{ needs.chromatic.outputs.storybookUrl }}

.github/workflows/test-stories.yaml

@@ -4,11 +4,9 @@
 name: test stories
 
 on:
-  pull_request:
-    types:
-      - opened
-      - synchronize
-      - ready_for_review
+  push:
+    branches-ignore:
+      - main
 
   # When Changesets opens a PR it does not trigger GitHub actions,
   # because its token does not have permission to. This is a hack
@@ -26,15 +24,8 @@ env:
   ARTIFACT_NAME: artifact--storybook-build
 
 jobs:
-  run-check:
-    name: Check if we should run Storybook tests
-    if: github.head_ref != 'changeset-release/main' && github.event.pull_request.draft == false
-    runs-on: ubuntu-latest
-    steps:
-      - run: echo "Run the Storybook tests"
-
   build-test-storybook:
-    needs: run-check
+    if: github.head_ref != 'changeset-release/main'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -95,50 +86,3 @@ jobs:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (3/3)
         run: pnpm turbo @docs/storybook#test:storybook -- --shard 3/3
-
-  chromatic:
-    needs: run-check
-    runs-on: ubuntu-latest
-    outputs:
-      storybookUrl: ${{ steps.publishChromatic.outputs.storybookUrl }}
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - uses: ./.github/actions/setup
-      - name: Build Storybook for Chromatic
-        # We want both stories and docs for the branch preview
-        run: pnpm turbo @docs/storybook#build:chromatic
-      - id: publishChromatic
-        name: Publish to Chromatic
-        uses: chromaui/action@v11
-        with:
-          token: ${{ github.token }}
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          storybookBuildDir: "./docs/storybook-static"
-          storybookBaseDir: "./docs"
-          onlyChanged: "!(main)"
-          externals: |
-            **/!(*.module).scss
-            packages/components/**/*.css
-
-  update-branch-preview:
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    needs: chromatic
-    env:
-      COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: ${{ env.COMMIT_SHA }}
-      - name: Get commit message
-        id: getCommitMessage
-        run: echo "commitMessage=$(git show -s --format=%s)" >> "$GITHUB_OUTPUT"
-      - uses: ./.github/actions/branch-preview
-        with:
-          prNumber: ${{ github.event.pull_request.number }}
-          commitSha: ${{ env.COMMIT_SHA }}
-          commitMessage: ${{ steps.getCommitMessage.outputs.commitMessage }}
-          storybookUrl: ${{ needs.chromatic.outputs.storybookUrl }}