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-1645.pre: Append className value in Text component (fix) #2138

Merged
merged 1 commit into from
Dec 14, 2023

Conversation

jandrade
Copy link
Member

@jandrade jandrade commented Dec 13, 2023

Summary:

While working on adding custom option items to Dropdowns, I noticed that the
className prop was not being appended to the Text component. This PR fixes
that by changing the logic to append the className prop to the Text if it
includes both a className and a style prop.

Also updated the typography docs to include an example of using the style and
className props.

Issue: WB-1645

Test plan:

Verify that the unit tests pass.

Also verify that the following story works as expected:

http://localhost:6061/?path=/docs/typography--docs#with-style

  1. Verify that the text is blue (assigned via style).
  2. Verify that the has a bg color (assigned via className + css()).
  3. Lastly, verify that it includes a black border (assigned via className + and external css import).
Screenshot 2023-12-13 at 11 29 24 AM

@jandrade jandrade self-assigned this Dec 13, 2023
Copy link

changeset-bot bot commented Dec 13, 2023

🦋 Changeset detected

Latest commit: c3df0ca

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

This PR includes changesets to release 27 packages
Name Type
@khanacademy/wonder-blocks-core Patch
@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-data Patch
@khanacademy/wonder-blocks-dropdown 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-switch Patch
@khanacademy/wonder-blocks-testing 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

@khan-actions-bot khan-actions-bot requested a review from a team December 13, 2023 16:29
@khan-actions-bot
Copy link
Contributor

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to .changeset/stale-steaks-call.md, __docs__/wonder-blocks-typography/styles.css, __docs__/wonder-blocks-typography/typography.stories.tsx, packages/wonder-blocks-core/src/components/text.tsx, packages/wonder-blocks-core/src/components/__tests__/text.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 Dec 13, 2023

Size Change: +23 B (0%)

Total Size: 91.2 kB

Filename Size Change
packages/wonder-blocks-core/dist/es/index.js 3.7 kB +23 B (+1%)
ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 3.69 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-button/dist/es/index.js 4.27 kB
packages/wonder-blocks-cell/dist/es/index.js 2.22 kB
packages/wonder-blocks-clickable/dist/es/index.js 3.24 kB
packages/wonder-blocks-color/dist/es/index.js 1.15 kB
packages/wonder-blocks-data/dist/es/index.js 6.33 kB
packages/wonder-blocks-dropdown/dist/es/index.js 12.2 kB
packages/wonder-blocks-form/dist/es/index.js 5.34 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-button/dist/es/index.js 3.21 kB
packages/wonder-blocks-icon/dist/es/index.js 1.06 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 2.54 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.38 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.51 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.55 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

Copy link

codecov bot commented Dec 13, 2023

Codecov Report

Merging #2138 (c3df0ca) into main (70e846c) will increase coverage by 0.00%.
The diff coverage is 100.00%.

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #2138   +/-   ##
=======================================
  Coverage   97.05%   97.05%           
=======================================
  Files         242      242           
  Lines       28053    28058    +5     
  Branches     2456     2409   -47     
=======================================
+ Hits        27227    27232    +5     
  Misses        826      826           
Files Coverage Δ
...ackages/wonder-blocks-core/src/components/text.tsx 100.00% <100.00%> (ø)

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 70e846c...c3df0ca. Read the comment docs.

Copy link
Contributor

github-actions bot commented Dec 13, 2023

npm Snapshot: Published

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

Packages can also be installed manually by running:

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

Copy link
Contributor

A new build was pushed to Chromatic! 🚀

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

Chromatic results:

Metric Total
Captured snapshots 320
Tests with visual changes 3
Total stories 395
Inherited (not captured) snapshots [TurboSnap] 0
Tests on the build 320

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.

Ahh, tricky! Thanks for the fix.

@jandrade jandrade merged commit 6df21f7 into main Dec 14, 2023
31 of 35 checks passed
@jandrade jandrade deleted the option-item-as-cell-2 branch December 14, 2023 15:33
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.

3 participants