Add a new property to component Dropdown to allow specifying the min-width of the` .bx--list-box__menu` class

[thanh-thuy-le]

Summary

Add a new property to component Dropdown to allow specifying the min-width of the.bx--list-box__menu class inside Dropdown so we can see full text (and not truncated text) of all values in the options list.

Clarify if you are asking for design, development, or both design and development.

Justification

Without this property, consumer of Dropdown has to use a specific className for their Dropdown and add a css to specify the min-width of the class .bx--list-box__menu in the scope of the Dropdown class , that means having a specific css per Dropdown.

Desired UX and success metrics

Describe the full user experience for this feature. Also define the metrics by which we can measure success/failure for the user.

"Must have" functionality

Highlight any "must have" needs and functionality for the request.

This should not be a full list of functionality; the Carbon team will work with you to define functionality based on the desired UX.

Specific timeline issues / requests

It's a UX requirement for Cognos Analytics release 11.2.1 (scheduled probably for early next year)

Do you want this work within a specific time period? Is it related to an upcoming release?

NB: The Carbon team will try to work with your timeline, but it's not guaranteed. The earlier you make a request in advance of a desired delivery date, the better!

Available extra resources

What resources do you have to assist this effort?

Carbon is a collaborative system. We encourage teams to build components and submit them for integration as either add-ons or core components.

[emyarod]

hi @thanh-thuy-le thanks for opening this enhancement request. would you mind expanding further on why a prop specifically for min-width would be more preferable to adding a CSS rule?

[thanh-thuy-le]

In my application, the class that use Dropdown is a generic class, we can not set a min-width that satisfies all providers, so the only solution is give them a way to set the min-width that they want and we pass this parameter down to Carbon Dropdown so it can be set on the internal element of Dropdown at run time. I don't see a convenient way to programmatically inject the css change on an inner element of Carbon dropdown component at run time.

[joshblack]

Hi there! 👋 Following up on this, it appears that the .bx--list-box__menu class uses a width: 100% declaration to span the width of the container that it is placed in.

If there is a specific override, like min-width, that needs to get applied I think wrapping the component should work:

function Dropdown({ minWidth, ...rest }) {
  return <CarbonDropdown className={minWidth && 'min-width-class'} {...rest} />;
}

Hope this helps! Let me know if you have any questions.