refactor(field-label): use core tokens #2529

pfulton · 2022-08-23T14:11:09Z

Description

Adds a beta version of the migrated FieldLabel component.

Uses beta release, hold for full release.

Related issue(s)

CSS: adobe/spectrum-css#1476 feat(fieldlabel)!: core-tokens implementation (CSS-102) #1476
Jira: https://jira.corp.adobe.com/browse/CSS-102

Motivation and context

CSS Core-tokens migration

How has this been tested?

Test case 1
1. Go here
2. Do this
Test case 2
1. Go here
2. Do this

Screenshots (if appropriate)

Types of changes

Bug fix (non-breaking change which fixes an issue)
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

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
If my change required a change to the documentation, I have updated the documentation in this pull request.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.
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.

github-actions · 2022-08-23T14:14:22Z

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:

github-actions · 2022-08-23T14:41:56Z

Tachometer results

Chrome

action-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	244 kB	38.81ms - 39.63ms	-	unsure 🔍 -2% - +2% -0.62ms - +0.64ms
branch	244 kB	38.73ms - 39.69ms	unsure 🔍 -2% - +2% -0.64ms - +0.62ms	-

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	608 kB	251.35ms - 258.60ms	-	unsure 🔍 -1% - +3% -2.16ms - +6.34ms
branch	610 kB	250.67ms - 255.10ms	unsure 🔍 -2% - +1% -6.34ms - +2.16ms	-

card permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	391 kB	103.34ms - 106.97ms	-	unsure 🔍 -3% - +3% -2.67ms - +2.79ms
branch	392 kB	103.05ms - 107.14ms	unsure 🔍 -3% - +3% -2.79ms - +2.67ms	-

dialog permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	317 kB	88.34ms - 90.59ms	-	unsure 🔍 -2% - +2% -2.00ms - +1.57ms
branch	319 kB	88.29ms - 91.07ms	unsure 🔍 -2% - +2% -1.57ms - +2.00ms	-

field-label permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	264 kB	30.85ms - 32.17ms	-	slower ❌ 0% - 5% 0.04ms - 1.59ms
branch	263 kB	30.28ms - 31.10ms	faster ✔ 0% - 5% 0.04ms - 1.59ms	-

illustrated-message permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	293 kB	48.93ms - 50.43ms	-	unsure 🔍 -0% - +4% -0.07ms - +1.91ms
branch	293 kB	48.12ms - 49.40ms	unsure 🔍 -4% - +0% -1.91ms - +0.07ms	-

menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	309 kB	287.30ms - 295.25ms	-	unsure 🔍 -2% - +1% -6.60ms - +3.80ms
branch	311 kB	289.32ms - 296.03ms	unsure 🔍 -1% - +2% -3.80ms - +6.60ms	-

meter permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	276 kB	73.02ms - 75.21ms	-	unsure 🔍 -3% - +1% -2.23ms - +0.97ms
branch	275 kB	73.58ms - 75.91ms	unsure 🔍 -1% - +3% -0.97ms - +2.23ms	-

overlay permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	347 kB	87.37ms - 89.69ms	-	unsure 🔍 -2% - +2% -2.02ms - +1.56ms
branch	348 kB	87.41ms - 90.12ms	unsure 🔍 -2% - +2% -1.56ms - +2.02ms	-

picker permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	454 kB	931.68ms - 956.66ms	-	unsure 🔍 -1% - +2% -13.77ms - +20.12ms
branch	454 kB	929.54ms - 952.45ms	unsure 🔍 -2% - +1% -20.12ms - +13.77ms	-

popover permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	241 kB	36.15ms - 37.93ms	-	unsure 🔍 -2% - +4% -0.56ms - +1.50ms
branch	241 kB	36.04ms - 37.10ms	unsure 🔍 -4% - +1% -1.50ms - +0.56ms	-

progress-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	274 kB	57.21ms - 59.16ms	-	unsure 🔍 -2% - +3% -1.38ms - +1.48ms
branch	273 kB	57.09ms - 59.18ms	unsure 🔍 -3% - +2% -1.48ms - +1.38ms	-

slider permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	341 kB	173.12ms - 177.82ms	-	unsure 🔍 -2% - +1% -4.27ms - +2.54ms
branch	341 kB	173.87ms - 178.79ms	unsure 🔍 -1% - +2% -2.54ms - +4.27ms	-

split-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	546 kB	2039.62ms - 2043.58ms	-	unsure 🔍 -0% - +0% -0.76ms - +4.73ms
branch	547 kB	2037.71ms - 2041.52ms	unsure 🔍 -0% - +0% -4.73ms - +0.76ms	-

tooltip permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	247 kB	36.11ms - 36.95ms	-	unsure 🔍 -3% - +0% -1.27ms - +0.09ms
branch	247 kB	36.59ms - 37.65ms	unsure 🔍 -0% - +3% -0.09ms - +1.27ms	-

Firefox

action-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	244 kB	112.46ms - 128.30ms	-	unsure 🔍 -7% - +12% -8.32ms - +14.08ms
branch	244 kB	109.58ms - 125.42ms	unsure 🔍 -12% - +7% -14.08ms - +8.32ms	-

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	608 kB	410.04ms - 422.32ms	-	unsure 🔍 -5% - +0% -19.91ms - +1.71ms
branch	610 kB	416.38ms - 434.18ms	unsure 🔍 -0% - +5% -1.71ms - +19.91ms	-

card permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	391 kB	180.80ms - 200.20ms	-	unsure 🔍 -7% - +7% -13.28ms - +13.28ms
branch	392 kB	181.43ms - 199.57ms	unsure 🔍 -7% - +7% -13.28ms - +13.28ms	-

dialog permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	317 kB	153.30ms - 175.62ms	-	unsure 🔍 -4% - +14% -5.82ms - +21.42ms
branch	319 kB	148.84ms - 164.48ms	unsure 🔍 -13% - +3% -21.42ms - +5.82ms	-

field-label permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	264 kB	70.05ms - 78.67ms	-	unsure 🔍 -3% - +13% -1.81ms - +9.21ms
branch	263 kB	67.23ms - 74.09ms	unsure 🔍 -12% - +2% -9.21ms - +1.81ms	-

illustrated-message permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	293 kB	100.14ms - 116.62ms	-	unsure 🔍 -8% - +13% -8.61ms - +13.85ms
branch	293 kB	98.12ms - 113.40ms	unsure 🔍 -13% - +8% -13.85ms - +8.61ms	-

menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	309 kB	533.34ms - 544.78ms	-	unsure 🔍 -2% - +1% -13.08ms - +3.84ms
branch	311 kB	537.44ms - 549.92ms	unsure 🔍 -1% - +2% -3.84ms - +13.08ms	-

meter permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	276 kB	153.04ms - 159.48ms	-	unsure 🔍 -6% - +1% -10.43ms - +0.95ms
branch	275 kB	156.31ms - 165.69ms	unsure 🔍 -1% - +7% -0.95ms - +10.43ms	-

overlay permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	347 kB	165.27ms - 177.41ms	-	unsure 🔍 -6% - +4% -10.69ms - +6.25ms
branch	348 kB	167.65ms - 179.47ms	unsure 🔍 -4% - +6% -6.25ms - +10.69ms	-

picker permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	454 kB	1120.00ms - 1140.28ms	-	unsure 🔍 -2% - +1% -22.60ms - +10.88ms
branch	454 kB	1122.68ms - 1149.32ms	unsure 🔍 -1% - +2% -10.88ms - +22.60ms	-

popover permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	241 kB	101.17ms - 117.75ms	-	unsure 🔍 -12% - +12% -12.50ms - +13.50ms
branch	241 kB	98.94ms - 118.98ms	unsure 🔍 -12% - +11% -13.50ms - +12.50ms	-

progress-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	274 kB	123.50ms - 133.10ms	-	unsure 🔍 -7% - +3% -9.60ms - +4.64ms
branch	273 kB	125.52ms - 136.04ms	unsure 🔍 -4% - +8% -4.64ms - +9.60ms	-

slider permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	341 kB	337.08ms - 346.80ms	-	unsure 🔍 -1% - +3% -2.14ms - +10.34ms
branch	341 kB	333.92ms - 341.76ms	unsure 🔍 -3% - +1% -10.34ms - +2.14ms	-

split-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	546 kB	2155.94ms - 2168.10ms	-	unsure 🔍 -1% - +0% -13.73ms - +4.25ms
branch	547 kB	2160.13ms - 2173.39ms	unsure 🔍 -0% - +1% -4.25ms - +13.73ms	-

tooltip permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	247 kB	95.50ms - 112.22ms	-	unsure 🔍 -1% - +23% -0.28ms - +20.84ms
branch	247 kB	87.13ms - 100.03ms	unsure 🔍 -19% - -0% -20.84ms - +0.28ms	-

pfulton · 2022-08-25T21:02:47Z

@bernhard-adobe Mind taking a look at this one?

bernhard-adobe · 2022-09-22T20:52:20Z

hmm, why oh why did the padding change. Let's investigate.

bernhard-adobe · 2022-09-27T20:58:54Z

@pfulton PJ confirms that the field-label from now on uses core-tokens for padding top aka component-top-to-text-75.
this changes for scale medium the padding from 8px down to 4px. It does feel like a big change.
For side-label, the increased padding / spacing from label to component horizontally is also intended.

pfulton · 2022-10-11T20:05:32Z

All right, @bernhard-adobe - I've merged in the CSS PR for this and graduated the beta. The full release is: @spectrum-css/fieldlabel@5.0.0

This adds a beta version of the migrated-to-core-tokens FieldLabel component

pfulton force-pushed the pfulton/fieldlabel-core-tokens branch from f6b613f to 0479fb3 Compare September 21, 2022 13:27

bernhard-adobe mentioned this pull request Sep 26, 2022

feat(fieldlabel)!: core-tokens implementation (CSS-102) adobe/spectrum-css#1476

Merged

5 tasks

Westbrook marked this pull request as ready for review October 19, 2022 02:11

Westbrook force-pushed the pfulton/fieldlabel-core-tokens branch from a49cac2 to cc05025 Compare October 19, 2022 11:18

pfulton and others added 2 commits October 19, 2022 08:04

feat(field-label): use core tokens

05e76c2

This adds a beta version of the migrated-to-core-tokens FieldLabel component

docs: update stories for new field label styles

2abf28c

Westbrook force-pushed the pfulton/fieldlabel-core-tokens branch from cc05025 to 2abf28c Compare October 19, 2022 12:04

ci: updated golden images cache

5da7f77

Westbrook force-pushed the pfulton/fieldlabel-core-tokens branch from 38321ae to 5da7f77 Compare October 19, 2022 14:07

Westbrook merged commit 87be52f into main Oct 19, 2022

Westbrook deleted the pfulton/fieldlabel-core-tokens branch October 19, 2022 14:54

refactor(field-label): use core tokens #2529

refactor(field-label): use core tokens #2529

Uh oh!

Conversation

pfulton commented Aug 23, 2022 • edited by bernhard-adobe Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issue(s)

Motivation and context

How has this been tested?

Screenshots (if appropriate)

Types of changes

Checklist

Best practices

Uh oh!

github-actions bot commented Aug 23, 2022

Branch Preview

Uh oh!

github-actions bot commented Aug 23, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tachometer results

action-bar permalink

action-menu permalink

card permalink

dialog permalink

field-label permalink

illustrated-message permalink

menu permalink

meter permalink

overlay permalink

picker permalink

popover permalink

progress-bar permalink

slider permalink

split-button permalink

tooltip permalink

action-bar permalink

action-menu permalink

card permalink

dialog permalink

field-label permalink

illustrated-message permalink

menu permalink

meter permalink

overlay permalink

picker permalink

popover permalink

progress-bar permalink

slider permalink

split-button permalink

tooltip permalink

Uh oh!

pfulton commented Aug 25, 2022

Uh oh!

bernhard-adobe commented Sep 22, 2022

Uh oh!

bernhard-adobe commented Sep 27, 2022

Uh oh!

pfulton commented Oct 11, 2022

Uh oh!

Uh oh!

pfulton commented Aug 23, 2022 •

edited by bernhard-adobe

Loading

github-actions bot commented Aug 23, 2022 •

edited

Loading