Skip to content

Conversation

rubencarvalho
Copy link
Contributor

@rubencarvalho rubencarvalho commented Sep 17, 2025

Description

This PR upgrades the workflow icons package to @adobe/spectrum-css-workflow-icons@5.0.0, which dropped React icons (not relevant to us) and included new latest upstream icon updates.

While working on this, I noticed that iconsList.json - the source of truth for icon filtering in our docs and Storybook - was out of date.
I added a script to automatically regenerate it to ensure it stays current.

As a result, you may notice all themes have been affected in the screenshots because of that change.

Motivation and context

  • Align SWC with upstream Spectrum CSS workflow icons 5.0.0 release.
  • Ensure SWC consumers get the latest Spectrum 2 icons (updated 20px Cloud State icons and the new HeartFilled).

Screenshots

The new heart-filled workflow icon:
Screenshot 2025-09-19 at 10 03 19


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

  • Verify the addition of the new workflow icon

    1. Go here
    2. Pick the "spectrum-two" theme
    3. Search for "filled"
    4. Verify the new heart-filled icon is present

Device review

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

Copy link

changeset-bot bot commented Sep 17, 2025

🦋 Changeset detected

Latest commit: 22b8732

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

This PR includes changesets to release 84 packages
Name Type
@spectrum-web-components/icons-workflow Minor
@spectrum-web-components/action-group Minor
@spectrum-web-components/action-menu Minor
@spectrum-web-components/alert-banner Minor
@spectrum-web-components/alert-dialog Minor
@spectrum-web-components/breadcrumbs Minor
@spectrum-web-components/card Minor
@spectrum-web-components/contextual-help Minor
@spectrum-web-components/dialog Minor
@spectrum-web-components/help-text Minor
@spectrum-web-components/picker Minor
@spectrum-web-components/search Minor
@spectrum-web-components/textfield Minor
@spectrum-web-components/toast Minor
@spectrum-web-components/vrt-compare Minor
@spectrum-web-components/bundle Minor
@spectrum-web-components/action-bar Minor
@spectrum-web-components/field-group Minor
@spectrum-web-components/radio Minor
@spectrum-web-components/custom-vars-viewer Minor
example-project-rollup Patch
example-project-webpack Patch
@spectrum-web-components/story-decorator Minor
@spectrum-web-components/color-field Minor
@spectrum-web-components/combobox Minor
@spectrum-web-components/number-field Minor
documentation Patch
@spectrum-web-components/slider Minor
@spectrum-web-components/eslint-plugin Minor
@spectrum-web-components/accordion Minor
@spectrum-web-components/action-button Minor
@spectrum-web-components/asset Minor
@spectrum-web-components/avatar Minor
@spectrum-web-components/badge Minor
@spectrum-web-components/button-group Minor
@spectrum-web-components/button Minor
@spectrum-web-components/checkbox Minor
@spectrum-web-components/clear-button Minor
@spectrum-web-components/close-button Minor
@spectrum-web-components/coachmark Minor
@spectrum-web-components/color-area Minor
@spectrum-web-components/color-handle Minor
@spectrum-web-components/color-loupe Minor
@spectrum-web-components/color-slider Minor
@spectrum-web-components/color-wheel Minor
@spectrum-web-components/divider Minor
@spectrum-web-components/dropzone Minor
@spectrum-web-components/field-label Minor
@spectrum-web-components/icon Minor
@spectrum-web-components/icons-ui Minor
@spectrum-web-components/icons Minor
@spectrum-web-components/iconset Minor
@spectrum-web-components/illustrated-message Minor
@spectrum-web-components/infield-button Minor
@spectrum-web-components/link Minor
@spectrum-web-components/menu Minor
@spectrum-web-components/meter Minor
@spectrum-web-components/modal Minor
@spectrum-web-components/overlay Minor
@spectrum-web-components/picker-button Minor
@spectrum-web-components/popover Minor
@spectrum-web-components/progress-bar Minor
@spectrum-web-components/progress-circle Minor
@spectrum-web-components/sidenav Minor
@spectrum-web-components/split-view Minor
@spectrum-web-components/status-light Minor
@spectrum-web-components/swatch Minor
@spectrum-web-components/switch Minor
@spectrum-web-components/table Minor
@spectrum-web-components/tabs Minor
@spectrum-web-components/tags Minor
@spectrum-web-components/thumbnail Minor
@spectrum-web-components/tooltip Minor
@spectrum-web-components/top-nav Minor
@spectrum-web-components/tray Minor
@spectrum-web-components/underlay Minor
@spectrum-web-components/base Minor
@spectrum-web-components/grid Minor
@spectrum-web-components/opacity-checkerboard Minor
@spectrum-web-components/reactive-controllers Minor
@spectrum-web-components/shared Minor
@spectrum-web-components/styles Minor
@spectrum-web-components/theme Minor
@spectrum-web-components/truncated 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

Copy link
Contributor

github-actions bot commented Sep 17, 2025

📚 Branch Preview

🔍 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-5735

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.

Copy link
Contributor

Tachometer results

Currently, no packages are changed by this PR...

@rubencarvalho rubencarvalho changed the title feat(icons-workflow): update workflow icons to the latest release feat(icons-workflow): update workflow icons to the latest version Sep 17, 2025
@rubencarvalho rubencarvalho force-pushed the ruben/update-workflow-icons branch from f54812d to bce9d00 Compare September 18, 2025 14:09
@rubencarvalho rubencarvalho marked this pull request as ready for review September 19, 2025 08:05
@rubencarvalho rubencarvalho requested a review from a team as a code owner September 19, 2025 08:05
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file does not have direct customer impact - this is only used in our <icons-demo> component inside our docs website and stories.

Copy link
Contributor

@castastrophe castastrophe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One question: are there supposed to be updates to any generated icon assets included here as well or is that only the case for UI icons?

'@spectrum-web-components/icons-workflow': minor
---

- Upgraded to `@adobe/spectrum-css-workflow-icons@5.0.0`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice summary, thanks for all these great details!

s2: transformIconNames(iconsV2NameList),
};

const iconsListPath = path.join(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this be a good place to leverage require.resolve with the iconset package name so that when we migrate to the 1st-gen / 2nd-gen set-up, it's able to find it based on package registry instead of path location?

Comment on lines +5 to +11
- Upgraded to `@adobe/spectrum-css-workflow-icons@5.0.0`.
- Includes changes from previous a4u upstream releases:
- Added `S2_Icon_HeartFilled_20_N.svg`, updated `S2_Icon_SpeedFast_20_N.svg`.
- Replaced all 22×20px Cloud State icons with 20px variants.
- Removed deprecated multi-colored error icon. Added new Cloud State icons (`Disconnected`, `Error`, `InProgress`, `Online`, `Paused`, `Pending`, `SlowConnection`).
- Updated several other icons (`CloseCaptions`, `CommentHide`, `Community`, etc.).
- For the full changelog, see: https://github.com/adobe/spectrum-css-workflow-icons/pull/50
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very well documented summary!

*
* The function performs the following transformations:
* 1. Converts PascalCase component names (e.g., "HeartFilled") to lowercase (e.g., "heartfilled")
* 2. Filters out any names that start with numbers (invalid icon names)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this one wasn’t filtered by the icons team. As we think about scaling icon processing, it might be helpful to handle this filtering upstream so we don’t need to manage it on our end.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants