Skip to content

fix(IconButton): add Storybook controls - #22859

Open
Subhom1 wants to merge 1 commit into
carbon-design-system:mainfrom
Subhom1:fix-icon-button-storybook-controls-20928
Open

fix(IconButton): add Storybook controls#22859
Subhom1 wants to merge 1 commit into
carbon-design-system:mainfrom
Subhom1:fix-icon-button-storybook-controls-20928

Conversation

@Subhom1

@Subhom1 Subhom1 commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

Closes #20928

Completes the IconButton Storybook controls in React and Web Components. Default stories now provide concrete args and correctly typed controls for tooltip behavior, selection, sizing, delays, and alignment. Badge variants expose only the controls they consume, with matching badge count, disabled, and label controls.

The Web Components story now binds closeOnActivation as a property so setting the control to false overrides the component’s true default.

Changelog

New

  • Added concrete React args and controls for automatic alignment, tooltip activation behavior, shadow and contrast settings, delays, selected state, and size.
  • Added Web Components automatic-alignment and complete default args.
  • Added focused badge count, disabled, and tooltip label controls to both badge stories.
  • Added an href control to the Web Components link-based badge story.

Changed

  • Limited badge variant controls to values consumed by each story.
  • Hid the inoperable React children control because the story intentionally renders a fixed icon.
  • Updated the Web Components closeOnActivation binding so false values work.
  • Replaced the literal Web Components badge tooltip text with the label arg.
  • Constrained badge counts to non-negative numbers.

Removed

  • Removed unrelated default IconButton controls from the Web Components badge variant.

Testing / Reviewing

  1. Use the repository Node version:

    nvm use
    
  2. Start React Storybook:

    yarn workspace @carbon/react storybook
    
  3. Open Components/IconButton and verify:

    • Every Default control updates the button or tooltip.
    • Both current and deprecated alignment selectors move the tooltip.
    • With Badge Indicator exposes only badgeCount, disabled, and label.
    • A badge count of 0 renders a dot, while positive counts render the number.
  4. Start Web Components Storybook:

    yarn workspace @carbon/web-components storybook
    
  5. Open Components/Icon Button and verify:

    • Default controls update alignment, automatic alignment, activation behavior, open/disabled/selected state, delays, kind, label, and size.
    • closeOnActivation can switch between true and false.
    • With Badge Indicator exposes badgeCount, disabled, href, and label.
    • Every badge control updates the example.
  6. Run the focused checks:

    yarn prettier --check packages/react/src/components/IconButton/IconButton.stories.js packages/web-components/src/components/icon-button/icon-button.stories.ts
    yarn jest packages/react/src/components/IconButton/__tests__/IconButton-test.js --runInBand
    yarn workspace @carbon/react storybook:build
    yarn workspace @carbon/web-components storybook:build
    npx --yes serve -l 3000 packages/react/storybook-static
    CI=1 yarn playwright test e2e/components/IconButton/IconButton-test.avt.e2e.js --project chromium
    

Test Screenshots
Screenshot 2026-08-02 at 2 04 03 a m

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

  • Reviewed every line of the diff
  • Updated documentation and Storybook examples
  • Wrote passing tests that cover this change
  • Addressed any impact on accessibility (a11y)
  • Tested for cross-browser consistency
  • Validated that this code is ready for review and status checks should pass

More details can be found in the [pull request guide](https://github.com/carbon-design-system/carbon/blob/main/docs/guides/reviewing-pull-requests.md).

@Subhom1
Subhom1 requested a review from a team as a code owner August 2, 2026 01:04
@netlify

netlify Bot commented Aug 2, 2026

Copy link
Copy Markdown

Deploy Preview for v3-carbon-web-components ready!

Name Link
🔨 Latest commit 05eb942
🔍 Latest deploy log https://app.netlify.com/projects/v3-carbon-web-components/deploys/6a6e97b90e2a770008d25202
😎 Deploy Preview https://deploy-preview-22859--v3-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Aug 2, 2026

Copy link
Copy Markdown

Deploy Preview for v2-carbon-react ready!

Name Link
🔨 Latest commit 05eb942
🔍 Latest deploy log https://app.netlify.com/projects/v2-carbon-react/deploys/6a6e97b961bcaf0008e2c93b
😎 Deploy Preview https://deploy-preview-22859--v2-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Aug 2, 2026

Copy link
Copy Markdown

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 05eb942
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/6a6e97b9f36a7e00075d5ae3
😎 Deploy Preview https://deploy-preview-22859--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Aug 2, 2026

Copy link
Copy Markdown

Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit 05eb942
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a6e97b9f629380008cab959
😎 Deploy Preview https://deploy-preview-22859--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Aug 2, 2026

Copy link
Copy Markdown

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 05eb942
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/6a6e97b9a75e680008147a3a
😎 Deploy Preview https://deploy-preview-22859--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov

codecov Bot commented Aug 2, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.25%. Comparing base (06563e3) to head (05eb942).
⚠️ Report is 18 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #22859      +/-   ##
==========================================
+ Coverage   89.60%   90.25%   +0.64%     
==========================================
  Files         582      265     -317     
  Lines       53277    40044   -13233     
  Branches     7286     2202    -5084     
==========================================
- Hits        47738    36140   -11598     
+ Misses       5402     3886    -1516     
+ Partials      137       18     -119     
Flag Coverage Δ
main-packages ?
web-components 90.25% <ø> (-0.02%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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.

[IconButton]: add controls args to every story

1 participant