Button Group: Add new component

[ElishaSamPeterPrabhu]

Description

• Used existing modus buttons to be attached as a group when given under the tag modus-button-group.
• Updated UI of button with the property , toggelable for toggling the selected feature and a state buttonPosition to handle the UI of the button based on postion (left,center and right)
• Has two style the default one which doesn't have a selected state and the other style single which allows button to have a selected state

References: #1558

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

How Has This Been Tested?

https://deploy-preview-2110--moduswebcomponents.netlify.app/?path=/docs/components-buttongroup--default-selection-button-group

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[netlify]

✅ Deploy Preview for moduswebcomponents ready!

Name	Link
🔨 Latest commit	1cdda49
🔍 Latest deploy log	https://app.netlify.com/sites/moduswebcomponents/deploys/66219b75cd5c5500081da536
😎 Deploy Preview	https://deploy-preview-2110--moduswebcomponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 27 (🟢 up 1 from production) Accessibility: 98 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jmwood330t]

Good tests here - and thanks.
Jim

[cjwinsor]

@ElishaSamPeterPrabhu I found this example of a button group i think we can mimic how they handle the rounded borders.
https://github.com/goatui/components/tree/main/src/components/button-group

Also, we need to talk to Ewa about the style. The guidelines currently only show outline and thats all she wants us to implement... but it makes things interesting as the button group could accept any buttons naturally as they are configured if we wanted to.. mixing and matching styles would be odd but doable. The alternative being that we can have a different child component... modus-button-group-button sounds stupid though.

For now, see if you can manage handling the border radius using css variables like my example.

As for as the toggleable option, still considering that part of it.... I'm wondering if we could leverage type and have a toggle type.. I'll ask in the meeting tomorrow to see if @coliff has any issues or concerns.

I'd almost want to just have it be

<modus-button-group>
  <modus-button type="button"></modus-button>
  <modus-button type="toggle"></modus-button>
  <modus-button type="button"></modus-button>
</modus-button-group>

but this leads to people being able to set random sizes, colors, and styles... which would be stupid to do but they could do it...

With your current method or remapping, it could solve that, but it also adds complexity where we could simply just have a slot and throw the buttons in there and let the user deal with each buttons events individually.

Just putting all my current thoughts down as I haven't updated this PR with any of them yet.

[ElishaSamPeterPrabhu]

@ElishaSamPeterPrabhu I found this example of a button group i think we can mimic how they handle the rounded borders. https://github.com/goatui/components/tree/main/src/components/button-group

Also, we need to talk to Ewa about the style. The guidelines currently only show outline and thats all she wants us to implement... but it makes things interesting as the button group could accept any buttons naturally as they are configured if we wanted to.. mixing and matching styles would be odd but doable. The alternative being that we can have a different child component... modus-button-group-button sounds stupid though.

For now, see if you can manage handling the border radius using css variables like my example.

As for as the toggleable option, still considering that part of it.... I'm wondering if we could leverage type and have a toggle type.. I'll ask in the meeting tomorrow to see if @coliff has any issues or concerns.

I'd almost want to just have it be

<modus-button-group>
  <modus-button type="button"></modus-button>
  <modus-button type="toggle"></modus-button>
  <modus-button type="button"></modus-button>
</modus-button-group>

but this leads to people being able to set random sizes, colors, and styles... which would be stupid to do but they could do it...

With your current method or remapping, it could solve that, but it also adds complexity where we could simply just have a slot and throw the buttons in there and let the user deal with each buttons events individually.

Just putting all my current thoughts down as I haven't updated this PR with any of them yet.

I tried the slotting method from the above github link am unable to modify the css properties of the modus button from the button group.

In my opinion user's mismatching the button style should be forbidden, as I consider the button group a separate component and shouldn't have different buttons present on a list of buttons inside the button group .Hence showing the outline alone is fine.

Regarding the toggleable functionality , since we are toggling between one button and another shouldn't all the buttons of a button group carry the same type either toggle or button?

[cjwinsor]

@ElishaSamPeterPrabhu We will still need the selection-type prop so by default its just regular buttons without the isActive being used and the single mode where only one is active at a time.

[cjwinsor]

Some of these aren't used anymore

[cjwinsor]

Cleanup unused. Those we should keep Selection Type as we should have that property.

[ElishaSamPeterPrabhu]

Cleaned up

[cjwinsor]

Should only be type toggle when selection type is single, and we would need to add an event listener to make sure only one button is clicked at a time. So you can keep track of selectedButtons and set isActive to false on any in that array (multiple select coming later would probably need this to be an array).

[ElishaSamPeterPrabhu]

isActive is a state in modus-button, so are you saying to modify it from button groups?

[ElishaSamPeterPrabhu]

I removed the selection-type previously because I thought we didn't finalize on the selection methods .
For now am going with two types single and the default one.