ci(chromatic): enable turbosnap

.github/workflows/chromatic.yml

@@ -28,6 +28,7 @@ jobs:
           project-token: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           auto-accept-changes: ${{ github.base_ref || github.ref_name }}
           working-dir: packages/components
+          externals: packages/(design-tokens|tailwind-preset)/**
           storybook-build-dir: docs
           chromatic-diff-threshold: ${{ secrets.CHROMATIC_DIFF_THRESHOLD }}
 
@@ -51,6 +52,7 @@ jobs:
           project-token: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           auto-accept-changes: ${{ github.ref_name }}
           working-dir: packages/components
+          externals: packages/(design-tokens|tailwind-preset)/**
           storybook-build-dir: docs
           chromatic-diff-threshold: ${{ secrets.CHROMATIC_DIFF_THRESHOLD }}
 

.github/workflows/chromatic/publish/action.yml

@@ -18,18 +18,22 @@ inputs:
     required: false
   chromatic-slug:
     required: false
+  externals:
+    required: false
 
 runs:
   using: composite
   steps:
-    - uses: chromaui/action@v16
+    - uses: chromaui/action@v18
       with:
         projectToken: ${{ inputs.project-token }}
+        onlyChanged: true
         zip: true
         exitOnceUploaded: true
         autoAcceptChanges: ${{ inputs.auto-accept-changes }}
         workingDir: ${{ inputs.working-dir }}
         storybookBuildDir: ${{ inputs.storybook-build-dir }}
+        externals: ${{ inputs.externals }}
       env:
         STORYBOOK_SCREENSHOT_TEST_BUILD: true
         CHROMATIC_DIFF_THRESHOLD: ${{ inputs.chromatic-diff-threshold }}

packages/components/package.json

@@ -35,7 +35,7 @@
   "scripts": {
     "build": "npm run util:prep-build-reqs && vite build",
     "postbuild": "npm run util:generate-t9n-docs-json && npm run util:generate-supported-browsers-json",
-    "build-storybook": "npm run util:prep-build-reqs && NODE_OPTIONS=--openssl-legacy-provider storybook build --output-dir ./docs --quiet",
+    "build-storybook": "npm run util:prep-build-reqs && NODE_OPTIONS=--openssl-legacy-provider storybook build --output-dir ./docs --quiet --webpack-stats-json",
     "build:dev": "vite build --mode development",
     "build:watch": "npm run util:prep-build-reqs && vite --mode production",
     "build:watch-dev": "npm run util:prep-build-reqs && vite --mode development",

packages/components/src/components/accordion/accordion.stories.ts

@@ -6,6 +6,7 @@ import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
 import { Accordion } from "./accordion";
 const { appearance, iconType, position, scale, selectionMode } = ATTRIBUTES;
+import "./accordion"; // Force Vite to statically trace the file for Chromatic's TurboSnap feature
 
 type AccordionStoryArgs = Pick<Accordion, "appearance" | "iconPosition" | "iconType" | "scale" | "selectionMode"> &
   Pick<AccordionItem, "heading" | "description" | "iconStart" | "iconEnd">;

packages/components/src/components/accordion/accordion.tsx

@@ -113,7 +113,7 @@ export class Accordion extends LitElement {
       item.scale = this.scale;
     });
 
-    // sync props on items across shadow DOM
+    // sync properties on items across shadow DOM
     document.dispatchEvent(new CustomEvent("calciteInternalAccordionItemsSync"));
   }
 

packages/components/src/components/input/input.stories.ts

@@ -3,6 +3,7 @@ import { boolean, createBreakpointStories, modesDarkDefault, optionalAttribute }
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
 import { Input } from "./input";
+import "./input"; // Force Vite to statically trace the file for Chromatic's TurboSnap feature
 
 const { textType, alignment, layout, scale, status } = ATTRIBUTES;