fix(progress-circle): ensure size can be applied to non-"size" attribute bearing elements #4055

Westbrook · 2024-02-20T13:14:42Z

Description

At some point (likely with the new Core Tokens for Icon) the sizing of the Progress Circle for pending Buttons was broken.

correct sizing
update Progress Circle to leverage animation tokens
move progress button custom property into "Reduce Motion" override at story time so it can be included in VRTs
update VRTs

How has this been tested?

Test case 1
1. Go here
2. See that the Progress Circle displays after 1 second
3. Switch on "Reduce Motion"
4. Navigate to the "L" size story for these pending buttons
5. See that the Progress Circle display immediately
6. See that all Progress Circles are contains within their respective Buttons

Types of changes

Bug fix (non-breaking change which fixes an issue)

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.

…ute bearing elements

github-actions · 2024-02-20T13:17:08Z

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 · 2024-02-20T13:19:03Z

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.93	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	242.451 kB	230.08 kB	229.807 kB 🏆
Scripts	59.487 kB	54.02 kB	53.971 kB 🏆
Stylesheet	50.505 kB	44.238 kB	44.015 kB 🏆
Document	5.747 kB	5.11 kB	5.109 kB 🏆
Third Party	126.712 kB	126.712 kB	126.712 kB

Request Count

Category	Latest	Main	Branch
Total	42	42	42
Scripts	34	34	34
Stylesheet	5	5	5
Document	1	1	1
Third Party	2	2	2

github-actions · 2024-02-20T13:49:44Z

Tachometer results

Chrome

action-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	489 kB	83.21ms - 84.89ms	-	unsure 🔍 -1% - +1% -1.12ms - +1.06ms
branch	480 kB	83.39ms - 84.78ms	unsure 🔍 -1% - +1% -1.06ms - +1.12ms	-

action-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	521 kB	110.85ms - 112.60ms	-	unsure 🔍 -3% - +0% -2.90ms - +0.55ms
branch	513 kB	111.42ms - 114.38ms	unsure 🔍 -0% - +3% -0.55ms - +2.90ms	-

action-group permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	543 kB	68.39ms - 69.71ms	-	faster ✔ 0% - 3% 0.27ms - 2.19ms
branch	534 kB	69.58ms - 70.98ms	slower ❌ 0% - 3% 0.27ms - 2.19ms	-

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	655 kB	176.44ms - 180.17ms	-	unsure 🔍 -2% - +2% -3.50ms - +2.83ms
branch	647 kB	176.08ms - 181.20ms	unsure 🔍 -2% - +2% -2.83ms - +3.50ms	-

alert-dialog permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	460 kB	125.53ms - 126.61ms	-	unsure 🔍 -0% - +1% -0.61ms - +1.02ms
branch	451 kB	125.26ms - 126.47ms	unsure 🔍 -1% - +0% -1.02ms - +0.61ms	-

button-group permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	447 kB	62.85ms - 64.64ms	-	unsure 🔍 -2% - +2% -1.12ms - +1.04ms
branch	438 kB	63.19ms - 64.39ms	unsure 🔍 -2% - +2% -1.04ms - +1.12ms	-

button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	453 kB	75.77ms - 76.99ms	-	unsure 🔍 -1% - +1% -0.90ms - +0.82ms
branch	444 kB	75.81ms - 77.04ms	unsure 🔍 -1% - +1% -0.82ms - +0.90ms	-

coachmark permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	627 kB	175.05ms - 179.19ms	-	unsure 🔍 -2% - +1% -3.36ms - +1.79ms
branch	618 kB	176.37ms - 179.44ms	unsure 🔍 -1% - +2% -1.79ms - +3.36ms	-

combobox permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	706 kB	37.76ms - 38.34ms	-	unsure 🔍 -1% - +1% -0.37ms - +0.36ms
branch	698 kB	37.83ms - 38.28ms	unsure 🔍 -1% - +1% -0.36ms - +0.37ms	-

dialog permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	514 kB	82.09ms - 82.82ms	-	unsure 🔍 -3% - +0% -2.34ms - +0.04ms
branch	506 kB	82.47ms - 84.73ms	unsure 🔍 -0% - +3% -0.04ms - +2.34ms	-

infield-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	406 kB	19.41ms - 19.65ms	-	unsure 🔍 -1% - +1% -0.19ms - +0.18ms
branch	398 kB	19.39ms - 19.68ms	unsure 🔍 -1% - +1% -0.18ms - +0.19ms	-

menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	480 kB	237.93ms - 243.38ms	-	unsure 🔍 -3% - +1% -6.36ms - +1.95ms
branch	471 kB	239.72ms - 246.00ms	unsure 🔍 -1% - +3% -1.95ms - +6.36ms	-

number-field permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	528 kB	99.61ms - 102.44ms	-	unsure 🔍 -1% - +2% -1.29ms - +2.17ms
branch	519 kB	99.59ms - 101.59ms	unsure 🔍 -2% - +1% -2.17ms - +1.29ms	-

overlay permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	510 kB	56.66ms - 57.69ms	-	slower ❌ 0% - 3% 0.01ms - 1.43ms
branch	485 kB	55.97ms - 56.94ms	faster ✔ 0% - 2% 0.01ms - 1.43ms	-

picker-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	419 kB	42.83ms - 43.45ms	-	unsure 🔍 -1% - +1% -0.39ms - +0.37ms
branch	410 kB	42.93ms - 43.37ms	unsure 🔍 -1% - +1% -0.37ms - +0.39ms	-

picker permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	518 kB	620.81ms - 631.05ms	-	unsure 🔍 -1% - +2% -5.96ms - +9.79ms
branch	509 kB	618.04ms - 630.00ms	unsure 🔍 -2% - +1% -9.79ms - +5.96ms	-

popover permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	386 kB	21.49ms - 21.71ms	-	unsure 🔍 -1% - +1% -0.25ms - +0.19ms
branch	377 kB	21.45ms - 21.82ms	unsure 🔍 -1% - +1% -0.19ms - +0.25ms	-

progress-circle permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	387 kB	48.64ms - 49.26ms	-	unsure 🔍 -1% - +0% -0.66ms - +0.24ms
branch	379 kB	48.83ms - 49.49ms	unsure 🔍 -0% - +1% -0.24ms - +0.66ms	-

search permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	476 kB	58.02ms - 59.08ms	-	unsure 🔍 -1% - +2% -0.49ms - +0.88ms
branch	467 kB	57.92ms - 58.79ms	unsure 🔍 -2% - +1% -0.88ms - +0.49ms	-

slider permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	481 kB	113.09ms - 115.65ms	-	unsure 🔍 -2% - +2% -2.04ms - +1.84ms
branch	473 kB	113.01ms - 115.92ms	unsure 🔍 -2% - +2% -1.84ms - +2.04ms	-

split-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	721 kB	1858.68ms - 1862.19ms	-	unsure 🔍 -0% - +0% -0.97ms - +3.64ms
branch	713 kB	1857.61ms - 1860.60ms	unsure 🔍 -0% - +0% -3.64ms - +0.97ms	-

tags permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	457 kB	39.68ms - 41.94ms	-	slower ❌ 88% - 99% 18.61ms - 20.88ms
branch	448 kB	20.96ms - 21.16ms	faster ✔ 47% - 50% 18.61ms - 20.88ms	-

toast permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	437 kB	42.44ms - 42.94ms	-	unsure 🔍 -1% - +1% -0.25ms - +0.49ms
branch	428 kB	42.29ms - 42.84ms	unsure 🔍 -1% - +1% -0.49ms - +0.25ms	-

tooltip permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	587 kB	43.69ms - 44.51ms	-	unsure 🔍 -1% - +2% -0.30ms - +0.84ms
branch	551 kB	43.43ms - 44.23ms	unsure 🔍 -2% - +1% -0.84ms - +0.30ms	-

Firefox

action-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	489 kB	173.38ms - 181.26ms	-	unsure 🔍 -2% - +4% -3.16ms - +6.44ms
branch	480 kB	172.93ms - 178.43ms	unsure 🔍 -4% - +2% -6.44ms - +3.16ms	-

action-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	521 kB	258.99ms - 268.21ms	-	unsure 🔍 -3% - +2% -8.92ms - +5.92ms
branch	513 kB	259.30ms - 270.90ms	unsure 🔍 -2% - +3% -5.92ms - +8.92ms	-

action-group permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	543 kB	176.19ms - 183.49ms	-	unsure 🔍 -2% - +4% -3.99ms - +6.59ms
branch	534 kB	174.71ms - 182.37ms	unsure 🔍 -4% - +2% -6.59ms - +3.99ms	-

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	655 kB	331.69ms - 342.47ms	-	unsure 🔍 -2% - +2% -7.98ms - +6.22ms
branch	647 kB	333.35ms - 342.57ms	unsure 🔍 -2% - +2% -6.22ms - +7.98ms	-

alert-dialog permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	460 kB	227.09ms - 236.75ms	-	unsure 🔍 -2% - +3% -4.32ms - +7.12ms
branch	451 kB	227.45ms - 233.59ms	unsure 🔍 -3% - +2% -7.12ms - +4.32ms	-

button-group permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	447 kB	165.13ms - 173.67ms	-	unsure 🔍 -2% - +5% -4.02ms - +7.98ms
branch	438 kB	163.21ms - 171.63ms	unsure 🔍 -5% - +2% -7.98ms - +4.02ms	-

button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	453 kB	179.88ms - 189.28ms	-	unsure 🔍 -1% - +5% -1.40ms - +9.48ms
branch	444 kB	177.81ms - 183.27ms	unsure 🔍 -5% - +1% -9.48ms - +1.40ms	-

coachmark permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	627 kB	485.94ms - 489.06ms	-	unsure 🔍 -2% - +0% -10.23ms - +1.95ms
branch	618 kB	485.75ms - 497.53ms	unsure 🔍 -0% - +2% -1.95ms - +10.23ms	-

combobox permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	706 kB	69.34ms - 74.30ms	-	slower ❌ 7% - 15% 4.45ms - 9.47ms
branch	698 kB	64.47ms - 65.25ms	faster ✔ 7% - 13% 4.45ms - 9.47ms	-

dialog permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	514 kB	136.33ms - 141.63ms	-	unsure 🔍 -3% - +3% -4.39ms - +4.47ms
branch	506 kB	135.39ms - 142.49ms	unsure 🔍 -3% - +3% -4.47ms - +4.39ms	-

infield-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	406 kB	51.19ms - 54.01ms	-	unsure 🔍 -5% - +3% -2.46ms - +1.62ms
branch	398 kB	51.54ms - 54.50ms	unsure 🔍 -3% - +5% -1.62ms - +2.46ms	-

menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	480 kB	453.09ms - 466.19ms	-	unsure 🔍 -1% - +2% -6.75ms - +10.91ms
branch	471 kB	451.64ms - 463.48ms	unsure 🔍 -2% - +1% -10.91ms - +6.75ms	-

number-field permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	528 kB	228.71ms - 237.89ms	-	unsure 🔍 -2% - +3% -4.20ms - +7.60ms
branch	519 kB	227.89ms - 235.31ms	unsure 🔍 -3% - +2% -7.60ms - +4.20ms	-

overlay permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	588 kB	130.76ms - 136.24ms	-	unsure 🔍 -4% - +3% -4.92ms - +4.36ms
branch	580 kB	130.04ms - 137.52ms	unsure 🔍 -3% - +4% -4.36ms - +4.92ms	-

picker-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	419 kB	84.90ms - 92.70ms	-	unsure 🔍 -6% - +6% -5.22ms - +4.90ms
branch	410 kB	85.74ms - 92.18ms	unsure 🔍 -6% - +6% -4.90ms - +5.22ms	-

picker permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	518 kB	1057.25ms - 1066.23ms	-	unsure 🔍 -2% - +1% -24.41ms - +5.93ms
branch	509 kB	1056.49ms - 1085.47ms	unsure 🔍 -1% - +2% -5.93ms - +24.41ms	-

popover permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	386 kB	53.41ms - 57.47ms	-	slower ❌ 1% - 10% 0.36ms - 5.24ms
branch	377 kB	51.27ms - 54.01ms	faster ✔ 1% - 9% 0.36ms - 5.24ms	-

progress-circle permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	387 kB	70.01ms - 75.07ms	-	unsure 🔍 -7% - +4% -5.10ms - +2.82ms
branch	379 kB	70.63ms - 76.73ms	unsure 🔍 -4% - +7% -2.82ms - +5.10ms	-

search permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	476 kB	116.85ms - 124.27ms	-	unsure 🔍 -4% - +4% -5.07ms - +5.11ms
branch	467 kB	117.05ms - 124.03ms	unsure 🔍 -4% - +4% -5.11ms - +5.07ms	-

slider permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	481 kB	219.19ms - 227.97ms	-	unsure 🔍 -3% - +3% -5.61ms - +6.77ms
branch	473 kB	218.63ms - 227.37ms	unsure 🔍 -3% - +3% -6.77ms - +5.61ms	-

split-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	721 kB	1568.88ms - 1574.48ms	-	unsure 🔍 -0% - +0% -2.29ms - +4.65ms
branch	713 kB	1568.44ms - 1572.56ms	unsure 🔍 -0% - +0% -4.65ms - +2.29ms	-

tags permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	457 kB	48.01ms - 51.07ms	-	unsure 🔍 -3% - +7% -1.44ms - +3.28ms
branch	448 kB	46.83ms - 50.41ms	unsure 🔍 -7% - +3% -3.28ms - +1.44ms	-

toast permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	437 kB	105.67ms - 111.49ms	-	unsure 🔍 -5% - +4% -5.95ms - +4.35ms
branch	428 kB	105.13ms - 113.63ms	unsure 🔍 -4% - +5% -4.35ms - +5.95ms	-

tooltip permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	654 kB	92.59ms - 93.65ms	-	unsure 🔍 -2% - +0% -2.28ms - +0.16ms
branch	645 kB	93.08ms - 95.28ms	unsure 🔍 -0% - +2% -0.16ms - +2.28ms	-

Westbrook added 2 commits February 20, 2024 07:58

fix(progress-circle): ensure size can be applied to non-"size" attrib…

302933e

…ute bearing elements

ci: update golden images cache

aa726a2

Westbrook requested a review from a team February 20, 2024 13:14

Westbrook mentioned this pull request Feb 20, 2024

fix(picker): add loading state to the picker #3110

Merged

12 tasks

hunterloftis approved these changes Feb 20, 2024

View reviewed changes

Westbrook merged commit 215ee5c into main Feb 20, 2024

Westbrook deleted the progress-circle-size branch February 20, 2024 13:58

fix(progress-circle): ensure size can be applied to non-"size" attribute bearing elements #4055

fix(progress-circle): ensure size can be applied to non-"size" attribute bearing elements #4055

Uh oh!

Conversation

Westbrook commented Feb 20, 2024

Description

How has this been tested?

Types of changes

Checklist

Uh oh!

github-actions bot commented Feb 20, 2024

Branch preview

Uh oh!

github-actions bot commented Feb 20, 2024

Lighthouse scores

Transfer Size

Request Count

Uh oh!

github-actions bot commented Feb 20, 2024

Tachometer results

action-bar permalink

action-button permalink

action-group permalink

action-menu permalink

alert-dialog permalink

button-group permalink

button permalink

coachmark permalink

combobox permalink

dialog permalink

infield-button permalink

menu permalink

number-field permalink

overlay permalink

picker-button permalink

picker permalink

popover permalink

progress-circle permalink

search permalink

slider permalink

split-button permalink

tags permalink

toast permalink

tooltip permalink

action-bar permalink

action-button permalink

action-group permalink

action-menu permalink

alert-dialog permalink

button-group permalink

button permalink

coachmark permalink

combobox permalink

dialog permalink

infield-button permalink

menu permalink

number-field permalink

overlay permalink

picker-button permalink

picker permalink

popover permalink

progress-circle permalink

search permalink

slider permalink

split-button permalink

tags permalink

toast permalink

tooltip permalink

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants