feat(icon): S2 public workflow icons — @adobe/spectrum-wc-icons package + generator by caseyisonit · Pull Request #6562 · adobe/spectrum-web-components

caseyisonit · 2026-07-30T01:35:41Z

Description

Delivers RFC phases 3 and 4 of the 2nd-gen icon strategy: the public workflow icons and a dedicated package to ship them.

New package @adobe/spectrum-wc-icons (2nd-gen/packages/icons/) — a sibling of core/swc that depends only on @adobe/spectrum-wc-core. Each of the 413 workflow icons ships two ways, neither coupling a consumer to Lit:
- a per-icon custom element (<swc-icon-star>) extending IconBase, and
- a per-icon SVG-string function (Icon_Star()) as the tree-shakeable substrate (usable via innerHTML, React dangerouslySetInnerHTML, Vue v-html, or Lit unsafeSVG).
Workflow generator (swc/scripts/generate-workflow-icons.mjs) reuses the Phase 0 shared icon-source/utils/ cleanup (no duplicated SVGO/fill logic) and parses the confirmed S2_Icon_<Name>_20_N.svg convention (one drawing per icon, no optical step). It emits the functions, elements, and index/elements/manifest barrels into the package.
Naming: function Icon_<Name>(), element class Icon<Name>, tag swc-icon-<kebab>. The shared toKebab was improved so digit-led names read cleanly (3DAsset → <swc-icon-3d-asset>); output is unchanged for every existing UI-icon name. The Icon_ prefix keeps functions as valid identifiers for digit-led names and distinct from the element class.
Tree-shaking verified: importing 3 icons ships exactly 3 (scripts/verify-tree-shaking.mjs). Per-icon subpath exports (@adobe/spectrum-wc-icons/swc-icon-star.js, @adobe/spectrum-wc-icons/Star.js), a register-all elements.js, and a manifest.js (name + tag list) for galleries/pickers.
Docs & Storybook: a public gallery (stories + MDX docs page) wired into swc's Storybook "similar to core"; a custom-elements manifest is produced. swc devDepends on the package for stories.

Motivation and context

Workflow icons are public and framework-agnostic, so they ship in their own package that consumers can adopt without taking SWC or Lit. This completes the icon pipeline started by the Phase 0 UI-icon POC (#6552): UI icons stay internal to components; workflow icons become the public, tree-shakeable art.

Related issue(s)

SWC-2442 (Phase 3: public workflow icons)
SWC-2441 (Phase 4: @adobe/spectrum-wc-icons packaging & tree-shaking)

Screenshots (if appropriate)

The Storybook gallery (Icons → Workflow icons) renders the full set with size/color/accessibility examples.

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
I have added automated tests to cover my changes.
I have included a well-written changeset if my change needs to be published.
I have included updated documentation if my change required it.

Reviewer's checklist

Includes a Github Issue with appropriate flag or Jira ticket number without a link
Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
Automated tests cover all use cases and follow best practices for writing
Validated on all supported browsers
All VRTs are approved before the author can update Golden Hash

Manual review test cases

Workflow icon renders as an element in plain HTML
1. Open Storybook → Icons → Workflow icons → Gallery
2. Confirm the full set renders, each labeled with its swc-icon-<kebab> tag
3. Expect crisp SVGs that inherit text color and scale with size
Tree-shaking ships only imported icons
1. From 2nd-gen/packages/icons, run yarn build
2. Run yarn verify:tree-shaking
3. Expect: "importing 3 icons ships exactly those 3 … not the full set"
Function substrate works without Lit
1. Import Icon_Star from @adobe/spectrum-wc-icons/Star.js
2. Assign element.innerHTML = Icon_Star()
3. Expect raw <svg> markup filled via var(--swc-icon-color, currentColor)

Device review

Did it pass in Desktop?
Did it pass in (emulated) Mobile?
Did it pass in (emulated) iPad?

Accessibility testing checklist

Keyboard (required — document steps below)
1. Open Storybook → Icons → Workflow icons → Accessibility
2. Press Tab through the story
3. Expect no icon to receive focus (icons are presentational; a labeled parent control owns interaction)
Screen reader (required — document steps below)
1. Open Storybook → Icons → Workflow icons → Accessibility with VoiceOver/NVDA active
2. Navigate to the labeled icon (accessible-label="Warning") and the decorative icon (no label)
3. Expect the labeled icon to be announced as an image named "Warning", and the decorative icon to be skipped entirely (no announcement, no duplicate)

changeset-bot · 2026-07-30T01:35:49Z

🦋 Changeset detected

Latest commit: 62dbc10

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@adobe/spectrum-wc-icons	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-07-30T01:42:36Z

📚 Branch Preview Links

🔍 Gen1 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-6562

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

coveralls · 2026-07-30T01:45:13Z

Coverage Report for CI Build 30507697911

Coverage increased (+0.002%) to 96.241%

Details

Coverage increased (+0.002%) from the base build.
Patch coverage: Could not be determined — this PR's diff is too large for GitHub to return (406 error at GitHub).
No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

Coverage Stats


Relevant Lines:	39268
Covered Lines:	37993
Line Coverage:	96.75%
Relevant Branches:	6463
Covered Branches:	6019
Branch Coverage:	93.13%
Branches in Coverage %:	Yes
Coverage Strength:	460.44 hits per line

💛 - Coveralls

cdransf

Looks rad! Just a couple of small things. ✨

miwha-adobe

Great job!

Split toKebab on acronym and camel boundaries so digit-led A4U names read cleanly (3DAsset -> 3d-asset -> <swc-icon-3d-asset>). Output is unchanged for every existing UI icon name, verified over the full workflow set.

…ention Add generate-workflow-icons.mjs, which reuses the shared icon-source/utils cleanup and parses the S2_Icon_<Name>_20_N.svg workflow convention (one drawing per icon, no optical step). It emits, per icon, an Icon_<Name>() SVG-string function and an <swc-icon-<kebab>> element into the icons package, plus index, elements, and manifest barrels. Documents the convention in the icon-source READMEs and records the pulled workflow set version in icon-source.json. SWC-2442

…flow art Ship the public workflow icons as a dedicated package depending only on core: per-icon SVG-string functions and IconBase-extending custom elements, with per-icon subpath exports for tree-shaking and a generated custom-elements manifest. Includes a package-local workflow-scale icon-base.css (core has no CSS processing) and a tree-shaking verification script. Registers the package in the 2nd-gen build and TypeScript project references. SWC-2441

Add the public workflow-icons Storybook gallery (stories + MDX docs page) and full test coverage: unit and accessibility play functions, a Playwright ARIA a11y spec, and VRT stories (size/color permutations, the full-set gallery snapshot, and forced colors). Wires the icons stories into swc's Storybook and Vitest, adds the swc devDependency and generate:workflow-icons script, and extends the Playwright a11y testMatch to the icons package. SWC-2441

Record the Icon_<Name> function-naming decision in the icon strategy RFC (kept distinct from the element class, valid identifiers for digit-led names) and mark phases 0-4 implemented. Add the changeset announcing @adobe/spectrum-wc-icons.

The stories' `import '../src/elements.js'` side-effect was tree-shaken out of production (Storybook/Chromatic) builds because the package sideEffects globs matched only .js, while the source-consumed build resolves them to .ts source. The custom elements then never registered and rendered as empty, unupgraded tags. Match the .ts source (and barrel) so registration is preserved. SWC-2441

Assert exactly one image named "Warning" and that the decorative icon is aria-hidden, instead of counting every img role. Chromium can expose the inner shadow <svg> as an implicit img, so an unscoped count is brittle.

verify-tree-shaking.mjs imports esbuild directly; it was only resolving via Vite's transitive copy. Declare it explicitly so the script does not depend on hoisting. SWC-2441

Mark the generated per-icon workflow modules as linguist-generated so the ~826 files collapse in PR diffs and are excluded from language stats. GitHub-only; local git diff/blame are unaffected.

The filter now matches only 1st-gen/**, so root-level and shared changes no longer trigger the 1st-gen coverage report; update the comment to match.

@SInCE

…-style todo Read the generated elements' @SInCE from the icons package.json version instead of a hardcoded constant so it tracks changeset bumps. Add a @todo to consolidate the duplicated icon-base.css (and other per-package shared lit-styles) later.

caseyisonit requested a review from a team as a code owner July 30, 2026 01:35

cdransf approved these changes Jul 30, 2026

View reviewed changes

Comment thread .github/workflows/coveralls.yml Outdated

Comment thread 2nd-gen/packages/icons/scripts/verify-tree-shaking.mjs

caseyisonit added Status:Ready for review PR ready for review or re-review. High priority PR review PR is a high priority and should be reviewed ASAP labels Jul 30, 2026

cdransf force-pushed the caseyisonit/swc-2442-2441-tickets-6ca1ff branch 2 times, most recently from 9a3ebad to 5f8086c Compare August 10, 2026 22:45

cdransf mentioned this pull request Aug 11, 2026

chore(icons): add workflow icons generator #6572

Closed

17 tasks

cdransf force-pushed the caseyisonit/swc-2442-2441-tickets-6ca1ff branch 6 times, most recently from 6d3bac6 to c9c0a27 Compare August 12, 2026 17:39

miwha-adobe reviewed Aug 12, 2026

View reviewed changes

miwha-adobe self-requested a review August 12, 2026 20:00

miwha-adobe approved these changes Aug 12, 2026

View reviewed changes

cdransf force-pushed the caseyisonit/swc-2442-2441-tickets-6ca1ff branch 7 times, most recently from 149b4ab to dd616fc Compare August 19, 2026 20:05

caseyisonit added 4 commits August 19, 2026 14:48

feat(icons): kebab-case digit-led workflow icon names

69587d3

Split toKebab on acronym and camel boundaries so digit-led A4U names read cleanly (3DAsset -> 3d-asset -> <swc-icon-3d-asset>). Output is unchanged for every existing UI icon name, verified over the full workflow set.

caseyisonit and others added 9 commits August 19, 2026 14:48

test(icons): scope the a11y image assertion to the labeled icon

947a225

Assert exactly one image named "Warning" and that the decorative icon is aria-hidden, instead of counting every img role. Chromium can expose the inner shadow <svg> as an implicit img, so an unscoped count is brittle.

chore: fix coveralls to 1st-gen only

7d478b9

fix(icons): declare esbuild devDependency for the tree-shaking check

7895006

verify-tree-shaking.mjs imports esbuild directly; it was only resolving via Vite's transitive copy. Declare it explicitly so the script does not depend on hoisting. SWC-2441

chore: collapse generated icon art in GitHub diffs

29226c0

Mark the generated per-icon workflow modules as linguist-generated so the ~826 files collapse in PR diffs and are excluded from language stats. GitHub-only; local git diff/blame are unaffected.

docs(coveralls): align comment with the 1st-gen-only filter

d390e99

The filter now matches only 1st-gen/**, so root-level and shared changes no longer trigger the 1st-gen coverage report; update the comment to match.

fix(icons): run tree-shaking check on build

62dbc10

cdransf force-pushed the caseyisonit/swc-2442-2441-tickets-6ca1ff branch from dd616fc to 62dbc10 Compare August 19, 2026 21:49

Navigation Menu

Uh oh!

feat(icon): S2 public workflow icons — @adobe/spectrum-wc-icons package + generator - #6562

feat(icon): S2 public workflow icons — @adobe/spectrum-wc-icons package + generator#6562
caseyisonit wants to merge 13 commits into
mainfrom
caseyisonit/swc-2442-2441-tickets-6ca1ff

caseyisonit commented Jul 30, 2026

Uh oh!

changeset-bot Bot commented Jul 30, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 30, 2026

Uh oh!

coveralls commented Jul 30, 2026 •

edited

Loading

Uh oh!

cdransf left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

miwha-adobe left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

caseyisonit commented Jul 30, 2026

Description

Motivation and context

Related issue(s)

Screenshots (if appropriate)

Author's checklist

Reviewer's checklist

Manual review test cases

Device review

Accessibility testing checklist

Uh oh!

changeset-bot Bot commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jul 30, 2026

📚 Branch Preview Links

Uh oh!

coveralls commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for CI Build 30507697911

Coverage increased (+0.002%) to 96.241%

Details

Uncovered Changes

Coverage Regressions

Coverage Stats

💛 - Coveralls

Uh oh!

cdransf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

miwha-adobe left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot Bot commented Jul 30, 2026 •

edited

Loading

coveralls commented Jul 30, 2026 •

edited

Loading