[Button] Component improvements

[aweell]

Button component improvements proposal

Draft of the component variants and props as CSS classes:

https://codepen.io/AlexBueno/pen/wvrZxER

Change prop size

Change current prop size since the only effective change is the width control.

Proposal for 3 sizes:

Fig. 1 - Proposed button sizes: large, default and compact.

• Large: cover the 44x44px target size recommended by the WCAG for pointer inputs.

• Default: Regular size for multipurpose uses (Current size)

• Compact: Use the button component:

  • Inside table rows or as related table actions
  • Contextual actions that are not related with the main application flow
  • In content-dense applications that need a compact size of the interactive components.

The main changes are applied to the height and padding:

• Large: height: 48px, padding: 0 1.25rem
• Default: height: 40px, padding: 0 1rem
• Compact: height: 32px, padding: 0 0.5rem

Add prop fillParent (current fillParent behavior inside the size prop)

Fig. 2 - Inline and block button behaviors

The current property is mixing width fixed values with two properties that are intimately related to the type of display the component has, I propose replacing the current small, medium and large width values, ending with a prop that allows the user switch between an inline behavior and a blocking behavior.

• By default the component display is proposed as inline-flex
• fillParent can be a boolean attribute that when set to true displays the component as a block (instead of changing the display, adding width of 100%)

References

• Ant design: block prop
• Atlassian: shouldFitContainer prop

Add prop danger

Fig. 3 - Danger button variants

Apart from the variants the component already has, a contextual danger style can be applied to each of them, meant to be used in destructive actions (e.g. delete or remove items)

• danger can be a boolean type prop with false as the default

[joaorbp]

Looking good, also allow it to be applied to the Toggle groups.