search

carbon-design-system / carbon-design-kit

A versioned, comprehensive kit of the Carbon Design System visual assets (components, icons, pictograms, text styles, color styles, grid templates).
Apache License 2.0
1.07k stars 153 forks source link

[Figma] v10: overflow menu items resize on hover in prototype #648

Open heinsj opened 1 year ago

heinsj commented 1 year ago

[FIGMA, V10]: Overflow menu items resize on hover in prototype

Detailed description

List items in the "Overflow menu" change width on hover when viewed in a prototype. This is happening in a prototype when the overflow menu is open and I hover over items in the overflow list. Each overflow list item has hover interaction associated with it to change to the hover variant.

Upon investigating, this is happening because the width of each 'Overflow menu list item' is not set to "Fill" in all variants. The width is inconsistent between variants and "Overflow menu list items" within a given variant.

My understanding is that this was fixed in v11 but we are not using v11 yet.

What version of the Carbon Design System Kit are you using? (v10) Gray 10 Carbon theme

Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name. "Overflow menu"

What did you expect to happen? What happened instead? What would you like to see changed? I expected each overflow list item to fill the width of the overflow menu.

Is this issue being filed based on a discrepancy between the website/code and the kit? If so what is the inconsistency? No

What offering/product do you work on? Any pressing ship or release dates we should be aware of? IBM Engineering - no pressing release but this is a difficult issue to work around as it applies to many variants in the component.

Steps to reproduce the issue

  1. Add "Overflow menu" to a screen, expand it and populate some list items.
  2. View in prototype mode.
  3. Hover over each list item to see the items change to hover style as you move over each item.
  4. Observe that the width of some items changes on hover.
  5. Also, observe that the overflow icon might change to a + sign (default icon for icon button)

Also, see the attached video that demonstrates the issue.

Additional information

Video of Overflow menu used in a data table component: https://user-images.githubusercontent.com/33330856/218526287-81c06f60-d1cd-4b65-b843-0ec00e1d5586.mp4

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized (i.e.use the libraries label for any issue relating to the Carbon Sketch Library). This will help us to better understand and address your issue.

stale[bot] commented 1 year ago

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.