design-system icon indicating copy to clipboard operation
design-system copied to clipboard
verified publisher icon equinor

Nested Menu & Menu items

Open mimarz opened this issue 3 years ago • 6 comments

When nesting Menu's the subsequent Menu.Item with an icon are misaligned to the parent.

Try to see if there is a way to fix this so that they are aligned.

Example with a workaround for aligned menu item with icon: https://codesandbox.io/s/muddy-violet-5mim7t?file=/src/TopbarAccessibleMenu.tsx

mimarz avatar Mar 29 '22 14:03 mimarz

Should this ticket maybe be about adding support for nested menus in general? Its not like keyboard navigation works either since up/down arrow also opens the menu so you get trapped. Needs to be able to support multiple submenus i suppose?

oddvernes avatar May 05 '22 12:05 oddvernes

Should this ticket maybe be about adding support for nested menus in general? Its not like keyboard navigation works either since up/down arrow also opens the menu so you get trapped. Needs to be able to support multiple submenus i suppose?

Thats correct! Kb navigation might be finecky to sort out, but if you want to have a go at it go ahead @oddvernes

mimarz avatar May 06 '22 06:05 mimarz

I think I will park this for now, further discussion is needed about how a possible support for nesting should look like beyond making it work with alignment and keyboards support. (a menu requiring nesting is probably pretty large, otherwise we have sections. So then maybe there needs to be a data structure, internal handling of state, design, multiple levels and if so how to make sure submenus opens inside viewport etc)

oddvernes avatar May 09 '22 08:05 oddvernes

New floating-ui have examples with nested menus with KB support. Maybe we can another look at it after we introduce it 🤔 https://codesandbox.io/s/admiring-lamport-5wt3yg?file=/src/DropdownMenu.tsx

mimarz avatar Jun 22 '22 13:06 mimarz

Moved to TO DO since upgrade to Floating UI is already done and collection state management is not relevant any more in Menu.

akvam avatar Oct 03 '22 12:10 akvam

Hello EDS team,

We need to create a menu with submenus, I’ve check the menu/menu.item available in EDS looks like don’t support submenu. We currently need too level of next menu item.

Menu
```MenuItem
   ```MenuItem
     ```MenuItem
     
https://www.figma.com/design/ywFPniJaJk66PhvgFybyE4/RIPS-Portal-UI?node-id=2827-20590&t=oCsGbHSNApQn70GB-0

Any update for this feature be available in EDS? :)

dianacavalcanti avatar Jul 05 '24 11:07 dianacavalcanti