Feat/storybook atoms

[ekas]

What Github issue does this PR relate to? Insert link.

What should the reviewer know?

Have all stories of atoms.

[ericbolikowski]

Hi @ekas, great work here. Looks really good, so happy we're starting to document our components, and great to see them in Storybook.

I've looked through this and read up on storybook. I have quite a few questions and ideas. I heard from @helloanil that you're joining my office hours tonight? Let's go through this together then.

[ericbolikowski]

@helloanil, @ekas, I made a little discovery that can be helpful in figuring out what's going on with the <Button> styling. Please take a look and check if it's useful to resolving the issue.

https://www.loom.com/share/fba939c4d2f14c87b2c8b6d2758e19aa

[helloanil]

@helloanil, @ekas, I made a little discovery that can be helpful in figuring out what's going on with the <Button> styling. Please take a look and check if it's useful to resolving the issue.

https://www.loom.com/share/fba939c4d2f14c87b2c8b6d2758e19aa

@ericbolikowski Great investigation and findings. I took the investigation one step further and dived deep in the code and noticed the same line @ekas has been adding in some of the files:

import 'bulma/css/bulma.min.css'

Unfortunately, this line imports bulma css as a global stylesheet for all the stories, including our Button atom. As we're using a base classname for our Button atom, button, bulma css overrides the styles for this classname as it's stylesheet is added on the top.

I've spent some time understanding if ingesting those styles is possible for only some stories, but unfortunatey that's not possible as can be seen here:

storybookjs/storybook#729 => This issue is open since Mar 2017, CRAZY!

I was going to come and comment here that we're doomed and without removing Bulma fixing this would be impossible. However, one last trick came to my mind, which is changing the base classname from .button to .button-atom. This seems to be fixing the issue pretty well as bulma css doesn't care about the button tag name but only the .button classname.

We still need to cut our ties with Bulma, at least in the Design System level. All our Design System components should be building blocks, supporting tokenized styling: https://styled-system.com/getting-started

[ericbolikowski]

Excellent research, explanation and final solution @helloanil 🥳 a really KISS workaround. Let's get this baby merged.