fix(ChatButton): add Storybook controls

[Subhom1]

Closes #20972

Adds Storybook controls to the preview ChatButton stories in both React and Web Components. The stories now use args-driven examples so every visible control is operative, with parity for button text, state, kind, size, icon, click action, and skeleton size.

Changelog

New

• Added a focused React Skeleton story with a size control.
• Added a focused Web Components Skeleton story with a size control.

Changed

• Converted the React preview__ChatButton story from a hardcoded multi-button demo to an args-driven Default story.
• Converted the Web Components Chat button story from a hardcoded multi-button demo to an args-driven Default story.
• Added operative controls for labels/content, disabled state, quick action state, selected state, kind, size, icon rendering, and click actions where supported by each implementation.

Removed

• Removed obsolete ChatButton story-only SCSS used only by the previous multi-instance demo layout.

Testing / Reviewing

1. Use the repository Node version and start Storybook:

   nvm use
   yarn workspace @carbon/react storybook
   yarn workspace @carbon/web-components storybook
   

2. Open the React Preview/preview__ChatButton stories.

3. Verify the React Default controls:

   • children updates the button text.
   • className is passed through.
   • disabled, isQuickAction, and isSelected update the visible state.
   • kind switches between primary, secondary, tertiary, ghost, and danger.
   • renderIcon switches between the Add icon and no icon.
   • size switches between sm, md, and lg.
   • Clicking the button logs the onClick action.

4. Verify the React Skeleton story:

   • size switches between sm, md, and lg.

5. Open the Web Components Preview/Chat button stories.

6. Verify the Web Components Default controls:

   • children updates the button text.
   • disabled, isQuickAction, and isSelected update the visible state.
   • kind switches between primary, secondary, tertiary, ghost, and danger.
   • icon switches between the Add icon slot and no icon.
   • size switches between sm, md, and lg.
   • Clicking the button logs the onClick action.

7. Verify the Web Components Skeleton story:

   • size switches between sm, md, and lg.

8. Run the focused tests and checks:

   yarn prettier --check packages/react/src/components/ChatButton/ChatButton.stories.js packages/web-components/src/components/chat-button/chat-button.stories.ts
   ./node_modules/.bin/eslint --no-ignore --max-warnings 0 packages/react/src/components/ChatButton/ChatButton.stories.js packages/web-components/src/components/chat-button/chat-button.stories.ts
   yarn jest packages/react/src/components/ChatButton/__tests__/ChatButton-test.js packages/react/src/components/ChatButton/__tests__/ChatButtonSkeleton-test.js --runInBand
   yarn workspace @carbon/web-components exec web-test-runner "src/components/chat-button/__tests__/*.js" --node-resolve --concurrency=1
   yarn workspace @carbon/react storybook:build
   yarn workspace @carbon/web-components storybook:build
   

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

[netlify]

✅ Deploy Preview for v2-carbon-react ready!

Name	Link
🔨 Latest commit	590c3d7
🔍 Latest deploy log	https://app.netlify.com/projects/v2-carbon-react/deploys/6a83851a8ef54f000873cbad
😎 Deploy Preview	https://deploy-preview-23040--v2-carbon-react.netlify.app
📱 Preview on mobile	Toggle 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]

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

Name	Link
🔨 Latest commit	590c3d7
🔍 Latest deploy log	https://app.netlify.com/projects/v3-carbon-web-components/deploys/6a83851a3efa310008fc27ce
😎 Deploy Preview	https://deploy-preview-23040--v3-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle 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]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	590c3d7
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/6a83851abcd1c600070de681
😎 Deploy Preview	https://deploy-preview-23040--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle 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]

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

Name	Link
🔨 Latest commit	590c3d7
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a83851a2097a50008a47ccd
😎 Deploy Preview	https://deploy-preview-23040--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle 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]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	590c3d7
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/6a83851a9b6e8400082679d7
😎 Deploy Preview	https://deploy-preview-23040--carbon-elements.netlify.app
📱 Preview on mobile	Toggle 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 Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.81%. Comparing base (7373f58) to head (590c3d7).
⚠️ Report is 16 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #23040   +/-   ##
=======================================
  Coverage   89.81%   89.81%           
=======================================
  Files         614      614           
  Lines       55161    55161           
  Branches     7863     7853   -10     
=======================================
  Hits        49541    49541           
  Misses       5474     5474           
  Partials      146      146           

Flag	Coverage Δ
main-packages	87.90% <ø> (ø)
web-components	90.49% <ø> (+<0.01%)	⬆️

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.

[carbon-mcp-bot]

[AI agent review — Carbon grounded] · Looks Good

Reviewed by: bob · Commit: 590c3d7
Carbon verification: Carbon-specific claims verified using Carbon Builder skill (primary authority) and Carbon MCP (fallback).

Recommendation

No issues found.

No blocking or major issues were found. Any nit-level notes below are entirely optional and provided for completeness.

Summary

This PR converts the React and Web Components ChatButton stories from hardcoded multi-button demos to args-driven stories with operative Storybook controls, and removes the now-unused story-only SCSS files. No confirmed findings.

Details

Review artifacts:

• PR: fix(ChatButton): add Storybook controls #23040
• Commit: 590c3d7
• Agent: bob

---

Estimated Token Usage:

• Input tokens: ~16,014
• Output tokens: ~27,625
• Total tokens: ~43,639

Note: Token estimates are approximate and based on character count (1 token ≈ 4 characters).

---

An AI agent generated this review. Human review is advised before acting on any findings.