feat(icons)!: s2 icons - use latest workflow and ui icon sets #3001
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 82080bd The changes in this PR will be included in the next version bump. This PR includes changesets to release 57 packages
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 |
|
🚀 Deployed on https://pr-3001--spectrum-css.netlify.app |
File metricsSummaryTotal size: 1.42 MB* Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.
File change detailsicon
ui-icons
* An ASCII character in UTF-8 is 8 bits or 1 byte. |
jawinn
force-pushed
the
refactor-s2-icons-workflow-and-ui-v2
branch
from
988aa3a to
420eb92
Compare
|
@jawinn Can we do a dry run in SWC? |
|
Typically we don't import @adobe/spectrum-tokens as a package in SWC. The icons in SWC are served separately via |
jawinn
force-pushed
the
refactor-s2-icons-workflow-and-ui-v2
branch
3 times, most recently
from
1c4f08b to
8ddbce0
Compare
|
I've made a bunch of updates here to help prepare this for going into foundations:
|
8 tasks
jawinn
changed the title
jawinn
force-pushed
the
refactor-s2-icons-workflow-and-ui-v2
branch
from
8ddbce0 to
c9694a0
Compare
castastrophe
force-pushed
the
refactor-s2-icons-workflow-and-ui-v2
branch
from
c9694a0 to
6b70fd9
Compare
castastrophe
force-pushed
the
s2-foundations-redux
branch
4 times, most recently
from
d29eaf2 to
eb20c09
Compare
castastrophe
force-pushed
the
s2-foundations-redux
branch
3 times, most recently
from
2eebf01 to
711d4cd
Compare
castastrophe
force-pushed
the
s2-foundations-redux
branch
2 times, most recently
from
c56b926 to
79eb129
Compare
castastrophe
force-pushed
the
s2-foundations-redux
branch
3 times, most recently
from
9c3a625 to
d6c8c69
Compare
Uses and updates to the latest icon sets for S2. ==== Workflow icons ==== Uses the latest version of this package. There is a large difference between the set of icons available for S1 and S2. These differences are documented separately from this work. ==== UI icons ==== Updates the ui-icons package with the latest set of icons. This includes deprecations and some new icons. See the change log for a full list of changes. The UI icons no longer contain both a medium and a large SVG asset. The file structure and loading have been changed to use the single asset. Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>
Previous work has updated components to provide the icon set. Removes code that tries to determine which icon set an icon is in, if the icon set was not provided.
Clean up and simplify some logic in the icon template and make sure missing SVG data string is logged as a warning.
- Fixes issue with loading icons when useRef is false, with improved warning logging. - Fixes issue with some sprite sheet icons not loading with v4.0. Adds some new utility functions such as getSpriteSheetName to clarify and fix some of the logic associated with generated the sprite sheet ID. - Refactors and cleans up some more of the template logic.
The ui-icons dist folder contains all the SVGs which are committed.
Some of the new UI icons pulled in are currently not used and do not have tokens for their sizing available yet. It was decided in discussions between engineering and design teams to exclude these until they are needed. Otherwise they would be incorrectly sized with the missing tokens and associated individual UI icon classes. CSS-1115
It was decided to hide these new 22x20 icons which are exceptions to the current sizing of workflow icons. They are not yet handled within the design system. This only affects a handful of icons with names starting with "CloudState". CSS-1116
Removes the need for fetchIconDetails; it was processing and returning data that we already had access to through utilities, and a few parts of it were refactored out into different places. - The list of ui icon sizes was moved into its own utility function. - The processing that changes the keys of the IconLoader from file names to icon names now happens within the loader itself, so that processing only needs to be done once. The templates now all properly pass along context, so they are able to access the global loader icon data that lives in context.loaded.icons . The loader icon data also being stored in window.icons was removed, as it is no longer needed after the context fixes. This should help performance by not storing this in two places.
The fill color control now works when the useRef control is false. Also adds two more icons to VRTs that have elements with varying opacities.
- Use dynamic number of columns for icon list stories. - Remove ui and workflow icon list stories from chromatic. All UI icons are already in the Default story and we do not need to capture all workflow icons.
- add figma design link to icon in storybook - refactor: use Container in icon tests template - small formatting adjustments to icon docs, including added subheadings
castastrophe
force-pushed
the
refactor-s2-icons-workflow-and-ui-v2
branch
from
37db4d3 to
82080bd
Compare
castastrophe
approved these changes
Feb 18, 2025
rise-erpelding
approved these changes
Feb 18, 2025
castastrophe
pushed a commit
that referenced
this pull request
Feb 24, 2025
* feat(icon): updated s2 icons - workflow and ui Uses and updates to the latest icon sets for S2. ==== Workflow icons ==== Uses the latest version of this package. There is a large difference between the set of icons available for S1 and S2. These differences are documented separately from this work. ==== UI icons ==== Updates the ui-icons package with the latest set of icons. This includes deprecations and some new icons. See the change log for a full list of changes. The UI icons no longer contain both a medium and a large SVG asset. The file structure and loading have been changed to use the single asset. Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com> Also includes: * build(storybook): use latest 4.0.0 version of workflow icons * feat(icon): remove guessing of icon set if not provided * refactor(icon): refactors, cleans up, and documents template logic and utilities * feat(icon): exclude new ui icons not yet ready for production (CSS-1115) * feat(icon): exclude 22x20 workflow icons (CSS-1116)
castastrophe
pushed a commit
that referenced
this pull request
Feb 24, 2025
* feat(icon): updated s2 icons - workflow and ui Uses and updates to the latest icon sets for S2. ==== Workflow icons ==== Uses the latest version of this package. There is a large difference between the set of icons available for S1 and S2. These differences are documented separately from this work. ==== UI icons ==== Updates the ui-icons package with the latest set of icons. This includes deprecations and some new icons. See the change log for a full list of changes. The UI icons no longer contain both a medium and a large SVG asset. The file structure and loading have been changed to use the single asset. Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com> Also includes: * build(storybook): use latest 4.0.0 version of workflow icons * feat(icon): remove guessing of icon set if not provided * refactor(icon): refactors, cleans up, and documents template logic and utilities * feat(icon): exclude new ui icons not yet ready for production (CSS-1115) * feat(icon): exclude 22x20 workflow icons (CSS-1116)
castastrophe
pushed a commit
that referenced
this pull request
Feb 25, 2025
* feat(icon): updated s2 icons - workflow and ui Uses and updates to the latest icon sets for S2. ==== Workflow icons ==== Uses the latest version of this package. There is a large difference between the set of icons available for S1 and S2. These differences are documented separately from this work. ==== UI icons ==== Updates the ui-icons package with the latest set of icons. This includes deprecations and some new icons. See the change log for a full list of changes. The UI icons no longer contain both a medium and a large SVG asset. The file structure and loading have been changed to use the single asset. Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com> Also includes: * build(storybook): use latest 4.0.0 version of workflow icons * feat(icon): remove guessing of icon set if not provided * refactor(icon): refactors, cleans up, and documents template logic and utilities * feat(icon): exclude new ui icons not yet ready for production (CSS-1115) * feat(icon): exclude 22x20 workflow icons (CSS-1116)
12 tasks
This was referenced May 16, 2025
13 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Uses and updates to the latest icon sets for S2.
🚨 This is a breaking change.
CSS-1096, CSS-1115, and CSS-1116
Workflow icons
Uses the latest version of this package. There is a large difference between the set of icons available for S1 and S2. These differences are documented separately from this work.
UI icons
Updates the
ui-iconspackage with the latest set of icons. This includes deprecations and some new icons. See the change set in this PR for a full list of changes.The UI icons no longer contain both a medium and a large SVG asset. The file structure and loading have been changed to use the single asset.
Icon component CSS
--iconPrimarythat comes along with some of the SVGs.spectrum-UIIcon--mediumand.spectrum-UIIcon--largeclasses are removed. These were previously used for the "combined" assets that no longer exist.Icon component storybook and template updates
This PR cleans up some of the Icon template logic and utilities with some refactoring. Some of the logic has been split out into documented utility functions such as
cleanWorkflowIconNameandgetSpriteSheetName. Additional documentation has been added throughout to make the code easier to understand.Two stories are added that show all of the icons for in each icon set. Additional templates for displaying and testing the different icon sets have also been added. This includes a grid with sizing numbers in the Default story Chromatic template that displays UI icons. See screenshots below.
The
useRefcontrol is no longer hidden, to allow for testing both ways of rendering.Follow-up to-do work / known issues:
The following follow-up issues have been created:
Now completed in this PR. UI icons that are not yet used within designs (and don't have their associated tokens) were decided to be excluded for now.
Now completed in this PR. There were a handful of oddly sized and named icons within the workflow icons package, that have "22x20" in their names. This sizing did not match workflow sizing tokens and documentation. It was decided to exclude these icons for the time being, as they are not currently handled within the design system. Within this PR, those icons are excluded from the Icon Loader and from the generated list of icons within Storybook.
Will be worked on after this PR merges. This is best as separate work as there are other components that will need changes to their Storybook templates. Expect the "Fallback UI Icon sizing number" section of the Icon
template.jscode to be removed as part of this.There is one workflow icon that is not rendering ("MediaOffline").
Note on Branch History
This branch started as a rebased and updated version of Cassondra's initial work in #2836 that
Additional refactoring, cleanup, new utility functions, and more have been added since then. Workflow icons have also been updated to the latest v4.0.0.
How and where has this been tested?
Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.
Validation steps
useReftrue. Icon rendered should have a<use>pointed to the sprite sheet. [@castastrophe]useReffalse. Icon rendered should have the actual SVG file markup inserted. [@castastrophe]Regression testing
Validate:
Screenshots
Default story's updated Chromatic template (testing preview):
Story: list of workflow icons:
Story: list of UI icons:
To-do list