refactor(icons): repoint ui icon consumers by cdransf · Pull Request #6567 · adobe/spectrum-web-components

cdransf · 2026-07-30T23:31:45Z

Description

Repoints CloseButton, MessageSources, and ResponseStatus off the pre-RFC icon/elements/ module onto <swc-ui-icon>, matching the Accordion POC. Deletes the now-unused iconForSize Storybook helper (Badge stories now call icon/elements functions directly). Removes <swc-icon>'s stale @status internal tag. Adds close-button's first VRT coverage (base + custom-properties). icon/elements/ itself is kept for now, it still backs <swc-icon>'s public export and docs; full retirement is a later phase.

Motivation and context

RFC Phase 1: repoint any component rendering a UI icon internally onto <swc-ui-icon>, no unsafeSVG remaining.

Related issue(s)

Jira: SWC-2438, Phase 1

Screenshots (if appropriate)

No API changes. Note: CloseButton's cross icon now uses the RFC's fixed size-to-step map instead of its old ad hoc numbering, so l/xl may render a slightly different glyph. Check the new close-button.vrt.ts snapshot against Golden Hash.

MessageSources and ResponseStatus also switch their chevron from a custom 10px inline size to <swc-ui-icon icon="chevron" size="s">; this is a visual no-op (s resolves to the same rendered size) but has no dedicated VRT coverage yet, so please double-check both patterns' expand/collapse chevrons visually.

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed the Accessibility Practices for this feature.
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

Close Button: check cross icon at every size, and under hover/focus/active, no distortion or regression.
Conversational AI/Message sources and Response status: toggle expand/collapse, chevron rotates as before.
Badge Playground: select each icon-slot option (Checkmark, Cross, Alert), confirm render, no console errors.

Device review

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

Accessibility testing checklist

Keyboard: Tab to Close Button, expect focus ring; Enter/Space fires click (unchanged). Same for the Message sources/Response status toggle buttons; expand/collapse works, focus stays put.
Screen reader: Close Button announces accessible-label only, icon stays silent (aria-hidden by default via IconBase). Toggle buttons announce label + aria-expanded; chevron stays silent. No behavior change from before this PR.

changeset-bot · 2026-07-30T23:31:49Z

🦋 Changeset detected

Latest commit: 42ad8a9

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	Patch

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-30T23:38:02Z

📚 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-6567

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.

Rajdeepc

I dont see a changeset here but we are changing close-button rendering. Please update this to a fix or a refactor and add a changeset.
Some blocking items too. Let me know if you would like to discuss.

coveralls · 2026-08-11T16:05:58Z

Coverage Report for CI Build 32155952033

Coverage remained the same at 96.241%

Details

Coverage remained the same as the base build.
Patch coverage: No coverable lines changed in this PR.
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:	6462
Covered Branches:	6018
Branch Coverage:	93.13%
Branches in Coverage %:	Yes
Coverage Strength:	460.24 hits per line

💛 - Coveralls

miwha-adobe

When the icon is large, is it expected to expand out of the background fill?

cdransf · 2026-08-12T20:42:04Z

When the icon is large, is it expected to expand out of the background fill?

That would be on consumers to adjust — we could clip it, but that would impact things like focus rings our hover states that extend beyond the bounds of the box. ✨

miwha-adobe

lgtm!

miwha-adobe

lgtm~

Rajdeepc · 2026-08-17T09:34:35Z

+Repoint `CloseButton`, `MessageSources`, and `ResponseStatus` off the pre-RFC `icon/elements/` module onto the internal `<swc-ui-icon>` element, matching the Accordion POC. No public API changes.
+
+- Fixed a pre-existing bug where `swc-close-button`'s default (`m`) size had no `:host([size="m"])` rule, so its cross icon fell through to the `ui-icon-large` box size instead of `ui-icon-medium`.
+- Visual change: `swc-close-button`'s cross icon now uses the RFC's fixed size-to-step map instead of its old ad hoc numbering. `s`/`m` now render the previously-unused `Cross75`/`Cross100` glyphs in place of the old `Cross200`/`Cross300` shapes, and `l`/`xl` may render a slightly different glyph than before.


Not a close button issue but this might be a phase 1 completeness gap. help me clarify that if we lock down on this any future component needing a step above 300 will hit the same wall silently. Not blocking but we should have clarity.
Should we generate the missing steps of 400/500/600 and extend UI_STEPS and keep close-button pixel-identical at l/`xl?

Or should we deliberately cap S2 Ui scale to 300? We need a design sign off if we do this
@rubencarvalho @caseyisonit @5t3ph

Hmmm, IDK - on the designs it does seem like XL uses 500. So it feels like we may need those? Or the steps are incorrectly mapped?

Rajdeepc · 2026-08-17T09:37:36Z

      <swc-badge variant="neutral" size=${size}>
        <swc-icon size=${size} slot="icon" aria-hidden="true">
-          ${iconForSize(Icons, 'Checkmark', size)}
+          ${Checkmark100Icon()}


Note: Here badge diff are expected.

Rajdeepc · 2026-08-17T09:37:49Z

        ? html`
            <swc-icon slot="icon" aria-hidden="true">
-              ${iconForSize(Icons, 'Checkmark', 'm')}
+              ${Checkmark100Icon()}


Note: Here badge diff are expected.

cdransf requested a review from caseyisonit July 30, 2026 23:31

cdransf self-assigned this Jul 30, 2026

cdransf requested a review from a team as a code owner July 30, 2026 23:31

cdransf added Component:Icon Spectrum 2 Issues related to Spectrum 2 labels Jul 30, 2026

cdransf added the run_vrt Triggers the Chromatic VRT run for 2nd-gen label Jul 30, 2026

cdransf force-pushed the cdransf/2nd-gen-icon-repoint branch 4 times, most recently from 64a3740 to faf07d0 Compare August 5, 2026 19:01

cdransf requested review from miwha-adobe and rise-erpelding August 5, 2026 23:32

cdransf force-pushed the cdransf/2nd-gen-icon-repoint branch 3 times, most recently from 8bf9cbe to 6085381 Compare August 10, 2026 22:45

cdransf added the Status:Ready for review PR ready for review or re-review. label Aug 10, 2026

Rajdeepc requested changes Aug 11, 2026

View reviewed changes

Rajdeepc mentioned this pull request Aug 11, 2026

chore(icons): add workflow icons generator #6572

Closed

17 tasks

cdransf changed the title ~~chore(icons): repoint ui icon consumers~~ refactor(icons): repoint ui icon consumers Aug 11, 2026

cdransf requested a review from Rajdeepc August 11, 2026 16:23

cdransf force-pushed the cdransf/2nd-gen-icon-repoint branch 6 times, most recently from 8f53f17 to 662cefc Compare August 12, 2026 17:16

miwha-adobe reviewed Aug 12, 2026

View reviewed changes

Comment thread 2nd-gen/packages/swc/components/close-button/test/vrt/close-button-custom-properties.vrt.ts

cdransf force-pushed the cdransf/2nd-gen-icon-repoint branch from 662cefc to f32e145 Compare August 12, 2026 20:06

cdransf force-pushed the cdransf/2nd-gen-icon-repoint branch from f32e145 to dc065cb Compare August 12, 2026 20:42

cdransf requested a review from miwha-adobe August 12, 2026 20:42

cdransf force-pushed the cdransf/2nd-gen-icon-repoint branch 2 times, most recently from f98ba05 to b01bd3c Compare August 12, 2026 23:09

miwha-adobe approved these changes Aug 13, 2026

View reviewed changes

cdransf force-pushed the cdransf/2nd-gen-icon-repoint branch from b01bd3c to b058876 Compare August 13, 2026 16:22

miwha-adobe approved these changes Aug 13, 2026

View reviewed changes

Rajdeepc reviewed Aug 17, 2026

View reviewed changes

cdransf force-pushed the cdransf/2nd-gen-icon-repoint branch 3 times, most recently from ade6228 to ee9834e Compare August 18, 2026 15:41

cdransf added 11 commits August 19, 2026 08:36

chore(icons): repoint ui icon consumers

594644e

fix(icons): test failures

fb515c2

fix(close-button): m size icon token

875ff96

fix(patterns): use package specifier for ui-icon import

44687c3

docs(ui-icons): aria-hidden convention

9e9fce6

docs(close-button): clarify icon size vs step selection

d62011b

chore(icon): restore status internal tag

3d616f3

chore(icons): add changeset

45b54da

fix(icons): changeset

f879afb

fix(icons): badge vrt regressions

bd4de35

fix(icons): close button icon size token

42ad8a9

cdransf force-pushed the cdransf/2nd-gen-icon-repoint branch from ee9834e to 42ad8a9 Compare August 19, 2026 15:36

Uh oh!

Conversation

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

Uh oh!

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!

Rajdeepc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Coverage Report for CI Build 32155952033

Coverage remained the same at 96.241%

Details

Uncovered Changes

Coverage Regressions

Coverage Stats

💛 - Coveralls

Uh oh!

miwha-adobe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cdransf commented Aug 12, 2026

Uh oh!

miwha-adobe left a comment

Choose a reason for hiding this comment

Uh oh!

miwha-adobe left a comment

Choose a reason for hiding this comment

Uh oh!

Rajdeepc Aug 17, 2026

Choose a reason for hiding this comment

Uh oh!

Rajdeepc Aug 17, 2026

Choose a reason for hiding this comment

Uh oh!

rubencarvalho Aug 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Rajdeepc Aug 17, 2026

Choose a reason for hiding this comment

Uh oh!

Rajdeepc Aug 17, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

cdransf commented Jul 30, 2026 •

edited

Loading

changeset-bot Bot commented Jul 30, 2026 •

edited

Loading

coveralls commented Aug 11, 2026 •

edited

Loading