Make it possible to pass in margin to Thumbprint React components

As @tomgenoni builds out revamped Thumbprint Utility classes and Jon K. revisits our spacing system, I think this would be a good opportunity to make it possible to add margins to our Thumbprint React components.

This has been a common pain point that folks have worked around by:

a. Adding a wrapper div. b. Avoiding the React components and using their Sass counterparts

Proposal:

<Button u="mb2 s:ms2">
  Click Me
</Button>

The prop u (for “utility”), added to all of our React components, will allow developers to pass in a whitelisted set of utility classes.

We’d start with margin classes, potentially expanding this to support other classes that affect the space around the component.

[tomgenoni]

mt4 is Tachyons, the s: prefix is Tailwind and indicates breakpoints. https://tailwindcss.com/docs/what-is-tailwind/

[danoc]

Re: @benknight’s example in his last comment, I’m leery about supporting the margin classname prop on every custom component, mainly for reasons cited in my first paragraph in this comment. Whatever solution we come up with should encourage less DOM elements to be used.

Not sure if I understand this part. How would a margin prop on Thumbprint components encourage more DOM?