feat(components): add Flex and Text primitives to components library

[mcous]

overview

This PR follows up on a comment I posted in Slack earlier today. It starts a primitives section in the components library that we can use to build other components a little more easily:

• Flex - div with display: flex and props to set common flex styles
• Text - p with margins removed and props to set common text styles

At least when I'm building components, a flex div and text of some sort are two of the most common (if not the most common) things I end up styling.

This PR also moves some styling constants to more common locations to make stuff easier to find and grok.

example usage

import {
  Flex,
  Text,
  ALIGN_CENTER,
  JUSTIFY_SPACE_BETWEEN,
  FONT_SIZE_BODY_2,
  FONT_WEIGHT_LIGHT
} from '@opentrons/components'

export const Component = () => (
  <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
    <Text fontSize={FONT_SIZE_BODY_2}>hello</Text>
    <Text fontWeight={FONT_WEIGHT_LIGHT}>world</Text>
  </Flex>
)

changelog

• feat(components): add Flex and Text primitives to components library

review requests

This is a very tiny step in starting to build common components that are hooked into a common theme / scales. It's pretty inspired by Theme UI's components and libraries like Rebass

To see what this looks like in practice, check out #5638. Also check out the component library sandbox:

https://s3-us-west-2.amazonaws.com/opentrons-components/components_primitives/index.html#section-primitives

reasoning

I've been playing around with these in practice, and I'm finding that these "presentational props" provide a very nice balance between flexibility and consistency.

• Abstracting the presentational logic behind (tested) props makes client components easier to reason with and more able to focus on business logic
• Can use the styled-components as prop to render as any other DOM element or component
• Keeping the props very close to CSS keeps the required mental shift low
• The styling of these components can still be overridden / provided with any of our other mechanisms:
  • Supports receiving a css prop
  • Supports getting wrapped in styled
  • Can still pass in a good-old-fashioned className

future primitives / work

• I think a Link primitive could be really handy, especially if it deals with target=blank stuff (see FE Monorepo Projects: Centralize links #4229)
• A Heading variant of Text could be good
• A new, lower-level Button primitive?
• Common margin + padding props for all the primitives could be really handy
  • They become really powerful with a spacing scale
  • In the mean time, parents can pass padding + margin in via the css prop et al.

risk assessment

Low. New components are not used yet nor are they even required to be used

[codecov]

Codecov Report

Merging #5637 into edge will increase coverage by 0.05%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             edge    #5637      +/-   ##
==========================================
+ Coverage   64.97%   65.02%   +0.05%     
==========================================
  Files        1099     1099              
  Lines       30637    30686      +49     
==========================================
+ Hits        19905    19954      +49     
  Misses      10732    10732              

Impacted Files	Coverage Δ
...otSettings/SelectNetwork/ConnectModal/FormModal.js	100.00% <ø> (ø)
...obotSettings/SelectNetwork/ConnectModal/FormRow.js	100.00% <ø> (ø)
components/src/controls/ControlSection.js	100.00% <ø> (ø)
components/src/structure/Card.js	100.00% <ø> (ø)
components/src/primitives/Flex.js	100.00% <100.00%> (ø)
components/src/primitives/Text.js	100.00% <100.00%> (ø)
components/src/styles/colors.js	100.00% <100.00%> (ø)
components/src/styles/typography.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 330acc0...f9e7702. Read the comment docs.

[shlokamin]

This seems really cool and looks solid, I like the methodology behind this. Thanks, @mcous

[Kadee80]

💅 🖥️
I really like this @mcous. This is a step towards making our lives a little easier in overriding the complibs more complicated components' default styles. This might be a good candidate for a lunch and learn with FE devs + UX to help us align and adopt moving forward!