Typography updates 🔠

[ubbe-xyz]

Typography updates 🔠

[ubbe-xyz]

After further discussion, another proposal is to keep the heading levels exposed as components ( Heading1, Heading2, etc... ) which just map internally to <Heading />:

<Heading1 /> // ... <Heading size={1} as="h1" />
<Heading2 /> // ... <Heading size={2} as="h2" />
<Heading3 /> // ... <Heading size={3} as="h3" />
<Heading4 />  // ... <Heading size={4} as="h4" />

<Label /> // ... <Text as="label />

<Text size={1} />
<Text size={2} />
<Text size={3} bold />

[ubbe-xyz]

Finally, we need to have a meeting to decide on the API of this, as few options are open:

1. as controlled components

/**
  Renders: 
    <h1>Loans</h1> ( 48px, bold )
*/
<Heading as="h1">Loans</Heading>

/**
  Renders:
    <h2>Save money with us</h2> ( 28px, bold )
*/
<Heading as="h2">Save money with us</Heading>

/**
  Renders:
    <h3>Save money with us</h3> ( 48px, bold )
    ( Throws warning as usually you're not meant to use `size` on <Heading /> )
*/
<Heading as="h3" size={1}>Save money with us</Heading>

/**
  Renders: 
    <span>Hello</span> ( 16px ) 
    <span>Hello bold</span> ( 14px / bold ) 
    <span>Hello small</span> ( 12px ) 
*/
<Text size={1} as="span">Hello</Text>
<Text size={2} as="span" bold>Hello bold</Text>
<Text size={3} as="span">Hello small</Text>

Details 📋

• The as prop is required: you always need to declare which tag it's gonna render.
• Hopefully, it'll force us to use semantic and accessible tags when rendering text 🤞🏻
• size is allowed on <Text /> but throws a warning if used on <Heading />
• bold can only be used in <Heading />

Up for it 🙋🏻‍♂️

@lluia

2. Size named components

/**
  Expose component that renders text at a specific size and style
  ( current pattern on the library )
*/

<Heading1>Hello</Heading1>        // <h1>Hello</h1> ( 48px )
<Heading2>Hello</Heading2>       // <h2>Hello</h2> ( 28px )
<Heading3>Hello</Heading3>       // <h3>Hello</h3> ( 24px )
<Heading4>Hello</Heading4>      // <h4>Hello</h4> ( 20px )

<Text1>Foo</Text1>             // <span>Foo</span> ( 16px )
<Text2 as="p">Foo</Text2>     // <p>Foo</p> ( 14px )
<Text3>Foo</Text3>           // <span>Foo</span> ( 12px )

Details 📋

• Expose components which name explictly indicates the size they render text
• You can still leverage the as prop on <Text /> to render different tag
• as prop on <Heading /> is disabled

Up for it 🙋🏻‍♂️

3. Generic text and heading components

<Heading size={1}>Hello</Heading>        // <h1>Hello</h1> ( 48px )
<Heading size={2}>Hello</Heading>       // <h2>Hello</h2> ( 28px )
<Heading size={3}>Hello</Heading>       // <h3>Hello</h3> ( 24px )
<Heading size={4}>Hello</Heading>      // <h4>Hello</h4> ( 20px )

<Text size={1}>Foo</Text>             // <span>Foo</span> ( 16px )
<Text size={2} as="p">Foo</Text>     // <p>Foo</p> ( 14px )
<Text size={3}>Foo</Text>           // <span>Foo</span> ( 12px )

Details 📋

• Expose single generic <Text /> and <Heading /> components
• Their size can be controlled through the size prop
• You can leverage the as prop to render any other tag

Up for it 🙋🏻‍♂️

[ubbe-xyz]

We need to clarify with the design team:

• Is really "semibold" the new font for headings? As it differs from Shopfront new pages.
• When should we use "semibold" over "bold" in body text?
• Can we user a relative line-height for convenience?

[poteirard]

I'm happy with the implementation. I will also add an example of how to add different html elements like:

<Heading size="xl" as="h2" />

[ubbe-xyz]

Mobile sizes 📱

Desktop sizes  🖥

Summary 💭

There are specs on the work about responsive font-sizes.

We're not implementing them on milestone/2.0 yet as we're missing specs on how this would affect all other UI elements ( for instance buttons, form inputs, etc... )

[ubbe-xyz]

Finally this is what's been implementedm excluding Heading 0 ( which is only meant for print design at the moment ) downgrading the size of Headgin 1 on narrow screens to 32px.

[poteirard]

🎉 This issue has been resolved in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀