This PR enhances the ButtonGroup component to support the Toolbar pattern, with arrow-key navigation support. It is off by default and can be turned on by specifying role="toolbar".
I would have liked to make this pattern the default, but that is risky because users might be passing all kinds of nonsense into ButtonGroup (such as <input>, which already has arrow-keys reserved for moving the cursor between characters; see MDN advice). Also, in some cases, multiple ButtonGroups might need to be combined into a single toolbar.
I was actually implementing this from scratch, when I randomly found that floating-ui provides the keyboard navigation and focus management for free? Not sure why, but I won't complain if I have to write less code.
I did have to move some things around in ButtonGroup.tsx, since it has a bunch of unrelated code for overflow. Turn off whitespace for better diff when reviewing.
Changes
This PR enhances the
ButtonGroupcomponent to support the Toolbar pattern, with arrow-key navigation support. It is off by default and can be turned on by specifyingrole="toolbar".I would have liked to make this pattern the default, but that is risky because users might be passing all kinds of nonsense into
ButtonGroup(such as<input>, which already has arrow-keys reserved for moving the cursor between characters; see MDN advice). Also, in some cases, multipleButtonGroups might need to be combined into a single toolbar.I was actually implementing this from scratch, when I randomly found that
floating-uiprovides the keyboard navigation and focus management for free? Not sure why, but I won't complain if I have to write less code.I did have to move some things around in
ButtonGroup.tsx, since it has a bunch of unrelated code for overflow. Turn off whitespace for better diff when reviewing.Testing
Manually tested that it works fine.
https://github.com/iTwin/iTwinUI/assets/9084735/5dfc8df7-d7bc-44b4-be77-199f9d8aae7d
https://github.com/iTwin/iTwinUI/assets/9084735/f7d69ed2-7ee0-4171-a18c-322e2e8152ba
Added e2e test as well. And updated one of the existing stories.
Docs
Added jsdocs + real docs + changeset.