feat: simplify fallback of ui icon size numbers

[jawinn]

Description

docs(icon): simplify fallback of ui icon size numbers

If a UI icon was not provided with its full name including sizing number (e.g. Dash100), the template would try and guess at a sizing number based on t-shirt size. This has been extracted out to a utility function and simplified, as this had gotten too complex, with too many exceptions. In some cases this was causing the wrong icon to be shown. This function no longer strips out any sizing numbers that were specifically provided.

docs(icon): log error when icon is not in the icon set

Update icon Storybook template with a guard clause so that it logs a warning when the icon is not in the icon set. Previously there was no indication except for not seeing the icon visually. This also renames the "idKey" variable to better explain what it is.

feat(icon): display placeholder icon when workflow icon is missing

Display the design recommended "Circle" icon as a placeholder icon when the workflow icon cannot be found:

This helps with identifying missing icons in VRTs, so the icon continues to take up the space it should, rather than disappearing entirely in some cases. This will help in the transition to the new S2 icons.

---

This change also updates the templates of a few components to make sure they are rendering the correct UI icon. This focused on components that use the icons whose sizing numbers are outside the normal / default mapping (arrow, asterisk, dash).

• docs(button): replace deprecated ui icon size in test
• feat(swatch): use spec defined ui icon size number for dash
• fix(menu): update ui icon sizes used in template.
• fix: icon set arg was missing a value in a few places
• fix(actionbutton): define specific sizing for corner triangle

As part of this work, I manually ran a chromatic build on this branch and compared it against spectrum-two to assist with finding a few of these needed updates.

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

• Icon stories and docs are still appearing correctly [@cdransf]
• Button testing preview for large UI icon is now showing an icon [@cdransf]
• UI icons are still appearing for the swatch dash, and menu chevron, menu checkmark, and menu (tray submenu) arrow [@cdransf]
• Missing workflow icons, such as the ones in alert banner, are showing the placeholder circle icon [@cdransf]

Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

• The pages render correctly, are accessible, and are responsive.

2. If components have been modified, VRTs have been run on this branch:

• VRTs have been run and looked at.
• Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• If my change impacts other components, I have tested to make sure they don't break.
• ✨ This pull request is ready to merge. ✨

[github-actions]

File metrics

Summary

Total size: 1.38 MB^*

🎉 No changes detected in any packages

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[github-actions]

🚀 Deployed on https://pr-3571--spectrum-css.netlify.app

[changeset-bot]

⚠️ No Changeset found

Latest commit: d8a1ef7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[rise-erpelding]

Thank you for all the work you do making icons better! Mostly I have some questions that I'm leaving in the comments that may or may not need addressing.

[rise-erpelding]

I get some of these "Could not find SVG markup..." warnings on the menu Docs page for Checkmark and Chevron. Is that expected? Is it anything that needs to be addressed here?

[jawinn]

I happened across those as well. They are related to the context needing to be passed through to the templates used in Menu (non-ref SVG markup comes from the global loader and its data is in context). I went ahead and just added a commit to fix that.

[rise-erpelding]

Hmmm, I don't see a spot where we're failing to add context, but I'm still getting those warnings locally and in the preview for checkmark and chevron, which seems weird... Accordion uses chevron and it's not having that issue, so it feels like it's more specific to menu and less to icons, what do you think?

[jawinn]

I isolated it to just SubmenuInPopover. It was related to context not actually being passed in to the content array arg of Popover, because of how it was trying to do it as a function (eventually reaching renderContent in the Popover template which then doesn't pass in any args or context). I just updated the existing commit, so those particular warnings should be gone now on the Menu Docs page.

[rise-erpelding]

Aside from menu still not being able to find the svg markup for chevron and checkmark, I think this is good to go--I'll leave it to you to decide whether this is something that can/needs to be addressed here or can be done separately.

[rise-erpelding]

Hmmm, I don't see a spot where we're failing to add context, but I'm still getting those warnings locally and in the preview for checkmark and chevron, which seems weird... Accordion uses chevron and it's not having that issue, so it feels like it's more specific to menu and less to icons, what do you think?

[cdransf]

Ran through the validation steps and everything looks good! ✨