feat(statuslight)!: migrate statuslight to core tokens by yosevu · Pull Request #1495 · adobe/spectrum-css

yosevu · 2022-08-09T22:57:36Z

Description

Move skin.css styles to index.css
Update windows high contrast mode styles
Update semantic and non-semantic color examples to align with batch 2 XD file
Remove deprecated colors
Remove disabled state based on note in batch 2 XD file

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

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 · 2022-08-09T23:01:50Z

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

bernhard-adobe

We might have to remove some of those log files and the local lint-settings.
Also do we maybe miss a high-contrast mode here for the Status-lights?

Otherwise great work!

bernhard-adobe · 2022-08-10T03:43:19Z

@@ -0,0 +1,139 @@
+[06:01:02.264] Global cache location '/Users/yosevu/Library/Caches/typescript/4.7', safe file path '/users/yosevu/.nvm/versions/node/v14.17.0/lib/node_modules/typescript/lib/typingsafelist.json', types map path /users/yosevu/.nvm/versions/node/v14.17.0/lib/node_modules/typescript/lib/typesmap.json


Can you please remove these log-files from being added to the repo?

Oops, I didn't realize I committed them.

bernhard-adobe · 2022-08-10T03:44:02Z

@@ -0,0 +1,21 @@
+extends: stylelint-config-standard


I think this should maybe added to the local .stylelintrc file on your computer and maybe not to the repo

Removed. I added this accidentally with the my .log

bernhard-adobe · 2022-08-10T03:47:23Z

+.spectrum-StatusLight {
+  /* Static tokens */
+  --spectrum-statuslight-corner-radius: 50%;
+  --spectrum-statuslight-font-weight: 400;


we could use here for now something like --spectrum-font-weight-regular: 400; https://github.com/adobe/spectrum-css/blob/main/components/tokens/custom-spectrum/custom-vars.css#L32

bernhard-adobe · 2022-08-10T22:21:07Z

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

pfulton

This looks great, @yosevu - thanks for your work on this.

pfulton · 2022-08-16T20:13:26Z

Released:
@spectrum-css/statuslight@5.0.0-beta.0

pfulton · 2022-08-26T14:26:02Z

@yosevu - there was a core tokens release that will affect the colors for StatusLight. The CSS tokens package for those changes will be in: - @spectrum-css/tokens@1.0.7.

There's also a Jira ticket about this: https://jira.corp.adobe.com/browse/CSS-240

yosevu · 2022-08-29T10:41:49Z

@yosevu - there was a core tokens release that will affect the colors for StatusLight. The CSS tokens package for those changes will be in: - @spectrum-css/tokens@1.0.7.

There's also a Jira ticket about this: https://jira.corp.adobe.com/browse/CSS-240

I updated tokens to 1.0.7 @pfulton

pfulton · 2022-08-29T14:14:27Z

Thanks!

pfulton · 2022-08-29T14:23:37Z

Released:
5.0.0-beta.1

pfulton · 2022-08-29T14:31:07Z

FYI, I bumped the version number to the latest beta release in the Web Components PR.

BREAKING CHANGE: migrate statuslight to core tokens

This is based on a comment in the batch 1 XD file

yosevu changed the title ~~Yosevu/css 115 migrate statuslight to core tokens~~ feat(statuslight)!: migrate statuslight to core tokens Aug 9, 2022

github-actions Bot temporarily deployed to pull request August 9, 2022 23:01 Inactive

yosevu marked this pull request as ready for review August 9, 2022 23:05

bernhard-adobe added the Component: Status Light label Aug 10, 2022

bernhard-adobe self-requested a review August 10, 2022 03:33

bernhard-adobe reviewed Aug 10, 2022

View reviewed changes

yosevu force-pushed the yosevu/css-115-migrate-statuslight-to-core-tokens branch from 50ed022 to a073ba1 Compare August 10, 2022 13:24

github-actions Bot temporarily deployed to pull request August 10, 2022 13:29 Inactive

yosevu commented Aug 10, 2022

View reviewed changes

Comment thread components/statuslight/index.css

github-actions Bot temporarily deployed to pull request August 15, 2022 13:26 Inactive

pfulton approved these changes Aug 16, 2022

View reviewed changes

Comment thread components/statuslight/index.css

github-actions Bot temporarily deployed to pull request August 16, 2022 20:08 Inactive

pfulton added the released-beta label Aug 16, 2022

yosevu force-pushed the yosevu/css-115-migrate-statuslight-to-core-tokens branch from 23d4f4c to f2b9497 Compare August 29, 2022 09:35

github-actions Bot temporarily deployed to pull request August 29, 2022 09:39 Inactive

github-actions Bot temporarily deployed to pull request August 29, 2022 14:21 Inactive

pfulton added the pending-swc-validation label Aug 30, 2022

yosevu mentioned this pull request Sep 7, 2022

refactor(status-light): use core tokens adobe/spectrum-web-components#2516

Merged

13 tasks

Yosevu Kilonzo added 4 commits September 21, 2022 15:17

feat(statuslight)!: migrate statuslight to core tokens

a0a477a

BREAKING CHANGE: migrate statuslight to core tokens

feat: update index.css styles

b7a315a

chore: remove disabled state

eaab326

This is based on a comment in the batch 1 XD file

feat: colors

071f5fb

Yosevu Kilonzo and others added 16 commits September 21, 2022 15:17

feat: add corner radius

f5d0b5d

fix: update semantic colors

3a49a45

chore: remove disable state

9bd382b

chore: remove deprecated active state

a881101

fix: adjust content spacing

6e7ef82

fix: add missing colors

80074c2

fix: adjust dot to top spacing with calc

b84b361

refactor: organize colors

30ee074

feat: add bottom to label spacing

2e155c5

feat: add highcontrast and modifier tokens

ac77743

chore: remove skin.css

a241d9b

chore(statuslight): manual version bump for beta release

df300cb

chore: update tokens to 1.0.7

3a1216f

refactor: use semantic color aliases

4d5d759

refactor: use nonsemanti aslias colors tokens

5ec8a5e

chore(statuslight): manual version bump for beta release

15228c3

pfulton force-pushed the yosevu/css-115-migrate-statuslight-to-core-tokens branch from d117796 to 15228c3 Compare September 21, 2022 19:19

chore(statuslight): use latest tokens package and fix casing

6872fc6

github-actions Bot temporarily deployed to pull request September 21, 2022 19:31 Inactive

pfulton merged commit 3dc991d into main Sep 21, 2022

pfulton deleted the yosevu/css-115-migrate-statuslight-to-core-tokens branch September 21, 2022 19:35

This was referenced Sep 25, 2024

docs(statuslight): docs to storybook migration #3152

Merged

fix(statuslight): add disabled styles #3153

Closed

		@@ -0,0 +1,139 @@
		[06:01:02.264] Global cache location '/Users/yosevu/Library/Caches/typescript/4.7', safe file path '/users/yosevu/.nvm/versions/node/v14.17.0/lib/node_modules/typescript/lib/typingsafelist.json', types map path /users/yosevu/.nvm/versions/node/v14.17.0/lib/node_modules/typescript/lib/typesmap.json

Conversation

yosevu commented Aug 9, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How and where has this been tested?

Screenshots

To-do list

Uh oh!

github-actions Bot commented Aug 9, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bernhard-adobe left a comment

Choose a reason for hiding this comment

Uh oh!

bernhard-adobe Aug 10, 2022

Choose a reason for hiding this comment

Uh oh!

yosevu Aug 10, 2022

Choose a reason for hiding this comment

Uh oh!

bernhard-adobe Aug 10, 2022

Choose a reason for hiding this comment

Uh oh!

yosevu Aug 10, 2022

Choose a reason for hiding this comment

Uh oh!

bernhard-adobe Aug 10, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bernhard-adobe commented Aug 10, 2022

Uh oh!

pfulton left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

pfulton commented Aug 16, 2022

Uh oh!

pfulton commented Aug 26, 2022

Uh oh!

yosevu commented Aug 29, 2022

Uh oh!

pfulton commented Aug 29, 2022

Uh oh!

pfulton commented Aug 29, 2022

Uh oh!

pfulton commented Aug 29, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yosevu commented Aug 9, 2022 •

edited

Loading

github-actions Bot commented Aug 9, 2022 •

edited

Loading