From 252fa18649ff540366f0e2945588e0a921b65c8c Mon Sep 17 00:00:00 2001 From: Ruben Carvalho Date: Tue, 2 Dec 2025 14:13:55 +0100 Subject: [PATCH 1/6] feat: add chromatic to 2nd gen --- 2nd-gen/packages/core/shared/base/version.ts | 12 ----- 2nd-gen/packages/swc/.storybook/main.ts | 1 + 2nd-gen/packages/swc/package.json | 1 + yarn.lock | 46 +++++++++++++++++++- 4 files changed, 46 insertions(+), 14 deletions(-) diff --git a/2nd-gen/packages/core/shared/base/version.ts b/2nd-gen/packages/core/shared/base/version.ts index cb9e28ff658..622cc87119d 100644 --- a/2nd-gen/packages/core/shared/base/version.ts +++ b/2nd-gen/packages/core/shared/base/version.ts @@ -1,14 +1,2 @@ -/** - * Copyright 2025 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - // Generated by genversion. export const version = '1.10.0'; diff --git a/2nd-gen/packages/swc/.storybook/main.ts b/2nd-gen/packages/swc/.storybook/main.ts index 3f29c12473a..ba53caa2590 100644 --- a/2nd-gen/packages/swc/.storybook/main.ts +++ b/2nd-gen/packages/swc/.storybook/main.ts @@ -27,6 +27,7 @@ const config = { '@storybook/addon-a11y', '@storybook/addon-designs', '@storybook/addon-vitest', + '@chromatic-com/storybook', ], viteFinal: async (config) => { return mergeConfig(config, { diff --git a/2nd-gen/packages/swc/package.json b/2nd-gen/packages/swc/package.json index 40c49984cb6..7c98aca019a 100644 --- a/2nd-gen/packages/swc/package.json +++ b/2nd-gen/packages/swc/package.json @@ -55,6 +55,7 @@ }, "devDependencies": { "@axe-core/playwright": "4.10.2", + "@chromatic-com/storybook": "^4.1.3", "@custom-elements-manifest/analyzer": "0.10.8", "@storybook/addon-a11y": "10.0.3", "@storybook/addon-designs": "11.0.1", diff --git a/yarn.lock b/yarn.lock index 75f0fd54eac..dabebf86003 100644 --- a/yarn.lock +++ b/yarn.lock @@ -175,6 +175,7 @@ __metadata: resolution: "@adobe/swc@workspace:2nd-gen/packages/swc" dependencies: "@axe-core/playwright": "npm:4.10.2" + "@chromatic-com/storybook": "npm:^4.1.3" "@custom-elements-manifest/analyzer": "npm:0.10.8" "@spectrum-web-components/core": "npm:0.0.1" "@storybook/addon-a11y": "npm:10.0.3" @@ -1965,6 +1966,21 @@ __metadata: languageName: node linkType: hard +"@chromatic-com/storybook@npm:^4.1.3": + version: 4.1.3 + resolution: "@chromatic-com/storybook@npm:4.1.3" + dependencies: + "@neoconfetti/react": "npm:^1.0.0" + chromatic: "npm:^13.3.3" + filesize: "npm:^10.0.12" + jsonfile: "npm:^6.1.0" + strip-ansi: "npm:^7.1.0" + peerDependencies: + storybook: ^0.0.0-0 || ^9.0.0 || ^9.1.0-0 || ^9.2.0-0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 + checksum: 10c0/31d1cc7e98489238a22c7560677bf07235b87c48dc1f39faf1fdc7dda2f41221709c10af2a5fcb10e46bea7b80cc81badf08aba7015f0c5b8d0a9e037e92e1bf + languageName: node + linkType: hard + "@commitlint/cli@npm:19.8.1": version: 19.8.1 resolution: "@commitlint/cli@npm:19.8.1" @@ -4189,6 +4205,13 @@ __metadata: languageName: node linkType: hard +"@neoconfetti/react@npm:^1.0.0": + version: 1.0.0 + resolution: "@neoconfetti/react@npm:1.0.0" + checksum: 10c0/dfa487965b69f88b39562ccd910114cd68b00a90c7eb79cfb1a483c7ac717b720f9f095e5aea13cef8a9b9bea05533d380ddff5e44d3bc3f7dc4d5c66716765c + languageName: node + linkType: hard + "@next/env@npm:14.2.33": version: 14.2.33 resolution: "@next/env@npm:14.2.33" @@ -11838,6 +11861,25 @@ __metadata: languageName: node linkType: hard +"chromatic@npm:^13.3.3": + version: 13.3.4 + resolution: "chromatic@npm:13.3.4" + peerDependencies: + "@chromatic-com/cypress": ^0.*.* || ^1.0.0 + "@chromatic-com/playwright": ^0.*.* || ^1.0.0 + peerDependenciesMeta: + "@chromatic-com/cypress": + optional: true + "@chromatic-com/playwright": + optional: true + bin: + chroma: dist/bin.js + chromatic: dist/bin.js + chromatic-cli: dist/bin.js + checksum: 10c0/1800c1640dbc168b621daeca5895698cb5a0a1def50b9d1ada5ea99ce242bf1f70d15065460948b168eedea1f56422553184f4cce1d01a7816f32c60054d704d + languageName: node + linkType: hard + "chrome-launcher@npm:^0.15.0": version: 0.15.2 resolution: "chrome-launcher@npm:0.15.2" @@ -15662,7 +15704,7 @@ __metadata: languageName: node linkType: hard -"filesize@npm:^10.1.6": +"filesize@npm:^10.0.12, filesize@npm:^10.1.6": version: 10.1.6 resolution: "filesize@npm:10.1.6" checksum: 10c0/9a196d64da4e947b8c0d294be09a3dfa7a634434a1fc5fb3465f1c9acc1237ea0363f245ba6e24477ea612754d942bc964d86e0e500905a72e9e0e17ae1bbdbc @@ -19521,7 +19563,7 @@ __metadata: languageName: node linkType: hard -"jsonfile@npm:^6.0.1": +"jsonfile@npm:^6.0.1, jsonfile@npm:^6.1.0": version: 6.2.0 resolution: "jsonfile@npm:6.2.0" dependencies: From 99104e4160ac50995d781b321b6b78c9aeb19efe Mon Sep 17 00:00:00 2001 From: Ruben Carvalho Date: Tue, 2 Dec 2025 14:28:02 +0100 Subject: [PATCH 2/6] feat: add chromatic config --- .gitignore | 2 +- 2nd-gen/packages/swc/chromatic.config.json | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 2nd-gen/packages/swc/chromatic.config.json diff --git a/.gitignore b/.gitignore index 379468a2d9c..d4ec5d02883 100644 --- a/.gitignore +++ b/.gitignore @@ -135,7 +135,7 @@ package-lock.json chromatic.log chromatic-build-*.xml chromatic-diagnostics*.json -chromatic.config.json +# chromatic.config.json # Playwright test reports (generated) 1st-gen/test/playwright-a11y/report/ diff --git a/2nd-gen/packages/swc/chromatic.config.json b/2nd-gen/packages/swc/chromatic.config.json new file mode 100644 index 00000000000..507c8d932a0 --- /dev/null +++ b/2nd-gen/packages/swc/chromatic.config.json @@ -0,0 +1,18 @@ +{ + "buildScriptName": "storybook:build", + "onlyChanged": true, + "projectId": "Project:669e5de19faa57de85e1c1bb", + "storybookBaseDir": "2nd-gen/packages/swc", + "traceChanged": "expanded", + "untraced": [ + "1st-gen/**", + "tools/**", + "2nd-gen/test/**", + "2nd-gen/package.json", + "2nd-gen/packages/core/package.json", + "2nd-gen/packages/swc/package.json", + "package.json", + "yarn.lock" + ], + "zip": true +} From 40e072ee867c625edc7f37d3f2ca546a4903e78e Mon Sep 17 00:00:00 2001 From: Ruben Carvalho Date: Wed, 3 Dec 2025 15:10:44 +0100 Subject: [PATCH 3/6] feat: add GH action --- .github/workflows/chromatic-vrt.yml | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/.github/workflows/chromatic-vrt.yml b/.github/workflows/chromatic-vrt.yml index a88d2cfb6d9..598354b9423 100644 --- a/.github/workflows/chromatic-vrt.yml +++ b/.github/workflows/chromatic-vrt.yml @@ -1,6 +1,9 @@ name: Visual regression testing with Chromatic on: + pull_request: + paths: + - '2nd-gen/**' workflow_dispatch: workflow_call: inputs: @@ -12,14 +15,14 @@ on: outputs: storybook-url: description: 'URL of the published Storybook' - value: ${{ jobs.vrt.outputs.storybook-url }} + value: ${{ jobs.chromatic.outputs.storybook-url }} permissions: contents: read pull-requests: write jobs: - vrt: + chromatic: name: Chromatic runs-on: ubuntu-latest timeout-minutes: 20 @@ -36,22 +39,13 @@ jobs: uses: ./.github/actions/setup-job - name: Generate Custom Elements Manifest - run: yarn docs:analyze - - - name: Move CEM to Storybook directory - run: cp projects/documentation/custom-elements.json storybook/ + working-directory: 2nd-gen/packages/swc + run: yarn analyze - name: Publish to Chromatic id: chromatic - uses: chromaui/action@v11 + uses: chromaui/action@latest with: projectToken: ${{ secrets.CHROMATIC_TOKEN }} - buildScriptName: storybook:build - storybookConfigDir: storybook - exitOnceUploaded: true - onlyChanged: true - traceChanged: true - untraced: '.github/actions/*/package.json' - diagnostics: true - # Lets VRT pass without running so as not to waste snapshots + workingDir: 2nd-gen/packages/swc skip: ${{ inputs.skip }} From 91acba706f6fa0cdba717d49b364b58ab6b70c90 Mon Sep 17 00:00:00 2001 From: Ruben Carvalho Date: Wed, 3 Dec 2025 15:10:58 +0100 Subject: [PATCH 4/6] chore: update chromatic config settings --- 2nd-gen/packages/swc/chromatic.config.json | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/2nd-gen/packages/swc/chromatic.config.json b/2nd-gen/packages/swc/chromatic.config.json index 507c8d932a0..b7a2cc79a1e 100644 --- a/2nd-gen/packages/swc/chromatic.config.json +++ b/2nd-gen/packages/swc/chromatic.config.json @@ -1,18 +1,9 @@ { "buildScriptName": "storybook:build", + "exitOnceUploaded": true, + "exitZeroOnChanges": true, "onlyChanged": true, "projectId": "Project:669e5de19faa57de85e1c1bb", - "storybookBaseDir": "2nd-gen/packages/swc", - "traceChanged": "expanded", - "untraced": [ - "1st-gen/**", - "tools/**", - "2nd-gen/test/**", - "2nd-gen/package.json", - "2nd-gen/packages/core/package.json", - "2nd-gen/packages/swc/package.json", - "package.json", - "yarn.lock" - ], + "untraced": ["1st-gen/**", "tools/**", "CONTRIBUTOR-DOCS/**", "*.md"], "zip": true } From 9622781d9bf3535b7fb38e1e99c8989e67ebba0f Mon Sep 17 00:00:00 2001 From: Ruben Carvalho Date: Wed, 3 Dec 2025 15:21:34 +0100 Subject: [PATCH 5/6] chore: test changing a border --- 2nd-gen/packages/swc/components/badge/badge.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/2nd-gen/packages/swc/components/badge/badge.css b/2nd-gen/packages/swc/components/badge/badge.css index 2a4997ba46e..21b757745ef 100644 --- a/2nd-gen/packages/swc/components/badge/badge.css +++ b/2nd-gen/packages/swc/components/badge/badge.css @@ -17,7 +17,7 @@ .spectrum-Badge { --spectrum-badge-border-width: var(--spectrum-border-width-200); - --spectrum-badge-border-color: transparent; + --spectrum-badge-border-color: red; --spectrum-badge-line-height: var(--spectrum-line-height-100); --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); --spectrum-badge-font-weight: var(--spectrum-medium-font-weight); @@ -542,13 +542,13 @@ } .spectrum-Badge--outline:is( - .spectrum-Badge--neutral, - .spectrum-Badge--accent, - .spectrum-Badge--informative, - .spectrum-Badge--negative, - .spectrum-Badge--positive, - .spectrum-Badge--notice - ) { + .spectrum-Badge--neutral, + .spectrum-Badge--accent, + .spectrum-Badge--informative, + .spectrum-Badge--negative, + .spectrum-Badge--positive, + .spectrum-Badge--notice +) { background: var(--spectrum-badge-outline-background-color); color: var(--spectrum-badge-outline-label-icon-color); } From 204a3b696931119eb17b43534b808e2ddd6cc285 Mon Sep 17 00:00:00 2001 From: Ruben Carvalho Date: Wed, 3 Dec 2025 16:40:59 +0100 Subject: [PATCH 6/6] chore: add run_vrt label --- .github/workflows/chromatic-vrt.yml | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/.github/workflows/chromatic-vrt.yml b/.github/workflows/chromatic-vrt.yml index 598354b9423..4538df815ea 100644 --- a/.github/workflows/chromatic-vrt.yml +++ b/.github/workflows/chromatic-vrt.yml @@ -1,6 +1,11 @@ name: Visual regression testing with Chromatic on: + push: + branches: + - main + paths: + - '2nd-gen/**' pull_request: paths: - '2nd-gen/**' @@ -26,6 +31,7 @@ jobs: name: Chromatic runs-on: ubuntu-latest timeout-minutes: 20 + if: ${{ contains(github.event.pull_request.labels.*.name, 'run_vrt') }} outputs: storybook-url: ${{ steps.chromatic.outputs.storybookUrl != 'undefined' && steps.chromatic.outputs.storybookUrl || '' }} @@ -48,4 +54,5 @@ jobs: with: projectToken: ${{ secrets.CHROMATIC_TOKEN }} workingDir: 2nd-gen/packages/swc + autoAcceptChanges: 'main' skip: ${{ inputs.skip }}