Lunarfusion/css 117 progress circle core tokens

[lunarfusion]

Description

BREAKING CHANGE: This migrates the Progress Circle component to core tokens.

• Jira issue CSS-117 https://jira.corp.adobe.com/browse/CSS-117

How and where has this been tested?

• Chrome 103 for macOS
• Firefox 102 for macOS
• Safari 15.5 for macOS
• How this was tested: comparing local build of http://localhost:3000/docs/progresscircle.html with XD redline components batch and with https://spectrum.adobe.com/page/progress-circle/

Screenshots

To-do list

• If my change impacts other components, I have tested to make sure they don't break.
• If my change impacts documentation, I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have tested these changes in Windows High Contrast mode.

• This pull request is ready to merge.

[github-actions]

🚀 Deployed on https://pr-1488--spectrum-css.netlify.app

[bernhard-adobe]

other than the question about the latest tokens "@spectrum-css/tokens": "^1.0.1" (do yarn install please to test it out) this looks really good! Great work.

I think the VRT will fail as there are a couple of class-names renamed. We need to expect that in the test.

[pfulton]

I think the VRT will fail as there are a couple of class-names renamed. We need to expect that in the test.

@lunarfusion @bernhard-adobe - we actually have Progress Circle ignored in the VRT scenarios due to BackstopJS not being able to handle animations, so this one won't even run.

[pfulton]

@lunarfusion nice work! Let's remove the changes to the .gitignore and I think we're good to go on this one.

[bernhard-adobe]

Great work, approved

[bernhard-adobe]

VRT test: https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/35/artifact/backstop_data/html_report/index.html
2022-08-10 -- 1488 - progress-circle.zip

[pfulton]

Released:
2.0.0-beta.0

[pfulton]

@jnurthen - would you mind taking a look at the changes to the Progress Circle here to let @lunarfusion know if the Windows High Contrast Mode styles are acceptable? Thank you!

[jnurthen]

@pfulton - I think I made a mistake when I fixed this one originally. The Highlight colour is not guaranteed to be a visible colour combination with the track (which I think gets ButtonBorder/ButtonText by default).
This is particularly apparent when viewing the High Contrast (light) theme.

I think a border between the 2 could resolve this - or maybe using HighlightText as one of the colours or another way? However, I wouldn't want to block this PR on that as it is not a new error. IMO This can be tracked in a separate (lower priority) Issue as the visibiity of the progress on a progresscircle is likely low priority.

[lunarfusion]

@jnurthen The change that I initially made to WHCM was to ensure the track and the fill have contrast. I did not override the track color for WHCM, but I did override the fill with keyword "Highlight". Here is the VRT result.

Before:

After:

Note that the VRTs appear to be using Mac emulation of WHCM. Our assessment of the difference between Mac emulation and actual default WHCM colors on a windows machine is:

• Highlight color that looks bright blue (to me) on Mac emulation (left in the visual below)
• Highlight color that looks pale purple (to me) on a PC that a colleague tested for us (right in the visual below)

Edit: The emulation uses dark mode, but in light mode I can see what you pointed out in your comment. The track looks black and the fill looks dark blue.

Here is a visual of Mac emulation of Highlight in light mode (left) and PC test result (right):

One helpful change is to add "forced-color-adjust: none;" to the WHCM media query, which gives us this:

Would you like any changes to track or fill color keywords or to the delineation of track and fill based on this info? I can provide a comprehensive visual of our Mac emulation vs PC results if that might help.

[jnurthen]

These are the 4 high contrast themes that windows (10) provides.

HC #1

### HC #2

### HC Dark

### HC Light

These were tested using Assistiv Labs which is running windows.

I don't like using forced-color-adjust: none here as that could lead to the track completely disappearing which I don't think is any better than the current situation.

I was playing around with it and changing the border-style on the track to double might do the trick!

[pfulton]

Released: @spectrum-css/progresscircle@2.0.0-beta.1