Skip to content
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

WB-1634: Add supported themes list to wb-theming #2098

Merged
merged 2 commits into from
Oct 27, 2023
Merged

Conversation

jandrade
Copy link
Member

Summary:

Exports supported themes list to enforce available themes.

This change will allow us to enforce that all themes are supported by the theme
switcher. This will prevent us from accidentally shipping a theme that is not
allowed.

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

Test plan:

Verify that the new types are exported and that the theme switcher context
enforces the supported themes list.

@jandrade jandrade self-assigned this Oct 25, 2023
@changeset-bot
Copy link

changeset-bot bot commented Oct 25, 2023

🦋 Changeset detected

Latest commit: c2b94bc

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

This PR includes changesets to release 7 packages
Name Type
@khanacademy/wonder-blocks-theming Minor
@khanacademy/wonder-blocks-button Patch
@khanacademy/wonder-blocks-switch Patch
@khanacademy/wonder-blocks-accordion Patch
@khanacademy/wonder-blocks-dropdown Patch
@khanacademy/wonder-blocks-banner 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
Copy link
Contributor

khan-actions-bot commented Oct 25, 2023

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to .changeset/nine-meals-yell.md, __docs__/wonder-blocks-theming/adding-a-theme.mdx, __docs__/wonder-blocks-theming/theme-examples.tsx, __docs__/wonder-blocks-theming/theme-switcher-context.mdx, packages/wonder-blocks-theming/src/index.ts, packages/wonder-blocks-theming/src/types.ts, packages/wonder-blocks-button/src/themes/themed-button.tsx, packages/wonder-blocks-switch/src/themes/themed-switch.tsx, packages/wonder-blocks-theming/src/components/with-scoped-theme.tsx, packages/wonder-blocks-theming/src/hooks/use-scoped-theme.ts, packages/wonder-blocks-theming/src/hooks/use-styles.ts, packages/wonder-blocks-theming/src/utils/theme-switcher-context.ts, packages/wonder-blocks-theming/src/utils/__tests__/theme-switcher-context.test.tsx

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

@khan-actions-bot khan-actions-bot requested a review from a team October 25, 2023 21:51
@github-actions
Copy link
Contributor

github-actions bot commented Oct 25, 2023

Size Change: +379 B (0%)

Total Size: 91.8 kB

Filename Size Change
packages/wonder-blocks-icon-button/dist/es/index.js 2.6 kB +379 B (+17%) ⚠️
ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 2.86 kB
packages/wonder-blocks-banner/dist/es/index.js 1.53 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.69 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 1.13 kB
packages/wonder-blocks-button/dist/es/index.js 4.09 kB
packages/wonder-blocks-cell/dist/es/index.js 2.19 kB
packages/wonder-blocks-clickable/dist/es/index.js 3.21 kB
packages/wonder-blocks-color/dist/es/index.js 1.15 kB
packages/wonder-blocks-core/dist/es/index.js 3.67 kB
packages/wonder-blocks-data/dist/es/index.js 6.33 kB
packages/wonder-blocks-dropdown/dist/es/index.js 12 kB
packages/wonder-blocks-form/dist/es/index.js 5.42 kB
packages/wonder-blocks-grid/dist/es/index.js 1.36 kB
packages/wonder-blocks-i18n/dist/es/index.js 4.54 kB
packages/wonder-blocks-icon/dist/es/index.js 3.04 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 72 B
packages/wonder-blocks-layout/dist/es/index.js 1.88 kB
packages/wonder-blocks-link/dist/es/index.js 3.03 kB
packages/wonder-blocks-modal/dist/es/index.js 5.04 kB
packages/wonder-blocks-pill/dist/es/index.js 1.03 kB
packages/wonder-blocks-popover/dist/es/index.js 4.33 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.51 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.53 kB
packages/wonder-blocks-spacing/dist/es/index.js 158 B
packages/wonder-blocks-switch/dist/es/index.js 2.06 kB
packages/wonder-blocks-testing/dist/es/index.js 3.94 kB
packages/wonder-blocks-theming/dist/es/index.js 1.21 kB
packages/wonder-blocks-timing/dist/es/index.js 1.78 kB
packages/wonder-blocks-toolbar/dist/es/index.js 862 B
packages/wonder-blocks-tooltip/dist/es/index.js 5.05 kB
packages/wonder-blocks-typography/dist/es/index.js 1.49 kB

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Oct 25, 2023

npm Snapshot: Published

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

Packages can also be installed manually by running:

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

@codecov
Copy link

codecov bot commented Oct 25, 2023

Codecov Report

Merging #2098 (c2b94bc) into main (bdaa023) will increase coverage by 0.01%.
Report is 2 commits behind head on main.
The diff coverage is 100.00%.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #2098      +/-   ##
==========================================
+ Coverage   97.01%   97.03%   +0.01%     
==========================================
  Files         240      242       +2     
  Lines       27534    27700     +166     
  Branches     2415     2345      -70     
==========================================
+ Hits        26713    26879     +166     
  Misses        821      821              
Files Coverage Δ
.../wonder-blocks-button/src/themes/themed-button.tsx 100.00% <100.00%> (ø)
.../wonder-blocks-switch/src/themes/themed-switch.tsx 100.00% <100.00%> (ø)
...locks-theming/src/components/with-scoped-theme.tsx 100.00% <100.00%> (ø)
...onder-blocks-theming/src/hooks/use-scoped-theme.ts 100.00% <100.00%> (ø)
...ages/wonder-blocks-theming/src/hooks/use-styles.ts 100.00% <100.00%> (ø)
...blocks-theming/src/utils/theme-switcher-context.ts 100.00% <100.00%> (ø)

... and 4 files with indirect coverage changes


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 bdaa023...c2b94bc. Read the comment docs.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 25, 2023

A new build was pushed to Chromatic! 🚀

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

Chromatic results:

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

Copy link
Member

@jeresig jeresig left a comment

Choose a reason for hiding this comment

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

Nice!

Copy link
Contributor

@nishasy nishasy left a comment

Choose a reason for hiding this comment

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

🎉

@@ -1,3 +1,6 @@
import {StyleDeclaration} from "aphrodite";

export type ThemedStylesFn<T> = (theme: T) => StyleDeclaration;

export type SupportedThemes = "default" | "khanmigo";
export type Themes<T> = Partial<Record<SupportedThemes, T>>;
Copy link
Member

Choose a reason for hiding this comment

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

question: Is T here an object? I wonder if we need to be specific about that with T extends Object?

Copy link
Member Author

Choose a reason for hiding this comment

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

nice catch! I'll add that, and yes, it expects an object.

@@ -1,3 +1,6 @@
import {StyleDeclaration} from "aphrodite";

export type ThemedStylesFn<T> = (theme: T) => StyleDeclaration;
Copy link
Member

Choose a reason for hiding this comment

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

question: Does T need to be constrained here to object or something?

@jandrade jandrade merged commit 3f854fe into main Oct 27, 2023
13 checks passed
@jandrade jandrade deleted the theming-supported branch October 27, 2023 22:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants