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

Adds large IconButton size #2253

Merged
merged 3 commits into from
Jun 17, 2024
Merged

Adds large IconButton size #2253

merged 3 commits into from
Jun 17, 2024

Conversation

beaesguerra
Copy link
Member

@beaesguerra beaesguerra commented Jun 13, 2024

Summary:

  • IconButton: Add option for large value for size prop (24x24 icon size with target area of 48x48)

Issue: WB-1694

Test plan:

  • New large size for the IconButton meets specifications
    • ?path=/story/packages-iconbutton--sizes
    • ?path=/docs/packages-iconbutton-all-variants--docs
  • IconButton stories have 0 warnings in the Storybook a11y addon

@beaesguerra beaesguerra self-assigned this Jun 13, 2024
Copy link

changeset-bot bot commented Jun 13, 2024

🦋 Changeset detected

Latest commit: a15c4c4

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

This PR includes changesets to release 8 packages
Name Type
@khanacademy/wonder-blocks-icon-button Minor
@khanacademy/wonder-blocks-banner Patch
@khanacademy/wonder-blocks-modal Patch
@khanacademy/wonder-blocks-popover Patch
@khanacademy/wonder-blocks-search-field Patch
@khanacademy/wonder-blocks-dropdown Patch
@khanacademy/wonder-blocks-tooltip 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

Copy link
Contributor

github-actions bot commented Jun 13, 2024

Size Change: +13 B (+0.01%)

Total Size: 96.8 kB

Filename Size Change
packages/wonder-blocks-icon-button/dist/es/index.js 3.23 kB +13 B (+0.4%)
ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 3.78 kB
packages/wonder-blocks-banner/dist/es/index.js 1.52 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.28 kB
packages/wonder-blocks-cell/dist/es/index.js 2.24 kB
packages/wonder-blocks-clickable/dist/es/index.js 3.3 kB
packages/wonder-blocks-core/dist/es/index.js 3.66 kB
packages/wonder-blocks-data/dist/es/index.js 6.34 kB
packages/wonder-blocks-dropdown/dist/es/index.js 14.1 kB
packages/wonder-blocks-form/dist/es/index.js 5.35 kB
packages/wonder-blocks-grid/dist/es/index.js 1.36 kB
packages/wonder-blocks-i18n/dist/es/index.js 4.6 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.94 kB
packages/wonder-blocks-link/dist/es/index.js 2.53 kB
packages/wonder-blocks-modal/dist/es/index.js 5.51 kB
packages/wonder-blocks-pill/dist/es/index.js 1.64 kB
packages/wonder-blocks-popover/dist/es/index.js 4.85 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.52 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.54 kB
packages/wonder-blocks-switch/dist/es/index.js 2.09 kB
packages/wonder-blocks-testing/dist/es/index.js 3.94 kB
packages/wonder-blocks-theming/dist/es/index.js 693 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 855 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.91 kB
packages/wonder-blocks-typography/dist/es/index.js 1.48 kB

compressed-size-action

Copy link
Contributor

github-actions bot commented Jun 13, 2024

A new build was pushed to Chromatic! 🚀

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

Chromatic results:

Metric Total
Captured snapshots 339
Tests with visual changes 5
Total stories 427
Inherited (not captured) snapshots [TurboSnap] 0
Tests on the build 339

Copy link

codecov bot commented Jun 13, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.02%. Comparing base (4d14a6c) to head (a15c4c4).
Report is 1 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #2253      +/-   ##
==========================================
+ Coverage   94.52%   96.02%   +1.49%     
==========================================
  Files         248      248              
  Lines       29380    29383       +3     
  Branches     1664     1870     +206     
==========================================
+ Hits        27772    28214     +442     
+ Misses       1604     1155     -449     
- Partials        4       14      +10     
Files Coverage Δ
...-blocks-icon-button/src/components/icon-button.tsx 100.00% <100.00%> (ø)
...er-blocks-icon-button/src/util/icon-button-util.ts 100.00% <100.00%> (+9.09%) ⬆️

... and 40 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 4d14a6c...a15c4c4. Read the comment docs.

@beaesguerra beaesguerra marked this pull request as ready for review June 13, 2024 18:02
@khan-actions-bot khan-actions-bot requested a review from a team June 13, 2024 18:02
@khan-actions-bot
Copy link
Contributor

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to .changeset/four-donuts-chew.md, __docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx, __docs__/wonder-blocks-icon-button/icon-button.argtypes.ts, __docs__/wonder-blocks-icon-button/icon-button.stories.tsx, packages/wonder-blocks-icon-button/src/components/icon-button.tsx, packages/wonder-blocks-icon-button/src/util/icon-button-util.test.ts, packages/wonder-blocks-icon-button/src/util/icon-button-util.ts

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

Copy link
Contributor

npm Snapshot: Published

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

Packages can also be installed manually by running:

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

Copy link
Member

@jandrade jandrade left a comment

Choose a reason for hiding this comment

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

🎉 🚀

color="default"
/>
<View style={[styles.iconButtons]}>
{sizes.map((size) => (
Copy link
Member

Choose a reason for hiding this comment

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

praise: Excellent use of the "All variants" snapshot 👏 👏

@beaesguerra beaesguerra merged commit 16e1635 into main Jun 17, 2024
44 of 46 checks passed
@beaesguerra beaesguerra deleted the large-icon-button branch June 17, 2024 18:19
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