spectrum-css

spectrum-css copied to clipboard

Description

Migrate ProgressBar & Mter to core tokens.

• Rename "Over Background" to "Static White"
• Move skin.css styles to index.css
• Update windows high contrast mode styles
• Removed is-negative, is-notice, and is-negative styles
• ensured Meter got the updates as well, including high-contrast adjustments for all Meter variants.

https://jira.corp.adobe.com/browse/CSS-195 Implement Meter core tokens https://jira.corp.adobe.com/browse/CSS-149 Implement Progress bar core tokens

Web components: https://github.com/adobe/spectrum-web-components/pull/2585 refactor(progress-bar): use core tokens #2585

How and where has this been tested?

• Tested locally referencing the Progress-bar XD file.
• Tested WHCM with forced colors in Chrome Emulation

Screenshots

To-do list

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

• [ ] This pull request is ready to merge.

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

@bernhard-adobe

I changed the fill color token based Deanna's message.

Design decided to make an update to the CCX Progress Bar. Color for the "track" should be using accent-color-900 and not blue-900 to ensure that Express will get Indigo and not blue. I've uploaded the updated UI kit to your Jira ticket.

VRT test is: https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/39/artifact/backstop_data/html_report/index.html 2022-08-10 -- 1493 - progressbar.zip

Released beta: 2.0.0-beta.0

@yosevu can you open a PR against the SWC repo with this update?

@pfulton , lets don't merge this one yet as it breaks the meter. I am pushing my changes to this branch @yosevu .

(notice the variants for meter are now missing the color options.)

@pfulton @yosevu added back our colorful meter options.

Not sure if those colors are correct for high-contrast mode. I think they should all be maybe the white like the "blue" accent variant. @yosevu what do you think?

@pfulton @yosevu added back our colorful meter options.

Not sure if those colors are correct for high-contrast mode. I think they should all be maybe the white like the "blue" accent variant. @yosevu what do you think?

Yes, that makes sense for WHCM @bernhard-adobe. Thanks for updating these!

@yosevu confirmed by design that the meter high contrast colors should be all the same color for all variants.

Dropping a note here to mention that there are a few changes to the tokens for Progress Bar. Slack thread about this.

@pfulton @yosevu
I made the changes requested by Kayiu in https://adobedesign.slack.com/archives/C02LSCFPFR6/p1666130871341249

~~- [x] Changed Text values from font-size-75/100/200/300 to font-size-75/75/100/200 to match the font sizes of Field Label~~ that was already fine.

~~- [x] Changed Spacing (top edge to text) from component-top-to-text-75/100/200/300 to component-top-to-text-75/75/100/200 to match the spacing of Field Label~~ Was already there

~~- [x] Spacing (top edge to text) for both small and large sizes should be the same, and should use component-top-to-text-75~~ already there

• [x] meter (thickness) - meter-thickness-medium should be called meter-thickness-large - there's no medium size, just small and large

Screenshots

thanks @pfulton for pouring in the latest updates. Meter and Progress bar still look good without any CSS missing tokens issues. I don't think the 4.0 release had any migrations.

We continue to wait from design to hear about to API changes in regard to discontinuing some of the t-shirt sizes

@pfulton alright, meter now has it's own t-shirt sizes classnams and docs for that. ONLY sizes S and L. As soon as you publish the beta package I will make the changes in Web Components.

I was going to leave a review, but remembered I created this PR 🙈. The colors and sizes look great overall @bernhard-adobe, I mainly left comments about updating the variants for the docs.

Since @yosevu's comments are mostly around documentation, I've gone ahead and released a new beta version in the meantime. Here are the details: @spectrum-css/[email protected]