Update `Badge` tokens #11275

yurm04 · 2023-12-04T19:44:28Z

WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1066

WHAT is this pull request doing?

Updated semantic tokens in polaris-tokens
Creating two new badge specialty tokens
Updating Badge to use new tokens

Before	After

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

Tested a snapshot
Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

lgriffee · 2023-12-04T22:43:53Z

Adding this comment just for project documentation purposes:

Before	After

lgriffee

✨🎉

polaris-tokens/src/themes/base/color.ts

.changeset/light-flowers-pay.md

Co-authored-by: Laura Griffee <[email protected]>

…olaris into ye/update-badge-tokens

heyjoethomas

The default badge should not be teal. This screen should show each badge and value.

bernardojoaogarcia · 2023-12-06T19:17:56Z

It seems like the default badge and the enabled badge got the same token changes as the new badge. We need to create 2 tokens for the new badge with the teal color values, and then swap the fill-transparent-secondary and the text-secondary tokens that are specifically mapped to the new badge. No changes are being made to the default badge or the enabled badge.

bernardojoaogarcia · 2023-12-06T19:23:03Z

Token value changes

Info badge
fill-info-secondary Azure 4 -> Azure 5
text-info Azure 14 -> Azure 15

Success badge
fill-success-secondary Green 3 -> Green 4

Caution badge
fill-caution-secondary Yellow 4 -> Yellow 5

Critical badge
fill-critical-secondary Red 6 -> Red 7

Create new token

New Badge (Specialty tokens)
*create 2 new specialty tokens for the new badge:
badge-new-bg-fill = Teal 5
badge-new-text = Teal 14

Swap New badge tokens

fill-transparent-secondary -> badge-new-bg-fill
text-secondary -> badge-new-text

yurm04 · 2023-12-06T22:56:11Z

Sorry gang, I misinterpreted the original issue. I read everything as "new badge tokens" instead of "New Badge" tokens and updated everything to the new tokens instead of just the toneNew class. This is not the first time i've made that mistake and it probably won't be the last 🤦 Thanks for catching

Updated PR and screenshots in the description.

alex-page

Seems legit to me. Just would get @bernardojoaogarcia to double check the design changes. Awesome work @yurm04 🚀

bernardojoaogarcia

Thanks @yurm04 ✨🚀

another UXer approved

yurm04 · 2023-12-08T21:17:41Z

thanks, @bernardojoaogarcia! could you also review and accept the changes in chromatic? I think that's the last task before we can merge this in

bernardojoaogarcia · 2023-12-08T21:58:54Z

@yurm04 Looking through some of the changes in chromatic I noticed that we are currently using the new badge on the Nav! I’m pretty sure we wouldn’t want this type of styling in the nav, so I need to first assess whether 1. we should change the nav badges to default badges or 2. revert the new badge tokens to the original color and keep them visually the same as the default badges. Let's figure out the new badge first before proceeding. This flew under the radar because they currently have the exact same visual representation. @yesenia-perezcruz @sarahill

bernardojoaogarcia · 2023-12-12T20:17:48Z

After chatting with @sarahill, we figured it’s probably a good call to ditch the new badge tweaks in this PR and just roll back to the original tokens it used. The new badge requires more digging and possibly a new Gen3 pattern to go with it that holistically covers New features. @yurm04

bernardojoaogarcia · 2023-12-12T20:20:47Z

We should just omit steps 2 & 3 of this issue :).

yurm04 · 2023-12-13T16:56:41Z

@bernardojoaogarcia I updated with the new changes for your review

bernardojoaogarcia

Nice, thank you! @yurm04 ✨ 🙏

lgriffee

✨

@yurm04

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Minor Changes - [#11275](#11275) [`4a7e090bc`](4a7e090) Thanks [@yurm04](https://github.com/yurm04)! - Updated semantic tokens `fill-info-secondary`, `text-info`, `fill-success-secondary`, `fill-caution-secondary`, `fill-critical-secondary`. - [#10958](#10958) [`5c183e0e1`](5c183e0) Thanks [@mrcthms](https://github.com/mrcthms)! - Added a live region to the `Page` `Header` to announce the `title` after navigation changes ### Patch Changes - [#11338](#11338) [`4ddba49c4`](4ddba49) Thanks [@alex-page](https://github.com/alex-page)! - `<Toast>` Fix icon color to properly inherit the parent color - Updated dependencies \[[`4a7e090bc`](4a7e090)]: - @shopify/[email protected] ## @shopify/[email protected] ### Minor Changes - [#11275](#11275) [`4a7e090bc`](4a7e090) Thanks [@yurm04](https://github.com/yurm04)! - Updated semantic tokens `fill-info-secondary`, `text-info`, `fill-success-secondary`, `fill-caution-secondary`, `fill-critical-secondary`. ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`4a7e090bc`](4a7e090)]: - @shopify/[email protected] - @shopify/[email protected] ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`4a7e090bc`](4a7e090)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`4a7e090bc`](4a7e090)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - [#11334](#11334) [`ebff4315b`](ebff431) Thanks [@sarahill](https://github.com/sarahill)! - Added color token documentation - Updated dependencies \[[`4ddba49c4`](4ddba49), [`4a7e090bc`](4a7e090), [`5c183e0e1`](5c183e0)]: - @shopify/[email protected] - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

### WHY are these changes introduced? Fixes https://github.com/Shopify/polaris-internal/issues/1066  ### WHAT is this pull request doing? * Updated semantic tokens in `polaris-tokens` * Creating two new `badge` specialty tokens * Updating `Badge` to use new tokens | Before | After | | -- | -- | |![capture-448f740d](https://github.com/Shopify/polaris/assets/21976492/051b4a56-ffc6-45d6-86c7-a0d88ea13eb2)|![capture-c81386f5](https://github.com/Shopify/polaris/assets/4642404/8eb43d0d-5a96-4bde-a1e7-f9c2139cb391)|  ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: Laura Griffee <[email protected]>

Yuraima Estevez added 3 commits December 4, 2023 13:22

update foundation tokens

782f05d

Update to new badge tokens

c79db48

changeset

d688078

yurm04 requested review from a team and heyjoethomas December 4, 2023 19:44

lgriffee added the #gsd:37811 label Dec 4, 2023

lgriffee approved these changes Dec 4, 2023

View reviewed changes

Yuraima Estevez and others added 3 commits December 5, 2023 12:23

Update .changeset/light-flowers-pay.md

e10ebc3

Co-authored-by: Laura Griffee <[email protected]>

update to alpha order

79a5d4e

Merge branch 'ye/update-badge-tokens' of https://github.com/Shopify/p…

d653534

…olaris into ye/update-badge-tokens

heyjoethomas previously requested changes Dec 5, 2023

View reviewed changes

revert changes to other badges and update only .toneNew

23ea040

yurm04 requested review from heyjoethomas and bernardojoaogarcia December 6, 2023 22:56

alex-page approved these changes Dec 7, 2023

View reviewed changes

bernardojoaogarcia approved these changes Dec 7, 2023

View reviewed changes

aaronccasanova approved these changes Dec 8, 2023

View reviewed changes

Yuraima Estevez added 3 commits December 13, 2023 10:53

remove New Badge color tokens

5ee37b8

revert updates to .tonNew in Badge

4d2f023

update changeset

67f9ae5

yurm04 requested a review from alex-page December 13, 2023 16:55

yurm04 requested review from lgriffee, bernardojoaogarcia and aaronccasanova December 13, 2023 16:55

bernardojoaogarcia approved these changes Dec 13, 2023

View reviewed changes

lgriffee approved these changes Dec 13, 2023

View reviewed changes

yurm04 merged commit 4a7e090 into main Dec 13, 2023
8 checks passed

yurm04 deleted the ye/update-badge-tokens branch December 13, 2023 19:07

shopify-github-actions-access bot mentioned this pull request Dec 13, 2023

Version Packages #11335

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update `Badge` tokens #11275

Update `Badge` tokens #11275

yurm04 commented Dec 4, 2023 •

edited

Loading

lgriffee commented Dec 4, 2023 •

edited

Loading

lgriffee left a comment

heyjoethomas left a comment

bernardojoaogarcia commented Dec 6, 2023

bernardojoaogarcia commented Dec 6, 2023 •

edited

Loading

yurm04 commented Dec 6, 2023

alex-page left a comment

bernardojoaogarcia left a comment

yurm04 commented Dec 8, 2023

bernardojoaogarcia commented Dec 8, 2023

bernardojoaogarcia commented Dec 12, 2023 •

edited

Loading

bernardojoaogarcia commented Dec 12, 2023 •

edited

Loading

yurm04 commented Dec 13, 2023

bernardojoaogarcia left a comment

lgriffee left a comment

Update Badge tokens #11275

Update Badge tokens #11275

Conversation

yurm04 commented Dec 4, 2023 • edited Loading

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

lgriffee commented Dec 4, 2023 • edited Loading

lgriffee left a comment

Choose a reason for hiding this comment

heyjoethomas left a comment

Choose a reason for hiding this comment

bernardojoaogarcia commented Dec 6, 2023

bernardojoaogarcia commented Dec 6, 2023 • edited Loading

yurm04 commented Dec 6, 2023

alex-page left a comment

Choose a reason for hiding this comment

bernardojoaogarcia left a comment

Choose a reason for hiding this comment

yurm04 commented Dec 8, 2023

bernardojoaogarcia commented Dec 8, 2023

bernardojoaogarcia commented Dec 12, 2023 • edited Loading

bernardojoaogarcia commented Dec 12, 2023 • edited Loading

yurm04 commented Dec 13, 2023

bernardojoaogarcia left a comment

Choose a reason for hiding this comment

lgriffee left a comment

Choose a reason for hiding this comment

Update `Badge` tokens #11275

Update `Badge` tokens #11275

yurm04 commented Dec 4, 2023 •

edited

Loading

lgriffee commented Dec 4, 2023 •

edited

Loading

bernardojoaogarcia commented Dec 6, 2023 •

edited

Loading

bernardojoaogarcia commented Dec 12, 2023 •

edited

Loading

bernardojoaogarcia commented Dec 12, 2023 •

edited

Loading