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

• Fix fullWidth prop to apply to root element

• Remove unused template import in stories

• Update story render function for proper width behavior

---

Diagram Walkthrough

flowchart LR
  A["ButtonGroup component"] --> B["fullWidth prop fix"]
  B --> C["Root element styling"]
  D["Story template"] --> E["Custom render function"]
  E --> F["Conditional wrapper"]

Loading

File Walkthrough

	Relevant files
Tests	ButtonGroup.stories.tsx Update story to demonstrate fullWidth fix                                packages/core/src/components/ButtonGroup/stories/ButtonGroup.stories.tsx Remove unused createComponentTemplate import Replace template-based render with custom render function Add conditional wrapper div for fullWidth demonstration Update Overview story to properly showcase fullWidth behavior +4/-5

---

[qodo-merge-for-open-source]

PR Reviewer Guide 🔍

(Review updated until commit da9d757)

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 3130 - PR Code Verified Compliant requirements: Ensure ButtonGroup fullWidth prop visually takes effect in the Storybook Overview story. Make the story container allow the component to span 100% width when fullWidth is true. Reproduce and resolve the issue where toggling fullWidth in the Props Table shows no change. Requires further human verification: Manually verify in Storybook that toggling fullWidth updates the layout as expected across different viewports.

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Story Rendering The conditional wrapper uses an inline style with width: 100%. Confirm this reliably demonstrates fullWidth behavior within Storybook’s layout and does not conflict with global decorators or container constraints. 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.