fix(button-toggle): long text overflows button and update large icon padding

[nuria1110]

fix #6799

Proposed behaviour

• Padding of ButtonToggle with a large icon is aligned with designs.
• Small con size is 20px.
• When a ButtonToggle with long text content wraps in smaller screens, the button's height is adjusted to fit the wrapped text and is centre aligned.

Current behaviour

• Padding of ButtonToggle with a large icon is not aligned with designs.
• Small icon size is 24px.
• When a ButtonToggle with long text content wraps in smaller screens, the text overflows the button and is not centre aligned.

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Screenshots are included in the PR if useful
• All themes are supported if required
• Unit tests added or updated if required
• Playwright automation tests added or updated if required
• Storybook added or updated if required
• Translations added or updated (including creating or amending translation keys table in storybook) if required
• Typescript d.ts file added or updated if required
• Related docs have been updated if required

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Additional context

• "Wrapped Buttons" story is intended to have more wrapped buttons in the Chromatic snapshot, this done to capture this specific behaviour.

Testing instructions

• See added "Large Icon With Long Text" test story for bug fix.

[edleeks87]

Really good stuff @nuria1110, my comments are non-blocking let me know what you think I'm happy to approve if you disagree 😄

[edleeks87]

suggestion (non-blocking): might be worth using the tokens here, don't mind if it's a new bit of work as there's several config objects in this file that use hardcoded values

const paddingLargeIconConfig = {
  small: "var(--spacing100)",
  medium: "var(--spacing100) var(--spacing150) var(--spacing000)",
  large: "var(--spacing100) var(--spacing300)",
};

[edleeks87]

comment (non-blocking): we could set the width to be smaller when run in chromatic here so we get a snapshot of them stacked fully vertically

 const inChromatic = isChromatic();

  <Box width={inChromatic ? "175px" : "375px"} display="flex" flexWrap="nowrap">

[edleeks87]

alternatively you could add a test story and capture the example you've screenshotted in the above PR description if you prefer that

[carbonci]

🎉 This PR is included in version 141.0.7 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀