spectrum-css

spectrum-css copied to clipboard

Migrating the Button to core-tokens.

Description

• removed skin.css
• added all the theming for Spectrum and Express in the themes folder
• upped version to 4.0.0 as core-tokens are a major change, updated CHANGELOG.md
• added temporary font-weights into components/tokens/custom-spectrum/custom-vars.css
• followed action-button example for migration and this doc https://github.com/adobe/spectrum-css/wiki/Migrating-a-component-to-core-tokens

Pages: https://opensource.adobe.com/spectrum-css/button-accent.html

https://opensource.adobe.com/spectrum-css/button-negative.html

https://opensource.adobe.com/spectrum-css/button-primary.html

https://opensource.adobe.com/spectrum-css/button-secondary.html

https://opensource.adobe.com/spectrum-css/button-staticcolor.html

Source-file for migration: Components batch 1.xd

https://jira.corp.adobe.com/browse/CSS-97

Spectrum Web Components: https://github.com/adobe/spectrum-web-components/pull/2659 feat(button): using core-tokens for button #2659

How and where has this been tested?

• How this was tested: Google Chrome natively running npm run dev, compared to the opensource website
• Browser(s) and OS(s) this was tested with: Version 106.0.5200.0 (Official Build) canary (arm64)

Screenshots

Note: the color for the button label changed from transparent to a solid color. This is documented in the XD source file.

To-do list

• [ ] 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.
• [ ] I have tested these changes in Windows High Contrast mode.

• [ ] This pull request is ready to merge.

Jul 25 '22 18:07 bernhard-adobe

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

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

VRT running manually: https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/10/

Jul 25 '22 18:07 bernhard-adobe

Looks like some more adjustments needed for min-width: https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/12/artifact/backstop_data/html_report/index.html

Jul 25 '22 21:07 bernhard-adobe

new VRT is: https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/17/

Jul 28 '22 22:07 bernhard-adobe

never-mind, we got https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/21/ now to include the changes from Jians cleanup-script #1487

Jul 29 '22 17:07 bernhard-adobe

There are visual differences with the min-width of the buttons. Need to investigate what went wrong or missing from the migration.

Jul 29 '22 20:07 bernhard-adobe

PJ provided us with the correct 2.25 ratio for button-min-width against height.

https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/22/

Rule: https://spectrum.corp.adobe.com/page/button/#Minimum-width

Aug 01 '22 23:08 bernhard-adobe

@pfulton VRT now looks as expected. We get some more pixels for button in min-width:

Test is: https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/22/artifact/backstop_data/html_report/index.html

Aug 01 '22 23:08 bernhard-adobe

@pfulton added the correct high-contrast mode updates for the buttons, including the accent variant. Thanks for the hint about forced-color-adjust: none;

Aug 18 '22 05:08 bernhard-adobe

@pfulton I could quickly resolve the merge conflicts tomorrow if the PR look good to you!

Aug 18 '22 05:08 bernhard-adobe

@bernhard-adobe yeah, can you resolve the conflicts please? After that, I'll do the beta release. Thanks!

Aug 23 '22 13:08 pfulton

@bernhard-adobe yeah, can you resolve the conflicts please? After that, I'll do the beta release. Thanks!

@pfulton Easy enough. Done. Thank you

Aug 23 '22 17:08 bernhard-adobe

Beta released: 7.0.0-beta.0

Aug 24 '22 21:08 pfulton

@bernhard-adobe Can you open a PR in the Spectrum Web Components repo with this update?

Aug 30 '22 16:08 pfulton

@bernhard-adobe - I bumped the beta version number and published the new release. It's now at: @spectrum-css/[email protected]

Oct 13 '22 14:10 pfulton

Released a new beta: @spectrum-css/[email protected]

Dec 08 '22 19:12 pfulton

New beta release: @spectrum-css/[email protected]

Jan 13 '23 17:01 castastrophe

Apologies for the delay! I've published the latest beta releases:

• @spectrum-css/[email protected]
• @spectrum-css/[email protected]

lerna success published @spectrum-css/button 7.0.0-beta.5
lerna notice 
lerna notice 📦  @spectrum-css/[email protected]
lerna notice === Tarball Contents === 
lerna notice 11.4kB LICENSE                        
lerna notice 29.8kB dist/themes/express.css        
lerna notice 1.8kB  themes/express.css             
lerna notice 50.0kB dist/index-base.css            
lerna notice 31.0kB dist/index-theme.css           
lerna notice 81.0kB dist/index-vars.css            
lerna notice 81.0kB dist/index.css                 
lerna notice 13.0kB index.css                      
lerna notice 29.8kB dist/themes/spectrum.css       
lerna notice 28.3kB themes/spectrum.css            
lerna notice 4.0kB  stories/button.stories.js      
lerna notice 68B    gulpfile.js                    
lerna notice 1.2kB  stories/template.js            
lerna notice 842B   package.json                   
lerna notice 21.6kB CHANGELOG.md                   
lerna notice 314B   README.md                      
lerna notice 7.5kB  metadata/button-accent.yml     
lerna notice 9.1kB  metadata/button-negative.yml   
lerna notice 8.9kB  metadata/button-primary.yml    
lerna notice 9.0kB  metadata/button-secondary.yml  
lerna notice 21.7kB metadata/button-staticcolor.yml
lerna notice === Tarball Details === 
lerna notice name:          @spectrum-css/button                    
lerna notice version:       7.0.0-beta.5                            
lerna notice filename:      spectrum-css-button-7.0.0-beta.5.tgz    
lerna notice package size:  36.5 kB                                 
lerna notice unpacked size: 441.1 kB                                
lerna notice shasum:        75c5ba0fad52cfc776c7e79b9e271e90b66d1b28
lerna notice integrity:     sha512-wTyhJ0zt69eIE[...]rg3w/4yeXfeBw==
lerna notice total files:   21                                      
lerna notice 
lerna http fetch PUT 200 https://registry.npmjs.org/@spectrum-css%2fcommons 1328ms
lerna success published @spectrum-css/commons 4.1.0-beta.0
lerna notice 
lerna notice 📦  @spectrum-css/[email protected]
lerna notice === Tarball Contents === 
lerna notice 11.4kB LICENSE                  
lerna notice 3.5kB  basebutton-coretokens.css
lerna notice 3.4kB  basebutton.css           
lerna notice 1.8kB  overlay-coretokens.css   
lerna notice 626B   package.json             
lerna notice 6.2kB  CHANGELOG.md             
lerna notice 337B   README.md                
lerna notice === Tarball Details === 
lerna notice name:          @spectrum-css/commons                   
lerna notice version:       4.1.0-beta.0                            
lerna notice filename:      spectrum-css-commons-4.1.0-beta.0.tgz   
lerna notice package size:  7.3 kB                                  
lerna notice unpacked size: 27.3 kB                                 
lerna notice shasum:        d7d3c6a0e583e082a2923e6e692bdce07b85ac73
lerna notice integrity:     sha512-9t+5EIlukpTG1[...]kSzmVcBTlvalg==
lerna notice total files:   7                                       
lerna notice 
Successfully published:
 - @spectrum-css/[email protected]
 - @spectrum-css/[email protected]
lerna success published 2 packages

Jan 26 '23 02:01 castastrophe

Apologies for the delay! I've published the latest beta releases:

• @spectrum-css/[email protected]
• @spectrum-css/[email protected]

Full output All good. @castastrophe That unfortunately didn't fix the visual differences in Web components either.

Jan 30 '23 21:01 bernhard-adobe