feat(components): add ButtonGroup component (DS-5244)

[KamilEmeleev]

Summary by CodeRabbit

• New Features

  • Added the experimental ButtonGroup component for grouping related buttons horizontally or vertically.
  • Supports shared variants, group-level disabling, loading states, icons, split-button layouts, custom root elements, and accessibility attributes.
  • Added ButtonGroup documentation and interactive examples.

• Bug Fixes

  • Buttons now correctly inherit variant and disabled states from their surrounding ButtonGroup.

• Tests

  • Added coverage for ButtonGroup rendering, orientation, variants, customization, and disabled behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: ea469cd4-493d-4b49-aa41-7932258e9535

📥 Commits

Reviewing files that changed from the base of the PR and between 125a362 and ed9eb4e.

📒 Files selected for processing (5)

• packages/components/src/components/ButtonGroup/ButtonGroup.stories.tsx
• packages/components/src/components/ButtonGroup/ButtonGroup.test.tsx
• packages/components/src/components/ButtonGroup/ButtonGroupContext.ts
• packages/components/src/components/ButtonGroup/types.ts
• tools/public_api_guard/components/ButtonGroup.api.md

🚧 Files skipped from review as they are similar to previous changes (3)

• packages/components/src/components/ButtonGroup/ButtonGroupContext.ts
• packages/components/src/components/ButtonGroup/ButtonGroup.test.tsx
• packages/components/src/components/ButtonGroup/ButtonGroup.stories.tsx

---

📝 Walkthrough

Walkthrough

Changes

ButtonGroup is introduced as a polymorphic, context-backed component. It provides grouped variant and disabled behavior, orientation styling, Storybook examples, documentation, tests, package exports, API extraction metadata, and roadmap registration.

ButtonGroup component

Layer / File(s)	Summary
ButtonGroup contracts and shared state packages/components/src/components/ButtonGroup/types.ts, packages/components/src/components/ButtonGroup/ButtonGroupContext.ts, packages/components/src/components/Button/Button.tsx, packages/components/src/components/Button/types.ts	Defines ButtonGroup props and context, and applies inherited variants and disabled state to nested Buttons.
ButtonGroup rendering and visual behavior packages/components/src/components/ButtonGroup/ButtonGroup.tsx, packages/components/src/components/ButtonGroup/ButtonGroup.module.css	Renders the semantic polymorphic group and styles orientation, variants, dividers, and disabled states.
Usage examples and behavioral validation packages/components/src/components/ButtonGroup/ButtonGroup.mdx, packages/components/src/components/ButtonGroup/ButtonGroup.stories.tsx, packages/components/src/components/ButtonGroup/__stories__/styles.css, packages/components/src/components/ButtonGroup/ButtonGroup.test.tsx	Documents and demonstrates ButtonGroup configurations, including split buttons, while testing rendering, orientation, variant propagation, and disabled behavior.
Public API and component registration packages/components/src/components/ButtonGroup/index.ts, packages/components/src/components/index.ts, tools/api-extractor/config.json, tools/public_api_guard/components/*, .storybook/components/Roadmap/data.ts	Publishes ButtonGroup exports, registers API extraction reports, updates the Button variant report, and adds the roadmap entry.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Consumer
  participant ButtonGroup
  participant ButtonGroupContext
  participant Button
  Consumer->>ButtonGroup: render grouped buttons
  ButtonGroup->>ButtonGroupContext: provide variant and isDisabled
  Button->>ButtonGroupContext: read group state
  ButtonGroupContext-->>Button: inherited state
  Button->>Button: compute effective variant and disabled state
  Button-->>Consumer: render configured button

Loading

Suggested reviewers: nikgurev

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the primary change: adding the ButtonGroup component.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/ds-5244

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Visit the preview URL for this PR (updated for commit ed9eb4e):

https://react-koobiq-next--prs-436-ub01wv3o.web.app

_{(expires Sat, 08 Aug 2026 08:54:39 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: fc29847d4a9e5cb1adf458c76a9b681c76e2eeff}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/components/src/components/ButtonGroup/ButtonGroup.tsx`:
- Line 19: Update the destructured isDisabled prop in ButtonGroup to default to
false, preserving the component’s existing behavior while following the
boolean-prop convention.

In `@packages/components/src/components/ButtonGroup/index.ts`:
- Around line 1-3: Update the ButtonGroup entry-point barrel to re-export the
ButtonPropVariant type used by ButtonGroupBaseProps and ButtonGroupContextProps,
then regenerate the corresponding API Extractor report so the public API
includes the type without an ae-forgotten-export.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 86bd0a0c-2e10-4fa0-b129-3a03b4650e64

📥 Commits

Reviewing files that changed from the base of the PR and between d112224 and 125a362.

📒 Files selected for processing (16)

• .storybook/components/Roadmap/data.ts
• packages/components/src/components/Button/Button.tsx
• packages/components/src/components/Button/types.ts
• packages/components/src/components/ButtonGroup/ButtonGroup.mdx
• packages/components/src/components/ButtonGroup/ButtonGroup.module.css
• packages/components/src/components/ButtonGroup/ButtonGroup.stories.tsx
• packages/components/src/components/ButtonGroup/ButtonGroup.test.tsx
• packages/components/src/components/ButtonGroup/ButtonGroup.tsx
• packages/components/src/components/ButtonGroup/ButtonGroupContext.ts
• packages/components/src/components/ButtonGroup/__stories__/styles.css
• packages/components/src/components/ButtonGroup/index.ts
• packages/components/src/components/ButtonGroup/types.ts
• packages/components/src/components/index.ts
• tools/api-extractor/config.json
• tools/public_api_guard/components/Button.api.md
• tools/public_api_guard/components/ButtonGroup.api.md