Overflow button group

[mis046]

Feature

If the toolbar grows beyond it’s available horizontal or vertical space, we place the tools within an overflow button. When the overflow button is selected, an additional toolbar slides perpendicular away from the overflow button.

Examples

[mayank99]

Hi @mis046 👋 Thanks for the issue!

It seems there are two parts to your feature request:

1. Overflow (hiding extra buttons)
2. Vertical button group

The first part is relatively simple, especially if you know how many icons you need to show. But if it needs to be responsive based on available width, then it's a bit more involved but still achievable. See https://codesandbox.io/s/itwinui-react-minimal-example-forked-r0ror (try changing the maxWidth value on line 54)

For the second part, I would suggest creating a feature request in the iTwinUI-css repo, as we will need to add the styles there before we can offer a vertical react component.

[mayank99]

@FlyersPh9 These two parts combined are an App UI feature. How much of this do we want to support in iTwinUI?

[FlyersPh9]

The ability to overflow a button group should be added to iTwinUI. But the overflow menu would open a regular menu with icon + label combo.

[mis046]

@FlyersPh9 It is good as long as we have the overflow feature for the button group. The look of the overflow menu doesn't matter that much. We've implemented our own overflow feature for now (thanks for the example @mayank99), but it would be better if it is built in the button group. Please keep us updated on the native overflow feature. Thanks!

[mayank99]

This is now available in v1.16.0 🎉

See story: https://itwin.github.io/iTwinUI-react/?path=/story/buttons-buttongroup--overflow