search

iTwin / appui

Monorepo for iTwin.js AppUi
MIT License
8 stars 2 forks source link

Ability to add a separator line between itemlist #772

Open arnoldas-v opened 7 months ago

arnoldas-v commented 7 months ago

Is your feature request related to a problem? Please describe.

It would be nice to have an ability to add a separator lines between items in GroupItemDef. It would allow to add a visual grouping between similar items without adding a submenu.

Something like that: image

Describe the Solution you'd like

A convenient way to use this might look like this:

new GroupItemDef({
    items: [
      new ToolItemDef({ toolId: "0", label: "Tool1" }),
      new ToolItemDef({ toolId: "1", label: "Tool2" }),
      new ToolItemSeparator(),
      new ToolItemDef({ toolId: "2", label: "Tool3" }),
      new ToolItemDef({ toolId: "3", label: "Tool33" }),
      new ToolItemSeparator(),
      new ToolItemDef({ toolId: "4", label: "Tool4" }),
    ],
   itemsInColumn: 1,
  }),

Describe alternatives you've considered

No response

Additional context

No response

GerardasB commented 7 months ago

This is currently under UX consideration. I think we could introduce this behavior by simply re-using current toolbar item grouping mechanism https://www.itwinjs.org/reference/appui-react/toolbar/commontoolbaritem/grouppriority/ A good candidate for this change would be a new opt-in toolbar implementation: #602