OverflowMenu: dropdown menu items with overflow text do not have consistent padding between menu items.

What package(s) are you using?

• carbon-components
• carbon-components-vue

Detailed description

Describe in detail the issue you’re having.

In scenarios whereby the text of a dropdown list item is really long, whereby the text overflows to multiple lines, the padding between menu items is inconsistent.

Is this issue related to a specific component?

OverflowMenu

What did you expect to happen? What happened instead? What would you like to see changed?

I would expect that in instances whereby the menu item is long enough that it spreads multiple lines, then the list item itself should dynamically increase in height to facilitate the text.

What browser are you working in?

chrome

What version of the Carbon Design System are you using?

2.18

Steps to reproduce the issue

1. Step one - Visit an isolated sandbox environment, at https://codesandbox.io/s/carbonvue-overflow-menu-multiline-menu-items-4y7uh
2. Step two - Observe that the second item spans two lines, whilst the fourth item is so long that is spans 3 lines.
3. Step three - Observe that the text becomes illegible.

Additional information

As a temporary fix, we have been using:

.my-overflow-item {
  &.bx--overflow-menu-options__option {
    // replace height from core carbon
    height: initial;
    min-height: 2.5rem;
  }

  .bx--overflow-menu-options__btn {
    height: initial;
  }

  .bx--overflow-menu-options__option-content {
    white-space: initial;
    overflow: initial;
    text-overflow: initial;
    margin: 0.7rem 0;
  }
}

[laurenmrice]

Combobox is currently doing a one line ellipses here: http://react.carbondesignsystem.com/?path=/story/combobox--custom-text-input-handling

[asudoh]

I see that latest https://react.carbondesignsystem.com/?path=/story/overflowmenu--basic has long menu item, which implements ellipsis.