Skip to content

Feature branch pull-request from feature/tb-cell-dd to main #2642

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Jun 27, 2025

Conversation

jandrade
Copy link
Member

@jandrade jandrade commented Jun 4, 2025

Summary:

This PR includes the following commits:

Issue: WB-XXXX

Test plan:

Copy link

changeset-bot bot commented Jun 4, 2025

🦋 Changeset detected

Latest commit: de9435a

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

This PR includes changesets to release 28 packages
Name Type
@khanacademy/wonder-blocks-cell Major
@khanacademy/wonder-blocks-dropdown Minor
@khanacademy/wonder-blocks-tokens Patch
@khanacademy/wonder-blocks-birthday-picker Patch
@khanacademy/wonder-blocks-accordion Patch
@khanacademy/wonder-blocks-badge Patch
@khanacademy/wonder-blocks-banner Patch
@khanacademy/wonder-blocks-breadcrumbs Patch
@khanacademy/wonder-blocks-button Patch
@khanacademy/wonder-blocks-clickable Patch
@khanacademy/wonder-blocks-form Patch
@khanacademy/wonder-blocks-grid Patch
@khanacademy/wonder-blocks-icon-button Patch
@khanacademy/wonder-blocks-icon Patch
@khanacademy/wonder-blocks-labeled-field Patch
@khanacademy/wonder-blocks-layout Patch
@khanacademy/wonder-blocks-link Patch
@khanacademy/wonder-blocks-modal Patch
@khanacademy/wonder-blocks-pill Patch
@khanacademy/wonder-blocks-popover Patch
@khanacademy/wonder-blocks-progress-spinner Patch
@khanacademy/wonder-blocks-search-field Patch
@khanacademy/wonder-blocks-styles Patch
@khanacademy/wonder-blocks-switch Patch
@khanacademy/wonder-blocks-tabs Patch
@khanacademy/wonder-blocks-toolbar Patch
@khanacademy/wonder-blocks-tooltip Patch
@khanacademy/wonder-blocks-typography 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

Copy link
Contributor

github-actions bot commented Jun 4, 2025

Size Change: 0 B

Total Size: 103 kB

ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 2.99 kB
packages/wonder-blocks-announcer/dist/es/index.js 1.74 kB
packages/wonder-blocks-badge/dist/es/index.js 1.75 kB
packages/wonder-blocks-banner/dist/es/index.js 1.91 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.91 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 723 B
packages/wonder-blocks-button/dist/es/index.js 4.12 kB
packages/wonder-blocks-cell/dist/es/index.js 2.19 kB
packages/wonder-blocks-clickable/dist/es/index.js 2.67 kB
packages/wonder-blocks-core/dist/es/index.js 2.48 kB
packages/wonder-blocks-data/dist/es/index.js 5.48 kB
packages/wonder-blocks-dropdown/dist/es/index.js 19.3 kB
packages/wonder-blocks-form/dist/es/index.js 4.94 kB
packages/wonder-blocks-grid/dist/es/index.js 1.24 kB
packages/wonder-blocks-icon-button/dist/es/index.js 3.05 kB
packages/wonder-blocks-icon/dist/es/index.js 2.02 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 2.92 kB
packages/wonder-blocks-layout/dist/es/index.js 1.63 kB
packages/wonder-blocks-link/dist/es/index.js 1.64 kB
packages/wonder-blocks-modal/dist/es/index.js 4.66 kB
packages/wonder-blocks-pill/dist/es/index.js 1.31 kB
packages/wonder-blocks-popover/dist/es/index.js 4.32 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.48 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.09 kB
packages/wonder-blocks-styles/dist/es/index.js 467 B
packages/wonder-blocks-switch/dist/es/index.js 1.55 kB
packages/wonder-blocks-tabs/dist/es/index.js 3.67 kB
packages/wonder-blocks-testing-core/dist/es/index.js 3.51 kB
packages/wonder-blocks-testing/dist/es/index.js 985 B
packages/wonder-blocks-theming/dist/es/index.js 577 B
packages/wonder-blocks-timing/dist/es/index.js 1.37 kB
packages/wonder-blocks-tokens/dist/es/index.js 4.83 kB
packages/wonder-blocks-toolbar/dist/es/index.js 900 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.42 kB
packages/wonder-blocks-typography/dist/es/index.js 1.55 kB

compressed-size-action

Copy link
Contributor

github-actions bot commented Jun 4, 2025

A new build was pushed to Chromatic! 🚀

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

Chromatic results:

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

jandrade and others added 16 commits June 4, 2025 17:05
🖍 _This is an audit!_ 🖍

## Summary:

This refactors the Cell stories to use the new `StateSheet` and
`ScenariosLayout` components and moves some of the previous stories out of
Chromatic.

This is to prepare for the upcoming Cell changes to support the new TB theme.

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

## Test plan:

Navigate to the Cell stories in Storybook and verify that they render correctly.

Author: jandrade

Auditors: #wonder-blocks

Required Reviewers:

Approved By:

Checks: ✅ 12 checks were successful, ⏭️  2 checks have been skipped

Pull Request URL: #2643
## Summary:

- Refactors Cell structure by removing Strut in favor of CSS's gap property
- Moves the Cell tokens to a separate `theme` file and converts these component-level tokens to CSS variables (this is required here as the Cell styles differ in TB).
- Change old typography components with new ones (`Heading`, `BodyText`).

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

## Test plan:

Navigate to the Cell docs and verify that there are no noticeable visual
changes. The Cell should still render correctly with the same spacing and
alignment as before.

- `/?path=/story/packages-cell-testing-snapshots-compactcell--state-sheet-story`
- `/?path=/story/packages-cell-testing-snapshots-detailcell--state-sheet-story`

Author: jandrade

Reviewers: jandrade, beaesguerra

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ 28 checks were successful, ⏭️  5 checks have been skipped

Pull Request URL: #2644
## Summary:

- Updates `CompactCell` and `DetailCell` to support the `thunderblocks` theme.
- Refactors internal typography instances to support both themes.

Issue: WB-1959

## Test plan:

Navigate to the `CompactCell` and `DetailCell` components in both the
`thunderblocks` and `default` themes to ensure that the styles look correct.

- CompactCell OG: `/?path=/docs/packages-cell-compactcell--docs&globals=theme:default`
- CompactCell TB: `/?path=/docs/packages-cell-compactcell--docs&globals=theme:thunderblocks`
- DetailCell OG: `/?path=/docs/packages-cell-detailcell--docs&globals=theme:default`
- DetailCell TB: `/?path=/docs/packages-cell-detailcell--docs&globals=theme:thunderblocks`

Author: jandrade

Reviewers: jandrade, beaesguerra

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ 12 checks were successful, ⏭️  2 checks have been skipped

Pull Request URL: #2657
## Summary:

Following up with the Cell theming support, this PR simplifies the layout and structure of the cell component.

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

## Test plan:

Navigate to the Cell docs and verify that the layout looks correct.

Also check the option items in dropdown examples.

Author: jandrade

Reviewers: jandrade, beaesguerra

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ 12 checks were successful, ⏭️  2 checks have been skipped

Pull Request URL: #2661
## Summary:

This is a prep PR to simplify some of the dropdown styles before adding theming support to it.

- Simplifies the `OptionItem` and `ActionItem` styles to just use the default CellCore styles.
- Simplifies the `OptionItem` structure so the same layout can be reused by `Single/MultiSelect` and `Listbox`.
- Adds a `tabIndex` prop to `Cell` so the component can work with different focus modes (needed for visual focus on Listbox/Combobox).
- Updates the "check" icon color to be `blue` instead of `offBlack`. 

### Implementation plan: 

1. #2659
2. Add theming support to wonder-blocks-dropdown package


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

## Test plan:

Navigate to the Dropdown docs and verify that the stories look correct.

Author: jandrade

Reviewers: beaesguerra, jandrade

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ 12 checks were successful, ⏭️  2 checks have been skipped

Pull Request URL: #2659
## Summary:

Prep work to set up ThunderBlocks theming for all the dropdown components.

- Replaces deprecated typography components with `BodyText` and `Heading`.
- Switches from `spacing` tokens to `sizing`.
- Removes wb-layout dependency (`Strut`) in favor of CSS's `gap`.

Issue: WB-1868

## Test plan:

- Navigate to the Dropdown docs and verify that the stories look correct.
- Ensure that all the dropdown snapshots look correct.

Author: jandrade

Reviewers: beaesguerra

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ 12 checks were successful, ⏭️  2 checks have been skipped

Pull Request URL: #2675
## Summary:

Adds the `ThunderBlocks` theme to the `wonder-blocks-dropdown` package.


Issue: WB-1868

## Test plan:

- Navigate to the Dropdown docs and verify that the stories look correct.
- Ensure that all the dropdown snapshots look correct.

Author: jandrade

Reviewers: jandrade, beaesguerra

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ 12 checks were successful, ⏭️  2 checks have been skipped

Pull Request URL: #2680
@jandrade jandrade marked this pull request as ready for review June 27, 2025 20:06
@khan-actions-bot khan-actions-bot requested a review from a team June 27, 2025 20:07
@khan-actions-bot
Copy link
Contributor

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to pnpm-lock.yaml, .changeset/chatty-moons-press.md, .changeset/cool-parents-grow.md, .changeset/dull-ghosts-invite.md, .changeset/flat-feet-taste.md, .changeset/kind-rings-tan.md, .changeset/late-days-join.md, .changeset/metal-geese-develop.md, .changeset/neat-lizards-teach.md, .changeset/new-zoos-retire.md, .changeset/ninety-dodos-argue.md, .changeset/small-clouds-wash.md, .changeset/tame-eels-allow.md, .changeset/twenty-eagles-cough.md, __docs__/wonder-blocks-cell/compact-cell-testing-snapshots.stories.tsx, __docs__/wonder-blocks-cell/compact-cell.argtypes.tsx, __docs__/wonder-blocks-cell/compact-cell.stories.tsx, __docs__/wonder-blocks-cell/detail-cell-testing-snapshots.stories.tsx, __docs__/wonder-blocks-cell/detail-cell.stories.tsx, __docs__/wonder-blocks-dropdown/action-item.stories.tsx, __docs__/wonder-blocks-dropdown/action-menu.stories.tsx, __docs__/wonder-blocks-dropdown/combobox.stories.tsx, __docs__/wonder-blocks-dropdown/listbox.stories.tsx, __docs__/wonder-blocks-dropdown/multi-select.stories.tsx, __docs__/wonder-blocks-dropdown/option-item.stories.tsx, __docs__/wonder-blocks-dropdown/single-select.stories.tsx, __docs__/wonder-blocks-icon/phosphor-icon.argtypes.ts, __docs__/wonder-blocks-popover/popover-content-core.stories.tsx, packages/wonder-blocks-cell/package.json, packages/wonder-blocks-cell/tsconfig-build.json, packages/wonder-blocks-dropdown/package.json, packages/wonder-blocks-dropdown/tsconfig-build.json, packages/wonder-blocks-cell/src/components/compact-cell.tsx, packages/wonder-blocks-cell/src/components/detail-cell.tsx, packages/wonder-blocks-cell/src/theme/default.ts, packages/wonder-blocks-cell/src/theme/index.ts, packages/wonder-blocks-cell/src/theme/thunderblocks.ts, packages/wonder-blocks-cell/src/util/types.ts, packages/wonder-blocks-dropdown/src/components/action-item.tsx, packages/wonder-blocks-dropdown/src/components/action-menu-opener-core.tsx, packages/wonder-blocks-dropdown/src/components/action-menu.tsx, packages/wonder-blocks-dropdown/src/components/check.tsx, packages/wonder-blocks-dropdown/src/components/checkbox.tsx, packages/wonder-blocks-dropdown/src/components/combobox-multiple-selection.tsx, packages/wonder-blocks-dropdown/src/components/combobox.tsx, packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx, packages/wonder-blocks-dropdown/src/components/listbox.tsx, packages/wonder-blocks-dropdown/src/components/option-item.tsx, packages/wonder-blocks-dropdown/src/components/select-opener.tsx, packages/wonder-blocks-dropdown/src/components/separator-item.tsx, packages/wonder-blocks-dropdown/src/theme/default.ts, packages/wonder-blocks-dropdown/src/theme/index.ts, packages/wonder-blocks-dropdown/src/theme/thunderblocks.ts, packages/wonder-blocks-dropdown/src/util/constants.ts, packages/wonder-blocks-cell/src/components/__tests__/compact-cell.test.tsx, packages/wonder-blocks-cell/src/components/__tests__/detail-cell.test.tsx, packages/wonder-blocks-cell/src/components/internal/cell-core.tsx, packages/wonder-blocks-cell/src/components/internal/common.ts, packages/wonder-blocks-dropdown/src/components/__tests__/action-item.test.tsx, packages/wonder-blocks-dropdown/src/components/__tests__/option-item.test.tsx, packages/wonder-blocks-tokens/src/theme/semantic/semantic-color.ts, packages/wonder-blocks-cell/src/components/internal/__tests__/cell-core.test.tsx

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

Copy link
Contributor

github-actions bot commented Jun 27, 2025

npm Snapshot: Published

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

You can install the packages in frontend by running:

./dev/tools/deploy_wonder_blocks.js --tag="PR2642"

Packages can also be installed manually by running:

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

Copy link
Member

@beaesguerra beaesguerra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! 🎉

@jandrade jandrade merged commit 38175af into main Jun 27, 2025
27 of 32 checks passed
@jandrade jandrade deleted the feature/tb-cell-dd branch June 27, 2025 20:19
Copy link

codecov bot commented Jun 27, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 0.00%. Comparing base (304f575) to head (bc4489e).
Report is 18 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

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

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 304f575...bc4489e. Read the comment docs.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants