style(Tag): Update Tag colors #2911

LinKCoding · 2024-07-20T02:41:11Z

Overview

Updates tags to use the correct color tokens.
Current implementation of tags somewhat uses ColorMode and needs to invert the colors to work.

Major Changes:

removed DismissButton from TagWrapper
TagWrapper => TagLabelWrapper
^ necessary to remove the background behind DimissButton
Tag is no longer a Background, is now a Box
Changed the BaseButton to an IconButton (to gain access to ToolTip properties)
The gray variant should have updated colors (and for hover state too)

Updates tags to use the correct color tokens.

PR Checklist

Related to designs: https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=46539-40954&m=dev
Related to JIRA ticket: GM-778
I have run this code to verify it works
This PR includes unit tests for the code change
This PR includes testing instructions tests for the code change
The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Go to the Storybook preview and the tags page ?path=/docs/atoms-tag--tag-variants
Look over the tags implementation, compare against the figma
—
Mono
Go to the tengu preview env
Go to Pricing > Individuals > select "Try Pro for free"
Create an account
At checkout, click on the "Have a promo code?" link
Add in test50
Check that the tag renders correctly.
—
Monolith
go to the preview (without portal app), log in as an admin
Go to the admin page and create a test user that has a Pro subscription + billed monthly (you can also use this link:
https://pr-38096-monolith.dev-eks.codecademy.com/admin/test_user?prefill_id=66ab9a074e03aa000159fe35)
^ the settings is important because we need to upgrade the user (and can't seem to upgrade free or pro-lite users)
Impersonate the test user
go to "Account + Billing" > "Payment And Plan" tab
Select "Change Plan" and opt to upgrade to bill yearly
in the address bar append the query string: ?coupon=test50
see that the tag is rendered
...
Profit

Screenshots:
Mono:

Monolith:

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Env
Portal	Portal Link	Portal Env
Another Repo	Another Link	Another Env

dreamwasp · 2024-07-23T14:32:39Z

this looks great, i don't see the line on zoom at all so i think it's just a weird pixel thing 🤷 only issue i'm seeing is this strange focus state bug (prob some inherited style 🤔 )

LinKCoding · 2024-07-23T15:30:49Z

this looks great, i don't see the line on zoom at all so i think it's just a weird pixel thing 🤷 only issue i'm seeing is this strange focus state bug (prob some inherited style 🤔 )

Nice, thanks! - I realized that focus states are a little messed up after I implemented my changes, gonna take some time to fix that
(Just need to do the truncated tag for some reason the outline doesn't reach the full component)

dreamwasp

these look great! only thing i'm noticing is something slightly off with the focus styles on hover of one of the examples - the focus styles seem to be taking up the full width of their container?

if this is only happening in this example and not in actual code i'm happy to ✅ so i'm gonna take a look at mono now~

dreamwasp · 2024-07-29T13:41:43Z

packages/gamut/src/Tag/elements.tsx

+    width: '100%',
+    maxWidth: 'fit-content',


chef's kiss!~

lol this was your code! 😂

LinKCoding · 2024-07-29T14:27:52Z

these look great! only thing i'm noticing is something slightly off with the focus styles on hover of one of the examples - the focus styles seem to be taking up the full width of their container?

if this is only happening in this example and not in actual code i'm happy to ✅ so i'm gonna take a look at mono now~

I see the issue — I'm guessing to add more spacing around tags, there was a .5 rem margin added around the tag itself which makes the focus outline bigger.

I've added a box around the tag now to include this padding and this should fix the issue.

Thanks for catching!!

dreamwasp

this is super weird but it looks like the remove buttons on multiselect tags lost their right border radius somehow 🤔

dreamwasp · 2024-07-30T13:36:35Z

packages/gamut/src/Tag/elements.tsx

+      [hoverAndFocus]: {
+        color: 'background',
+        bg: 'secondary-hover',


packages/gamut/src/Tag/styles.tsx

dreamwasp · 2024-07-30T16:00:27Z

The SelectDropdown multiselect tag border radius are still a little off (2px v 4px in tags)- i think borderRadius got moved out of tagBaseStyles or something in the multiValue object so it's not making its way there anymore. you should be able to fix it by adding borderRadius 4px [here] (

gamut/packages/gamut/src/Form/SelectDropdown/styles.ts

Line 177 in f5a3566

}),

)

dreamwasp

ignore this, my local storage was out of wack, looks great!

not sure when but at some point in the last couple commits the default button styling came back on focus 🤔

dreamwasp · 2024-08-01T13:03:30Z

packages/gamut/src/Form/SelectDropdown/styles.ts

@@ -174,6 +174,7 @@ export const getMemoizedStyles = (
      ...tagBaseStyles,
      cursor: 'pointer',
      background: theme.colors.background,
+      borderRadius: '4px',


you could grab this from the tagBorderRadius var just so we're ensuring it stays consistent!

dreamwasp

these look wonderful! beautiful job ✨

codecademydev · 2024-08-05T15:51:02Z

📬Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

codecademydev · 2024-08-05T15:52:46Z

🚀 Styleguide deploy preview ready!

https://66b0f5496e8dc3241d410074--gamut-preview.netlify.app

Deploy Logs

LinKCoding added 9 commits July 14, 2024 00:27

got right color and bg color

21e2daf

saving work

532ced0

styling updated, but have questions...

a54187c

prettified

cbf226b

basic styling for tags + dismiss

8e77727

styling works

55c54a7

updated story

6ee5ffe

updated stories

ac3b8fb

Merge branch 'main' into kl-gm-778

7c860c5

changed wrapper back to box

eb7fd38

LinKCoding added 9 commits July 24, 2024 14:06

leaving it in a messy state for now

9f44494

fixed outline state

030fd10

prettified

0c8a202

trying again with different css rulesets

9dca7d0

slight refactor

e969071

moved some styling around

739a761

one last test

fdf94db

clean up

08d1716

Merge branch 'main' into kl-gm-778

edfa070

LinKCoding marked this pull request as ready for review July 26, 2024 15:41

LinKCoding requested a review from a team as a code owner July 26, 2024 15:41

LinKCoding requested review from timjenkins and BandanaKM July 26, 2024 15:41

dreamwasp reviewed Jul 29, 2024

View reviewed changes

fixed tag example

5b8a259

dreamwasp reviewed Jul 30, 2024

View reviewed changes

addressed Cass's feedback

f5a3566

LinKCoding added 3 commits July 31, 2024 09:51

fixing border radius

400a718

Merge branch 'main' into kl-gm-778

9610d3e

updated stories

3cb7838

dreamwasp reviewed Aug 1, 2024

View reviewed changes

dreamwasp approved these changes Aug 1, 2024

View reviewed changes

LinKCoding force-pushed the kl-gm-778 branch from 1205422 to 3cb7838 Compare August 2, 2024 20:04

Merge branch 'main' into kl-gm-778

4f56401

LinKCoding added the Ship It Automerge this PR when possible label Aug 5, 2024

codecademydev merged commit c6bc852 into main Aug 5, 2024
17 of 18 checks passed

codecademydev removed the Ship It Automerge this PR when possible label Aug 5, 2024

codecademydev deleted the kl-gm-778 branch August 5, 2024 15:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

style(Tag): Update Tag colors #2911

style(Tag): Update Tag colors #2911

LinKCoding commented Jul 20, 2024 •

edited

Loading

dreamwasp commented Jul 23, 2024 •

edited

Loading

LinKCoding commented Jul 23, 2024

dreamwasp left a comment

dreamwasp Jul 29, 2024

LinKCoding Jul 29, 2024

LinKCoding commented Jul 29, 2024

dreamwasp left a comment

dreamwasp Jul 30, 2024

dreamwasp commented Jul 30, 2024

dreamwasp left a comment •

edited

Loading

dreamwasp Aug 1, 2024

dreamwasp left a comment

codecademydev commented Aug 5, 2024

codecademydev commented Aug 5, 2024

style(Tag): Update Tag colors #2911

style(Tag): Update Tag colors #2911

Conversation

LinKCoding commented Jul 20, 2024 • edited Loading

Overview

PR Checklist

Testing Instructions

PR Links and Envs

dreamwasp commented Jul 23, 2024 • edited Loading

LinKCoding commented Jul 23, 2024

dreamwasp left a comment

Choose a reason for hiding this comment

dreamwasp Jul 29, 2024

Choose a reason for hiding this comment

LinKCoding Jul 29, 2024

Choose a reason for hiding this comment

LinKCoding commented Jul 29, 2024

dreamwasp left a comment

Choose a reason for hiding this comment

dreamwasp Jul 30, 2024

Choose a reason for hiding this comment

dreamwasp commented Jul 30, 2024

dreamwasp left a comment • edited Loading

Choose a reason for hiding this comment

dreamwasp Aug 1, 2024

Choose a reason for hiding this comment

dreamwasp left a comment

Choose a reason for hiding this comment

codecademydev commented Aug 5, 2024

📬Published Alpha Packages:

codecademydev commented Aug 5, 2024

LinKCoding commented Jul 20, 2024 •

edited

Loading

dreamwasp commented Jul 23, 2024 •

edited

Loading

dreamwasp left a comment •

edited

Loading