Discovery: Button variants and styled-system PoC

[rcantin-w]

Because of all the refactoring of the button component going on and new designs (Exhibition Guides, Concepts) suggesting different versions of new buttons, I want to explore how complex/beneficial it would be to start using styled-system on top of styled-components. It allows for variants, which is a simpler way of declaring components in specific styles, hopefully keeping them aligned throughout the platforms instead of allowing for too much flexibility.

I'm exploring this one as I've used it before and it seems to match what are needs are in this moment. As they say:

[...] style functions can be written on a one-off basis, but Styled System is meant to help reduce boilerplate, ensure a consistent styling API, and speed the development of component-based design systems.

This discovery will also ensure it still allows some flexibility when there are edge cases.

[rcantin-w]

Proof of concept started in the poc-styled-system branch. I just worked with the variant tool styled-system offers, and only did the work on buttons. There, different scales represent main button styles (outline/solid), colour schemes (e.g. white/dark/green) and sizes (small/medium/large). See here for where they are declared in the Button components. And here is where the scales are declared in config.js.

It seems it would be easily changeable to using this library if it is of interest, but for now I want to wait and see where things are headed with the new palette, which will certainly dictate what our new "atom" components will look like and if it's worth switching over.

I personally find it a very readable way of declaring components, whilst insuring their styles are aligned. It is still possible to declare your own styles if you decide you need something other than the available variants, just by using styled-components and declaring custom styles.

In this example, code changed in this way:

Before:

import { themeValues } from [...]

<ButtonSolid
   text="Button copy"
   colors={themeValues.colors.greenTransparentGreen}
   hoverUnderline={true}
   size="small"
/>   

After:

<ButtonSolid
   text="Button copy"
   variant="outline"
   variantColor="green"
   size="small"
/>   

or even, as I made "solid" and "green" defaults (and "medium" for the size) :

<ButtonSolid text="Button copy" variant="outline" size="small" />   

(in this case, hoverUnderline was made true when variant was "outline")

These of course are all suggestions, the way we go ahead with the different scales would depend on our needs.

All in all, It was a promising first array into looking into styled-system, and it would be an interesting avenue to go down when we have a more solid understanding of our new styles.