Use new semantic color names (info, confirm, notify and alert) #1431

amelako · 2022-02-14T12:52:16Z

Purpose

In order to match the new naming of colors and variants in the Notification components, added info, confirm, notify and alert colors to design tokens.

Approach and changes

Added info, alert, notify and confirm types in design tokens.
Updated light.ts with the new colors.
Replaced the warning, success and danger color usages in circuit ui with the new ones.

Definition of done

sumup-clark · 2022-02-14T12:52:18Z

Hey @amelako,
we are super excited that you are contributing! 🎉There's one more thing you need to do. Please accept our Contributor License Agreement. It helps you and us to collaborate on clear terms and focus on what we love most: code.

Thanks!

vercel · 2022-02-14T12:52:18Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sumup/oss-circuit-ui/CGbhppwsB4fGUT6gyaBhBeFAnZLe
✅ Preview: https://oss-circuit-ui-git-update-design-token-colors-sumup.vercel.app

codecov · 2022-02-14T12:55:23Z

Codecov Report

Merging #1431 (2334b23) into main (60d57a8) will decrease coverage by 0.00%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #1431      +/-   ##
==========================================
- Coverage   92.34%   92.33%   -0.01%     
==========================================
  Files         193      193              
  Lines        3892     3889       -3     
  Branches     1215     1213       -2     
==========================================
- Hits         3594     3591       -3     
  Misses        279      279              
  Partials       19       19

Impacted Files	Coverage Δ
packages/circuit-ui/components/Badge/Badge.tsx	`100.00% <ø> (ø)`
packages/circuit-ui/components/Body/Body.tsx	`97.22% <ø> (ø)`
...ages/circuit-ui/components/BodyLarge/BodyLarge.tsx	`100.00% <ø> (ø)`
packages/circuit-ui/components/Button/Button.tsx	`93.84% <ø> (ø)`
...ckages/circuit-ui/components/Checkbox/Checkbox.tsx	`96.96% <ø> (ø)`
...es/circuit-ui/components/ImageInput/ImageInput.tsx	`86.45% <ø> (ø)`
...cuit-ui/components/InlineMessage/InlineMessage.tsx	`94.73% <ø> (ø)`
packages/circuit-ui/components/Input/Input.tsx	`90.76% <ø> (ø)`
...mponents/NotificationInline/NotificationInline.tsx	`92.72% <ø> (-0.13%)`	⬇️
...components/NotificationToast/NotificationToast.tsx	`89.36% <ø> (-0.23%)`	⬇️
... and 5 more

amelako

@robinmetral updated most of the places in circuit ui as well.
There are few things I would like to clear up:

Old Notification component and InlineMessage have the danger/success/warning variants. I did update the colors, which now contradicts with the naming a bit. But I don't see the point of changing the variant naming to match since these are gonna be deprecated anyway. Let me know if you agree?
Body component has variants success and error as well as Badge success, warning and danger. I just changed the colors usage there to match the new ones. Let me know if you have any thoughts on the variants cause that would mean a bigger change then.
Let me know if you have any other thoughts or ideas. Thank :)

robinmetral · 2022-02-14T13:14:11Z

Old Notification component and InlineMessage have the danger/success/warning variants. I did update the colors, which now contradicts with the naming a bit. But I don't see the point of changing the variant naming to match since these are gonna be deprecated anyway. Let me know if you agree?

Makes sense, let's keep it 👍

Body component has variants success and error as well as Badge success, warning and danger. I just changed the colors usage there to match the new ones. Let me know if you have any thoughts on the variants cause that would mean a bigger change then.

Ah, that's true. Let's keep it for now and handle the renaming in the next major (maybe you can add a comment in there to remind us).

packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap

packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap

changeset-bot · 2022-02-14T13:30:14Z

🦋 Changeset detected

Latest commit: 2334b23

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@sumup/design-tokens	Minor
@sumup/circuit-ui	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

connor-baer · 2022-02-14T19:49:06Z

Body component has variants success and error as well as Badge success, warning and danger. I just changed the colors usage there to match the new ones. Let me know if you have any thoughts on the variants cause that would mean a bigger change then.

Ah, that's true. Let's keep it for now and handle the renaming in the next major (maybe you can add a comment in there to remind us).

You could add the new variants already and deprecate the old ones, would make the migration easier.

robinmetral · 2022-02-14T20:57:02Z

Body component has variants success and error as well as Badge success, warning and danger. I just changed the colors usage there to match the new ones. Let me know if you have any thoughts on the variants cause that would mean a bigger change then.

Ah, that's true. Let's keep it for now and handle the renaming in the next major (maybe you can add a comment in there to remind us).

You could add the new variants already and deprecate the old ones, would make the migration easier.

That's true—let's handle it in a separate PR to keep this one's scope small 🙂

robinmetral · 2022-02-14T20:57:45Z

Body component has variants success and error as well as Badge success, warning and danger. I just changed the colors usage there to match the new ones. Let me know if you have any thoughts on the variants cause that would mean a bigger change then.

Ah, that's true. Let's keep it for now and handle the renaming in the next major (maybe you can add a comment in there to remind us).

You could add the new variants already and deprecate the old ones, would make the migration easier.

That's true—let's handle it in a separate PR to keep this one's scope small 🙂

Nested quote replies FTW

robinmetral

Also needs a couple changesets (for Circuit and the tokens), but looks good to go ✨

+ I like Connor's idea of immediately adding the new variant names to the Body, BodyLarge and Badge, and deprecating the old variant names. Let's split it into a separate PR

++ You could also make this another entry in the draft migration guide from v4.x to v5 (since that's when we'll remove the old variant names)

packages/circuit-ui/components/NotificationInline/NotificationInline.tsx

packages/design-tokens/themes/light.ts

.changeset/seven-books-tan.md

.changeset/wicked-timers-bake.md

robinmetral

💯

robinmetral · 2022-02-15T11:15:45Z

The Chromatic change is unexpected, I'm re-running the job to see if there was a hiccup

github-actions bot added 🗂 circuit-ui 🗂 design-tokens labels Feb 14, 2022

amelako commented Feb 14, 2022

View reviewed changes

connor-baer reviewed Feb 14, 2022

View reviewed changes

packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap Outdated Show resolved Hide resolved

packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap Outdated Show resolved Hide resolved

vercel bot deployed to Preview February 14, 2022 13:30 View deployment

vercel bot deployed to Preview February 14, 2022 17:39 View deployment

amelako marked this pull request as ready for review February 14, 2022 17:45

amelako requested a review from a team as a code owner February 14, 2022 17:45

amelako requested review from robinmetral and removed request for a team February 14, 2022 17:45

connor-baer approved these changes Feb 14, 2022

View reviewed changes

robinmetral reviewed Feb 14, 2022

View reviewed changes

packages/circuit-ui/components/NotificationInline/NotificationInline.tsx Show resolved Hide resolved

packages/design-tokens/themes/light.ts Outdated Show resolved Hide resolved

amelako added 5 commits February 15, 2022 09:57

update design token colors

b64d170

updates of the colors in circuit ui

913cb4c

update snapshots

c08ef13

add TODO for Badge and Body component

6cde79c

add shouldForwardProp to ValidationHint

468bca2

amelako force-pushed the update-design-token-colors branch from 71c13f9 to 468bca2 Compare February 15, 2022 10:10

vercel bot deployed to Preview February 15, 2022 10:10 View deployment

deprecate old colors

6f6a687

vercel bot deployed to Preview February 15, 2022 10:16 View deployment

:add changeset

54c0964

vercel bot deployed to Preview February 15, 2022 10:44 View deployment

connor-baer reviewed Feb 15, 2022

View reviewed changes

.changeset/seven-books-tan.md Outdated Show resolved Hide resolved

.changeset/wicked-timers-bake.md Outdated Show resolved Hide resolved

Apply suggestions from code review

2334b23

connor-baer approved these changes Feb 15, 2022

View reviewed changes

vercel bot deployed to Preview February 15, 2022 10:48 View deployment

robinmetral approved these changes Feb 15, 2022

View reviewed changes

robinmetral changed the title ~~Add design token colors (info, confirm, notify and alert)~~ Use new semantic color names (info, confirm, notify and alert) Feb 15, 2022

amelako merged commit 3f9585a into main Feb 15, 2022

amelako deleted the update-design-token-colors branch February 15, 2022 11:52

github-actions bot mentioned this pull request Feb 15, 2022

Version Packages #1434

Merged

This was referenced Feb 16, 2022

Version Packages #1438

Merged

Add new semantic variant names to the Badge and Body components #1440

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use new semantic color names (info, confirm, notify and alert) #1431

Use new semantic color names (info, confirm, notify and alert) #1431

amelako commented Feb 14, 2022 •

edited

Loading

sumup-clark bot commented Feb 14, 2022

vercel bot commented Feb 14, 2022 •

edited

Loading

codecov bot commented Feb 14, 2022 •

edited

Loading

amelako left a comment

robinmetral commented Feb 14, 2022

changeset-bot bot commented Feb 14, 2022 •

edited

Loading

connor-baer commented Feb 14, 2022

robinmetral commented Feb 14, 2022

robinmetral commented Feb 14, 2022

robinmetral left a comment

robinmetral left a comment

robinmetral commented Feb 15, 2022

Use new semantic color names (info, confirm, notify and alert) #1431

Use new semantic color names (info, confirm, notify and alert) #1431

Conversation

amelako commented Feb 14, 2022 • edited Loading

Purpose

Approach and changes

Definition of done

sumup-clark bot commented Feb 14, 2022

vercel bot commented Feb 14, 2022 • edited Loading

codecov bot commented Feb 14, 2022 • edited Loading

Codecov Report

amelako left a comment

Choose a reason for hiding this comment

robinmetral commented Feb 14, 2022

changeset-bot bot commented Feb 14, 2022 • edited Loading

🦋 Changeset detected

connor-baer commented Feb 14, 2022

robinmetral commented Feb 14, 2022

robinmetral commented Feb 14, 2022

robinmetral left a comment

Choose a reason for hiding this comment

robinmetral left a comment

Choose a reason for hiding this comment

robinmetral commented Feb 15, 2022

amelako commented Feb 14, 2022 •

edited

Loading

vercel bot commented Feb 14, 2022 •

edited

Loading

codecov bot commented Feb 14, 2022 •

edited

Loading

changeset-bot bot commented Feb 14, 2022 •

edited

Loading