[WB-1847] Dropdown: Update `SelectOpener` to match Design specs. #2438

jandrade · 2025-01-21T23:37:12Z

Summary:

Updated SelectOpener to match design specs.
Also converted color tokens to use semanticColor tokens.

Figma: https://www.figma.com/design/VbVu3h2BpBhH80niq101MHHE/%F0%9F%92%A0-Main-Components?node-id=13693-11133&t=W16iu9a1X5vqz5ez-4

NOTE: The light version was removed on a separate PR, so those design specs are not included here anymore.

Issue: https://khanacademy.atlassian.net/browse/WB-1847

Test plan:

Verify that the SelectOpener component looks as expected in the All Variants
stories.

…nternal component) from `Dropdown` to match Design specs. Also converts `color` tokens to use `semanticColor` tokens.

changeset-bot · 2025-01-21T23:37:15Z

🦋 Changeset detected

Latest commit: b749fa9

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

This PR includes changesets to release 2 packages

Name	Type
@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

khan-actions-bot · 2025-01-21T23:37:26Z

Gerald

Required Reviewers

@Khan/wonder-blocks for changes to .changeset/six-jobs-promise.md, packages/wonder-blocks-dropdown/src/components/select-opener.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-01-21T23:38:16Z

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (7980324) 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="PR2438"

Packages can also be installed manually by running:

yarn add @khanacademy/wonder-blocks-<package-name>@PR2438

github-actions · 2025-01-21T23:39:17Z

Size Change: +170 B (+0.17%)

Total Size: 97.8 kB

Filename	Size	Change
`packages/wonder-blocks-dropdown/dist/es/index.js`	18.9 kB	+170 B (+0.91%)

ℹ️ View Unchanged

Filename	Size
`packages/wonder-blocks-accordion/dist/es/index.js`	3.77 kB
`packages/wonder-blocks-banner/dist/es/index.js`	1.53 kB
`packages/wonder-blocks-birthday-picker/dist/es/index.js`	1.77 kB
`packages/wonder-blocks-breadcrumbs/dist/es/index.js`	887 B
`packages/wonder-blocks-button/dist/es/index.js`	4.12 kB
`packages/wonder-blocks-cell/dist/es/index.js`	2.01 kB
`packages/wonder-blocks-clickable/dist/es/index.js`	3.06 kB
`packages/wonder-blocks-core/dist/es/index.js`	2.9 kB
`packages/wonder-blocks-data/dist/es/index.js`	6.24 kB
`packages/wonder-blocks-form/dist/es/index.js`	5.87 kB
`packages/wonder-blocks-grid/dist/es/index.js`	1.36 kB
`packages/wonder-blocks-icon-button/dist/es/index.js`	2.95 kB
`packages/wonder-blocks-icon/dist/es/index.js`	871 B
`packages/wonder-blocks-labeled-field/dist/es/index.js`	1.84 kB
`packages/wonder-blocks-layout/dist/es/index.js`	1.82 kB
`packages/wonder-blocks-link/dist/es/index.js`	2.28 kB
`packages/wonder-blocks-modal/dist/es/index.js`	5.42 kB
`packages/wonder-blocks-pill/dist/es/index.js`	1.65 kB
`packages/wonder-blocks-popover/dist/es/index.js`	4.85 kB
`packages/wonder-blocks-progress-spinner/dist/es/index.js`	1.52 kB
`packages/wonder-blocks-search-field/dist/es/index.js`	1.34 kB
`packages/wonder-blocks-switch/dist/es/index.js`	1.92 kB
`packages/wonder-blocks-testing-core/dist/es/index.js`	3.74 kB
`packages/wonder-blocks-testing/dist/es/index.js`	1.07 kB
`packages/wonder-blocks-theming/dist/es/index.js`	693 B
`packages/wonder-blocks-timing/dist/es/index.js`	1.8 kB
`packages/wonder-blocks-tokens/dist/es/index.js`	2.52 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}

jandrade · 2025-01-21T23:39:48Z

This is the remaining work to replace this PR: #2422

github-actions · 2025-01-21T23:40:20Z

A new build was pushed to Chromatic! 🚀

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

Chromatic results:

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

jandrade · 2025-01-21T23:42:28Z

packages/wonder-blocks-dropdown/src/components/select-opener.tsx

-        borderWidth: tokens.border.width.thin,
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight,
+    const pressStyling = {


@marcysutton I've updated the variable name to match the new convention: press.

Oh nice, that looks consistent with the convention of state + "Styling"! The usage I was referencing in my prior comment is actually down at the bottom of the file, where pressStyling is used: press: pressStyling. The press part is what I was curious about, since it differs from disabled in how we reference state!

Ahh I see! press is a new naming convention that we are using with Design. Wonder Blocks and Thunder Blocks are going to be updated soon to reflect that change as well to make it a bit more platform agnostic and match the other pseudo-states we currently define (default/rest, hover, focus). As for disabled, we are keeping it that way to keep it consistent with the disabled/aria-disabled HTML/ARIA attributes.

beaesguerra

Left some comments on semantic token usage! Visual diffs look good, the comments you left in Chromatic were very helpful in reviewing, thank you!

beaesguerra · 2025-01-23T18:56:45Z

packages/wonder-blocks-dropdown/src/components/select-opener.tsx

-        borderWidth: tokens.border.width.thin,
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight,
+        outlineColor: error


Would this use the global outline semantic color token later on?

That's correct! but for now we keep it separately as we want to continue using this approach in the current experience.

beaesguerra · 2025-01-23T18:57:53Z

packages/wonder-blocks-dropdown/src/components/select-opener.tsx

+        outlineOffset: -border.width.thin,
+        outlineStyle: "solid",
+        outlineWidth: border.width.thin,


(for later): I wonder if we could use tokens for these values too! That would be an alternative way to share focus outline styles

do you mean something like semantic tokens? or global tokens?

ahh I see, it would be global semantic tokens. Yeah, the short term goal will be this, but this will happen after completing the color migration.

Yes! Global semantic tokens for the focus outline styles!

beaesguerra · 2025-01-23T18:59:31Z

packages/wonder-blocks-dropdown/src/components/select-opener.tsx

+                ? semanticColor.text.secondary
+                : semanticColor.action.outlined.progressive.press.foreground
+            : semanticColor.text.primary,
+        outlineColor: error


Would this also use the global focus outline token?

Ideally, yes! we'll have to see how the design specs are landed, but that's what we decided when we spoke about it.

beaesguerra · 2025-01-23T19:01:20Z

packages/wonder-blocks-dropdown/src/components/select-opener.tsx

+                ? semanticColor.status.critical.background
+                : semanticColor.surface.primary,
+            borderColor: error
+                ? semanticColor.status.critical.foreground


Should this be semanticColor.status.critical.border?

It's defined using those tokens in Figma. The goal for the status category is to only use background and foreground. Once we have more alignment with the new theme, we are hoping to remove the border tokens from all actions.

beaesguerra · 2025-01-23T19:05:05Z

packages/wonder-blocks-dropdown/src/components/select-opener.tsx

            color: placeholder
-                ? tokens.color.offBlack64
-                : tokens.color.offBlack,
+                ? semanticColor.text.secondary


I wonder if it would be worth having a separate semantic text color for placeholder. I'm updating the secondary text color to be fadedOffBlack72 for the subtitle in the Cell component. It's also currently used for the LabeledField description. It might be too dark for placeholder text!

Good point! I raised that point in Figma and we are good to go with this change (using 72 for placeholders).

Thanks for confirming!

beaesguerra · 2025-01-23T19:05:37Z

packages/wonder-blocks-dropdown/src/components/select-opener.tsx

-                    borderWidth: tokens.border.width.hairline,
-                    paddingLeft: tokens.spacing.medium_16,
-                    paddingRight: tokens.spacing.small_12,
+                        ? semanticColor.status.critical.foreground


Should this be semanticColor.status.critical.border?

Same answer as the previous comment. To clarify this part a bit more. If we use status, it border and color will share foreground (most likely), and if we use action, then we can use separate tokens.

beaesguerra · 2025-01-23T19:06:47Z

packages/wonder-blocks-dropdown/src/components/select-opener.tsx

-            background: tokens.color.offWhite,
-            borderColor: tokens.color.offBlack16,
-            color: tokens.color.offBlack64,
+            background: semanticColor.action.disabled.secondary,


Should this be semanticColor.action.disabled.background?

We are also following the semantics defined in Figma here. Apologies for making these reviews hard, but we are in a point where things are changing quickly so we don't have all the patterns fully defined.

NOTE: IMO disabled should not be an action and maybe something else (e.g. status).

No worries, we're also in a transition phase so lots of different things to consider! My questions are mostly around if the semantic meanings apply for the use cases, thanks for answering my questions! 😄

beaesguerra

Looks great! 🚀

codecov · 2025-01-27T17:37:57Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 0.00%. Comparing base (0de25cd) to head (b749fa9).
Report is 3 commits behind head on main.

Additional details and impacted files

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

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 0de25cd...b749fa9. Read the comment docs.

Juan Andrade added 2 commits January 21, 2025 18:33

[semantic-dropdown-opener] Update SelectOpener to match design specs

ae5595b

[semantic-dropdown-opener] docs(changeset): Updates SelectOpener (i…

a0bdf7d

…nternal component) from `Dropdown` to match Design specs. Also converts `color` tokens to use `semanticColor` tokens.

jandrade self-assigned this Jan 21, 2025

khan-actions-bot requested a review from a team January 21, 2025 23:37

jandrade commented Jan 21, 2025

View reviewed changes

jandrade requested a review from beaesguerra January 22, 2025 20:23

beaesguerra reviewed Jan 23, 2025

View reviewed changes

beaesguerra mentioned this pull request Jan 24, 2025

[WB-1814.2] Refactor TextField and TextArea to use semantic colors #2440

Merged

jandrade mentioned this pull request Jan 27, 2025

[WB-1814.1] Refactor Checkbox and Radio to use semantic colors #2439

Merged

beaesguerra approved these changes Jan 27, 2025

View reviewed changes

[semantic-dropdown-opener] Address feedback

b749fa9

jandrade merged commit c774f7d into main Jan 27, 2025
14 checks passed

jandrade deleted the semantic-dropdown-opener branch January 27, 2025 17:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WB-1847] Dropdown: Update `SelectOpener` to match Design specs. #2438

[WB-1847] Dropdown: Update `SelectOpener` to match Design specs. #2438

jandrade commented Jan 21, 2025

changeset-bot bot commented Jan 21, 2025 •

edited

Loading

khan-actions-bot commented Jan 21, 2025

github-actions bot commented Jan 21, 2025 •

edited

Loading

github-actions bot commented Jan 21, 2025 •

edited

Loading

jandrade commented Jan 21, 2025

github-actions bot commented Jan 21, 2025 •

edited

Loading

jandrade Jan 21, 2025

marcysutton Jan 21, 2025

jandrade Jan 21, 2025

beaesguerra left a comment

beaesguerra Jan 23, 2025

jandrade Jan 27, 2025

beaesguerra Jan 23, 2025

jandrade Jan 27, 2025

jandrade Jan 27, 2025

beaesguerra Jan 27, 2025

beaesguerra Jan 23, 2025

jandrade Jan 27, 2025

beaesguerra Jan 23, 2025

jandrade Jan 27, 2025

beaesguerra Jan 23, 2025

jandrade Jan 27, 2025

beaesguerra Jan 27, 2025

beaesguerra Jan 23, 2025

jandrade Jan 27, 2025

beaesguerra Jan 23, 2025

jandrade Jan 27, 2025

beaesguerra Jan 27, 2025

beaesguerra left a comment

codecov bot commented Jan 27, 2025

[WB-1847] Dropdown: Update SelectOpener to match Design specs. #2438

[WB-1847] Dropdown: Update SelectOpener to match Design specs. #2438

Conversation

jandrade commented Jan 21, 2025

Summary:

Test plan:

changeset-bot bot commented Jan 21, 2025 • edited Loading

🦋 Changeset detected

khan-actions-bot commented Jan 21, 2025

Gerald

github-actions bot commented Jan 21, 2025 • edited Loading

npm Snapshot: Published

github-actions bot commented Jan 21, 2025 • edited Loading

jandrade commented Jan 21, 2025

github-actions bot commented Jan 21, 2025 • edited Loading

A new build was pushed to Chromatic! 🚀

Chromatic results:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beaesguerra left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beaesguerra left a comment

Choose a reason for hiding this comment

codecov bot commented Jan 27, 2025

Codecov Report

[WB-1847] Dropdown: Update `SelectOpener` to match Design specs. #2438

[WB-1847] Dropdown: Update `SelectOpener` to match Design specs. #2438

changeset-bot bot commented Jan 21, 2025 •

edited

Loading

github-actions bot commented Jan 21, 2025 •

edited

Loading

github-actions bot commented Jan 21, 2025 •

edited

Loading

github-actions bot commented Jan 21, 2025 •

edited

Loading