ActionMenu: Default behaviour wraps titles instead of using the available space

[maximedegreve]

Description

An issue has arisen with the ActionMenu, where the titles in the menu are wrapping even when there's sufficient room to display them without wrapping. You can see the details in this internal issue #9265.

Menus without a set fixed width should expand automatically, unless there's no space left on the screen. It's better to avoid setting a fixed width, as menu item labels can change based on their state, which might result in odd, unused space at the end of titles.

Steps to reproduce

1. Go to this feature internally behind a feature flag
2. Click the 3 dot button in one of the items
3. The first item is wrapped

Version

v36.2.0

Browser

Safari, Chrome

[siddharthkp]

Looking at the code, ActionMenu does not grow beyond min-width: 192px on it's own.

You can make it grow in 2 ways:

1. Adding width prop to <ActionMenu.Overlay width="medium">. One of | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'auto'
2. Adding white-space: nowrap to the Item: <ActionList.Item sx={{'white-space': 'nowrap'}}> which will force it grow beyond the min-width.

I'm wondering if we should always add nowrap on the label. 🤔 Not sure if there are cases where we might want it to wrap, there are cases where you might want to truncate it though. @langermank run into that last week, i think!

[maximedegreve]

@siddharthkp, I've explored various menu implementations, like the one found at here, and noticed they all use an automatic width setting. I'm not sure why there would be a need for manual width adjustment, but perhaps I'm missing something.

[siddharthkp]

I'm not sure why there would be a need for manual width adjustment, but perhaps I'm missing something

I don’t think its intentional 😅

[lesliecdubs]

Assigning @siddharthkp and moving to in progress since there's a draft PR in progress. Sid, if the draft doesn't pan out please move this issue back to the teams backlog "Inbox" for further discussion.

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.