spectrum-css
spectrum-css copied to clipboard
feat(fieldlabel)!: core-tokens implementation (CSS-102)
Description
BREAKING CHANGE: This migrates the Field label component to core tokens.
https://jira.corp.adobe.com/browse/CSS-102
How and where has this been tested?
- How this was tested: comparing http://localhost:3002/docs/fieldlabel.html with the https://opensource.adobe.com/spectrum-css/fieldlabel.html component before and after.
- Browser(s) and OS(s) this was tested with: Chrome Canary Version 105.0.5148.0 (Official Build) canary (arm64)
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.
- [x] I have read the CONTRIBUTING document.
- [ ] I have tested these changes in Windows High Contrast mode.
- [ ] This pull request is ready to merge.
Deploy Preview for spectrum-css ready!
| Name | Link |
|---|---|
| Latest commit | e0cce179c4d7cc64e7388e657bb52fab6af90a5a |
| Latest deploy log | https://app.netlify.com/sites/spectrum-css/deploys/62cf573b5d3d4f0008aa7c35 |
| Deploy Preview | https://deploy-preview-1476--spectrum-css.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site settings.
🚀 Deployed on https://pr-1476--spectrum-css.netlify.app
One more thing, @bernhard-adobe: the color for the disabled variant looks pretty different than it did before (see below with current and previous). Would you mind double-checking on that color?
One more thing, @bernhard-adobe: the color for the
disabledvariant looks pretty different than it did before (see below with current and previous). Would you mind double-checking on that color?![]()
That is indeed missing as it was not documented in the "Components Batch 1.xd" file. I guess the color would be (--spectrum-disabled-content-color) like all the other disabled components.
One more thing, @bernhard-adobe: the color for the
disabledvariant looks pretty different than it did before (see below with current and previous). Would you mind double-checking on that color?That is indeed missing as it was not documented in the "Components Batch 1.xd" file. I guess the color would be
(--spectrum-disabled-content-color)like all the other disabled components.
rebuild Jenkins: https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/37/
VRT results are: https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/37/artifact/backstop_data/html_report/index.html
@pfulton color changes (as expected) for disabled and line-height changes (as expected):

Released beta:
5.0.0-beta.0
New beta release:
5.0.0-beta.1
New release with syntax fix:
5.0.0-beta.2
Fixed misaligned Field-Label padding for variant Side-Label.
@pfulton can you please publish another beta-release for the FieldLabel so I can pull in the latest changes in Web Component and re-run VRT over there?
VRT Results for Spectrum CSS are: https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/44/artifact/backstop_data/html_report/index.html
Line-height changed for FieldLabel. We have confirmed before that this is expected behavior.
With the latest push the Side-Label padding top doesn't change anymore. This is in contrast with the documentation from the "Components batch 1.xd" file that says it should:

If this is an intended change we should roll-back my last commit: 044d8ad1f96ece84dadbbd1fb1877bfec7b18aca
Furthermore I aligned the CSS FieldLabel with the Web Components FieldLabel and the Line-Heights now match the Web Components.
Because we changed the line-heights from previously 15.6 px to now 18px (no more sub-pixels) the position of the Label changes a bit. We may want to check in with design if this is intend or if we need to adjust the top-padding for the Side-Label variant.
Please let me know @pfulton if this sounds good. Thank you.
(there are VRT changes with Switch and Menu reported as well, I think the baseline-images haven not been updates)
Released: @spectrum-css/[email protected]
