[Bug]: Dropdown - inline variant has listbox menu wider than dropdown

[finken2]

Package

@carbon/styles

Browser

Chrome

Package version

v10 and v11

React version

v16

Description

The dropdown has a regular and an inline variant. With the regular dropdown, the width of the listbox menu is the same as the dropdown itself. This works well for layout.
The inline, on the other hand, does not respect the width of the dropdown, and allows the listbox menu to be much bigger. This is leading to issues in our layout where we have an inline dropdown near the right side of the screen.

The styles for listbox set a min-width and max-width for the inline variant:

carbon/packages/styles/scss/components/list-box/_list-box.scss

Line 297 in 81c85c8

.#{$prefix}--dropdown--inline .#{$prefix}--list-box__menu {

These should be determined by the layout of the dropdown itself, not arbitrarily defined.

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-dropdown--inline

Steps to reproduce

You can see the issue in the storybook. Look at the regular dropdown and the inline, and notice the difference in behavior. You can make the regular one a smaller width to see how the listbox menu stays that same size as well.

Suggested Severity

None

Application/PAL

IBM Cloud

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tw15egan]

@finken2 I think part of the issue is that if we remove the min-width, we could get into a state where the menu it very small, since the input width changes based on the width of the selected item:

Curious if you have any possible examples the team could look at to handle these situations better, i.e. how are you handling this oddity on the application end?

[finken2]

@tw15egan I don't have an example of a solution, but if you want to see the problem, you can look at the country dropdown in the OrderSummary when provisioning a Satellite location: link

I agree, it's not necessarily as simple as just removing the min-width, but the current behavior definitely doesn't feel right. I'll follow up on Slack and with our designer to discuss.

[tay1orjones]

@laurenmrice could you share the design spec for this? Should we consider changing the default styling to no longer have a min or max width?

For now the workaround here would be to override the style on the menu to fit your need.

[laurenmrice]

@tay1orjones In our design website usage docs, we do specify that there is no min or max width for dropdown menus, and it should be customized appropriately for its context, so it would be fine to do that.

Additionally, design could include more specific guidance on our website for inline dropdowns: When to use them and when not to use them. We could also have some dos/donts image examples around the width of inline dropdown menus as well. We want to avoid forcing anyone into a situation where the menu is so small that it truncates most of their menu item text.