spectrum-web-components
spectrum-web-components copied to clipboard
Published
20 hours ago •
adobe
adobe
chore: icon workflow processing script
Description
To gain a better view of assets being generated, I updated the icon workflow build script to leverage templates instead of writing to a file line-by-line.
Motivation and context
- Leverage async where possible
- Fetch data from the provided icon package's manifest
- Resolve pathing using require instead of pointing to node_modules
- Utilize ejs templating to make updates/maintenance easier in future
How has this been tested?
-
[x]
yarn workspace @spectrum-web-components/icons-workflow build- Same assets generated in this branch as in
main -
Caveat: added an
aprefix on numeric-leading variable names; results in 2 additional icons being added:a123Icon&a3DMaterialsIcon.
- Same assets generated in this branch as in
-
[x] 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.
- [x] I have updated the VRT hash.
- [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.
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:
- High Contrast Mode | Medium | LTR
- Classic | Lightest | Medium | LTR
- Classic | Lightest | Medium | RTL
- Classic | Lightest | Large | LTR
- Classic | Lightest | Large | RTL
- Classic | Light | Medium | LTR
- Classic | Light | Medium | RTL
- Classic | Light | Large | LTR
- Classic | Light | Large | RTL
- Classic | Dark | Medium | LTR
- Classic | Dark | Medium | RTL
- Classic | Dark | Large | LTR
- Classic | Dark | Large | RTL
- Classic | Darkest | Medium | LTR
- Classic | Darkest | Medium | RTL
- Classic | Darkest | Large | LTR
- Classic | Darkest | Large | RTL
- Express | Lightest | Medium | LTR
- Express | Lightest | Medium | RTL
- Express | Lightest | Large | LTR
- Express | Lightest | Large | RTL
- Express | Light | Medium | LTR
- Express | Light | Medium | RTL
- Express | Light | Large | LTR
- Express | Light | Large | RTL
- Express | Dark | Medium | LTR
- Express | Dark | Medium | RTL
- Express | Dark | Large | LTR
- Express | Dark | Large | RTL
- Express | Darkest | Medium | LTR
- Express | Darkest | Medium | RTL
- Express | Darkest | Large | LTR
- Express | Darkest | Large | RTL
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Tachometer results
Chrome
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 720 kB | 221.40ms - 223.19ms | - | unsure 🔍 -1% - +0% -1.79ms - +0.75ms |
| branch | 720 kB | 221.91ms - 223.72ms | unsure 🔍 -0% - +1% -0.75ms - +1.79ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 434 kB | 100.53ms - 102.06ms | - | unsure 🔍 -0% - +1% -0.45ms - +1.51ms |
| branch | 434 kB | 100.15ms - 101.38ms | unsure 🔍 -1% - +0% -1.51ms - +0.45ms |
- |
dialog permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 360 kB | 83.03ms - 83.99ms | - | unsure 🔍 -2% - +0% -1.63ms - +0.22ms |
| branch | 360 kB | 83.42ms - 85.00ms | unsure 🔍 -0% - +2% -0.22ms - +1.63ms |
- |
field-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 336 kB | 257.94ms - 261.11ms | - | unsure 🔍 -1% - +0% -3.80ms - +0.82ms |
| branch | 336 kB | 259.33ms - 262.70ms | unsure 🔍 -0% - +1% -0.82ms - +3.80ms |
- |
help-text permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 272 kB | 21.17ms - 21.30ms | - | unsure 🔍 -1% - +0% -0.13ms - +0.04ms |
| branch | 272 kB | 21.22ms - 21.34ms | unsure 🔍 -0% - +1% -0.04ms - +0.13ms |
- |
number-field permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 572 kB | 190.26ms - 191.35ms | - | unsure 🔍 -1% - +1% -1.05ms - +0.97ms |
| branch | 572 kB | 189.99ms - 191.69ms | unsure 🔍 -1% - +1% -0.97ms - +1.05ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 531 kB | 809.00ms - 827.82ms | - | unsure 🔍 -2% - +2% -13.67ms - +13.98ms |
| branch | 531 kB | 808.12ms - 828.39ms | unsure 🔍 -2% - +2% -13.98ms - +13.67ms |
- |
radio permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 295 kB | 94.02ms - 95.46ms | - | unsure 🔍 -0% - +2% -0.35ms - +1.43ms |
| branch | 295 kB | 93.67ms - 94.72ms | unsure 🔍 -2% - +0% -1.43ms - +0.35ms |
- |
search permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 389 kB | 97.07ms - 97.65ms | - | unsure 🔍 -2% - +0% -1.63ms - +0.11ms |
| branch | 389 kB | 97.29ms - 98.94ms | unsure 🔍 -0% - +2% -0.11ms - +1.63ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 375 kB | 152.76ms - 153.89ms | - | unsure 🔍 -2% - +0% -2.45ms - +0.42ms |
| branch | 375 kB | 153.02ms - 155.66ms | unsure 🔍 -0% - +2% -0.42ms - +2.45ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 639 kB | 1951.52ms - 1955.29ms | - | unsure 🔍 -0% - +0% -3.10ms - +1.83ms |
| branch | 639 kB | 1952.45ms - 1955.62ms | unsure 🔍 -0% - +0% -1.83ms - +3.10ms |
- |
textfield permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 322 kB | 60.24ms - 60.70ms | - | unsure 🔍 -1% - +0% -0.67ms - +0.14ms |
| branch | 322 kB | 60.40ms - 61.08ms | unsure 🔍 -0% - +1% -0.14ms - +0.67ms |
- |
toast permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 350 kB | 48.57ms - 48.95ms | - | unsure 🔍 -0% - +1% -0.13ms - +0.38ms |
| branch | 350 kB | 48.46ms - 48.81ms | unsure 🔍 -1% - +0% -0.38ms - +0.13ms |
- |
Firefox
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 720 kB | 394.18ms - 407.50ms | - | unsure 🔍 -5% - +1% -18.70ms - +3.42ms |
| branch | 720 kB | 399.65ms - 417.31ms | unsure 🔍 -1% - +5% -3.42ms - +18.70ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 434 kB | 166.42ms - 178.38ms | - | unsure 🔍 -6% - +4% -10.50ms - +6.54ms |
| branch | 434 kB | 168.31ms - 180.45ms | unsure 🔍 -4% - +6% -6.54ms - +10.50ms |
- |
dialog permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 360 kB | 129.26ms - 135.54ms | - | unsure 🔍 -3% - +4% -3.50ms - +5.62ms |
| branch | 360 kB | 128.03ms - 134.65ms | unsure 🔍 -4% - +3% -5.62ms - +3.50ms |
- |
field-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 336 kB | 654.41ms - 674.11ms | - | unsure 🔍 -1% - +3% -4.46ms - +20.30ms |
| branch | 336 kB | 648.84ms - 663.84ms | unsure 🔍 -3% - +1% -20.30ms - +4.46ms |
- |
help-text permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 272 kB | 67.63ms - 77.05ms | - | unsure 🔍 -14% - +4% -10.84ms - +3.56ms |
| branch | 272 kB | 70.54ms - 81.42ms | unsure 🔍 -5% - +15% -3.56ms - +10.84ms |
- |
number-field permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 572 kB | 391.46ms - 405.30ms | - | faster ✔ 1% - 6% 1.89ms - 25.39ms |
| branch | 572 kB | 402.53ms - 421.51ms | slower ❌ 0% - 6% 1.89ms - 25.39ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 531 kB | 1044.16ms - 1067.80ms | - | unsure 🔍 -2% - +1% -16.99ms - +14.91ms |
| branch | 531 kB | 1046.31ms - 1067.73ms | unsure 🔍 -1% - +2% -14.91ms - +16.99ms |
- |
radio permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 295 kB | 234.47ms - 245.29ms | - | unsure 🔍 -5% - +2% -11.22ms - +4.66ms |
| branch | 295 kB | 237.35ms - 248.97ms | unsure 🔍 -2% - +5% -4.66ms - +11.22ms |
- |
search permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 389 kB | 189.89ms - 199.87ms | - | unsure 🔍 -3% - +5% -5.71ms - +8.79ms |
| branch | 389 kB | 188.08ms - 198.60ms | unsure 🔍 -4% - +3% -8.79ms - +5.71ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 375 kB | 329.42ms - 340.58ms | - | unsure 🔍 -2% - +3% -5.67ms - +8.67ms |
| branch | 375 kB | 329.00ms - 338.00ms | unsure 🔍 -3% - +2% -8.67ms - +5.67ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 639 kB | 2079.79ms - 2089.89ms | - | unsure 🔍 -1% - +0% -15.40ms - +1.08ms |
| branch | 639 kB | 2085.49ms - 2098.51ms | unsure 🔍 -0% - +1% -1.08ms - +15.40ms |
- |
textfield permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 322 kB | 124.46ms - 135.06ms | - | unsure 🔍 -6% - +6% -7.96ms - +7.56ms |
| branch | 322 kB | 124.29ms - 135.63ms | unsure 🔍 -6% - +6% -7.56ms - +7.96ms |
- |
toast permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 350 kB | 115.07ms - 121.61ms | - | unsure 🔍 -5% - +3% -5.77ms - +4.05ms |
| branch | 350 kB | 115.54ms - 122.86ms | unsure 🔍 -3% - +5% -4.05ms - +5.77ms |
- |
I think there's a definite opportunity here to abstract this into a tool for folks to use to dynamically generate web components from SVG assets. 🤔
@Westbrook would love to tackle that as well but since they run separately, I thought it prudent to present them in different PRs. You can see running the script solo before & after that they're both quite quick. The benefit of this approach is in maintainability (easier to update templates in future) and in leveraging the provided manifest from Spectrum rather than grepping for *.svg assets.