feat(icon, ui-icons): add missing ui icons and sizing classes #3866
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: 69b8f90 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 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 |
File metricsSummaryTotal size: 1.42 MB*
File change detailsicon
ui-icons
* An ASCII character in UTF-8 is 8 bits or 1 byte. |
|
🚀 Deployed on https://pr-3866--spectrum-css.netlify.app |
rise-erpelding
added
ready-for-review
S2
rise-erpelding
force-pushed
the
rise-erpelding/css-1194-new-ui-icons
branch
from
42d4e2c to
38d28cd
Compare
rise-erpelding
commented
May 29, 2025
Comment on lines
-174
to
-176
| return workflowIconsCleaned.sort().map((iconName) => IconWithLabelTemplate({ ...args, iconName }, context)); | ||
| return workflowIconsCleaned.map((iconName) => IconWithLabelTemplate({ ...args, iconName }, context)); | ||
| }, () => { | ||
| return uiIconsWithDirections.sort().map((iconName) => IconWithLabelTemplate({ ...args, uiIconName: iconName }, context)); |
There was a problem hiding this comment.
I believe these two were already being sorted in a way that separates the icon name and numerical size (in components/icon/stories/utilities.js), so adding .sort() here was reverting the sorted icons list back to ASCII order (so that Add100 appears before Add50, for instance).
rise-erpelding
commented
May 29, 2025
.changeset/upset-roses-live.md
Outdated
There was a problem hiding this comment.
I know we haven't done releases for ui-icons or icon yet so the original changesets are still hanging out, if it's better to update those changesets instead of adding a new one, I'm happy to do that!
cdransf
approved these changes
May 29, 2025
rise-erpelding
force-pushed
the
rise-erpelding/css-1194-new-ui-icons
branch
from
38d28cd to
69b8f90
Compare
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
Newly added S2 UI icons did not yet have tokens available for their sizes (that define width/height for both platform scales). This work adds these icons back (they had previously been added in a commit on #3001) and adds the tokens to their respective CSS classes now that they are available.
The tokens added here are:
NOTE: It appears that link-out-icon-size-75 is missing from this list and should have been included (it's needed for the small sized menu linkout). It does not appear to be in the same a4u package that the other UI icons came from (even on the latest version), so it may need to be added. A follow-up ticket has been created for this work and linked to the appropriate existing follow-up tickets for the menu component's S2 migration, see CSS-1221.
CSS-1194
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
ui-iconspackage (use the "Display the source diff" option) are the inverse of the commit where they were removed. (The changeset is different, however; I've created a new changeset forui-iconsfor this work.) [@cdransf]yarn nx resetbeforeyarn installandyarn startto ensure that icons rebuild properly. [@cdransf]--spectrum-add-icon-size-50,--spectrum-add-icon-size-75, etc.). You can also compare this to the S2 token spec (on the "S2 Foundational tokens" page) to confirm that the sizes for medium/large contexts are rendering appropriately. [@cdransf]Regression testing
Validate:
Screenshots
To-do list