adobe / spectrum-web-components

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

feat(number-field): add missing `--mod-*` tokens #4565

Closed Rocss closed 3 months ago

Rocss commented 3 months ago

Description

Adds two more --mod-* tokens as per https://github.com/adobe/spectrum-web-components/issues/4527 --mod-textfield-border-width and --mod-textfield-border-color.

I did not add a mod token for --spectrum-textfield-corner-radius because the focus outline would look weird if you modify this CSS property.

Related issue(s)

Motivation and context

Consumers are able to override border's width and color when hide-stepper is true.

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 3 months 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://92f5afd945182bc222926b3eed492daa--spectrum-web-components.netlify.app/review/) - [Spectrum | Lightest | Medium | LTR](https://e90dfa39f526f8a7bc9724ab9e03c3d7--spectrum-web-components.netlify.app/review/) - [Spectrum | Lightest | Medium | RTL](https://07fc0aea9df0562b525675d76dc00036--spectrum-web-components.netlify.app/review/) - [Spectrum | Lightest | Large | LTR](https://d82a98e510aa0a9a49cdae82e540305c--spectrum-web-components.netlify.app/review/) - [Spectrum | Lightest | Large | RTL](https://77123233e21ef51eb07b1f518c0cdc65--spectrum-web-components.netlify.app/review/) - [Spectrum | Light | Medium | LTR](https://7a7d71af5b553c46f88e24b25c19450a--spectrum-web-components.netlify.app/review/) - [Spectrum | Light | Medium | RTL](https://7a364ba72c9b51484e91e480e2d78427--spectrum-web-components.netlify.app/review/) - [Spectrum | Light | Large | LTR](https://b3b1702e11b09dbb4e024f435d0d51ed--spectrum-web-components.netlify.app/review/) - [Spectrum | Light | Large | RTL](https://0389c182d1c42a560b542e701316678b--spectrum-web-components.netlify.app/review/) - [Spectrum | Dark | Medium | LTR](https://4cfd0c295f9e517072a61bd125c77ae0--spectrum-web-components.netlify.app/review/) - [Spectrum | Dark | Medium | RTL](https://d21d1e13deeec790a1fc4987650ffe39--spectrum-web-components.netlify.app/review/) - [Spectrum | Dark | Large | LTR](https://4393c764b1581f2499d7c5296cbdbb3c--spectrum-web-components.netlify.app/review/) - [Spectrum | Dark | Large | RTL](https://26844f95a26831cf428f15142c77daa0--spectrum-web-components.netlify.app/review/) - [Spectrum | Darkest | Medium | LTR](https://07ab7b2391861b92818f467dc0c3aec7--spectrum-web-components.netlify.app/review/) - [Spectrum | Darkest | Medium | RTL](https://8b73c6417d4a259487f7276f561ce02a--spectrum-web-components.netlify.app/review/) - [Spectrum | Darkest | Large | LTR](https://ef5a26a6731813660efd5dae2b0fd184--spectrum-web-components.netlify.app/review/) - [Spectrum | Darkest | Large | RTL](https://4952c5e7c360b76bb3c45bf3531c4444--spectrum-web-components.netlify.app/review/) - [Express | Lightest | Medium | LTR](https://ab3aea53343a48621eeb755080d6eef9--spectrum-web-components.netlify.app/review/) - [Express | Lightest | Medium | RTL](https://75ce43d00549739b96a618c89da68d78--spectrum-web-components.netlify.app/review/) - [Express | Lightest | Large | LTR](https://13fb70162592253bbc32139722e7b62b--spectrum-web-components.netlify.app/review/) - [Express | Lightest | Large | RTL](https://23557677126f62b933b6253d29a0aac5--spectrum-web-components.netlify.app/review/) - [Express | Light | Medium | LTR](https://1e2feb86056af71df3ec7cabfa3ee9f6--spectrum-web-components.netlify.app/review/) - [Express | Light | Medium | RTL](https://316f7992e5f5e8356433856468f9a412--spectrum-web-components.netlify.app/review/) - [Express | Light | Large | LTR](https://6fc6141e9be2eab8d2cccac731bcf280--spectrum-web-components.netlify.app/review/) - [Express | Light | Large | RTL](https://f2dd0ac157ca5847413923a24c96a3a5--spectrum-web-components.netlify.app/review/) - [Express | Dark | Medium | LTR](https://e794b72b6bc5f456051ad6031fc6a078--spectrum-web-components.netlify.app/review/) - [Express | Dark | Medium | RTL](https://8d1b5f4850a6bba32834d1e6fc40fb6c--spectrum-web-components.netlify.app/review/) - [Express | Dark | Large | LTR](https://655570255cb5f4efa806a8343086ae5b--spectrum-web-components.netlify.app/review/) - [Express | Dark | Large | RTL](https://2f5f812d2b28016f88b0c78a983baa5f--spectrum-web-components.netlify.app/review/) - [Express | Darkest | Medium | LTR](https://b51fc986d38c00e5e2922bb0e2206430--spectrum-web-components.netlify.app/review/) - [Express | Darkest | Medium | RTL](https://b2fc37a51d0f931cf6e82050faf3015f--spectrum-web-components.netlify.app/review/) - [Express | Darkest | Large | LTR](https://630123ba465fc86e4c78c9208ef62480--spectrum-web-components.netlify.app/review/) - [Express | Darkest | Large | RTL](https://19fa94bd5ece1212e954a4aae956379b--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Light | Medium | LTR](https://95e4fb581818dfdad5954d376b638112--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Light | Medium | RTL](https://c52355c24dc6161bf4e7058eb323a0f9--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Light | Large | LTR](https://02ea1d86b378e351dd1f4d56f307a4f8--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Light | Large | RTL](https://b381eb2799015f8f54308cd833bc0bf2--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Dark | Medium | LTR](https://82bd59e739d2a468d9df808a4f2742f9--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Dark | Medium | RTL](https://c666ba6c398a880c238c388d312f1089--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Dark | Large | LTR](https://4b791d6c5e6e2b53b6a1425b30713dbf--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Dark | Large | RTL](https://9764309dc7182ad6c4db741d7b1a941c--spectrum-web-components.netlify.app/review/)
github-actions[bot] commented 3 months 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.29 kB 210.938 kB πŸ† 211.00 kB
Scripts 54.421 kB 48.603 kB πŸ† 48.638 kB
Stylesheet 35.031 kB 30.394 kB πŸ† 30.397 kB
Document 6.008 kB 5.29 kB πŸ† 5.305 kB
Font 126.83 kB 126.651 kB πŸ† 126.66 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 3 months ago

Tachometer results

Chrome ## number-field [_permalink_](#user-content-number-field) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 524 kB | 65.99ms - 67.46ms | - | faster βœ”
8% - 11%
5.65ms - 7.82ms | | branch | 511 kB | 72.66ms - 74.26ms | slower ❌
8% - 12%
5.65ms - 7.82ms | - | ## slider [_permalink_](#user-content-slider) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 480 kB | 73.82ms - 75.36ms | - | faster βœ”
2% - 6%
1.86ms - 4.38ms | | branch | 467 kB | 76.72ms - 78.70ms | slower ❌
2% - 6%
1.86ms - 4.38ms | - |
Firefox ## number-field [_permalink_](#user-content-number-field) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 524 kB | 146.53ms - 152.31ms | - | faster βœ”
5% - 10%
7.67ms - 15.57ms | | branch | 511 kB | 158.34ms - 163.74ms | slower ❌
5% - 11%
7.67ms - 15.57ms | - | ## slider [_permalink_](#user-content-slider) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 480 kB | 162.14ms - 169.22ms | - | unsure πŸ”
-6% - +0%
-9.53ms - +0.09ms | | branch | 467 kB | 167.16ms - 173.64ms | unsure πŸ”
-0% - +6%
-0.09ms - +9.53ms | - |