[RFC] Heading and Paragraph Components

[navin-moorthy]

Intro

We will be creating the Text component for body1, body2 & body3 as p tag and Heading component for Headings as h1, h2.

The Goal:

Create <Text />,<Text.Body1 />, <Text.Body2 />, <Text.Body3 /> for Paragraphs. Create <Heading>, <Heading.H1 />, <Heading.H2 /> for Headings.

Key Features:

• Override Support

  • Typography
  • Space
  • Color

• Dot Notation styling using variant prop

Export:

Component Parts

• Text: Base component using Chakra Text Component but restricted to props with override support.
• Text.Body1: Body 1 variant for our app styled only by theme.js.
• Text.Body2: Body 2 variant for our app styled only by theme.js.
• Text.Body3: Body 2 variant for our app styled only by theme.js.
• Heading: Base component using Chakra Box Component as h1 but restricted to props with override support
• Heading.H1: Heading 1 variant for our app styled only by theme.js.
• Heading.H2: Heading 2 variant for our app styled only by theme.js.

Usage

Heading

<Heading>No Styling</Heading>
<Heading.H1>Heading 1</Heading.H1>
<Heading.H2>Heading 2</Heading.H2>

Paragraph

<Text>No Styling</Text>
<Text.Body1>Body 1</Text.Body1>
<Text.Body2>Body 2</Text.Body2>
<Text.Body3>Body 3</Text.Body3>

Props

• variant - For styling the components based on base component only.
• override - For supporting override from external but should be used only in case of necessity.
• children - This should be only text.

theme.js:

import React from 'react';
import { theme } from '@chakra-ui/core';

export default {
  ...theme,
  lineHeights: {
    ...theme.lineHeights,
    h1: '24px',
    h2: '20px',
    body1: '19px',
    body2: '17px',
    body3: '16px',
  },
  colors: {
    ...theme.colors,
    font: {
      heading: '#282929',
      body1: '#8C8D8E',
      body2: '#5D5E5E',
      body3: '#282929',
    },
  },
  fontSizes: {
    ...theme.fontSizes,
    h1: '20px',
    h2: '16px',
    body1: '15px',
    body2: '14px',
    body3: '13px',
  },
  letterSpacings: {
    h1: '0.2px',
    h2: '0.18px',
    body1: '-0.15px',
    body2: '-0.14px',
  },
  fonts: {
    ...theme.fonts,
    heading: `Inter,${theme.fonts.heading}`,
    body: `Inter,${theme.fonts.body}`,
  },
};

[prasanna1211]

Closing this. Merged already.

[navin-moorthy]

If anyone interested, use this RFC template for the new RFC.