feat: vertical oriented button group

[ruanyl]

Description

This commit added a new prop(orientation) to the current OuiButtonGroup, the possible values are horizontal and vertical. The default value is horizontal which match the current UI behavior. With vertical prop, the button group will be oriented vertically.

Example:

Please NOTE: vertical orientation doesn't work with button size compressed as compressed button group has a fixed height. @KrooshalUX Could you team provide some advices from UX perspective?

Issues Resolved

#659

Check List

• [x] New functionality includes testing.
• [x] New functionality has been documented.
• [x] All tests pass
  • [x] yarn lint
  • [x] yarn test-unit
• [x] Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

For more information on following Developer Certificate of Origin and signing off your commits, please check here.

[KrooshalUX]

@ruanyl great question re: compressed. I'm not entirely familiar with the implementation details so apologies if this is a bit naïve - Is there an approach where we can expand compressed beyond just a boolean? So if orientation = vertical and compressed = true then fixed width and if orientation = horizontal and compressed = true then fixed height ?

I'm wondering if the way this was structured is why some of the other components have orientation split into different components all together.

[ruanyl]

@KrooshalUX

So if orientation = vertical and compressed = true then fixed width and if orientation = horizontal and compressed = true then fixed height

Technically it is doable, but if orientation = vertical with fixed width could potentially problematic as the button text might overflow.

I'm wondering if the way this was structured is why some of the other components have orientation split into different components all together.

Do you have an example of this?

[BSFishy]

Do you have an example of this?

https://oui.opensearch.org/1.1/#/navigation/steps

[joshuarrrr]

@ruanyl @KrooshalUX Is this a requirement for any 2.10 features?

[ruanyl]

@joshuarrrr No, this is just an improvement

[KrooshalUX]

@joshuarrrr nope, just something we want eventually.

@ruanyl can you outline where we are blocked ?

[ruanyl]

@KrooshalUX This is not a blocker.

[KrooshalUX]

@ruanyl oh, no , to clarify - understood its not a blocker for 2.10, but where are we blocked on finishing the issue? I am not sure if there is any outstanding decisions / need from UX ?

[joshuarrrr]

I'm going to mark this as a draft for now, but @ruanyl feel free to take it out of draft status when you're able to make the updates.

[ruanyl]

@virajsanghvi @AMoo-Miki @ashwin-pc Finally get the PR updated, could you take another look please?

[virajsanghvi]

Can you add a changelog entry?

Curious, where would this be used in OSD? Is this part of any designs?

[ruanyl]

Can you add a changelog entry?

Curious, where would this be used in OSD? Is this part of any designs?

Sure, I will update the changelog.

This change was originally introduced for maps plugin, it currently uses two buttons vertically aligned, but would be better to use a button group.

[ruanyl]

@virajsanghvi PR updated, could you take another look please?