fix(ButtonGroup): apply fullWidth to root element

[emmanuel-ferdman]

User description

PR Summary

• I have read the Contribution Guide for this project.

Previously, toggling the fullWidth prop in the Storybook Props Table had no visible effect because the Overview story didn't provide a full-width container for the component. This fix updates the Overview story to conditionally wrap ButtonGroup in a full-width container when fullWidth={true}.

Resolves #3130.

---

PR Type

Bug fix

---

Description

• Replace template-based render with conditional full-width wrapper

• Apply fullWidth prop to root container element

• Remove unused createComponentTemplate import dependency

---

Diagram Walkthrough

flowchart LR
  A["ButtonGroup component"] -->|fullWidth true| B["Wrapped in full-width div"]
  A -->|fullWidth false| C["Rendered directly"]
  B --> D["Full-width container applied"]
  C --> D

Loading

File Walkthrough

Relevant files

Bug fix

ButtonGroup.stories.tsx Implement conditional full-width wrapper in story                packages/core/src/components/ButtonGroup/stories/ButtonGroup.stories.tsx Removed createComponentTemplate import and template binding Replaced template-based render with custom render function Added conditional wrapper that applies width: 100% style when fullWidth={true} Maintains original component behavior when fullWidth={false} +4/-5

---

[qodo-merge-for-open-source]

PR Reviewer Guide 🔍

(Review updated until commit 157d90f)

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 3130 - PR Code Verified Compliant requirements: Ensure the ButtonGroup fullWidth prop visibly affects the Overview story in Storybook. Make the story/container take 100% width when fullWidth is true so the prop has an effect. Keep existing behavior unchanged when fullWidth is false. Requires further human verification: Manually verify in Storybook that toggling fullWidth to true expands the story content to full width and that false maintains previous layout.

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Storybook Behavior Confirm the conditional wrapper actually influences the rendered width in the specific Storybook layout/theme; some containers may require height/box sizing or flex rules for full-width effect. render: args => { const content = <ButtonGroup {...args} />; return args.fullWidth ? <div style={{ width: "100%" }}>{content}</div> : content; },

[rivka-ungar]

Hi @emmanuel-ferdman, thanks for your contribution.
Please notice that this change is considered a breaking change. The full width seems to work, see here, so it is the actual story of the overview that should be fixed.
Thanks

[emmanuel-ferdman]

@rivka-ungar Thanks for the guidance! I've updated the PR to fix the Overview story instead of modifying the component.