Update to Spectrum Tokens Beta 17 #757

GarthDB · 2020-06-17T23:43:54Z

Description

I updated the latest Spectrum Tokens package (beta 17) and found it broke a lot of components.
Most likely it's because a bunch of deprecated tokens was deleted. I need to figure out how they were deleted.

Closes issues

Fixes #230
Fixes #517

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.

This pull request is ready to merge.

jluyau · 2020-06-26T00:26:03Z

components/vars/css/components/spectrum-badge.css

-  --spectrum-badge-error-background-color: var(--spectrum-semantic-negative-color-default);
-  --spectrum-badge-info-background-color: var(--spectrum-semantic-informative-color-default);
-  --spectrum-badge-warning-background-color: var(--spectrum-semantic-notice-color-default);
+  --spectrum-badge-fuchsia-l-focus-ring-border-radius-key-focus: var(--spectrum-global-dimension-size-75);


Is it required that the css variables are now a combination of color and size? Was looking at the previous label css and it looked as if there were separate variables for sizing and colors. (Asking as I'm building something for RSPv3)

Hmm, this looks wrong. @GarthDB thoughts?

Any updates on this? @GarthDB @lazd

@jluyau the CSS vars file has the size and color tokens. What's new in spectrum-badge file are the t-shirt sizes. T-shirt sizes are separate from scale (i.e., large, medium). We are going to see a ton of new tokens for each component that gets t-shirt sizing.

Thanks for the update @GarthDB

GarthDB · 2020-08-20T20:28:12Z

* fix: match capitalization with UI kit * fix: change workflow icon size to medium to align with UI kit * fix: align with Action bar UI kit * feat: add migration guide Co-authored-by: Jian Liao <jianliao@adobe.com>

* fix: separate dial from slider * fix: wip fixing dial with latest tokens * fix: closes #801, closes #818

Co-authored-by: Jian Liao <jianliao@adobe.com>

* fix: removed global and deprecated tokens, closes #806 * fix: added height to spectrum-Accordion-itemHeading

* fix: make default Checkbox look correct BREAKING CHANGE: colors change in a way that may be unexpected docs: add docs explaining quiet/emphasized Checkbox * docs: make Quiet/Emphasized information a Migration Guide

…es (#919)

* fix: workflow icon size change to medium * fix: add migration guide Co-authored-by: Jian Liao <jianliao@adobe.com>

* build: fix renamed component names, duplicates * docs: fix icon size in Picker, delete duplicate example * build: fix Dropdown -> Picker naming issues, version numbers * docs: add Picker migration guide * docs: fix migration guide wording * build: show "Unreleased" for renamed components instead of blank

Co-authored-by: Jian Liao <jianliao@adobe.com>

* docs: added migration guide * docs: updated migration guide for a/b switch

* fix: change pagination counter text color to match design * fix: change to use color alias Co-authored-by: Jian Liao <jianliao@adobe.com>

* feat: slider color variant moved to color slider, closes #850 BREAKING CHANGE: Color slider is now a separate component * docs: Update components/slider/metadata/slider.yml Co-authored-by: Larry Davis <lawdavis@adobe.com>

Co-authored-by: Jian Liao <jianliao@adobe.com>

* fix: typography styles for Checkbox, fixes #243 * fix: remove Checkbox and Radio margin, fixes #124 BREAKING CHANGE: Checkbox and Radio no longer have margin on their own, must use FieldGroup * feat: add .spectrum-Example to wrap sub-examples * docs: show all combinations of Checkbox/Radio states, closes #707 * fix: typography styles for Radio, related to #243 * docs: put disabled last * docs: fix Form examples, missing FieldGroup dependency * fix: invalid Radio button text color, fixes #251 * fix: add missing color animation to Checkbox * feat: add margin to items, require --horizontal BREAKING CHANGE: The spectrum-FieldGroup--horizontal is now required for horizontal field groups * feat: remove hit area from Radio/Checkbox

…esolve

Spectrum tokens 17 - Textfield Textarea

* feat: tags contributd by rsp@v3 * fix: move border-radius setting to index.css * fix: add back the margin-inline-end for the tag has icon or avatar * fix: fix truncation example for tag and fix clear button size * fix: remove the margin-left for clearButton * fix: adjust the color to match design for standard tag item * fix: implements the background for clearButton * fix: fix some mismatch between impl and design xd * fix: mix tag with or without icon/avatar * fix: use dna variables for border-shadow and border-size * fix: update dna variable for focus-ring and border-size * Performance for focus-ring transition box-shadow is hard, opacity is easy * build(deps-dev): bump prismjs from 1.17.1 to 1.21.0 Bumps [prismjs](https://github.com/PrismJS/prism) from 1.17.1 to 1.21.0. - [Release notes](https://github.com/PrismJS/prism/releases) - [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md) - [Commits](PrismJS/prism@v1.17.1...v1.21.0) Signed-off-by: dependabot[bot] <support@github.com> * fix: fix the issues caused by component rename (#778) * fix: fix the issues caused by component rename * fix: fix package security vulnerabilities Co-authored-by: Jian Liao <jianliao@adobe.com> * test: update VRT instruction documentation (#772) * test: update VRT instruction documentation * docs: fixed typo Co-authored-by: Jian Liao <jianliao@adobe.com> Co-authored-by: Garth Braithwaite <garthdb@gmail.com> * fix: high contrast mode for checkboxes. (#791) partly resolves #786 This will not work in IE11 or with our legacy build. It must support CSS vars. Co-authored-by: Milan Brkic <milan.brkic1@yahoo.com> Co-authored-by: Jian Liao <jianliao@adobe.com> Co-authored-by: Rob Snow <rsnow@adobe.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jian Liao <jianliao@users.noreply.github.com> Co-authored-by: Aaron <misterbrownlee@users.noreply.github.com> Co-authored-by: James Nurthen <jnurthen@users.noreply.github.com>

…to spectrum-tokens-17

adobe-spectrum-bot · 2020-09-22T23:05:46Z

VRT successfully! 🎊

View the VRT result

adobe-spectrum-bot · 2020-09-22T23:40:22Z

VRT successfully! 🎊

View the VRT result

adobe-spectrum-bot · 2020-09-23T16:12:40Z

Spectrum CSS documentation build successfully! 🎉

View the documentation

adobe-spectrum-bot · 2020-09-23T16:25:49Z

VRT successfully! 🎊

View the VRT result

fix: updating tokens beta with breaking changes

9043417

jluyau reviewed Jun 26, 2020

View reviewed changes

GarthDB changed the base branch from master to main July 21, 2020 17:17

GarthDB added 14 commits July 22, 2020 19:47

Merge branch 'main' into spectrum-tokens-17

989f7ff

fix!: renamed toggle to switch; removed ab variant

73e3a89

fix: renamed dropdown to picker

6fc60cb

fix: removed deprecated avatar tokens

1ea0190

fix: removed deprecated tokens in button

281027d

fix: removed deprecated tokens in dialog

ebbe6c1

fix: removed deprecated tokens from searchWithin

d97b026

fix: removed deprecated tokens from underlay/overlay

cf15784

fix: removed deprecated tokens from toast

16a7e5b

fix: removed deprecated tokens from tabs and tags

1e543e4

fix: replaced deprecated dialog tokens

012f083

fix: replacing deprecated tokens from menu

6281862

fix: wip fix more components

b74dbb8

fix: removed more deprecations

70dd116

GarthDB and others added 10 commits August 20, 2020 15:20

fix: updated deprecated tokens

1286203

fix: removed deprecated tokens from actiongroup

4dfe577

fix: replaced deprecated tokens from table

a472666

test: update VRT scenarios and component dependency map

d0bb2ea

fix: global typography color added back

4a2f78f

Spectrum tokens 17 for Action Bar (#888)

86d4370

* fix: match capitalization with UI kit * fix: change workflow icon size to medium to align with UI kit * fix: align with Action bar UI kit * feat: add migration guide Co-authored-by: Jian Liao <jianliao@adobe.com>

Spectrum tokens 17 dial (#879)

d4e0db5

* fix: separate dial from slider * fix: wip fixing dial with latest tokens * fix: closes #801, closes #818

fix: change previous/next icon size (#893)

5494f44

Co-authored-by: Jian Liao <jianliao@adobe.com>

Spectrum tokens 17 accordion (#886)

9e8f3c7

* fix: removed global and deprecated tokens, closes #806 * fix: added height to spectrum-Accordion-itemHeading

fix: positioning clear button in searchwithin, closes #880

0399609

GarthDB force-pushed the spectrum-tokens-17 branch from 533a51b to 0399609 Compare September 9, 2020 14:30

GarthDB mentioned this pull request Sep 14, 2020

Misalignments caused by new T-shirt sizing UI icons #699

Closed

17 tasks

lazd and others added 20 commits September 16, 2020 12:58

Spectrum tokens 17 Checkbox (#908)

c8db570

* fix: make default Checkbox look correct BREAKING CHANGE: colors change in a way that may be unexpected docs: add docs explaining quiet/emphasized Checkbox * docs: make Quiet/Emphasized information a Migration Guide

docs: fix ActionButton and CycleButton icon sizes, add migration guid…

aca651a

…es (#919)

build: fix divider version numbers

7a62de4

Spectrum tokens 17 tabs (#921)

347b74e

* fix: workflow icon size change to medium * fix: add migration guide Co-authored-by: Jian Liao <jianliao@adobe.com>

fix: card markup update for doc dev resource card

3ecbb65

fix: wip

32120c5

chore: fixing new-lines for Overlay (872)

c897c23

fix: component markup and component dependencies of the page (#930)

68c726c

Co-authored-by: Jian Liao <jianliao@adobe.com>

fix: tooltip with an icon on the left (#929)

d696b2c

Co-authored-by: Jian Liao <jianliao@adobe.com>

Spectrum tokens 17 switch (#925)

645d637

* docs: added migration guide * docs: updated migration guide for a/b switch

Spectrum tokens 17 - Pagination (#903)

4157b27

* fix: change pagination counter text color to match design * fix: change to use color alias Co-authored-by: Jian Liao <jianliao@adobe.com>

fix: adjusted textfield icon placement with updated tokens. closes #860

03e2cde

fix: ramp slider (#829) (#923)

c539411

* feat: slider color variant moved to color slider, closes #850 BREAKING CHANGE: Color slider is now a separate component * docs: Update components/slider/metadata/slider.yml Co-authored-by: Larry Davis <lawdavis@adobe.com>

fix: change workflow icon size to medium for most of the examples (#962)

db7b8b2

Co-authored-by: Jian Liao <jianliao@adobe.com>

Merge branch 'spectrum-tokens-17-textfield' into spectrum-tokens-17-r…

019f5fe

…esolve

Merge pull request #961 from adobe/spectrum-tokens-17-textfield

99e11eb

Spectrum tokens 17 - Textfield Textarea

fix: resolving conflicts with main

8cafffa

GarthDB marked this pull request as ready for review September 22, 2020 22:39

Merge branch 'spectrum-tokens-17' of github.com:adobe/spectrum-css in…

a3cb57a

…to spectrum-tokens-17

test: fix truncation test with updated icon sizing

689b0cb

fix: security vulnerability introduced by third-party deps

f4498d6

GarthDB merged commit 390ed13 into main Sep 23, 2020

GarthDB deleted the spectrum-tokens-17 branch September 23, 2020 17:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update to Spectrum Tokens Beta 17 #757

Update to Spectrum Tokens Beta 17 #757

Uh oh!

GarthDB commented Jun 17, 2020 •

edited

Loading

Uh oh!

jluyau Jun 26, 2020 •

edited

Loading

Uh oh!

lazd Jun 26, 2020

Uh oh!

jluyau Jul 16, 2020

Uh oh!

GarthDB Jul 21, 2020

Uh oh!

jluyau Jul 23, 2020

Uh oh!

GarthDB commented Aug 20, 2020 •

edited

Loading

Uh oh!

adobe-spectrum-bot commented Sep 22, 2020

Uh oh!

adobe-spectrum-bot commented Sep 22, 2020

Uh oh!

adobe-spectrum-bot commented Sep 23, 2020

Uh oh!

adobe-spectrum-bot commented Sep 23, 2020

Uh oh!

Uh oh!

Update to Spectrum Tokens Beta 17 #757

Update to Spectrum Tokens Beta 17 #757

Uh oh!

Conversation

GarthDB commented Jun 17, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Closes issues

To-do list

Uh oh!

jluyau Jun 26, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lazd Jun 26, 2020

Choose a reason for hiding this comment

Uh oh!

jluyau Jul 16, 2020

Choose a reason for hiding this comment

Uh oh!

GarthDB Jul 21, 2020

Choose a reason for hiding this comment

Uh oh!

jluyau Jul 23, 2020

Choose a reason for hiding this comment

Uh oh!

GarthDB commented Aug 20, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adobe-spectrum-bot commented Sep 22, 2020

Uh oh!

adobe-spectrum-bot commented Sep 22, 2020

Uh oh!

adobe-spectrum-bot commented Sep 23, 2020

Uh oh!

adobe-spectrum-bot commented Sep 23, 2020

Uh oh!

Uh oh!

GarthDB commented Jun 17, 2020 •

edited

Loading

jluyau Jun 26, 2020 •

edited

Loading

GarthDB commented Aug 20, 2020 •

edited

Loading