diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml index 3926ce60ce..0c9f110b4c 100644 --- a/.github/workflows/verify_chromatic.yml +++ b/.github/workflows/verify_chromatic.yml @@ -9,7 +9,7 @@ on: paths: - '.github/workflows/verify_chromatic.yml' - '.storybook/**' - - 'packages/ui/src/**' + - 'packages/ui/**' - '**/*.stories.tsx' jobs: @@ -31,7 +31,7 @@ jobs: - name: Checkout code uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 with: - fetch-depth: 0 # Required to retrieve git history + fetch-depth: 10000 # Required to retrieve git history - name: Use node.js ${{ matrix.node-version }} uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0 @@ -48,6 +48,7 @@ jobs: run: yarn build-storybook:chromatic - name: Run Chromatic + id: chromatic uses: chromaui/action@latest with: token: ${{ secrets.GITHUB_TOKEN }} @@ -56,3 +57,28 @@ jobs: projectToken: chpt_dab72dc0f97d55b storybookBuildDir: dist-storybook onlyChanged: true + externals: | + packages/ui/**/*.css + packages/ui/css/** + packages/ui/src/**/*.css + + - name: Prepare Chromatic Message + if: github.event_name == 'pull_request' && steps.chromatic.outputs.url + id: prepare-message + run: | + if [ "${{ steps.chromatic.outputs.changeCount }}" = "0" ] || [ -z "${{ steps.chromatic.outputs.changeCount }}" ]; then + echo "changes-text=No visual changes detected - [**View build in Chromatic**](${{ steps.chromatic.outputs.buildUrl }})" >> $GITHUB_OUTPUT + else + echo "changes-text=**${{ steps.chromatic.outputs.changeCount }}** visual changes are waiting for review - [**Review changes in Chromatic**](${{ steps.chromatic.outputs.buildUrl }})" >> $GITHUB_OUTPUT + fi + + - name: Post Chromatic Link in PR Comment + if: github.event_name == 'pull_request' && steps.chromatic.outputs.url + uses: mshick/add-pr-comment@v2 + with: + message: | + ## 🎨 Visual Testing with Chromatic + + - ${{ steps.prepare-message.outputs.changes-text }} + - **${{ steps.chromatic.outputs.specCount}}** stories for **${{ steps.chromatic.outputs.componentCount}}** Components - [**Preview changes in Storybook**](${{ steps.chromatic.outputs.storybookUrl }}) + repo-token: ${{ secrets.GITHUB_TOKEN }}