Ensure text does not overflow ButtonToggle component container

[kishanivelupillai-sage]

Current behaviour

Text within ButtonToggle component overflows its container when text is long.

Expected behaviour

Text within ButtonToggle component should not break its container when text is long.

CodeSandbox or Storybook URL

https://codesandbox.io/s/button-toggle-overflow-content-v7z04n?file=/src/App.js

JIRA Ticket (Sage Only)

SBS-51730

Suggested Solution

No response

Carbon Version

117.7.0

Design Tokens Version

2.65.0

What browsers are you seeing the problem on?

Chrome

What Operating System are you seeing the problem on?

MacOS

Anything else we should know?

No response

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[robinzigmond]

@harpalsingh , what are your thoughts on this? I'm told it was previously agreed that we would support 2 lines of wrapping but not 3. Is this a valid usecase that we should fix in Carbon, or does it need to be redesigned?

[Parsium]

Hi @harpalsingh, any thoughts on @robinzigmond's comment above?

[Parsium]

@tempertemper what are your thoughts on this? If we do want to allow the button text to wrap, how many lines would be considered excessive?

[Parsium]

Hi @Sage/sbc-nebula-squad 👋🏼 We think this should now fixed as part of version 126.8.0. If this is still a problem, feel free to reopen this.