Codecademy
style(Tag): Update Tag colors
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
- [x] Related to JIRA ticket: GM-778
- [x] I have run this code to verify it works
- [x] This PR includes unit tests for the code change
- [x] This PR includes testing instructions tests for the code change
- [x] 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 |
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 🤔 )
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)
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!!
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] (https://github.com/Codecademy/gamut/blob/f5a35661fe1f7262dc42effe6c84df3b240aff37/packages/gamut/src/Form/SelectDropdown/styles.ts#L177)
📬Published Alpha Packages:
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
