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

[WIP] FEI-5589: Experiment with CSS modules - DO NOT REVIEW #2226

Draft
wants to merge 23 commits into
base: main
Choose a base branch
from

Conversation

jandrade
Copy link
Member

@jandrade jandrade commented May 15, 2024

Summary:

  • Added css-modules integration.
  • Created temporary tokens.css file to hold the CSS variables.
  • Migrated the following components to css-modules:
    • Button
    • View
    • TextField
    • Strut
    • Icon
    • ProgressSpinner
    • tokens (as css variables)
    • All Typography components

Issue: https://khanacademy.atlassian.net/browse/FEI-5589

Test plan:

TBD

@jandrade jandrade self-assigned this May 15, 2024
Copy link

changeset-bot bot commented May 15, 2024

🦋 Changeset detected

Latest commit: 97bf68c

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

This PR includes changesets to release 29 packages
Name Type
@khanacademy/wonder-blocks-tokens Major
@khanacademy/wonder-blocks-core Major
@khanacademy/wonder-blocks-form Major
@khanacademy/wonder-blocks-icon Major
@khanacademy/wonder-blocks-layout Major
@khanacademy/wonder-blocks-progress-spinner Major
@khanacademy/wonder-blocks-typography Major
@khanacademy/wb-dev-build-settings Major
@khanacademy/wonder-blocks-accordion Patch
@khanacademy/wonder-blocks-banner Patch
@khanacademy/wonder-blocks-birthday-picker Patch
@khanacademy/wonder-blocks-breadcrumbs Patch
@khanacademy/wonder-blocks-button Patch
@khanacademy/wonder-blocks-cell Patch
@khanacademy/wonder-blocks-clickable Patch
@khanacademy/wonder-blocks-dropdown Patch
@khanacademy/wonder-blocks-grid Patch
@khanacademy/wonder-blocks-icon-button Patch
@khanacademy/wonder-blocks-labeled-field Patch
@khanacademy/wonder-blocks-link Patch
@khanacademy/wonder-blocks-modal Patch
@khanacademy/wonder-blocks-pill Patch
@khanacademy/wonder-blocks-popover Patch
@khanacademy/wonder-blocks-search-field Patch
@khanacademy/wonder-blocks-switch Patch
@khanacademy/wonder-blocks-toolbar Patch
@khanacademy/wonder-blocks-tooltip Patch
@khanacademy/wonder-blocks-data Patch
@khanacademy/wonder-blocks-testing 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 May 15, 2024

Size Change: -556 B (-0.58%)

Total Size: 95.9 kB

Filename Size Change
packages/wonder-blocks-button/dist/es/index.js 3.79 kB -488 B (-11.42%) 👏
packages/wonder-blocks-core/dist/es/index.js 3.77 kB +108 B (+2.95%)
packages/wonder-blocks-dropdown/dist/es/index.js 13.9 kB +24 B (+0.17%)
packages/wonder-blocks-form/dist/es/index.js 5.25 kB -90 B (-1.69%)
packages/wonder-blocks-icon/dist/es/index.js 820 B -240 B (-22.64%) 🎉
packages/wonder-blocks-layout/dist/es/index.js 1.91 kB +23 B (+1.22%)
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.43 kB -79 B (-5.24%)
packages/wonder-blocks-typography/dist/es/index.js 1.67 kB +186 B (+12.53%) ⚠️
ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 3.78 kB
packages/wonder-blocks-banner/dist/es/index.js 1.53 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.72 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 1.13 kB
packages/wonder-blocks-cell/dist/es/index.js 2.24 kB
packages/wonder-blocks-clickable/dist/es/index.js 3.29 kB
packages/wonder-blocks-data/dist/es/index.js 6.33 kB
packages/wonder-blocks-grid/dist/es/index.js 1.36 kB
packages/wonder-blocks-i18n/dist/es/index.js 4.56 kB
packages/wonder-blocks-icon-button/dist/es/index.js 3.21 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 72 B
packages/wonder-blocks-link/dist/es/index.js 2.53 kB
packages/wonder-blocks-modal/dist/es/index.js 5.52 kB
packages/wonder-blocks-pill/dist/es/index.js 1.65 kB
packages/wonder-blocks-popover/dist/es/index.js 4.86 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.55 kB
packages/wonder-blocks-switch/dist/es/index.js 2.1 kB
packages/wonder-blocks-testing/dist/es/index.js 3.94 kB
packages/wonder-blocks-theming/dist/es/index.js 697 B
packages/wonder-blocks-timing/dist/es/index.js 1.8 kB
packages/wonder-blocks-tokens/dist/es/index.js 1.74 kB
packages/wonder-blocks-toolbar/dist/es/index.js 857 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.91 kB

compressed-size-action

Copy link
Contributor

github-actions bot commented May 15, 2024

A new build was pushed to Chromatic! 🚀

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

Chromatic results:

Metric Total
Captured snapshots 117
Tests with visual changes 15
Total stories 413
Inherited (not captured) snapshots [TurboSnap] 210
Tests on the build 327

Copy link

codecov bot commented May 16, 2024

Codecov Report

Attention: Patch coverage is 94.16667% with 7 lines in your changes are missing coverage. Please review.

Project coverage is 82.77%. Comparing base (afeac13) to head (6e0558c).

Current head 6e0558c differs from pull request most recent head 97bf68c

Please upload reports for the commit 97bf68c to get more accurate results.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #2226       +/-   ##
===========================================
- Coverage   94.48%   82.77%   -11.72%     
===========================================
  Files         248      248               
  Lines       29268    29257       -11     
  Branches     1638     1368      -270     
===========================================
- Hits        27654    24217     -3437     
- Misses       1610     5030     +3420     
- Partials        4       10        +6     
Files Coverage Δ
...s/wonder-blocks-form/src/components/text-field.tsx 94.01% <98.82%> (-2.70%) ⬇️
...ackages/wonder-blocks-core/src/components/view.tsx 92.43% <82.85%> (-0.71%) ⬇️

... and 88 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 afeac13...97bf68c. Read the comment docs.

@jandrade jandrade marked this pull request as ready for review May 21, 2024 19:07
@khan-actions-bot khan-actions-bot requested a review from a team May 21, 2024 19:07
@khan-actions-bot
Copy link
Contributor

khan-actions-bot commented May 21, 2024

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to package.json, yarn.lock, .changeset/brown-bottles-arrive.md, .storybook/main.ts, .storybook/preview.tsx, build-settings/rollup.config.js, types/assets.d.ts, __docs__/wonder-blocks-button/button.stories.module.css, __docs__/wonder-blocks-button/button.stories.tsx, __docs__/wonder-blocks-button/navigation-callbacks.mdx, __docs__/wonder-blocks-button/navigation-callbacks.stories.tsx, __docs__/wonder-blocks-core/view.stories.module.css, __docs__/wonder-blocks-core/view.stories.tsx, __docs__/wonder-blocks-layout/strut.stories.module.css, __docs__/wonder-blocks-layout/strut.stories.tsx, __docs__/wonder-blocks-typography/typography.stories.module.css, __docs__/wonder-blocks-typography/typography.stories.tsx, config/jest/test.config.js, packages/wonder-blocks-button/package.json, packages/wonder-blocks-core/package.json, packages/wonder-blocks-icon/package.json, packages/wonder-blocks-layout/package.json, packages/wonder-blocks-progress-spinner/package.json, packages/wonder-blocks-tokens/package.json, packages/wonder-blocks-typography/package.json, static/sb-styles/preview.css, packages/wonder-blocks-tokens/css/tokens.css, packages/wonder-blocks-button/src/components/button-core.tsx, packages/wonder-blocks-button/src/components/button.module.css, packages/wonder-blocks-button/src/themes/default.module.css, packages/wonder-blocks-button/src/themes/khanmigo.module.css, packages/wonder-blocks-button/src/themes/themed-button.tsx, packages/wonder-blocks-core/src/components/text.module.css, packages/wonder-blocks-core/src/components/text.tsx, packages/wonder-blocks-core/src/components/view.module.css, packages/wonder-blocks-core/src/components/view.tsx, packages/wonder-blocks-core/src/util/types.ts, packages/wonder-blocks-form/src/components/text-field.module.css, packages/wonder-blocks-form/src/components/text-field.tsx, packages/wonder-blocks-icon/src/components/phosphor-icon.module.css, packages/wonder-blocks-icon/src/components/phosphor-icon.tsx, packages/wonder-blocks-layout/src/components/strut.module.css, packages/wonder-blocks-layout/src/components/strut.tsx, packages/wonder-blocks-progress-spinner/src/components/circular-spinner.module.css, packages/wonder-blocks-progress-spinner/src/components/circular-spinner.tsx, packages/wonder-blocks-typography/src/components/body.tsx, packages/wonder-blocks-typography/src/components/caption.tsx, packages/wonder-blocks-typography/src/components/footnote.tsx, packages/wonder-blocks-typography/src/components/heading-large.tsx, packages/wonder-blocks-typography/src/components/heading-medium.tsx, packages/wonder-blocks-typography/src/components/heading-small.tsx, packages/wonder-blocks-typography/src/components/heading-xsmall.tsx, packages/wonder-blocks-typography/src/components/label-large.tsx, packages/wonder-blocks-typography/src/components/label-medium.tsx, packages/wonder-blocks-typography/src/components/label-small.tsx, packages/wonder-blocks-typography/src/components/label-xsmall.tsx, packages/wonder-blocks-typography/src/components/styles.module.css, packages/wonder-blocks-typography/src/components/tagline.tsx, packages/wonder-blocks-typography/src/components/title.tsx, packages/wonder-blocks-button/src/components/__tests__/button-with-icon.test.tsx

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

@jandrade jandrade removed the request for review from a team May 21, 2024 19:08
Copy link
Contributor

github-actions bot commented May 21, 2024

npm Snapshot: Published

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

Packages can also be installed manually by running:

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

@khan-actions-bot khan-actions-bot requested a review from a team May 22, 2024 18:19
@jandrade jandrade removed the request for review from a team May 22, 2024 18:20
@khan-actions-bot khan-actions-bot requested a review from a team May 22, 2024 19:14
@jandrade jandrade changed the title FEI-5589: Experiment with CSS modules [WIP] FEI-5589: Experiment with CSS modules - DO NOT REVIEW May 24, 2024
@jandrade jandrade marked this pull request as draft June 25, 2024 14:51
@jandrade jandrade marked this pull request as draft June 25, 2024 14:51
@jandrade jandrade removed the request for review from a team June 25, 2024 14:51
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.

2 participants