Feature branch pull-request from feature/wb-dark-mode-2 to main#3055
Draft
beaesguerra wants to merge 21 commits into
Draft
Feature branch pull-request from feature/wb-dark-mode-2 to main#3055beaesguerra wants to merge 21 commits into
feature/wb-dark-mode-2 to main#3055beaesguerra wants to merge 21 commits into
Conversation
## Summary: Reviewing the CircularSpinner component in SYL Dark to confirm it looks as expected, matches the design specs, and has no a11y color violations. We also enable Chromatic snapshots for the syl-dark theme for the component. Changes specific to this component: - Adds a `StateSheet` - Use semantic color tokens in CircularSpinner Issue: WB-2166 ## Test plan: Review CircularSpinner in all themes `?path=/story/packages-progressspinner-testing-snapshots-circularspinner--state-sheet-story` Confirm things look as expected and there are no a11y violations Review any visual changes in Chromatic Author: beaesguerra Reviewers: claude[bot], jandrade, beaesguerra Required Reviewers: Approved By: jandrade Checks: ✅ 12 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3043
#3044) ## Summary: Update syl-dark token value for `core.background.neutral.default` from `gray_20` to `gray_30` so that it has high enough contrast when used with `core.foreground.knockout.default` Issue: WB-2166 ## Test plan: Review that updated token matches Figma. Review Chromatic snapshots Author: beaesguerra Reviewers: beaesguerra, claude[bot], jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 12 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3044
## Summary: Reviewing the Tabs components in SYL Dark to confirm it looks as expected, matches the design specs, and has no a11y color violations. We also enable Chromatic snapshots for the syl-dark theme for the component. Changes specific to the component: - Enable snapshots for syl-dark - Update semantic color token usage to match Figma specs (note: we now use semantic color core tokens directly instead of the link tokens) Issue: WB-2166 Design: https://www.figma.com/design/04ptAsL2PE4e8KGfYewta3/bea-syl-dark?node-id=2156-54&m=dev ## Test plan: Review stories in the tabs package and confirm things look as expected across themes Review visual changes in Chromatic Author: beaesguerra Reviewers: claude[bot], beaesguerra, jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 12 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3046
🦋 Changeset detectedLatest commit: 167298c The changes in this PR will be included in the next version bump. This PR includes changesets to release 31 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 |
Contributor
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (247790f) and published all packages with changesets to npm. You can install the packages in ./dev/tools/deploy_wonder_blocks.js --tag="PR3055"Packages can also be installed manually by running: pnpm add @khanacademy/wonder-blocks-<package-name>@PR3055 |
Contributor
|
Size Change: +78 B (+0.06%) Total Size: 129 kB 📦 View Changed
ℹ️ View Unchanged
|
Contributor
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-ddldobsdbi.chromatic.com/ Chromatic results:
|
## Summary: Reviewing the CompactCell and DetailCell components in SYL Dark to confirm they look as expected, match the design specs, and have no a11y color violations. We also enable Chromatic snapshots for the syl-dark theme for these components. There were no changes made to the cell components. Only the stories were updated and snapshots were enabled for the syl-dark theme Issue: WB-2166 Design: https://www.figma.com/design/04ptAsL2PE4e8KGfYewta3/bea-syl-dark?node-id=5358-29&m=dev ## Test plan: Review DetailCell and CompactCell and confirm things look as expected and there are no a11y violations - `?path=/story/packages-cell-testing-snapshots-compactcell--state-sheet-story&globals=theme:syl-dark` - `?path=/story/packages-cell-testing-snapshots-detailcell--state-sheet-story&globals=theme:syl-dark` Review visual changes in Chromatic Author: beaesguerra Reviewers: beaesguerra, marcysutton Required Reviewers: Approved By: marcysutton Checks: ✅ 12 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3058
## Summary: Reviewing the button and icon button components in SYL Dark to confirm they look as expected, match the design specs, and have no a11y color violations. We also enable Chromatic snapshots for the syl-dark theme for the component. Changes include: - Adds a component theme token for ActivityIconButton to support using a different token in syl dark for the label - Adds `core.shadow.chonky.disabled.subtle/default` tokens and use them for `chonky.disabled.shadow.*` tokens - Update semantic color core tokens in `syl-dark` related to chonky tokens and border neutral tokens Issue: WB-2166 ## Test plan: Review the button and icon button components in syl-dark and confirm things look as expected and there are no a11y violations: - Button: `?path=/story/packages-button-testing-snapshots-button--state-sheet-story&globals=theme:syl-dark` - ActivityButton: `?path=/story/packages-button-testing-snapshots-activitybutton--state-sheet-story&globals=theme:syl-dark` - IconButton: `?path=/story/packages-iconbutton-testing-snapshots-iconbutton--state-sheet-story&globals=theme:syl-dark` - ActivityIconButton: `?path=/story/packages-iconbutton-testing-snapshots-activityiconbutton--state-sheet-story&globals=theme:syl-dark` - ConversationIconButton: `?path=/story/packages-iconbutton-testing-snapshots-conversationiconbutton--state-sheet-story&globals=theme:syl-dark` - NodeIconButton: `?path=/story/packages-iconbutton-testing-snapshots-nodeiconbutton--state-sheet-story&globals=theme:syl-dark` - Catalog overview: `?path=/story/catalog--buttons&globals=theme:syl-dark` Review Chromatic snapshots and confirm there were no unintentional changes made to `default` and `thunderblocks` themes Author: beaesguerra Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 12 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3047
## Summary: Adding coverage for the loading state in Button in another PR so that it doesn't impact the visual regression tests in #3047 Issue: WB-2166 ## Test plan: Review Chromatic snapshots. The loading state should be included in the snapshots for Button Author: beaesguerra Reviewers: beaesguerra, marcysutton Required Reviewers: Approved By: marcysutton Checks: ✅ 13 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3050
## Summary: Reviewing the banner component in SYL Dark to confirm they look as expected, match the design specs, and have no a11y color violations. We also enable Chromatic snapshots for the syl-dark theme for the component. Changes include: - Updating the core and primitive tokens for syl-dark bg subtle success and warning to help address a11y color contrast in banners with interactive elements - Use transparent border in thunderblocks and syl-dark for banner so they appear borderless (this aligns with the component in Figma) - Only disable color contrast tests for the default theme which has known issues Issue: WB-2166 ## Test plan: Review the banner component in syl-dark and confirm things look as expected and there are no a11y violations (`?path=/story/packages-banner-testing-snapshots-banner--state-sheet-story&globals=theme:syl-dark`) Review Chromatic snapshots and confirm there were no unintentional changes made to default and thunderblocks themes Author: beaesguerra Reviewers: beaesguerra, marcysutton Required Reviewers: Approved By: marcysutton Checks: ✅ 13 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3056
## Summary: Reviewing the pill component in SYL Dark to confirm it looks as expected, and has no a11y color violations. We also enable Chromatic snapshots for the syl-dark theme for the component. Changes include: - Using action tokens for Pill `accent` kind Note: Since Pill is a deprecated component, there are no Figma specs for it. Only minimal changes were made to the component to address color contrast issues in the `syl-dark` theme Issue: WB-2166 ## Test plan: Review the Pill component and confirm things look as expected and there are no a11y violations `?path=/story/packages-pill-testing-snapshots-pill--state-sheet-story&globals=theme:syl-dark` Review Chromatic snapshots Author: beaesguerra Reviewers: marcysutton Required Reviewers: Approved By: marcysutton Checks: ✅ 12 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3057
## Summary: Reviewing the modal and drawer components in SYL Dark to confirm they look as expected, match the design specs, and have no a11y color violations. We also enable Chromatic snapshots for the syl-dark theme for these components. Changes include: - Using `core.background.base.subtle` for modals and drawers (impacts all themes). This matches the Figma specs Issue: WB-2166 Design: https://www.figma.com/design/04ptAsL2PE4e8KGfYewta3/bea-syl-dark?node-id=9603-3296&m=dev ## Test plan: Review the stories for OnePaneDialog, FlexibleDialog, and DrawerDialog and confirm things look as expected and there are no a11y violations (in all themes since the bg color changed) - `?path=/story/packages-modal-drawerlauncher-drawerdialog--default&globals=theme:syl-dark` - `?path=/story/packages-modal-flexibledialog--with-launcher&globals=theme:syl-dark` - `?path=/story/packages-modal-onepanedialog--with-launcher&globals=theme:syl-dark` Review visual changes in Chromatic Author: beaesguerra Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 13 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3067
## Summary: Reviewing the Tooltip component in SYL Dark to confirm it looks as expected, matches the design specs, and has no a11y color violations. We also enable Chromatic snapshots for the syl-dark theme for the component. Changes specific to the component: - Fixed the `TooltipTail` so that the `color` prop is optional. When no primitive color override is passed, the tail fill falls back to a semantic color token instead so it works across themes - Use semantic color border token for the tooltip tail Issue: WB-2166 Design: https://www.figma.com/design/04ptAsL2PE4e8KGfYewta3/bea-syl-dark?node-id=5681-741&t=nbUJi6LBtja2ZGFs-4 Note: Currently, the Tooltip component supports a `backgroundColor` prop that only works with primitive colors. WB-2125 will introduce a new strong tooltip variant so that we can remove the `backgroundColor` and control which combinations of backgrounds and foregrounds can be used together in the tooltip ## Test plan: Review the Tooltip across themes and confirm things look as expected and that there are no a11y violations related to color contrast `?path=/story/packages-tooltip-testing-snapshots-tooltip--state-sheet-story&globals=backgrounds.value:baseSubtle;backgrounds.grid:!false;theme:default` Review visual changes in Chromatic Author: beaesguerra Reviewers: beaesguerra, claude[bot], jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 13 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3070
## Summary: Reviewing the Popover component in SYL Dark to confirm it looks as expected, matches the design specs, and has no a11y color violations. We also enable Chromatic snapshots for the syl-dark theme for the component. No changes were made specific to the component. Since Popover uses Tooltip internally, the fixes applied to the Tooltip Tail in #3070 are included Issue: WB-2166 Design: https://www.figma.com/design/04ptAsL2PE4e8KGfYewta3/bea-syl-dark?node-id=8781-11153&t=nbUJi6LBtja2ZGFs-4 ## Test plan: Review `?path=/story/packages-popover-testing-snapshots-popover--state-sheet-story&globals=theme:syl-dark` and confirm things look as expected and there are no a11y violations Review visual changes in Chromatic. Author: beaesguerra Reviewers: jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 12 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3072
…ts (#3074) ## Summary: In #3072 and #3070, StateSheets were added for Popover and Tooltip components. In this PR, we disable more stories that are covered in those statesheets. Note: For popperjs floating components, they will only show up in the Chromatic snapshot if it is included in the initial viewport. Because of this, I set up a PopoverContent StateSheet too for more coverage of different ways it can be used. The Popover StateSheet is used to verify the appearance of an anchor + popover content Issue: WB-2166 ## Test plan: Review snapshots in Chromatic and confirm we have enough coverage for Popover and Tooltip components In the [Popover PR Chromatic build](https://www.chromatic.com/build?appId=5e1bf4b385e3fb0020b7073c&number=9243), there were 521 visual tests. [This PR Chromatic build](https://www.chromatic.com/build?appId=5e1bf4b385e3fb0020b7073c&number=9245) now has 509 tests! | Before | After | | --- | --- | | <img width="601" height="351" alt="Screenshot 2026-05-26 at 10 44 43 AM" src="https://github.com/user-attachments/assets/e935ebb0-ddab-4585-8c48-805d04330fb0" /> | <img width="1012" height="355" alt="Screenshot 2026-05-26 at 10 44 22 AM" src="https://github.com/user-attachments/assets/a79c3f8b-3413-4d5d-a3b2-754b6405a1cb" /> | Author: beaesguerra Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: jandrade Checks: ⏭️ 3 checks have been skipped, ✅ 13 checks were successful, ⏹️ 1 check was cancelled Pull Request URL: #3074
<full summary> Issue: <url or "none"> Test plan: <see below>
## Summary: Restructure StateSheets for SingleSelect and MultiSelect so it is easier to review in upcoming changes Issue: WB-2166 ## Test plan: Review Chromatic snapshots Author: beaesguerra Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 13 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3083
## Summary: Reviewing the ActionMenu, ActionItem, SeparatorItem, OptionItem components in SYL Dark to confirm it looks as expected, matches the design specs, and has no a11y color violations. We also enable Chromatic snapshots for the syl-dark theme for the components. MultiSelect, SingleSelect, and Combobox will be reviewed separately since they're closely related to form fields! Changes specific to these components: - Use the TB `input.checked` tokens for `syl-dark` for clearer checkboxes in OptionItems - Add docs and statesheet for SeparatorItem Issue: WB-2166 Dropdown designs - OptionItem: https://www.figma.com/design/04ptAsL2PE4e8KGfYewta3/bea-syl-dark?node-id=11311-8729&t=48QoihVmhYQeteLi-4 - ActionMenu: https://www.figma.com/design/04ptAsL2PE4e8KGfYewta3/bea-syl-dark?node-id=6422-3571&t=48QoihVmhYQeteLi-4 ## Test plan: - Review components in syl-dark: - `?path=/story/packages-dropdown-testing-snapshots-actionitem--state-sheet-story&globals=theme:syl-dark` - `?path=/story/packages-dropdown-testing-snapshots-actionmenu--scenarios&globals=;theme:syl-dark` - `?path=/story/packages-dropdown-testing-snapshots-optionitem--state-sheet-story&globals=theme:syl-dark` - `?path=/story/packages-dropdown-testing-snapshots-separatoritem--state-sheet-story&globals=;theme:syl-dark` - Review new SeparatorItem docs: `?path=/docs/packages-dropdown-separatoritem--docs&globals=;theme:syl-dark` - Confirm things look as expected and there are no a11y violations - Review any visual changes in Chromatic Author: beaesguerra Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 12 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3077
## Summary: Adding visual test coverage for Combobox. Will address the styling and add `syl-dark` coverage in a follow up PR! To avoid new a11y violations in Storybook for the new stories, I also added support for an `aria-label` prop for the Combobox component so we can use it in the StateSheet. Note: There are some styling issues with different states. I'll fix the color related ones in the next PR, and created WB-2359 for other improvements (in the post clean up epic. Combobox is not used in `frontend` currently so it is lower priority currently!). Combobox also currently provides state styles programmatically so focus styles will not be shown in the StateSheet snapshot for now Issue: WB-2166 ## Test plan: Review Chromatic snapshots. Confirm Combobox can receive an aria-label Author: beaesguerra Reviewers: jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 12 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3086
## Summary: Reviewing the Link component in SYL Dark to confirm it looks as expected, matches the design specs, and has no a11y color violations. We also enable Chromatic snapshots for the syl-dark theme for the component. No specific component/token changes were needed. Note: The design shows a disabled state, however, the Link component does not support a disabled state Issue: WB-2166 Design: https://www.figma.com/design/04ptAsL2PE4e8KGfYewta3/bea-syl-dark?node-id=5089-188&t=48QoihVmhYQeteLi-4 ## Test plan: Review `?path=/story/packages-link-testing-snapshots-link--state-sheet-story&globals=theme:syl-dark` and confirm things look as expected and there are no a11y violations Review visual changes in Chromatic Author: beaesguerra Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 13 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3091
## Summary: Reviewing the Breadcrumbs component in SYL Dark to confirm it looks as expected, matches the design specs, and has no a11y color violations. We also enable Chromatic snapshots for the syl-dark theme for the component. Changes specific to the component: - Use semanticColor token for separator styling to support syl-dark Note: Created WB-2363 to fix the existing focus outline issue in all themes Issue: WB-2166 ## Test plan: Review `?path=/story/packages-breadcrumbs-testing-snapshots-breadcrumbs--state-sheet-story&globals=theme:syl-dark` and confirm things look as expected and there are no a11y violations Review visual changes in Chromatic Author: beaesguerra Reviewers: jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 13 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3092
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
This PR includes the following commits:
core.background.neutral.defaulttogray_30(syl-dark tokens: Updatecore.background.neutral.defaulttogray_30#3044)Issue: WB-2166
Test plan: