Add typography helper components to RoverUI about rover-ui HOT 3 CLOSED

Been thinking about this as well lately. I have really enjoyed composable typography (thinking Tailwind here). What about providing a simple Text component of some kind that simply applied classes that adjusted size, color, etc without having to export various kinds of Components (e.g. Display, Small, etc).

Or... really thinking outside the box here... providing a Cision-based Tailwind config that only included text classes? Adding a repo like cision/tailwind and have it provide that config tailwind.config.js for use in other places (e.g. RoverUI, our main app, etc).

from rover-ui.

Hey, I'm not sure how helpful this will be, but I wrote a simple Font component in a personal project.
It uses styled-system and css-in-js, so it's not a perfect match.

😄 The things I liked about my approach were:

• We should have props that map to CSS values for at least these dimensions: fontFamily, fontSize, fontWeight, lineHeight, and color.
• Some of those will need new CSS custom property definitions. We already have colors and font sizes in RoverUI's sizing.css and colors.css files, but we might want to add a fonts.css or typography.css file to hold the other type-specific values.
• We should continue (as always) passing unmapped props down to the component's main element, for customization.
• We should let users pass in a Tag prop that can be an html element name or a React component. That will make it easy for a consumer to switch from inline to block by adding a prop like Tag="span". It also would let consumers add font styles to h1 tags, for instance, without adding wrapping divs.
• If desired, we could export commonly used font styles like P or H1 from the same file, see line 146. I think we should only do this for commonly-understood HTML tags and font-variants.

RoverUI's code should be much simpler, since we're not trying to generate all the styles from a theme object.

The hardest part will probably be extracting the right styles from the design docs, and making sure we have good enough coverage of sizes and colors to handle a wide variety of future use cases.

😦 The things I don't like about tk-ui's current implementation are:

• Adding things like block, pre, and breakword as props. They just rename concepts that would be easier to understand as class name or tag overrides from the consumer.
• Having too many specific named exports for things like Headline, DisplayMD, DisplayLG, because the mockups we get aren't consistent about using these font variants. They're either rarely used, or they're used with so many style overrides that they're not consistent and add no value.

from rover-ui.

Awesome. Thanks for sharing. I will take a look and use that as inspiration.

from rover-ui.