search

adobe / spectrum-web-components

Spectrum Web Components
https://opensource.adobe.com/spectrum-web-components/
Apache License 2.0
1.22k stars 191 forks source link

chore(theme): S2 foundations #4442

Open TarunAdobe opened 1 month ago

TarunAdobe commented 1 month ago

Summary

This PR introduces changes to the Spectrum Web Components (SWC) project to facilitate the transition from Spectrum 1 (S1) to Spectrum 2 (S2) CSS. It includes the addition of a new index file (component/{bridge,spectrum,express}/index.css) in the @spectrum-css/tokens@14.1.0-alpha.3 package to assist in loading component-specific CSS. Additionally, it updates the SWC library to process the bridge file (referred to as legacy-overrides in SWC for now) and import it into the components.

Changes Made

1.@spectrum-css added a new bridge file in the @spectrum-css/tokens@14.1.0-alpha.3 package to aid in loading component-specific CSS from the tokens module directly.

  1. Updated the generate-token script to include component's system levels in global-vars.css
  2. Updated the process-spectrum script to create a legacy-override css file from the @spectrum-css/tokens.../bridge.css

Note: Investigated and identified VRT failures due to changes in global CSS tokens in the new sp-action-button from the CSS side. For example, --mod-actionbutton-content-color-default now points to gray-25 instead of gray-50for the selected state, which might be a breaking change for S1.

Next Steps

Ensure there are no breaks to the existing code before merging.

Motivation and context

This PR is important to bring in S1/Express core tokens with S2 overrides keeping in mind

How has this been tested?

Screenshots (if appropriate)

Types of changes

Checklist

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.

github-actions[bot] commented 1 month ago

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](https://682d917b490022f5d016cefff159f3bf--spectrum-web-components.netlify.app/review/) - [Spectrum | Lightest | Medium | LTR](https://255d8f090d676200e02b0d30b5c37ee0--spectrum-web-components.netlify.app/review/) - [Spectrum | Lightest | Medium | RTL](https://6f42f990d2430295fddb083ccbd3f7f3--spectrum-web-components.netlify.app/review/) - [Spectrum | Lightest | Large | LTR](https://2c334020afadf9345a72ed7bfb221f2e--spectrum-web-components.netlify.app/review/) - [Spectrum | Lightest | Large | RTL](https://f85b0acc66d1ff0010d850f03afc193f--spectrum-web-components.netlify.app/review/) - [Spectrum | Light | Medium | LTR](https://a19034658c2c1066aa23603e74bf2165--spectrum-web-components.netlify.app/review/) - [Spectrum | Light | Medium | RTL](https://63d10bc71909faff1518a3734d39a841--spectrum-web-components.netlify.app/review/) - [Spectrum | Light | Large | LTR](https://753bb7d909bc5482fbcd4c72e90cf07c--spectrum-web-components.netlify.app/review/) - [Spectrum | Light | Large | RTL](https://3fd5aaa5f14ff54ea2d3f2f0407773a6--spectrum-web-components.netlify.app/review/) - [Spectrum | Dark | Medium | LTR](https://ab8b0315c6a47b10e0875ac398e1f394--spectrum-web-components.netlify.app/review/) - [Spectrum | Dark | Medium | RTL](https://5599a750dcb8d61058ecc3a57ea2d4a4--spectrum-web-components.netlify.app/review/) - [Spectrum | Dark | Large | LTR](https://bb8de95062a7c0af1f911fd5c71a089a--spectrum-web-components.netlify.app/review/) - [Spectrum | Dark | Large | RTL](https://cdb97881b6a8b762243e443a1df8d318--spectrum-web-components.netlify.app/review/) - [Spectrum | Darkest | Medium | LTR](https://76690aaa22a2e1823cba2a5a57c70461--spectrum-web-components.netlify.app/review/) - [Spectrum | Darkest | Medium | RTL](https://6694fc9699930b25fc0a67655919ce56--spectrum-web-components.netlify.app/review/) - [Spectrum | Darkest | Large | LTR](https://c2659ae4ce03888a7380dd231aa93285--spectrum-web-components.netlify.app/review/) - [Spectrum | Darkest | Large | RTL](https://6cdff11cfc4bbef579cdbf38bf1a9dc2--spectrum-web-components.netlify.app/review/) - [Express | Lightest | Medium | LTR](https://7830183685d001bc9667f6f6fb6c8cb4--spectrum-web-components.netlify.app/review/) - [Express | Lightest | Medium | RTL](https://c62f0808b3b94ec366bb1dcc8d05a8e1--spectrum-web-components.netlify.app/review/) - [Express | Lightest | Large | LTR](https://6fbc8e0a90d1646e326d14f908d7a29b--spectrum-web-components.netlify.app/review/) - [Express | Lightest | Large | RTL](https://fd11a24c6d648e2e2211af49374339c7--spectrum-web-components.netlify.app/review/) - [Express | Light | Medium | LTR](https://25ff2a6a8a355a8e49367e620225e6ae--spectrum-web-components.netlify.app/review/) - [Express | Light | Medium | RTL](https://eb4c4fa8bee028bf071ffdbe99079cfe--spectrum-web-components.netlify.app/review/) - [Express | Light | Large | LTR](https://1bbc3ce131a0e32688fdd3347144fc15--spectrum-web-components.netlify.app/review/) - [Express | Light | Large | RTL](https://56edc6ed84bbbd0d9bdbe44760a7a4be--spectrum-web-components.netlify.app/review/) - [Express | Dark | Medium | LTR](https://aa3c505991cc80aaccd94ee0d73b6b65--spectrum-web-components.netlify.app/review/) - [Express | Dark | Medium | RTL](https://2258ed92e24039c29048b7e6567e9758--spectrum-web-components.netlify.app/review/) - [Express | Dark | Large | LTR](https://ca1c2dfd3e406c06a29bb11ad5e027a2--spectrum-web-components.netlify.app/review/) - [Express | Dark | Large | RTL](https://26fa70e7ad3b83ca4f3aeb6d7c262864--spectrum-web-components.netlify.app/review/) - [Express | Darkest | Medium | LTR](https://dc5c326b702b7578ca960553b1bd1332--spectrum-web-components.netlify.app/review/) - [Express | Darkest | Medium | RTL](https://e86d29c584735c47123577b20585ee8d--spectrum-web-components.netlify.app/review/) - [Express | Darkest | Large | LTR](https://bd63b6fc021c32870b2c8c33793c4fc2--spectrum-web-components.netlify.app/review/) - [Express | Darkest | Large | RTL](https://c4411354a37ed26a4abfa1cdc397ace0--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Light | Medium | LTR](https://f6e5e507642ba85797fca87349c43b59--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Light | Medium | RTL](https://67201e460fd437d75a64022d2c4d9099--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Light | Large | LTR](https://360f6ce0564057930e7796fdf2ffdde5--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Light | Large | RTL](https://29fc0083e8786b7d7a363a894892d440--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Dark | Medium | LTR](https://af0819e62bb6f09a26f118c5d8145a4f--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Dark | Medium | RTL](https://9f17b0ab6e2998086b89d4fc30121083--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Dark | Large | LTR](https://f0a083236d49aa4b7819cb51ee5ef1bd--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Dark | Large | RTL](https://292e522aa97fa2d4152c4fb37fa6f362--spectrum-web-components.netlify.app/review/)
github-actions[bot] commented 1 month ago

Lighthouse scores

Category Latest (report) Main (report) Branch (report)
Performance 0.99 0.99 0.99
Accessibility 1 1 1
Best Practices 1 1 1
SEO 1 0.92 0.92
PWA 1 1 1
What is this? [Lighthouse](https://github.com/GoogleChrome/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 222.263 kB 210.764 kB 🏆 211.462 kB
Scripts 54.308 kB 48.461 kB 🏆 48.631 kB
Stylesheet 34.963 kB 30.389 kB 🏆 30.87 kB
Document 6.006 kB 5.282 kB 🏆 5.292 kB
Font 126.986 kB 126.632 kB 🏆 126.669 kB

Request Count

Category Latest Main Branch
Total 45 45 45
Scripts 37 37 37
Stylesheet 5 5 5
Document 1 1 1
Font 2 2 2
github-actions[bot] commented 1 month ago

Tachometer results

Chrome ## accordion [_permalink_](#user-content-accordion) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 416 kB | 83.65ms - 86.49ms | - | faster ✔
4% - 8%
3.11ms - 7.69ms | | branch | 431 kB | 88.68ms - 92.26ms | slower ❌
4% - 9%
3.11ms - 7.69ms | - | ## action-bar [_permalink_](#user-content-action-bar) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 485 kB | 54.10ms - 55.85ms | - | faster ✔
3% - 8%
1.52ms - 4.74ms | | branch | 500 kB | 56.75ms - 59.45ms | slower ❌
3% - 9%
1.52ms - 4.74ms | - | ## action-button [_permalink_](#user-content-action-button) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 515 kB | 75.60ms - 78.06ms | - | faster ✔
2% - 6%
1.76ms - 4.90ms | | branch | 532 kB | 79.18ms - 81.15ms | slower ❌
2% - 6%
1.76ms - 4.90ms | - | ## action-group [_permalink_](#user-content-action-group) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 536 kB | 50.02ms - 52.08ms | - | faster ✔
2% - 7%
0.98ms - 3.53ms | | branch | 553 kB | 52.54ms - 54.06ms | slower ❌
2% - 7%
0.98ms - 3.53ms | - | ## action-menu [_permalink_](#user-content-action-menu) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 647 kB | 142.09ms - 144.96ms | - | faster ✔
6% - 9%
9.09ms - 14.85ms | | branch | 663 kB | 153.00ms - 157.99ms | slower ❌
6% - 10%
9.09ms - 14.85ms | - | ### test-directive [_permalink_](#user-content-action-menu-test-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 604 kB | 65.53ms - 66.61ms | - | faster ✔
7% - 11%
4.85ms - 8.36ms | | branch | 621 kB | 71.01ms - 74.35ms | slower ❌
7% - 13%
4.85ms - 8.36ms | - | ### test-lazy [_permalink_](#user-content-action-menu-test-lazy) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 603 kB | 64.60ms - 65.90ms | - | faster ✔
6% - 9%
3.92ms - 6.02ms | | branch | 620 kB | 69.40ms - 71.05ms | slower ❌
6% - 9%
3.92ms - 6.02ms | - | ### test-open-close-directive [_permalink_](#user-content-action-menu-test-open-close-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 790 kB | 1879.13ms - 1881.95ms | - | unsure 🔍
-0% - +0%
-2.75ms - +1.57ms | | branch | 806 kB | 1879.49ms - 1882.77ms | unsure 🔍
-0% - +0%
-1.57ms - +2.75ms | - | ### test-open-close [_permalink_](#user-content-action-menu-test-open-close) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 788 kB | 1863.72ms - 1866.84ms | - | unsure 🔍
-0% - +0%
-2.37ms - +2.03ms | | branch | 805 kB | 1863.90ms - 1867.00ms | unsure 🔍
-0% - +0%
-2.03ms - +2.37ms | - | ## alert-dialog [_permalink_](#user-content-alert-dialog) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 452 kB | 104.34ms - 105.23ms | - | faster ✔
4% - 5%
3.94ms - 5.89ms | | branch | 469 kB | 108.83ms - 110.56ms | slower ❌
4% - 6%
3.94ms - 5.89ms | - | ## button-group [_permalink_](#user-content-button-group) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 444 kB | 44.62ms - 45.60ms | - | faster ✔
4% - 7%
1.79ms - 3.32ms | | branch | 460 kB | 47.07ms - 48.25ms | slower ❌
4% - 7%
1.79ms - 3.32ms | - | ## button [_permalink_](#user-content-button) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 450 kB | 49.28ms - 50.54ms | - | faster ✔
3% - 6%
1.59ms - 3.35ms | | branch | 466 kB | 51.76ms - 52.99ms | slower ❌
3% - 7%
1.59ms - 3.35ms | - | ## card [_permalink_](#user-content-card) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 502 kB | 39.99ms - 40.63ms | - | faster ✔
2% - 4%
0.84ms - 1.87ms | | branch | 517 kB | 41.26ms - 42.07ms | slower ❌
2% - 5%
0.84ms - 1.87ms | - | ## coachmark [_permalink_](#user-content-coachmark) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 630 kB | 96.77ms - 98.60ms | - | faster ✔
5% - 8%
5.00ms - 7.87ms | | branch | 647 kB | 103.01ms - 105.22ms | slower ❌
5% - 8%
5.00ms - 7.87ms | - | ## combobox [_permalink_](#user-content-combobox) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 710 kB | 38.81ms - 39.42ms | - | faster ✔
6% - 8%
2.58ms - 3.47ms | | branch | 725 kB | 41.81ms - 42.46ms | slower ❌
7% - 9%
2.58ms - 3.47ms | - | ### light-dom-test [_permalink_](#user-content-combobox-light-dom-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 710 kB | 423.17ms - 429.45ms | - | faster ✔
2% - 4%
9.60ms - 18.65ms | | branch | 725 kB | 437.18ms - 443.70ms | slower ❌
2% - 4%
9.60ms - 18.65ms | - | ## contextual-help [_permalink_](#user-content-contextual-help) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 641 kB | 52.76ms - 54.11ms | - | faster ✔
5% - 8%
2.77ms - 4.75ms | | branch | 658 kB | 56.48ms - 57.92ms | slower ❌
5% - 9%
2.77ms - 4.75ms | - | ## dialog [_permalink_](#user-content-dialog) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 508 kB | 76.37ms - 78.47ms | - | unsure 🔍
-2% - +1%
-1.57ms - +0.70ms | | branch | 524 kB | 77.42ms - 78.29ms | unsure 🔍
-1% - +2%
-0.70ms - +1.57ms | - | ## illustrated-message [_permalink_](#user-content-illustrated-message) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 405 kB | 14.30ms - 14.57ms | - | faster ✔
2% - 5%
0.35ms - 0.77ms | | branch | 421 kB | 14.84ms - 15.16ms | slower ❌
2% - 5%
0.35ms - 0.77ms | - | ## infield-button [_permalink_](#user-content-infield-button) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 402 kB | 15.46ms - 15.72ms | - | faster ✔
8% - 12%
1.41ms - 2.04ms | | branch | 417 kB | 17.03ms - 17.60ms | slower ❌
9% - 13%
1.41ms - 2.04ms | - | ## menu [_permalink_](#user-content-menu) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 476 kB | 224.09ms - 227.54ms | - | faster ✔
3% - 6%
7.05ms - 14.56ms | | branch | 491 kB | 233.28ms - 239.96ms | slower ❌
3% - 6%
7.05ms - 14.56ms | - | ## number-field [_permalink_](#user-content-number-field) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 524 kB | 69.50ms - 71.11ms | - | faster ✔
10% - 13%
7.66ms - 10.88ms | | branch | 538 kB | 78.18ms - 80.97ms | slower ❌
11% - 16%
7.66ms - 10.88ms | - | ## overlay [_permalink_](#user-content-overlay) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 675 kB | 467.03ms - 478.69ms | - | faster ✔
0% - 4%
2.01ms - 18.43ms | | branch | 700 kB | 477.31ms - 488.85ms | slower ❌
0% - 4%
2.01ms - 18.43ms | - | ### directive-test [_permalink_](#user-content-overlay-directive-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 793 kB | 23.81ms - 24.48ms | - | faster ✔
8% - 11%
2.04ms - 3.09ms | | branch | 802 kB | 26.31ms - 27.11ms | slower ❌
8% - 13%
2.04ms - 3.09ms | - | ### element-test [_permalink_](#user-content-overlay-element-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 764 kB | 374.09ms - 382.17ms | - | faster ✔
2% - 5%
7.60ms - 19.73ms | | branch | 780 kB | 387.28ms - 396.32ms | slower ❌
2% - 5%
7.60ms - 19.73ms | - | ### lazy-test [_permalink_](#user-content-overlay-lazy-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 561 kB | 42.75ms - 44.41ms | - | faster ✔
5% - 9%
2.37ms - 4.38ms | | branch | 578 kB | 46.40ms - 47.51ms | slower ❌
5% - 10%
2.37ms - 4.38ms | - | ## picker-button [_permalink_](#user-content-picker-button) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 414 kB | 27.34ms - 28.01ms | - | faster ✔
5% - 8%
1.47ms - 2.52ms | | branch | 429 kB | 29.27ms - 30.08ms | slower ❌
5% - 9%
1.47ms - 2.52ms | - | ## picker [_permalink_](#user-content-picker) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 513 kB | 571.50ms - 582.63ms | - | faster ✔
2% - 5%
11.71ms - 29.61ms | | branch | 528 kB | 590.72ms - 604.73ms | slower ❌
2% - 5%
11.71ms - 29.61ms | - | ## popover [_permalink_](#user-content-popover) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 384 kB | 12.35ms - 12.53ms | - | faster ✔
4% - 9%
0.55ms - 1.27ms | | branch | 400 kB | 13.00ms - 13.70ms | slower ❌
4% - 10%
0.55ms - 1.27ms | - | ## search [_permalink_](#user-content-search) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 472 kB | 41.35ms - 42.36ms | - | faster ✔
4% - 7%
1.76ms - 3.11ms | | branch | 487 kB | 43.84ms - 44.74ms | slower ❌
4% - 7%
1.76ms - 3.11ms | - | ## slider [_permalink_](#user-content-slider) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 480 kB | 82.68ms - 86.22ms | - | unsure 🔍
-5% - +0%
-4.14ms - +0.04ms | | branch | 495 kB | 85.38ms - 87.61ms | unsure 🔍
-0% - +5%
-0.04ms - +4.14ms | - | ## split-button [_permalink_](#user-content-split-button) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 723 kB | 1867.44ms - 1873.10ms | - | unsure 🔍
-0% - +0%
-5.07ms - +2.57ms | | branch | 740 kB | 1868.95ms - 1874.08ms | unsure 🔍
-0% - +0%
-2.57ms - +5.07ms | - | ## tags [_permalink_](#user-content-tags) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 450 kB | 12.98ms - 14.07ms | - | unsure 🔍
-4% - +4%
-0.57ms - +0.56ms | | branch | 465 kB | 13.37ms - 13.69ms | unsure 🔍
-4% - +4%
-0.56ms - +0.57ms | - | ## toast [_permalink_](#user-content-toast) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 430 kB | 28.76ms - 29.28ms | - | faster ✔
5% - 9%
1.48ms - 2.75ms | | branch | 446 kB | 30.55ms - 31.71ms | slower ❌
5% - 10%
1.48ms - 2.75ms | - | ## tooltip [_permalink_](#user-content-tooltip) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 551 kB | 35.82ms - 36.52ms | - | faster ✔
5% - 8%
1.85ms - 3.19ms | | branch | 566 kB | 38.12ms - 39.26ms | slower ❌
5% - 9%
1.85ms - 3.19ms | - | ### test-directive [_permalink_](#user-content-tooltip-test-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 534 kB | 24.65ms - 26.06ms | - | faster ✔
4% - 9%
1.00ms - 2.59ms | | branch | 551 kB | 26.79ms - 27.51ms | slower ❌
4% - 10%
1.00ms - 2.59ms | - | ### test-element [_permalink_](#user-content-tooltip-test-element) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 656 kB | 55.36ms - 56.65ms | - | faster ✔
5% - 9%
3.21ms - 5.15ms | | branch | 673 kB | 59.46ms - 60.91ms | slower ❌
6% - 9%
3.21ms - 5.15ms | - | ### test-lazy [_permalink_](#user-content-tooltip-test-lazy) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 632 kB | 44.92ms - 47.09ms | - | faster ✔
4% - 10%
1.98ms - 5.16ms | | branch | 649 kB | 48.41ms - 50.73ms | slower ❌
4% - 11%
1.98ms - 5.16ms | - | ## truncated [_permalink_](#user-content-truncated) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 529 kB | 59.04ms - 62.16ms | - | faster ✔
1% - 6%
0.59ms - 4.00ms | | branch | 544 kB | 62.21ms - 63.58ms | slower ❌
1% - 7%
0.59ms - 4.00ms | - |
Firefox ## accordion [_permalink_](#user-content-accordion) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 416 kB | 161.62ms - 167.94ms | - | faster ✔
4% - 10%
7.77ms - 17.03ms | | branch | 431 kB | 173.80ms - 180.56ms | slower ❌
5% - 10%
7.77ms - 17.03ms | - | ## action-bar [_permalink_](#user-content-action-bar) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 485 kB | 114.75ms - 120.85ms | - | unsure 🔍
-5% - +2%
-6.58ms - +2.66ms | | branch | 500 kB | 116.29ms - 123.23ms | unsure 🔍
-2% - +6%
-2.66ms - +6.58ms | - | ## action-button [_permalink_](#user-content-action-button) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 515 kB | 149.97ms - 156.59ms | - | unsure 🔍
-5% - +0%
-8.26ms - +0.74ms | | branch | 532 kB | 153.99ms - 160.09ms | unsure 🔍
-1% - +5%
-0.74ms - +8.26ms | - | ## action-group [_permalink_](#user-content-action-group) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 536 kB | 114.51ms - 120.73ms | - | faster ✔
2% - 9%
2.10ms - 10.78ms | | branch | 553 kB | 121.03ms - 127.09ms | slower ❌
2% - 9%
2.10ms - 10.78ms | - | ## action-menu [_permalink_](#user-content-action-menu) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 647 kB | 271.92ms - 274.64ms | - | faster ✔
13% - 14%
41.01ms - 46.15ms | | branch | 663 kB | 314.68ms - 319.04ms | slower ❌
15% - 17%
41.01ms - 46.15ms | - | ### test-directive [_permalink_](#user-content-action-menu-test-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 604 kB | 129.46ms - 132.50ms | - | unsure 🔍
-2% - +0%
-2.73ms - +0.49ms | | branch | 621 kB | 131.55ms - 132.65ms | unsure 🔍
-0% - +2%
-0.49ms - +2.73ms | - | ### test-lazy [_permalink_](#user-content-action-menu-test-lazy) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 603 kB | 152.32ms - 158.48ms | - | slower ❌
9% - 14%
12.26ms - 19.82ms | | branch | 620 kB | 137.17ms - 141.55ms | faster ✔
8% - 13%
12.26ms - 19.82ms | - | ### test-open-close-directive [_permalink_](#user-content-action-menu-test-open-close-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 790 kB | 1918.39ms - 1926.77ms | - | slower ❌
2% - 2%
30.56ms - 39.76ms | | branch | 806 kB | 1885.50ms - 1889.34ms | faster ✔
2% - 2%
30.56ms - 39.76ms | - | ### test-open-close [_permalink_](#user-content-action-menu-test-open-close) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 788 kB | 1882.05ms - 1887.43ms | - | unsure 🔍
-0% - +0%
-5.82ms - +1.82ms | | branch | 805 kB | 1884.03ms - 1889.45ms | unsure 🔍
-0% - +0%
-1.82ms - +5.82ms | - | ## alert-dialog [_permalink_](#user-content-alert-dialog) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 452 kB | 196.33ms - 203.19ms | - | unsure 🔍
-4% - +1%
-9.00ms - +1.12ms | | branch | 469 kB | 199.98ms - 207.42ms | unsure 🔍
-1% - +5%
-1.12ms - +9.00ms | - | ## button-group [_permalink_](#user-content-button-group) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 444 kB | 90.90ms - 97.74ms | - | faster ✔
3% - 12%
3.05ms - 12.55ms | | branch | 460 kB | 98.82ms - 105.42ms | slower ❌
3% - 14%
3.05ms - 12.55ms | - | ## button [_permalink_](#user-content-button) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 450 kB | 98.03ms - 104.41ms | - | faster ✔
3% - 13%
3.49ms - 14.19ms | | branch | 466 kB | 105.76ms - 114.36ms | slower ❌
3% - 14%
3.49ms - 14.19ms | - | ## card [_permalink_](#user-content-card) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 502 kB | 69.02ms - 70.70ms | - | faster ✔
4% - 8%
2.64ms - 6.12ms | | branch | 517 kB | 72.71ms - 75.77ms | slower ❌
4% - 9%
2.64ms - 6.12ms | - | ## coachmark [_permalink_](#user-content-coachmark) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 630 kB | 185.31ms - 188.37ms | - | faster ✔
3% - 7%
6.17ms - 13.83ms | | branch | 647 kB | 193.32ms - 200.36ms | slower ❌
3% - 7%
6.17ms - 13.83ms | - | ## combobox [_permalink_](#user-content-combobox) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 710 kB | 63.20ms - 67.80ms | - | slower ❌
1% - 9%
0.59ms - 5.57ms | | branch | 725 kB | 61.47ms - 63.37ms | faster ✔
1% - 8%
0.59ms - 5.57ms | - | ### light-dom-test [_permalink_](#user-content-combobox-light-dom-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 710 kB | 722.01ms - 744.15ms | - | slower ❌
2% - 6%
15.20ms - 39.88ms | | branch | 725 kB | 700.08ms - 711.00ms | faster ✔
2% - 5%
15.20ms - 39.88ms | - | ## contextual-help [_permalink_](#user-content-contextual-help) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 641 kB | 112.01ms - 118.03ms | - | faster ✔
1% - 8%
1.43ms - 9.53ms | | branch | 658 kB | 117.79ms - 123.21ms | slower ❌
1% - 8%
1.43ms - 9.53ms | - | ## dialog [_permalink_](#user-content-dialog) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 508 kB | 118.40ms - 125.40ms | - | unsure 🔍
-7% - +1%
-8.54ms - +1.90ms | | branch | 524 kB | 121.34ms - 129.10ms | unsure 🔍
-2% - +7%
-1.90ms - +8.54ms | - | ## illustrated-message [_permalink_](#user-content-illustrated-message) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 405 kB | 25.56ms - 27.00ms | - | unsure 🔍
-4% - +2%
-1.10ms - +0.54ms | | branch | 421 kB | 26.16ms - 26.96ms | unsure 🔍
-2% - +4%
-0.54ms - +1.10ms | - | ## infield-button [_permalink_](#user-content-infield-button) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 402 kB | 34.14ms - 36.82ms | - | faster ✔
4% - 14%
1.27ms - 5.69ms | | branch | 417 kB | 37.20ms - 40.72ms | slower ❌
3% - 16%
1.27ms - 5.69ms | - | ## menu [_permalink_](#user-content-menu) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 476 kB | 442.54ms - 454.86ms | - | faster ✔
2% - 5%
7.04ms - 23.84ms | | branch | 491 kB | 458.44ms - 469.84ms | slower ❌
2% - 5%
7.04ms - 23.84ms | - | ## number-field [_permalink_](#user-content-number-field) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 524 kB | 149.09ms - 156.83ms | - | faster ✔
6% - 11%
9.18ms - 19.22ms | | branch | 538 kB | 163.96ms - 170.36ms | slower ❌
6% - 13%
9.18ms - 19.22ms | - | ## overlay [_permalink_](#user-content-overlay) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 770 kB | 650.40ms - 671.88ms | - | slower ❌
3% - 7%
20.46ms - 43.34ms | | branch | 787 kB | 625.27ms - 633.21ms | faster ✔
3% - 6%
20.46ms - 43.34ms | - | ### directive-test [_permalink_](#user-content-overlay-directive-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 774 kB | 47.08ms - 47.76ms | - | faster ✔
5% - 7%
2.32ms - 3.52ms | | branch | 790 kB | 49.84ms - 50.84ms | slower ❌
5% - 7%
2.32ms - 3.52ms | - | ### element-test [_permalink_](#user-content-overlay-element-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 764 kB | 673.16ms - 684.20ms | - | slower ❌
4% - 6%
24.61ms - 39.03ms | | branch | 780 kB | 642.23ms - 651.49ms | faster ✔
4% - 6%
24.61ms - 39.03ms | - | ### lazy-test [_permalink_](#user-content-overlay-lazy-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 561 kB | 95.69ms - 103.71ms | - | unsure 🔍
-2% - +7%
-1.73ms - +6.57ms | | branch | 578 kB | 96.21ms - 98.35ms | unsure 🔍
-6% - +2%
-6.57ms - +1.73ms | - | ## picker-button [_permalink_](#user-content-picker-button) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 414 kB | 59.79ms - 63.77ms | - | faster ✔
3% - 12%
2.09ms - 8.15ms | | branch | 429 kB | 64.61ms - 69.19ms | slower ❌
3% - 13%
2.09ms - 8.15ms | - | ## picker [_permalink_](#user-content-picker) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 513 kB | 985.31ms - 1012.65ms | - | faster ✔
3% - 6%
34.28ms - 64.24ms | | branch | 528 kB | 1042.12ms - 1054.36ms | slower ❌
3% - 6%
34.28ms - 64.24ms | - | ## popover [_permalink_](#user-content-popover) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 384 kB | 29.89ms - 33.11ms | - | unsure 🔍
-13% - +3%
-4.37ms - +1.05ms | | branch | 400 kB | 30.98ms - 35.34ms | unsure 🔍
-3% - +14%
-1.05ms - +4.37ms | - | ## search [_permalink_](#user-content-search) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 472 kB | 68.80ms - 73.84ms | - | faster ✔
1% - 10%
0.30ms - 7.98ms | | branch | 487 kB | 72.56ms - 78.36ms | slower ❌
0% - 11%
0.30ms - 7.98ms | - | ## slider [_permalink_](#user-content-slider) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 480 kB | 164.05ms - 169.63ms | - | faster ✔
0% - 5%
0.01ms - 9.11ms | | branch | 495 kB | 167.81ms - 174.99ms | unsure 🔍
-0% - +5%
+0.01ms - +9.11ms | - | ## split-button [_permalink_](#user-content-split-button) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 723 kB | 1873.73ms - 1877.35ms | - | unsure 🔍
-0% - -0%
-5.82ms - -0.50ms | | branch | 740 kB | 1876.75ms - 1880.65ms | unsure 🔍
+0% - +0%
+0.50ms - +5.82ms | - | ## tags [_permalink_](#user-content-tags) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 450 kB | 28.19ms - 30.57ms | - | unsure 🔍
-9% - +3%
-2.64ms - +0.96ms | | branch | 465 kB | 28.87ms - 31.57ms | unsure 🔍
-3% - +9%
-0.96ms - +2.64ms | - | ## toast [_permalink_](#user-content-toast) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 430 kB | 59.32ms - 63.68ms | - | faster ✔
1% - 10%
0.25ms - 6.47ms | | branch | 446 kB | 62.64ms - 67.08ms | slower ❌
0% - 11%
0.25ms - 6.47ms | - | ## tooltip [_permalink_](#user-content-tooltip) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 656 kB | 80.81ms - 84.27ms | - | slower ❌
11% - 16%
7.94ms - 11.66ms | | branch | 673 kB | 72.07ms - 73.41ms | faster ✔
10% - 14%
7.94ms - 11.66ms | - | ### test-directive [_permalink_](#user-content-tooltip-test-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 534 kB | 46.42ms - 47.42ms | - | faster ✔
24% - 30%
14.45ms - 20.11ms | | branch | 551 kB | 61.42ms - 66.98ms | slower ❌
31% - 43%
14.45ms - 20.11ms | - | ### test-element [_permalink_](#user-content-tooltip-test-element) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 656 kB | 112.99ms - 119.89ms | - | faster ✔
3% - 9%
3.38ms - 11.86ms | | branch | 673 kB | 121.59ms - 126.53ms | slower ❌
3% - 10%
3.38ms - 11.86ms | - | ### test-lazy [_permalink_](#user-content-tooltip-test-lazy) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 632 kB | 92.85ms - 96.79ms | - | faster ✔
7% - 13%
7.05ms - 14.43ms | | branch | 649 kB | 102.44ms - 108.68ms | slower ❌
7% - 15%
7.05ms - 14.43ms | - | ## truncated [_permalink_](#user-content-truncated) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 529 kB | 105.49ms - 113.27ms | - | unsure 🔍
-8% - +1%
-9.33ms - +0.85ms | | branch | 544 kB | 110.34ms - 116.90ms | unsure 🔍
-1% - +9%
-0.85ms - +9.33ms | - |
Rajdeepc commented 3 weeks ago

@castastrophe If you feel good about this PR, we would love to land this in our next SWC release! Let us know

blunteshwar commented 3 weeks ago

LGTM!