Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add generic props usage examples #19341

Merged
merged 12 commits into from
Feb 3, 2020
28 changes: 28 additions & 0 deletions docs/src/pages/components/typography/typography.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,3 +98,31 @@ A few key factors to follow for an accessible typography:
- **Color**. Provide enough contrast between text and its background, check out the minimum recommended [WCAG 2.0 color contrast ratio](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) (4.5:1).
- **Font size**. Use [relative units (rem)](/customization/typography/#font-size) to accommodate the user's settings.
- **Heading hierarchy**. [Don't skip](https://www.w3.org/WAI/tutorials/page-structure/headings/) heading levels. In order to solve this problem, you need to [separate the semantics from the style](#changing-the-semantic-element).

## `TypographyProps` usage with TypeScript

Typography supports changing of the root node with `component` prop. To be able to use `TypographyProps` on their own (for example to type custom component) with the `component` prop, `TypographyProps` should be used with type arguments. Otherwise `component` prop will not be present in `TypographyProps`.
For example
```ts
const CustomComponent: React.FC<TypographyProps<'a', { component: 'a' }>> =
fyodore82 marked this conversation as resolved.
Show resolved Hide resolved
(props) => (/* ... */);
```
Now the `CustomComponent` can be used with a `component` prop which should be set to `'a'`. In addition, the `CustomComponent` will have all props of `<a>` HTML element.

It is possible to have generic `CustomComponent` which will accept any React component, custom and HTML elements.
```ts
function GenericCustomComponent<C extends React.ElementType> (props: TypographyProps<C, {component?: C}>) {
/* ... */
}
```
Now if the `GenericCustomComponent` will be used with a `component` prop provided, it should also have any props required by the provided component.
```ts
const ThirdPartyComponent: FC<{prop1: string}> =
(props) => (<div/>);
// ...
<GenericCustomComponent
component={ThirdPartyComponent}
prop1='some value'
/>
```
The `prop1` became required for the `GenericCustomComponent` as the `ThirdPartyComponent` has it as a requirement.