mi6
Add vertical alignment option for toggle button groups.
Summary
Add a prop to toggle button groups that allow its buttons to be aligned vertically or horizontally.
💬 Description
To enable toggle button groups to be used on smaller screen sizes, or within smaller containers, the option to change to a vertical alignment would be beneficial.
https://github.com/mi6/ic-ui-kit/issues/748
💰 Use value
Makes the component more suitable for more use cases.
📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
Given that a toggle button group is being configured When setting its properties Then an option exists to change the alignment to the following options:
- Horizontal (default) - Buttons are aligned horizontally.
- Vertical - Buttons are stacked top to bottom.
Given that a toggle button group is set to vertical alignment When rendered Then the adjacent edges of each toggle button should have square corners And the top and bottom toggle button should have rounded corners on the top and bottom corners respectively. And the same focus behaviour, keyboard navigation, and selection methods should occur. And each toggle button should expand in width to meet the width of the toggle button group.
✏ Designs
If there's a Figma design file (or other mock-up), include it here.
## 🧾 Guidance If there's written guidance or documentation, include a link to it here.
Additional info
Tell us anything else useful to help us understand your suggestion.
Related issues
https://github.com/mi6/ic-ui-kit/issues/748
This is a simple design change by adding further variants, will require dev effort to implement in codebase and storybook
