spectrum-web-components feat(icons-workflow): add support for Express workflow icons

trafficstars

Description

Initial PR: https://github.com/adobe/spectrum-web-components/pull/3169 This PR is a follow up of the one above. This new feature allows consumers to use the Express icons along with the Express theme variant by leveraging conditional exports.

To preview this feature you can go ahead and change the export conditions in storybook's main.js by adding express string as such:

exportConditions: ['browser', 'development', 'express'],

In a nutshell it:

Adds @adobe/spectrum-css-ccx-workflow-icons which comes with Express icons.
Modifies the build process of icons-workflow package to also process the Express icons.
Adds entries in icons-workflow/package.json to specify where to find icons based on theme used (express vs default)

Very important: There may be some icons (5 icons at the moment) which are present in Express icons package but not in the Spectrum one. In this PR we are making available only the icons that do have a Spectrum equivalent. Rest will be ignored.

Pretty important: There are around ~800 Spectrum icons and around ~200 Express icons. Therefore, since not all the Spectrum icons have an equivalent in Express, if you are using express export condition and you're looking for an icon that is not in the Express icons package, you'll get the fallback, which is the Spectrum one.

Related issue(s)

https://github.com/adobe/spectrum-web-components/issues/2845

Motivation and context

We should add built-in support for Spectrum Express Workflow Icons. In this way we can continue to close the gap on full support for the Express variant of the Spectrum design language.

How has this been tested?

[x] Toggling between "express" and "spectrum" icons
1. Change the exportConditions of the storybook by appending "express" in the array: https://github.com/adobe/spectrum-web-components/blob/rocss/express-workflow-icons/storybook/main.js#L36
2. Open storybook
3. Compare it with https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/icons-workflow--elements
4. Observe there are icons such as sp-icon-delete which look different. Indeed there are a lot which did not change... because there are ~800 spectrum and only ~200 express icons

Screenshots (if appropriate)

Types of changes

[ ] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)
[ ] Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

[x] I have signed the Adobe Open Source CLA.
[x] My code follows the code style of this project.
[x] If my change required a change to the documentation, I have updated the documentation in this pull request.
[x] I have read the CONTRIBUTING document.
[ ] I have added tests to cover my changes.
[x] All new and existing tests passed.
[x] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

Mar 21 '24 09:03 Rocss

Is it possible the build process runs different on the CI and I am overlooking something, @Westbrook? I don't want to say "it works on my machine" but this build passes on my local. From the logs looks like the icons.ts file is not being populated in via the postbuild script.

Mar 21 '24 15:03 Rocss

@Rocss I'd start by running git clean -dfX locally and seeing if the build works in that case. I'd venture to say that something is in the cache that shouldn't be or out of the cache that should be, but it would be hard to say what without digging deeper on this. It feels like it would be something in https://github.com/adobe/spectrum-web-components/pull/4200/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R347-R353 but that could be a red herring. Let me know if that doesn't get you moving in the right direction and we can take a look together tomorrow or so.

Mar 21 '24 15:03 Westbrook

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:

Mar 25 '24 08:03 github-actions[bot]

Tachometer results

Chrome

action-bar permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	483 kB	77.15ms - 81.19ms	-	unsure 🔍 -2% - +5% -1.64ms - +3.99ms
branch	474 kB	76.04ms - 79.95ms	unsure 🔍 -5% - +2% -3.99ms - +1.64ms	-

action-group permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	535 kB	70.99ms - 72.55ms	-	unsure 🔍 -2% - +1% -1.53ms - +0.67ms
branch	526 kB	71.41ms - 72.98ms	unsure 🔍 -1% - +2% -0.67ms - +1.53ms	-

action-menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	645 kB	175.61ms - 178.91ms	-	unsure 🔍 -2% - +1% -3.58ms - +1.20ms
branch	637 kB	176.72ms - 180.19ms	unsure 🔍 -1% - +2% -1.20ms - +3.58ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	602 kB	96.16ms - 97.72ms	-	unsure 🔍 -1% - +1% -1.09ms - +1.01ms
branch	594 kB	96.28ms - 97.68ms	unsure 🔍 -1% - +1% -1.01ms - +1.09ms	-

test-lazy permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	602 kB	93.65ms - 95.21ms	-	unsure 🔍 -2% - +0% -1.82ms - +0.27ms
branch	593 kB	94.50ms - 95.89ms	unsure 🔍 -0% - +2% -0.27ms - +1.82ms	-

test-open-close-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	785 kB	1875.95ms - 1878.42ms	-	unsure 🔍 -0% - +0% -0.19ms - +3.35ms
branch	777 kB	1874.35ms - 1876.87ms	unsure 🔍 -0% - +0% -3.35ms - +0.19ms	-

test-open-close permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	783 kB	1871.78ms - 1874.96ms	-	unsure 🔍 -0% - +0% -1.36ms - +3.09ms
branch	775 kB	1870.95ms - 1874.07ms	unsure 🔍 -0% - +0% -3.09ms - +1.36ms	-

alert-dialog permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	455 kB	106.44ms - 107.63ms	-	unsure 🔍 -1% - +1% -0.82ms - +0.94ms
branch	447 kB	106.33ms - 107.62ms	unsure 🔍 -1% - +1% -0.94ms - +0.82ms	-

card permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	501 kB	64.86ms - 65.79ms	-	unsure 🔍 -1% - +1% -0.59ms - +0.74ms
branch	493 kB	64.78ms - 65.72ms	unsure 🔍 -1% - +1% -0.74ms - +0.59ms	-

color-field permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	484 kB	57.41ms - 58.35ms	-	unsure 🔍 -1% - +1% -0.63ms - +0.66ms
branch	470 kB	57.43ms - 58.31ms	unsure 🔍 -1% - +1% -0.66ms - +0.63ms	-

combobox permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	705 kB	42.06ms - 42.82ms	-	unsure 🔍 -2% - +1% -0.67ms - +0.45ms
branch	697 kB	42.13ms - 42.96ms	unsure 🔍 -1% - +2% -0.45ms - +0.67ms	-

light-dom-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	705 kB	438.88ms - 445.79ms	-	unsure 🔍 -2% - +1% -7.51ms - +2.95ms
branch	697 kB	440.69ms - 448.54ms	unsure 🔍 -1% - +2% -2.95ms - +7.51ms	-

dialog permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	507 kB	76.14ms - 76.90ms	-	faster ✔ 1% - 2% 0.42ms - 1.82ms
branch	499 kB	77.05ms - 78.23ms	slower ❌ 1% - 2% 0.42ms - 1.82ms	-

field-group permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	420 kB	90.11ms - 91.32ms	-	unsure 🔍 -0% - +1% -0.30ms - +1.33ms
branch	411 kB	89.66ms - 90.74ms	unsure 🔍 -1% - +0% -1.33ms - +0.30ms	-

help-text permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	386 kB	15.79ms - 16.05ms	-	unsure 🔍 -1% - +1% -0.19ms - +0.12ms
branch	377 kB	15.88ms - 16.04ms	unsure 🔍 -1% - +1% -0.12ms - +0.19ms	-

menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	473 kB	232.46ms - 239.47ms	-	unsure 🔍 -1% - +2% -3.18ms - +4.84ms
branch	465 kB	233.18ms - 237.09ms	unsure 🔍 -2% - +1% -4.84ms - +3.18ms	-

number-field permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	521 kB	101.44ms - 103.57ms	-	unsure 🔍 -1% - +2% -0.83ms - +2.27ms
branch	512 kB	100.66ms - 102.91ms	unsure 🔍 -2% - +1% -2.27ms - +0.83ms	-

overlay permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	671 kB	541.18ms - 550.51ms	-	unsure 🔍 -2% - +1% -9.18ms - +4.10ms
branch	663 kB	543.66ms - 553.11ms	unsure 🔍 -1% - +2% -4.10ms - +9.18ms	-

directive-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	789 kB	38.70ms - 39.32ms	-	unsure 🔍 -2% - +1% -0.74ms - +0.25ms
branch	781 kB	38.86ms - 39.65ms	unsure 🔍 -1% - +2% -0.25ms - +0.74ms	-

element-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	756 kB	397.21ms - 405.98ms	-	unsure 🔍 -0% - +3% -0.79ms - +10.26ms
branch	748 kB	393.50ms - 400.22ms	unsure 🔍 -3% - +0% -10.26ms - +0.79ms	-

lazy-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	557 kB	57.82ms - 58.88ms	-	faster ✔ 1% - 4% 0.32ms - 2.31ms
branch	549 kB	58.83ms - 60.51ms	slower ❌ 1% - 4% 0.32ms - 2.31ms	-

picker permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	511 kB	617.84ms - 626.48ms	-	unsure 🔍 -1% - +1% -6.66ms - +5.63ms
branch	502 kB	618.30ms - 627.05ms	unsure 🔍 -1% - +1% -5.63ms - +6.66ms	-

popover permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	382 kB	23.27ms - 23.63ms	-	unsure 🔍 -1% - +1% -0.31ms - +0.21ms
branch	373 kB	23.31ms - 23.69ms	unsure 🔍 -1% - +1% -0.21ms - +0.31ms	-

radio permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	405 kB	70.62ms - 71.68ms	-	unsure 🔍 -1% - +2% -0.39ms - +1.13ms
branch	396 kB	70.23ms - 71.32ms	unsure 🔍 -2% - +1% -1.13ms - +0.39ms	-

search permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	471 kB	64.08ms - 65.16ms	-	unsure 🔍 -1% - +1% -0.90ms - +0.61ms
branch	462 kB	64.24ms - 65.30ms	unsure 🔍 -1% - +1% -0.61ms - +0.90ms	-

slider permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	477 kB	115.43ms - 117.23ms	-	unsure 🔍 -2% - +1% -2.14ms - +0.79ms
branch	469 kB	115.85ms - 118.16ms	unsure 🔍 -1% - +2% -0.79ms - +2.14ms	-

split-button permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	718 kB	1870.39ms - 1873.19ms	-	unsure 🔍 -0% - +0% -1.33ms - +2.88ms
branch	710 kB	1869.44ms - 1872.59ms	unsure 🔍 -0% - +0% -2.88ms - +1.33ms	-

textfield permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	431 kB	41.06ms - 41.90ms	-	unsure 🔍 -1% - +2% -0.56ms - +0.67ms
branch	422 kB	40.97ms - 41.87ms	unsure 🔍 -2% - +1% -0.67ms - +0.56ms	-

toast permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	430 kB	46.66ms - 47.49ms	-	unsure 🔍 -2% - +0% -0.83ms - +0.22ms
branch	422 kB	47.05ms - 47.70ms	unsure 🔍 -0% - +2% -0.22ms - +0.83ms	-

tooltip permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	546 kB	47.36ms - 48.17ms	-	unsure 🔍 -2% - +1% -0.99ms - +0.28ms
branch	539 kB	47.63ms - 48.61ms	unsure 🔍 -1% - +2% -0.28ms - +0.99ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	631 kB	38.00ms - 38.59ms	-	unsure 🔍 -1% - +1% -0.41ms - +0.40ms
branch	636 kB	38.03ms - 38.57ms	unsure 🔍 -1% - +1% -0.40ms - +0.41ms	-

test-element permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	650 kB	67.72ms - 70.54ms	-	unsure 🔍 -2% - +3% -1.26ms - +1.83ms
branch	642 kB	68.21ms - 69.48ms	unsure 🔍 -3% - +2% -1.83ms - +1.26ms	-

test-lazy permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	628 kB	56.81ms - 57.94ms	-	unsure 🔍 -2% - +1% -0.98ms - +0.57ms
branch	620 kB	57.05ms - 58.11ms	unsure 🔍 -1% - +2% -0.57ms - +0.98ms	-

truncated permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	523 kB	62.25ms - 63.13ms	-	unsure 🔍 -1% - +1% -0.58ms - +0.80ms
branch	515 kB	62.05ms - 63.11ms	unsure 🔍 -1% - +1% -0.80ms - +0.58ms	-

Firefox

action-bar permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	483 kB	144.06ms - 149.38ms	-	unsure 🔍 -1% - +4% -1.74ms - +6.10ms
branch	474 kB	141.66ms - 147.42ms	unsure 🔍 -4% - +1% -6.10ms - +1.74ms	-

action-group permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	535 kB	154.63ms - 163.17ms	-	unsure 🔍 -3% - +5% -4.36ms - +7.64ms
branch	526 kB	153.05ms - 161.47ms	unsure 🔍 -5% - +3% -7.64ms - +4.36ms	-

action-menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	645 kB	314.06ms - 317.46ms	-	faster ✔ 7% - 8% 22.02ms - 28.14ms
branch	637 kB	338.30ms - 343.38ms	slower ❌ 7% - 9% 22.02ms - 28.14ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	602 kB	166.97ms - 171.63ms	-	slower ❌ 3% - 6% 4.36ms - 9.64ms
branch	594 kB	161.06ms - 163.54ms	faster ✔ 3% - 6% 4.36ms - 9.64ms	-

test-lazy permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	602 kB	178.30ms - 184.78ms	-	slower ❌ 8% - 13% 13.58ms - 21.30ms
branch	593 kB	162.01ms - 166.19ms	faster ✔ 8% - 12% 13.58ms - 21.30ms	-

test-open-close-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	785 kB	1461.02ms - 1473.26ms	-	slower ❌ 1% - 2% 10.89ms - 24.15ms
branch	777 kB	1447.08ms - 1452.16ms	faster ✔ 1% - 2% 10.89ms - 24.15ms	-

test-open-close permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	783 kB	1471.34ms - 1475.66ms	-	unsure 🔍 -0% - +0% -1.81ms - +4.41ms
branch	775 kB	1469.96ms - 1474.44ms	unsure 🔍 -0% - +0% -4.41ms - +1.81ms	-

alert-dialog permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	455 kB	194.53ms - 200.79ms	-	unsure 🔍 -2% - +3% -3.96ms - +5.88ms
branch	447 kB	192.90ms - 200.50ms	unsure 🔍 -3% - +2% -5.88ms - +3.96ms	-

card permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	501 kB	103.15ms - 109.81ms	-	unsure 🔍 -5% - +4% -4.97ms - +4.05ms
branch	493 kB	103.90ms - 109.98ms	unsure 🔍 -4% - +5% -4.05ms - +4.97ms	-

color-field permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	492 kB	101.33ms - 104.99ms	-	unsure 🔍 -2% - +3% -2.51ms - +3.19ms
branch	483 kB	100.63ms - 105.01ms	unsure 🔍 -3% - +2% -3.19ms - +2.51ms	-

combobox permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	705 kB	63.31ms - 68.61ms	-	slower ❌ 2% - 11% 1.21ms - 6.75ms
branch	697 kB	61.15ms - 62.81ms	faster ✔ 2% - 10% 1.21ms - 6.75ms	-

light-dom-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	705 kB	742.52ms - 756.44ms	-	slower ❌ 2% - 6% 14.96ms - 40.52ms
branch	697 kB	711.02ms - 732.46ms	faster ✔ 2% - 5% 14.96ms - 40.52ms	-

dialog permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	507 kB	117.77ms - 123.75ms	-	unsure 🔍 -5% - +2% -6.72ms - +2.80ms
branch	499 kB	119.02ms - 126.42ms	unsure 🔍 -2% - +6% -2.80ms - +6.72ms	-

field-group permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	420 kB	177.68ms - 185.16ms	-	unsure 🔍 -3% - +3% -5.76ms - +6.28ms
branch	411 kB	176.44ms - 185.88ms	unsure 🔍 -3% - +3% -6.28ms - +5.76ms	-

help-text permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	386 kB	29.00ms - 32.92ms	-	unsure 🔍 -2% - +12% -0.52ms - +3.48ms
branch	377 kB	29.08ms - 29.88ms	unsure 🔍 -11% - +1% -3.48ms - +0.52ms	-

menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	473 kB	432.14ms - 444.70ms	-	unsure 🔍 -2% - +2% -9.58ms - +7.38ms
branch	465 kB	433.82ms - 445.22ms	unsure 🔍 -2% - +2% -7.38ms - +9.58ms	-

number-field permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	521 kB	192.58ms - 202.26ms	-	unsure 🔍 -3% - +3% -6.61ms - +6.61ms
branch	512 kB	192.92ms - 201.92ms	unsure 🔍 -3% - +3% -6.61ms - +6.61ms	-

overlay permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	763 kB	683.10ms - 699.98ms	-	slower ❌ 3% - 7% 19.44ms - 43.92ms
branch	755 kB	650.99ms - 668.73ms	faster ✔ 3% - 6% 19.44ms - 43.92ms	-

directive-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	767 kB	66.76ms - 69.72ms	-	unsure 🔍 -4% - +2% -2.63ms - +1.07ms
branch	759 kB	67.91ms - 70.13ms	unsure 🔍 -2% - +4% -1.07ms - +2.63ms	-

element-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	756 kB	632.17ms - 644.67ms	-	slower ❌ 4% - 7% 23.05ms - 41.27ms
branch	748 kB	599.63ms - 612.89ms	faster ✔ 4% - 6% 23.05ms - 41.27ms	-

lazy-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	557 kB	114.19ms - 120.73ms	-	slower ❌ 8% - 15% 8.92ms - 15.64ms
branch	549 kB	104.40ms - 105.96ms	faster ✔ 8% - 13% 8.92ms - 15.64ms	-

picker permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	511 kB	1060.11ms - 1071.01ms	-	unsure 🔍 -1% - +1% -15.07ms - +13.07ms
branch	502 kB	1053.59ms - 1079.53ms	unsure 🔍 -1% - +1% -13.07ms - +15.07ms	-

popover permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	382 kB	40.06ms - 43.10ms	-	unsure 🔍 -2% - +8% -0.58ms - +3.26ms
branch	373 kB	39.06ms - 41.42ms	unsure 🔍 -8% - +1% -3.26ms - +0.58ms	-

radio permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	405 kB	116.06ms - 121.30ms	-	unsure 🔍 -5% - +3% -5.70ms - +3.06ms
branch	396 kB	116.49ms - 123.51ms	unsure 🔍 -3% - +5% -3.06ms - +5.70ms	-

search permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	471 kB	99.02ms - 105.70ms	-	unsure 🔍 -7% - +2% -7.66ms - +2.10ms
branch	462 kB	101.59ms - 108.69ms	unsure 🔍 -2% - +8% -2.10ms - +7.66ms	-

slider permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	477 kB	200.39ms - 206.61ms	-	unsure 🔍 -2% - +3% -3.47ms - +5.59ms
branch	469 kB	199.15ms - 205.73ms	unsure 🔍 -3% - +2% -5.59ms - +3.47ms	-

split-button permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	718 kB	1432.22ms - 1435.70ms	-	unsure 🔍 -0% - +0% -3.05ms - +2.73ms
branch	710 kB	1431.81ms - 1436.43ms	unsure 🔍 -0% - +0% -2.73ms - +3.05ms	-

textfield permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	431 kB	73.20ms - 79.32ms	-	unsure 🔍 -4% - +8% -2.97ms - +5.69ms
branch	422 kB	71.83ms - 77.97ms	unsure 🔍 -7% - +4% -5.69ms - +2.97ms	-

toast permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	430 kB	86.70ms - 92.10ms	-	unsure 🔍 -5% - +5% -4.26ms - +4.06ms
branch	422 kB	86.34ms - 92.66ms	unsure 🔍 -5% - +5% -4.06ms - +4.26ms	-

tooltip permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	650 kB	99.22ms - 102.30ms	-	slower ❌ 11% - 16% 10.00ms - 13.76ms
branch	642 kB	87.81ms - 89.95ms	faster ✔ 10% - 14% 10.00ms - 13.76ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	631 kB	69.44ms - 72.20ms	-	faster ✔ 12% - 20% 9.65ms - 16.91ms
branch	623 kB	80.74ms - 87.46ms	slower ❌ 13% - 24% 9.65ms - 16.91ms	-

test-element permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	650 kB	138.10ms - 145.50ms	-	unsure 🔍 -1% - +6% -1.26ms - +8.22ms
branch	642 kB	135.36ms - 141.28ms	unsure 🔍 -6% - +1% -8.22ms - +1.26ms	-

test-lazy permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	628 kB	112.60ms - 118.44ms	-	unsure 🔍 -2% - +5% -1.67ms - +6.11ms
branch	620 kB	110.73ms - 115.87ms	unsure 🔍 -5% - +1% -6.11ms - +1.67ms	-

truncated permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	523 kB	104.01ms - 110.23ms	-	unsure 🔍 -5% - +4% -5.31ms - +4.39ms
branch	515 kB	103.86ms - 111.30ms	unsure 🔍 -4% - +5% -4.39ms - +5.31ms	-

Mar 25 '24 09:03 github-actions[bot]

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.98	0.98	0.98
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category	Latest	Main	Branch
Total	229.095 kB	217.517 kB 🏆	217.565 kB
Scripts	60.945 kB	54.506 kB 🏆	54.859 kB
Stylesheet	35.554 kB	31.104 kB	30.806 kB 🏆
Document	5.884 kB	5.195 kB	5.188 kB 🏆
Third Party	126.712 kB	126.712 kB	126.712 kB

Request Count

Category	Latest	Main	Branch
Total	43	43	43
Scripts	35	35	35
Stylesheet	5	5	5
Document	1	1	1
Third Party	2	2	2

Mar 25 '24 10:03 github-actions[bot]

With a straight pull I run into errors like this:

error TS5055: Cannot write file '/Users/westbrookjohnson/Documents/repos/swc/packages/icons-workflow/src/icons/ZoomOut.d.ts' because it would overwrite input file.


Found 891 errors.

That implies the tsconfig.json isn't as expected for the package.

After running git clean -dfX, the install and build worked as expected, so hopefully this note is enough to support other reviewed to getting to the actual code/experience of this change.

Mar 25 '24 15:03 Westbrook

With this change in Storybook, I am able to see the change from the previous delivery:

To the new delivery:

Which implies that this approach (if appropriate) would resolve #4026. @AndreiBaicu26 can you confirm this as well?

Mar 25 '24 15:03 Westbrook

I'd love any thoughts you might have on applying this new condition to https://github.com/adobe/spectrum-web-components/blob/main/.circleci/config.yml#L66 so that when testing an Express theme the intended icons were available in that context.

Mar 25 '24 15:03 Westbrook

In preparation for next steps:

@Rocss do you think your project is in a place to take a pre-release of this change to test therein? It "working" and it "working enough to support major products" are two different things, so if there are other testing paths that you would be interested in, any insight in this area would be greatly appreciated, too!

Mar 25 '24 21:03 Westbrook

@Westbrook Fair point, I'll discuss within the team the possibility to test this as a pre-release in Express.

Mar 26 '24 09:03 Rocss

Update: I'm waiting for a decision from design on whether Express will be switching to Spectrum 2 default icons, as we're considering the work in this PR to no longer be relevant in the context of unification.

I'm also thinking of how the complexity of the build would change if Spectrum 2 will have different sets of icons for different themes as well. We'll have to basically support 4 icon repositories (2 for Spectrum Express and 2 for Spectrum classic), as SWC will support both S1 and S2 for a while.

Apr 08 '24 13:04 Rocss

spectrum-web-components spectrum-web-components copied to clipboard

feat(icons-workflow): add support for Express workflow icons

Description

Related issue(s)

Motivation and context

How has this been tested?

Screenshots (if appropriate)

Types of changes

Checklist

Best practices

Branch preview

Tachometer results

action-bar permalink

basic-test

action-group permalink

basic-test

action-menu permalink

test-basic

test-directive permalink

test-lazy permalink

test-open-close-directive permalink

test-open-close permalink

alert-dialog permalink

basic-test

card permalink

test-basic

color-field permalink

basic-test

combobox permalink

basic-test

light-dom-test permalink

dialog permalink

basic-test

field-group permalink

basic-test

help-text permalink

basic-test

menu permalink

test-basic

number-field permalink

basic-test

overlay permalink

basic-test

directive-test permalink

element-test permalink

lazy-test permalink

picker permalink

basic-test

popover permalink

test-basic

radio permalink

test-basic

search permalink

test-basic

slider permalink

test-basic

split-button permalink

basic-test

textfield permalink

test-basic

toast permalink

test-basic

tooltip permalink

test-basic

test-directive permalink

test-element permalink

test-lazy permalink

truncated permalink

basic-test

action-bar permalink

basic-test

action-group permalink

basic-test

action-menu permalink

test-basic

test-directive permalink

test-lazy permalink

test-open-close-directive permalink

test-open-close permalink

alert-dialog permalink

spectrum-web-components
spectrum-web-components copied to clipboard