spectrum-css icon indicating copy to clipboard operation
spectrum-css copied to clipboard

feat(fieldlabel)!: core-tokens implementation (CSS-102)

Open bernhard-adobe opened this issue 3 years ago • 10 comments

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

Screen Shot 2022-07-13 at 17 28 53

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.

bernhard-adobe avatar Jul 13 '22 23:07 bernhard-adobe

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...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] avatar Jul 13 '22 23:07 netlify[bot]

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

github-actions[bot] avatar Jul 25 '22 20:07 github-actions[bot]

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?

disabled-fieldlabel

pfulton avatar Aug 03 '22 15:08 pfulton

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?

disabled-fieldlabel

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.

bernhard-adobe avatar Aug 11 '22 22:08 bernhard-adobe

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? disabled-fieldlabel

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. Screen Shot 2022-08-11 at 16 17 12

bernhard-adobe avatar Aug 11 '22 22:08 bernhard-adobe

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

bernhard-adobe avatar Aug 11 '22 22:08 bernhard-adobe

@pfulton color changes (as expected) for disabled and line-height changes (as expected): Screen Shot 2022-08-11 at 16 35 09

bernhard-adobe avatar Aug 11 '22 22:08 bernhard-adobe

Released beta: 5.0.0-beta.0

pfulton avatar Aug 23 '22 13:08 pfulton

New beta release: 5.0.0-beta.1

pfulton avatar Aug 23 '22 13:08 pfulton

New release with syntax fix: 5.0.0-beta.2

pfulton avatar Aug 23 '22 14:08 pfulton

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: Screen Shot 2022-09-25 at 18 47 33

If this is an intended change we should roll-back my last commit: 044d8ad1f96ece84dadbbd1fb1877bfec7b18aca

Screen Shot 2022-09-25 at 18 27 13

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.

Screen Shot 2022-09-25 at 18 43 42 Screen Shot 2022-09-25 at 18 42 06 Screen Shot 2022-09-25 at 18 38 35

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)

bernhard-adobe avatar Sep 26 '22 00:09 bernhard-adobe

Released: @spectrum-css/[email protected]

pfulton avatar Sep 28 '22 18:09 pfulton