carbon
carbon copied to clipboard
Sage
MenuSegmentTitle text may wrap
Current behaviour
Where the MenuSegmentTitle has insufficient space, the text may wrap.
Expected behaviour
Segment title text not to wrap, instead causing the parent menu's width to grow to accommodate.
CodeSandbox or Storybook URL
https://codesandbox.io/s/wrapping-segment-title-j3plk6
JIRA Ticket (Sage Only)
SBS-65763
Suggested Solution
An option to prevent text wrapping of the segment title if current wrapping behaviour is intended/required.
Carbon Version
119.6.1
Design Tokens Version
No response
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.
@ljemmo another one for you to have a look at :), @johnb-sage would like the text on our MenuSegmentTitle component to stay on one line instead of wrapping. After looking on zeroheight and figma, there are some examples of MenuSegmentTitles within MenuItems but with no examples of a long string within a MenuSegmentTitle which exceeds the length of strings on other MenuItems. What do you think, should we allow consumers to no-wrap text like in other components such as Button?
@tomdavies73 so this feels like a scenario where we still need to allow wrapping but allow passing of max and min-widths to the menu parent container. Is this something that we allow today?
@ljemmo we do surface the width prop on MenuItems but not on MenuSegmentTitle, the only issue with relying on the use of a width prop would be sometimes we may not know what a reasonable minimum width would be. At the moment MenuItems set the width, if a MenuSegmentTitle is longer than a MenuItem it wraps. However I think it should be the opposite, MenuSegmentTitles set the width and if a MenuItem is longer it wraps. To me this makes more sense as the header text would always be longer than the menu item text, 9 times out of 10. Let me know what you think
@tomdavies73 the only concern i have for allowing no-wrap is that all our components need to be fully responsive. You can imagine a scenario with no-wrap where a title might pass outside of the viewport. Unless i'm mistaken? A reasonable min-width would be nothing lower than 320px but could be increased if needed by dev.
