iTwin/appui

itemsInColumn property ignored in GroupItemDef

Opened this issue · 1 comments

Describe the bug

GroupItemDef does not respect itemsInColumn property

To Reproduce

Create a GroupItemDef with multiple items and define itemsInColumn property to 1

    items: [
      new ToolItemDef({ toolId: "0", label: "0" }),
      new ToolItemDef({ toolId: "1", label: "1" }),
      new ToolItemDef({ toolId: "2", label: "2" }),
      new ToolItemDef({ toolId: "3", label: "3" }),
      new ToolItemDef({ toolId: "4", label: "4" }),
      new ToolItemDef({ toolId: "5", label: "5" }),
      new ToolItemDef({ toolId: "6", label: "5" }),
      new ToolItemDef({ toolId: "7", label: "5" }),
    ],
    itemsInColumn: 1,
  })

Result: grouped by two columns (see screenshot)

Expected Behavior

List displayed in specified number of columns (1)

Screenshots

image

Desktop (please complete the applicable information)

Windows 11
electron 25.8.1
iTwinJs 4.4.3
appui-react: 4.10.0

Additional context

No response

GroupItemDef is a legacy way of providing toolbar items and should be deprecated.
Instead please use https://www.itwinjs.org/reference/appui-react/toolbar/toolbaritemutilities/ to create the toolbar items.
https://www.itwinjs.org/reference/appui-react/toolbar/toolbargroupitem/ currently doesn't have the itemsInColumn property and there are no plans to support that behavior.
However, we are working on a toolbar replacement #602 that is planned to have a single column group.