Ability to add a separator line between itemlist

[arnoldas-v]

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:

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]

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