From c57838f13edc414eef5998d3f46c35aec8d16b4a Mon Sep 17 00:00:00 2001 From: fyodore82 Date: Wed, 22 Jan 2020 11:41:43 +1000 Subject: [PATCH 01/12] [docs] Add TypographyProps usage examples --- .../pages/components/typography/typography.md | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/docs/src/pages/components/typography/typography.md b/docs/src/pages/components/typography/typography.md index 2755101df3603b..01f5d7026f60cb 100644 --- a/docs/src/pages/components/typography/typography.md +++ b/docs/src/pages/components/typography/typography.md @@ -98,3 +98,30 @@ 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> = + (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 `` HTML element. +It is possible to have generic `CustomComponent` which will accept any React component, custom and HTML elements. +```ts +function GenericCustomComponent (props: TypographyProps) { + /* ... */ +} +``` +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) => (
); +// ... + +``` +The `prop1` became required for the `GenericCustomComponent` as the `ThirdPartyComponent` has it as a requirement. \ No newline at end of file From a9edbbf36caa50f01e10f8d7996119c35e775631 Mon Sep 17 00:00:00 2001 From: fyodore82 Date: Wed, 22 Jan 2020 11:50:23 +1000 Subject: [PATCH 02/12] [docs] Add TypographyProps usage examples --- docs/src/pages/components/typography/typography.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/src/pages/components/typography/typography.md b/docs/src/pages/components/typography/typography.md index 01f5d7026f60cb..d1908c4e92a36e 100644 --- a/docs/src/pages/components/typography/typography.md +++ b/docs/src/pages/components/typography/typography.md @@ -108,6 +108,7 @@ const CustomComponent: React.FC> = (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 `` HTML element. + It is possible to have generic `CustomComponent` which will accept any React component, custom and HTML elements. ```ts function GenericCustomComponent (props: TypographyProps) { From 83125c821363d33e1f5c54b2307ce0d7eac1ba54 Mon Sep 17 00:00:00 2001 From: fyodore82 Date: Thu, 23 Jan 2020 12:19:08 +1000 Subject: [PATCH 03/12] [docs] Use function in place of const --- docs/src/pages/components/typography/typography.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/typography/typography.md b/docs/src/pages/components/typography/typography.md index d1908c4e92a36e..3ead1d25f84910 100644 --- a/docs/src/pages/components/typography/typography.md +++ b/docs/src/pages/components/typography/typography.md @@ -104,8 +104,9 @@ A few key factors to follow for an accessible typography: 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> = - (props) => (/* ... */); +function CustomComponent (props: TypographyProps<'a', { component: 'a' }>) { + /* ... */ +} ``` 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 `` HTML element. From 47c35c9364295e51c085b0ecd17c784a231078b6 Mon Sep 17 00:00:00 2001 From: fyodore82 Date: Mon, 27 Jan 2020 14:32:00 +1000 Subject: [PATCH 04/12] [docs] Add TypographyProps usage examples --- .../src/pages/guides/typescript/typescript.md | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/docs/src/pages/guides/typescript/typescript.md b/docs/src/pages/guides/typescript/typescript.md index 8edac70b49c397..37fe598ea20d67 100644 --- a/docs/src/pages/guides/typescript/typescript.md +++ b/docs/src/pages/guides/typescript/typescript.md @@ -270,6 +270,35 @@ prop, this will be detailed in the component's API documentation. For example, a Button's root node can be replaced with a React Router's Link, and any additional props that are passed to Button, such as `to`, will be spread to the Link component. For a code example concerning Button and react-router-dom checkout [these demos](/guides/composition/#routing-libraries). +To be able to use props of such Material-UI component on their own, props should be used with type arguments. Otherwise `component` prop will not be present in the props of such Material-UI component. + +Examples below are use `TypographyProps`. BUt the same will work for any component which has props defined with [`OverrideProps`](https://github.com/mui-org/material-ui/blob/f3a74baf0edcbf4eed16d6294046be1224f36e2c/packages/material-ui/src/Typography/Typography.d.ts#L35). + +```ts +function CustomComponent (props: TypographyProps<'a', { component: 'a' }>) { + /* ... */ +} +``` +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 `` HTML element. + +It is possible to have generic `CustomComponent` which will accept any React component, custom and HTML elements. +```ts +function GenericCustomComponent (props: TypographyProps) { + /* ... */ +} +``` +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) => (
); +// ... + +``` +The `prop1` became required for the `GenericCustomComponent` as the `ThirdPartyComponent` has it as a requirement. + Not every component fully supports any component type you pass in. If you encounter a component that rejects its `component` props in TypeScript please open an issue. There is an ongoing effort to fix this by making component props generic. From 43c77db7d2938b16a9088252b365acbd83b04eed Mon Sep 17 00:00:00 2001 From: fyodore82 Date: Mon, 27 Jan 2020 14:35:11 +1000 Subject: [PATCH 05/12] [docs] Add TypographyProps usage examples --- .../pages/components/typography/typography.md | 29 ------------------- 1 file changed, 29 deletions(-) diff --git a/docs/src/pages/components/typography/typography.md b/docs/src/pages/components/typography/typography.md index 3ead1d25f84910..2755101df3603b 100644 --- a/docs/src/pages/components/typography/typography.md +++ b/docs/src/pages/components/typography/typography.md @@ -98,32 +98,3 @@ 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 -function CustomComponent (props: TypographyProps<'a', { component: 'a' }>) { - /* ... */ -} -``` -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 `` HTML element. - -It is possible to have generic `CustomComponent` which will accept any React component, custom and HTML elements. -```ts -function GenericCustomComponent (props: TypographyProps) { - /* ... */ -} -``` -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) => (
); -// ... - -``` -The `prop1` became required for the `GenericCustomComponent` as the `ThirdPartyComponent` has it as a requirement. \ No newline at end of file From df806a233bd7506075bf7c573466a9b158cd45fe Mon Sep 17 00:00:00 2001 From: fyodore82 Date: Mon, 27 Jan 2020 14:44:31 +1000 Subject: [PATCH 06/12] [docs] Fix typos --- docs/src/pages/guides/typescript/typescript.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/guides/typescript/typescript.md b/docs/src/pages/guides/typescript/typescript.md index 37fe598ea20d67..8a4d25465de91d 100644 --- a/docs/src/pages/guides/typescript/typescript.md +++ b/docs/src/pages/guides/typescript/typescript.md @@ -270,16 +270,18 @@ prop, this will be detailed in the component's API documentation. For example, a Button's root node can be replaced with a React Router's Link, and any additional props that are passed to Button, such as `to`, will be spread to the Link component. For a code example concerning Button and react-router-dom checkout [these demos](/guides/composition/#routing-libraries). -To be able to use props of such Material-UI component on their own, props should be used with type arguments. Otherwise `component` prop will not be present in the props of such Material-UI component. +To be able to use props of such Material-UI component on their own, props should be used with type arguments. Otherwise `component` prop will not be present in the props of the Material-UI component. -Examples below are use `TypographyProps`. BUt the same will work for any component which has props defined with [`OverrideProps`](https://github.com/mui-org/material-ui/blob/f3a74baf0edcbf4eed16d6294046be1224f36e2c/packages/material-ui/src/Typography/Typography.d.ts#L35). +Examples below are use `TypographyProps`. But the same will work for any component which has props defined with [`OverrideProps`](https://github.com/mui-org/material-ui/blob/f3a74baf0edcbf4eed16d6294046be1224f36e2c/packages/material-ui/src/Typography/Typography.d.ts#L35). + +Below some `CustomComponent` is defined. And it has the same props as `Typography` component. ```ts function CustomComponent (props: TypographyProps<'a', { component: 'a' }>) { /* ... */ } ``` -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 `` HTML element. +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 `` HTML element. Other props of the `Typography` component will also be present in porps of the `CustomComponent`. It is possible to have generic `CustomComponent` which will accept any React component, custom and HTML elements. ```ts @@ -299,8 +301,7 @@ const ThirdPartyComponent: FC<{prop1: string}> = ``` The `prop1` became required for the `GenericCustomComponent` as the `ThirdPartyComponent` has it as a requirement. -Not every component fully supports any component type you pass in. If you encounter a -component that rejects its `component` props in TypeScript please open an issue. +Not every component fully supports any component type you pass in. If you encounter a component that rejects its `component` props in TypeScript please open an issue. There is an ongoing effort to fix this by making component props generic. ## Handling `value` and event handlers From 43dd1511cf4e11edf57999aa093cc062370e7973 Mon Sep 17 00:00:00 2001 From: fyodore82 Date: Mon, 27 Jan 2020 15:01:52 +1000 Subject: [PATCH 07/12] [docs] Fix typos --- docs/src/pages/guides/typescript/typescript.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/src/pages/guides/typescript/typescript.md b/docs/src/pages/guides/typescript/typescript.md index 8a4d25465de91d..54049cb391529c 100644 --- a/docs/src/pages/guides/typescript/typescript.md +++ b/docs/src/pages/guides/typescript/typescript.md @@ -275,7 +275,6 @@ To be able to use props of such Material-UI component on their own, props should Examples below are use `TypographyProps`. But the same will work for any component which has props defined with [`OverrideProps`](https://github.com/mui-org/material-ui/blob/f3a74baf0edcbf4eed16d6294046be1224f36e2c/packages/material-ui/src/Typography/Typography.d.ts#L35). Below some `CustomComponent` is defined. And it has the same props as `Typography` component. - ```ts function CustomComponent (props: TypographyProps<'a', { component: 'a' }>) { /* ... */ From bd22b1784699acc13a9dd6962e56d317dfa4d070 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 27 Jan 2020 09:11:29 +0100 Subject: [PATCH 08/12] prettier --- .../src/pages/guides/typescript/typescript.md | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/docs/src/pages/guides/typescript/typescript.md b/docs/src/pages/guides/typescript/typescript.md index 54049cb391529c..4bd7f9b956f443 100644 --- a/docs/src/pages/guides/typescript/typescript.md +++ b/docs/src/pages/guides/typescript/typescript.md @@ -272,32 +272,36 @@ For a code example concerning Button and react-router-dom checkout [these demos] To be able to use props of such Material-UI component on their own, props should be used with type arguments. Otherwise `component` prop will not be present in the props of the Material-UI component. -Examples below are use `TypographyProps`. But the same will work for any component which has props defined with [`OverrideProps`](https://github.com/mui-org/material-ui/blob/f3a74baf0edcbf4eed16d6294046be1224f36e2c/packages/material-ui/src/Typography/Typography.d.ts#L35). +Examples below are use `TypographyProps`. But the same will work for any component which has props defined with [`OverrideProps`](https://github.com/mui-org/material-ui/blob/f3a74baf0edcbf4eed16d6294046be1224f36e2c/packages/material-ui/src/Typography/Typography.d.ts#L35). Below some `CustomComponent` is defined. And it has the same props as `Typography` component. + ```ts -function CustomComponent (props: TypographyProps<'a', { component: 'a' }>) { +function CustomComponent(props: TypographyProps<'a', { component: 'a' }>) { /* ... */ } ``` + 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 `` HTML element. Other props of the `Typography` component will also be present in porps of the `CustomComponent`. -It is possible to have generic `CustomComponent` which will accept any React component, custom and HTML elements. +It is possible to have generic `CustomComponent` which will accept any React component, custom and HTML elements. + ```ts -function GenericCustomComponent (props: TypographyProps) { - /* ... */ +function GenericCustomComponent( + props: TypographyProps, +) { + /* ... */ } ``` + 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) => (
); +const ThirdPartyComponent: FC<{ prop1: string }> = props =>
; // ... - +; ``` + The `prop1` became required for the `GenericCustomComponent` as the `ThirdPartyComponent` has it as a requirement. Not every component fully supports any component type you pass in. If you encounter a component that rejects its `component` props in TypeScript please open an issue. From 9df2bc783aea1be5e9a1b132206a4ea1ed0e8ce5 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 27 Jan 2020 09:17:59 +0100 Subject: [PATCH 09/12] improve wording --- docs/src/pages/guides/typescript/typescript.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/guides/typescript/typescript.md b/docs/src/pages/guides/typescript/typescript.md index 4bd7f9b956f443..53c588118c5244 100644 --- a/docs/src/pages/guides/typescript/typescript.md +++ b/docs/src/pages/guides/typescript/typescript.md @@ -270,11 +270,11 @@ prop, this will be detailed in the component's API documentation. For example, a Button's root node can be replaced with a React Router's Link, and any additional props that are passed to Button, such as `to`, will be spread to the Link component. For a code example concerning Button and react-router-dom checkout [these demos](/guides/composition/#routing-libraries). -To be able to use props of such Material-UI component on their own, props should be used with type arguments. Otherwise `component` prop will not be present in the props of the Material-UI component. +To be able to use props of such a Material-UI component on their own, props should be used with type arguments. Otherwise, the `component` prop will not be present in the props of the Material-UI component. -Examples below are use `TypographyProps`. But the same will work for any component which has props defined with [`OverrideProps`](https://github.com/mui-org/material-ui/blob/f3a74baf0edcbf4eed16d6294046be1224f36e2c/packages/material-ui/src/Typography/Typography.d.ts#L35). +The examples below use `TypographyProps` but the same will work for any component which has props defined with `OverrideProps`. -Below some `CustomComponent` is defined. And it has the same props as `Typography` component. +The following `CustomComponent` component has the same props as the `Typography` component. ```ts function CustomComponent(props: TypographyProps<'a', { component: 'a' }>) { @@ -282,7 +282,7 @@ function CustomComponent(props: TypographyProps<'a', { component: 'a' }>) { } ``` -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 `` HTML element. Other props of the `Typography` component will also be present in porps of the `CustomComponent`. +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. The other props of the `Typography` component will also be present in props of the `CustomComponent`. It is possible to have generic `CustomComponent` which will accept any React component, custom and HTML elements. From 0c23efe40ea89592694817a636a7498cdd81b4ff Mon Sep 17 00:00:00 2001 From: fyodore82 Date: Mon, 3 Feb 2020 14:38:43 +1000 Subject: [PATCH 10/12] Use `function` style in place of `React.FC` --- docs/src/pages/guides/typescript/typescript.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/guides/typescript/typescript.md b/docs/src/pages/guides/typescript/typescript.md index 53c588118c5244..0ceb6a6263ec3b 100644 --- a/docs/src/pages/guides/typescript/typescript.md +++ b/docs/src/pages/guides/typescript/typescript.md @@ -297,7 +297,9 @@ function GenericCustomComponent( 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 =>
; +function ThirdPartyComponent({ prop1: string }) { + return
+} // ... ; ``` From 2cbe12e6fd600f89f8e15ae96adcec471d7d7a88 Mon Sep 17 00:00:00 2001 From: fyodore82 Date: Mon, 3 Feb 2020 14:46:21 +1000 Subject: [PATCH 11/12] Use `function` style in place of `React.FC` --- docs/src/pages/guides/typescript/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/typescript/typescript.md b/docs/src/pages/guides/typescript/typescript.md index 0ceb6a6263ec3b..59fc31f25508ce 100644 --- a/docs/src/pages/guides/typescript/typescript.md +++ b/docs/src/pages/guides/typescript/typescript.md @@ -297,7 +297,7 @@ function GenericCustomComponent( Now if the `GenericCustomComponent` will be used with a `component` prop provided, it should also have any props required by the provided component. ```ts -function ThirdPartyComponent({ prop1: string }) { +function ThirdPartyComponent({ prop1 } : { prop1: string }) { return
} // ... From efd690ce0e3b34e44e5ab4f708a94a527c6a17c8 Mon Sep 17 00:00:00 2001 From: fyodore82 Date: Mon, 3 Feb 2020 16:19:21 +1000 Subject: [PATCH 12/12] Use `function` style in place of `React.FC` --- docs/src/pages/guides/typescript/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/typescript/typescript.md b/docs/src/pages/guides/typescript/typescript.md index 59fc31f25508ce..c7e279a18a4d21 100644 --- a/docs/src/pages/guides/typescript/typescript.md +++ b/docs/src/pages/guides/typescript/typescript.md @@ -294,7 +294,7 @@ function GenericCustomComponent( } ``` -Now if the `GenericCustomComponent` will be used with a `component` prop provided, it should also have any props required by the provided component. +Now if the `GenericCustomComponent` will be used with a `component` prop provided, it should also have all props required by the provided component. ```ts function ThirdPartyComponent({ prop1 } : { prop1: string }) {