search

mia-platform / design-system

React graphical components designed by Mia Platform
https://mia-platform.github.io/design-system/
Apache License 2.0
13 stars 1 forks source link

New component: Button Group #682

Open FrankieBortot opened 3 weeks ago

FrankieBortot commented 3 weeks ago

I suggest the creation of the new component "Button Group", which will act as a container for multiple buttons in a predefined layout. This component allows us to ensure consistency of UI, letting us define a specific layout when multiple buttons are put together.

Danielecina commented 3 weeks ago

Hi @FrankieBortot, can you show some inspirational images? the proposal seems like something like this

Screenshot 2024-10-30 alle 16 58 44
FrankieBortot commented 3 weeks ago

Hi @FrankieBortot, can you show some inspirational images? the proposal seems like something like this Screenshot 2024-10-30 alle 16 58 44

Sure! Here are some examples from other Design Systems:

It's mainly used for layout, there are no changes affecting the base component style

GiovannaMonti commented 3 weeks ago

Hi, just to give more insight into this issue, we discussed possible strategies to graphically organize groups of components in a consistent way. The chosen strategy should apply to the internal development of components inside the design system as well as external usage.

On the internal side, design-system components like Modal, Drawer or Card can render groups of buttons. Right now, these components adopt different approaches to do so (e.g. they can demand an array of actions, which are then turned into buttons, or they can ask for a generic extra property to be filled with react nodes, among which there can be buttons). The idea is that they all start using the same interface for rendering actions (to be defined!), and under the hood the ButtonGroup should be used.

On the external side, design-system users (developers using DS components for their own project) might find it useful to have a ButtonGroup component at hand, for example if they are working on custom containers that should render groups of buttons. Providing them with a ready-to-use ButtonGroup component allows us to guarantee better graphical integration between their custom implementations and our design-system components.

Note: if we were just to focus on the internal side, the ButtonGroup component would not necessarily be the go-to option, because there are infinite ways to structure and abstract component layouts. However, since we think this type of component could be useful to external users, we decided to go with this solution.

Once this solution is discussed and approved, when we implement the ButtonGroup component we must also update the aforementioned component interfaces (Modal, Card, Drawer) to use it internally.