Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Proposal] Typography Component

See original GitHub issue

Have in our theme a typography object which has the following styles defined. Then if there is <Typography /> component. It can take in a type prop which can be of the following types

classNames applied {
    root: /* a generic wrapper class for the root element */
    display1: /* extends theme.typography.display1 from theme passes */
    display2: /* extends theme.typography.display2 from theme passes */
    display3: /* extends theme.typography.display3 from theme passes */
    heading: /* extends theme.typography.heading from theme passes */
    title: /* extends theme.typography.title from theme passes */
    subheading: /* extends theme.typography.subheading from theme passes */
    body1: /* extends theme.typography.body1 from theme passes */
    body2: /* extends theme.typography.body2 from theme passes */
    alignLeft: /* applied if align="left" */
    alignRight: /* applied if align="right" */
    alignJusitfy: /* applied if align="justify" */
    color: /* for color props, by default this will default theme.*/

So something on the lines like these

<Typography variant="body1" color="inherit" align="right" />

Then the way this component will be build

const headlineMapping = {
    display4: 'h1',
    display3: 'h1',
    display2: 'h1',
    display1: 'h1',
    headline: 'h1',
    title: 'h2',
    subheading: 'h3',
    body2: 'aside',
    body1: 'p',
const Component = headlineMapping[variant]) || 'p'
return (
  <Component className={css`${root} ${variant} ${align} ${color}`} />

And if no prop provided, variant defaults to body and color defaults to theme primary.color align defaults to left

Things I Studied For This: Reference: Composition in React Emotion

Inspiration Taken From React Material UI. I chose this composition technique, because it is really elegant and this way you can build on top of things in a very elegant way.

I would really love your feedback on this @TejasQ @peterszerzo 😃

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

adeelibrcommented, Oct 9, 2018

Kudos to this Nicely written. I admit I didn’t see this before 😅

Also Typography was just a proposal to have all type styling in one component (as a suggestion)

Still if we are on this topic there should be more components then like <H1/> & <P> as you suggested.

fabien0102commented, Oct 8, 2018

The main focus of this library is to have (at least try) the more friendly API as possible, even if it’s sometime harder to build (and it’s sometime very tricky to achieve, but we love challenges). This is why we try to doing our components “Readme first” to have the more natural API as possible, without thinking about the implementation 😉

Also, we already have one place for our style variables => so I don’t really see your point, and to be fair, I will be very surprise that we have maintainability issues with these components ^^

Sometime it make sense to regroup some usecases, as for Page, because it’s more semantic and easy to use. But I really don’t think that is the case for typography, it’s just more verbose 😕

Read more comments on GitHub >

github_iconTop Results From Across the Web

Proposal: Typography Components · Issue #421 · auth0/cosmos
This proposal is to show what we talk with @landitus to manage the margins between the Paragraph and Heading and other components in...
Read more >
15 Final type proposal ideas - Pinterest
May 21, 2021 - Explore Kaze Poitier's board "Final type proposal" on Pinterest. See more ideas about proposal, minimalist font, periodic table art....
Read more >
What is the Best Business Proposal Font? - Word Counter Blog
If your proposal is going to be submitted electronically, then the body of the proposal should comprise a single sans-serif font, to be...
Read more >
How to Write a Design Proposal: The Ultimate Guide
Using this software is easy, as you get to create the chronology of the parts of your proposal from start to finish in...
Read more >
Which font is good for a proposal? - Quora
(If you mean a business proposal, a nice, common, unremarkable serif font, such as Times New Roman or Garamond.).
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found