-
Notifications
You must be signed in to change notification settings - Fork 10
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
Conversation
🦋 Changeset detectedLatest commit: de9435a The changes in this PR will be included in the next version bump. This PR includes changesets to release 28 packages
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 |
Size Change: 0 B Total Size: 103 kB ℹ️ View Unchanged
|
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-etnzavfwcb.chromatic.com/ Chromatic results:
|
🖍 _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
…feature/tb-cell-dd
## 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
…feature/tb-cell-dd
…feature/tb-cell-dd
## 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
…feature/tb-cell-dd
## 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
…feature/tb-cell-dd
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
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 ./dev/tools/deploy_wonder_blocks.js --tag="PR2642" Packages can also be installed manually by running: pnpm add @khanacademy/wonder-blocks-<package-name>@PR2642 |
There was a problem hiding this 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! 🎉
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #2642 +/- ##
============================
============================
Continue to review full report in Codecov by Sentry.
🚀 New features to boost your workflow:
|
Summary:
This PR includes the following commits:
Issue: WB-XXXX
Test plan: