[WB-1814.6] Refactor Link to use semantic colors #2464

jandrade · 2025-02-06T21:07:04Z

Next step is to refactor the Link component to use semantic colors.

Besides the migration, this PR also includes the following changes:

Reworked the theme structure to make it closer to the semanticColor structure.
Updated stories to use the new semantic colors.

Implementation plan:

[WB-1814.1] Refactor Checkbox and Radio to use semantic colors #2439
[WB-1814.2] Refactor TextField and TextArea to use semantic colors #2440
[WB-1814.3] Refactor Switch to use semantic colors #2441
[WB-1814.4] Refactor Accordion, Banner, BirthdayPicker to use semantic colors #2446
[WB-1814.5] Refactor IconButton to use semantic colors #2449
Link (current PR)
Modal
Popover, Tooltip
Pill
Clickable, Toolbar

Issue: WB-1814

Test plan:

Verify that the Chromatic snapshots are unchanged.

URL: /?path=/story/packages-link-link-all-variants--default

changeset-bot · 2025-02-06T21:07:08Z

🦋 Changeset detected

Latest commit: b8c74cd

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

This PR includes changesets to release 5 packages

Name	Type
@khanacademy/wonder-blocks-banner	Patch
@khanacademy/wonder-blocks-link	Patch
@khanacademy/wonder-blocks-pill	Patch
@khanacademy/wonder-blocks-dropdown	Patch
@khanacademy/wonder-blocks-birthday-picker	Patch

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

github-actions · 2025-02-06T21:07:59Z

Size Change: +125 B (+0.13%)

Total Size: 97.4 kB

Filename	Size	Change
`packages/wonder-blocks-link/dist/es/index.js`	2.22 kB	+125 B (+5.98%)	🔍

ℹ️ View Unchanged

Filename	Size
`packages/wonder-blocks-accordion/dist/es/index.js`	3.54 kB
`packages/wonder-blocks-banner/dist/es/index.js`	1.55 kB
`packages/wonder-blocks-birthday-picker/dist/es/index.js`	1.82 kB
`packages/wonder-blocks-breadcrumbs/dist/es/index.js`	886 B
`packages/wonder-blocks-button/dist/es/index.js`	4.3 kB
`packages/wonder-blocks-cell/dist/es/index.js`	2.01 kB
`packages/wonder-blocks-clickable/dist/es/index.js`	3.04 kB
`packages/wonder-blocks-core/dist/es/index.js`	2.85 kB
`packages/wonder-blocks-data/dist/es/index.js`	6.25 kB
`packages/wonder-blocks-dropdown/dist/es/index.js`	19 kB
`packages/wonder-blocks-form/dist/es/index.js`	6.03 kB
`packages/wonder-blocks-grid/dist/es/index.js`	1.36 kB
`packages/wonder-blocks-icon-button/dist/es/index.js`	3.11 kB
`packages/wonder-blocks-icon/dist/es/index.js`	873 B
`packages/wonder-blocks-labeled-field/dist/es/index.js`	1.22 kB
`packages/wonder-blocks-layout/dist/es/index.js`	1.82 kB
`packages/wonder-blocks-modal/dist/es/index.js`	5.41 kB
`packages/wonder-blocks-pill/dist/es/index.js`	1.4 kB
`packages/wonder-blocks-popover/dist/es/index.js`	4.89 kB
`packages/wonder-blocks-progress-spinner/dist/es/index.js`	1.52 kB
`packages/wonder-blocks-search-field/dist/es/index.js`	1.33 kB
`packages/wonder-blocks-switch/dist/es/index.js`	2 kB
`packages/wonder-blocks-testing-core/dist/es/index.js`	3.73 kB
`packages/wonder-blocks-testing/dist/es/index.js`	1.07 kB
`packages/wonder-blocks-theming/dist/es/index.js`	679 B
`packages/wonder-blocks-timing/dist/es/index.js`	1.79 kB
`packages/wonder-blocks-tokens/dist/es/index.js`	2.51 kB
`packages/wonder-blocks-toolbar/dist/es/index.js`	905 B
`packages/wonder-blocks-tooltip/dist/es/index.js`	6.99 kB
`packages/wonder-blocks-typography/dist/es/index.js`	1.23 kB

_{compressed-size-action}

khan-actions-bot · 2025-02-06T21:09:56Z

Gerald

Required Reviewers

@Khan/wonder-blocks for changes to .changeset/mighty-goats-look.md, __docs__/wonder-blocks-link/link-variants.stories.tsx, __docs__/wonder-blocks-link/link.stories.tsx, packages/wonder-blocks-link/src/components/link-core.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

github-actions · 2025-02-06T21:11:07Z

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (7162551) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2464"

Packages can also be installed manually by running:

pnpm add @khanacademy/wonder-blocks-<package-name>@PR2464

github-actions · 2025-02-06T21:12:52Z

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-nhdifluqzr.chromatic.com/

Chromatic results:

Metric	Total
Captured snapshots	377
Tests with visual changes	10
Total stories	548
Inherited (not captured) snapshots [TurboSnap]	0
Tests on the build	377

jandrade · 2025-02-06T21:57:47Z

__docs__/wonder-blocks-link/link.stories.tsx

-            story: ``,
-        },
-    },
+export const Navigation: StoryComponentType = {


note: I messed up CSF here (from my previous PR), so I'm fixing it here.

beaesguerra

Code changes look good! Left some non-blocking questions in the PR, and one comment in Chromatic I'd like to get your thoughts on!

beaesguerra · 2025-02-06T22:12:09Z

packages/wonder-blocks-link/src/components/link-core.tsx

+            },
+            focus: {
+                border: semanticColor.border.focus,
+                foreground: action.hover.foreground,


Maybe this is an example where action.focus.foreground would be useful! If we change hover styles, would we expect focus styles to change too?

beaesguerra · 2025-02-06T22:14:36Z

packages/wonder-blocks-link/src/components/link-core.tsx

+                foreground: color.purple,
+            },
+            pressVisited: {
+                foreground: mix(color.offBlack32, color.purple),


For my own learning, how do we know when to use the color utils like mix?

TBH this shouldn't be used too much these days as most of the mixed colors are codified as primitive colors. This was originally introduced to mix colors in the past due to the limitation in our previous primitive colors, but now that we include more shades, this shouldn't be needed anymore (mostly).

beaesguerra · 2025-02-06T22:16:23Z

packages/wonder-blocks-link/src/components/link-core.tsx

+const action = semanticColor.action.outlined.progressive;
+
+// NOTE: This color is only used here.
+const pink = "#fa50ae";


It'll be nice when we have the full color palette so we won't have to hardcode one-off colors!

…anticColor` tokens intead of `color`. Also moved the link colors to an object to prepare this for an upcoming theme integration"

codecov · 2025-02-20T18:19:37Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 0.00%. Comparing base (ed26d66) to head (b8c74cd).
Report is 1 commits behind head on main.

Additional details and impacted files

@@     Coverage Diff      @@
##   main   #2464   +/-   ##
============================
============================

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ed26d66...b8c74cd. Read the comment docs.

## Summary: Next step is to refactor the `Modal` package to use semantic colors. Besides the migration, this PR also includes the following changes: - Reworked the theme structure to split tokens by sub-component. - Updated stories to use the new semantic colors. - Adapted some components to use theming instead of hardcoded colors. ### Implementation plan: 1. #2439 2. #2440 3. #2441 4. #2446 5. #2449 6. #2464 7. Modal (current PR) 8. Popover, Tooltip 9. Dropdown 10. Clickable, Pill, Toolbar Issue: WB-1814 ## Test plan: Verify that the Modal Chromatic snapshots are mostly unchanged. URL: `/?path=/docs/packages-modal-onepanedialog--docs&globals=viewport:desktop` Author: jandrade Reviewers: jandrade, beaesguerra, marcysutton Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ gerald, ⏭️ dependabot Pull Request URL: #2468

…#2470) ## Summary: Next step is to refactor the `Popover`, `Tooltip` and `Toolbar` packages to use semantic colors. ### Implementation plan: 1. #2439 2. #2440 3. #2441 4. #2446 5. #2449 6. #2464 7. #2468 8. Popover, Tooltip, Toolbar (current PR) 9. Dropdown 10. Clickable, Pill Issue: WB-1814 ## Test plan: Verify that the Modal Chromatic snapshots are mostly unchanged. Author: jandrade Reviewers: beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⏭️ dependabot Pull Request URL: #2470

## Summary: - Migrate Clickable and Pill to use semantic colors - Add `All Variants` story to Pill ### Implementation plan: 1. #2439 2. #2440 3. #2441 4. #2446 5. #2449 6. #2464 7. #2468 8. #2470 9. Clickable, Pill (current PR) 10. Dropdown Issue: WB-1814 ## Test plan: Navigate to the `Clickable` and `Pill` stories in Storybook and verify that the colors are correct. Author: jandrade Reviewers: jandrade, beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ gerald, ⏭️ dependabot Pull Request URL: #2472

…2474) ## Summary: Last PR that migrates the remaining components to use semantic colors. - Added `All Variants` stories to `ActionItem` and `OptionItem`. - Refactored `ActionItem` and `OptionItem` to use semantic colors. - Also refactored `ActionMenu`, `SingleSelect`, `MultiSelect` and `Combobox` to use semantic colors. - Simplified the styles in `ActionMenuOpenerCore` to use a single static StyleSheet instance (instead of generating another one in runtime). ### Implementation plan: 1. #2439 2. #2440 3. #2441 4. #2446 5. #2449 6. #2464 7. #2468 8. #2470 9. #2472 10. Dropdown (current PR) Issue: WB-1814 ## Test plan: Verify that all the dropdown stories are still working as expected. Author: jandrade Reviewers: jandrade, beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ dependabot, ✅ gerald Pull Request URL: #2474

jandrade self-assigned this Feb 6, 2025

jandrade changed the title ~~## Summary:~~ [WB-1814] Refactor Link to use semantic colors Feb 6, 2025

jandrade marked this pull request as ready for review February 6, 2025 21:09

khan-actions-bot requested a review from a team February 6, 2025 21:09

jandrade commented Feb 6, 2025

View reviewed changes

beaesguerra approved these changes Feb 6, 2025

View reviewed changes

jandrade changed the title ~~[WB-1814] Refactor Link to use semantic colors~~ [WB-1814.6] Refactor Link to use semantic colors Feb 10, 2025

This was referenced Feb 10, 2025

[WB-1814.7] Refactor Modal to use semantic colors #2468

Merged

[WB-1814.8] Refactor Popover, Tooltip, Toolbar to use semantic colors #2470

Merged

[WB-1814.9] Refactor Clickable and Pill to use semantic colors #2472

Merged

jandrade mentioned this pull request Feb 18, 2025

[WB-1814.10] Refactor wonder-blocks-dropdown to use semantic colors #2474

Merged

jandrade force-pushed the rm-wb-link-secondary branch 2 times, most recently from 5ee46cd to 6b2afa4 Compare February 19, 2025 23:37

Base automatically changed from rm-wb-link-secondary to main February 20, 2025 16:20

Juan Andrade added 6 commits February 20, 2025 11:53

[link-semantic] Refactor Link to use semantic colors

e53cc17

[link-semantic] docs(changeset): Internal Link refactor to use `sem…

ac6efda

…anticColor` tokens intead of `color`. Also moved the link colors to an object to prepare this for an upcoming theme integration"

Resolve merge conflicts

42cd2a8

[link-semantic] Enable some stories

d171bfc

[link-semantic] Change Inline story to multiline

997d953

[link-semantic] Resolve merge conflicts

b8c74cd

jandrade force-pushed the link-semantic branch from 46edf73 to b8c74cd Compare February 20, 2025 17:21

jandrade merged commit 5bd2a95 into main Feb 20, 2025
14 checks passed

jandrade deleted the link-semantic branch February 20, 2025 18:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WB-1814.6] Refactor Link to use semantic colors #2464

[WB-1814.6] Refactor Link to use semantic colors #2464

jandrade commented Feb 6, 2025

changeset-bot bot commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited

Loading

khan-actions-bot commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited

Loading

jandrade Feb 6, 2025

beaesguerra left a comment

beaesguerra Feb 6, 2025

beaesguerra Feb 6, 2025

jandrade Feb 20, 2025

beaesguerra Feb 6, 2025

codecov bot commented Feb 20, 2025

[WB-1814.6] Refactor Link to use semantic colors #2464

[WB-1814.6] Refactor Link to use semantic colors #2464

Conversation

jandrade commented Feb 6, 2025

Implementation plan:

Test plan:

changeset-bot bot commented Feb 6, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Feb 6, 2025 • edited Loading

khan-actions-bot commented Feb 6, 2025 • edited Loading

Gerald

github-actions bot commented Feb 6, 2025 • edited Loading

npm Snapshot: Published

github-actions bot commented Feb 6, 2025 • edited Loading

A new build was pushed to Chromatic! 🚀

Chromatic results:

jandrade Feb 6, 2025

Choose a reason for hiding this comment

beaesguerra left a comment

Choose a reason for hiding this comment

beaesguerra Feb 6, 2025

Choose a reason for hiding this comment

beaesguerra Feb 6, 2025

Choose a reason for hiding this comment

jandrade Feb 20, 2025

Choose a reason for hiding this comment

beaesguerra Feb 6, 2025

Choose a reason for hiding this comment

codecov bot commented Feb 20, 2025

Codecov Report

changeset-bot bot commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited

Loading

khan-actions-bot commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited

Loading