[Typography] Add custom variants support #22006

mnajdova · 2020-07-31T13:18:56Z

This PR adds support for custom variants in the Typography component as part of #21749

mnajdova · 2020-07-31T13:24:55Z

packages/material-ui/src/Typography/Typography.js

@@ -35,6 +36,8 @@ export const styles = (theme) => ({
  subtitle2: theme.typography.subtitle2,
  /* Styles applied to the root element if `variant="overline"`. */
  overline: theme.typography.overline,
+  /* Styles applied to the root element if `variant="inherit"`. */
+  inherit: {},


For consistency I've added this variant classKey. This way we don't need to update the warnings as the variant classKey will always exists. If we don't want to make this change, I can work on the warning.

packages/material-ui/src/Typography/Typography.test.js

packages/material-ui/src/Typography/Typography.d.ts

packages/material-ui/src/Typography/Typography.js

packages/material-ui/src/Typography/Typography.test.js

mui-pr-bot · 2020-07-31T13:48:41Z

Details of bundle changes

Generated by 🚫 dangerJS against eb12d8f

mnajdova · 2020-07-31T14:22:22Z

packages/material-ui/src/Button/Button.test.js

@@ -370,150 +370,4 @@ describe('<Button />', () => {
      expect(markup.text()).to.equal('Hello World');
    });
  });
-
-  describe('custom theme variants', () => {


This is already covered in useThemeVariants.test.js, no need for per component tests

packages/material-ui-styles/src/makeStyles/makeStyles.js

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

mnajdova · 2020-08-01T07:28:39Z

packages/material-ui/src/Typography/Typography.js

-    subtitle1: PropTypes.string,
-    subtitle2: PropTypes.string,
-  }),
+  variantMapping: PropTypes /* @typescript-to-proptypes-ignore */.object,


With adding new variants new keys can be added here, so this was relaxed to object.

eps1lon · 2020-08-01T07:57:29Z

framer/scripts/framerConfig.js

@@ -314,6 +314,7 @@ export const componentSettings = {
      'gutterBottom',
      'internalDeprecatedVariant',
      'paragraph',
+      'varaint',


There's a typo but why do we want to ignore it? Seems pretty important for prototyping to me.

The variants is now a union of enums + string, my understanding was that we are excluding those props.

my understanding was that we are excluding those props.

Why?

Why?

I believe we would need to fix the Framer generation script, not sure it's worth it:

https://github.com/mui-org/material-ui/blob/41e81f229e8f878287ea082b88b5808061a189ad/framer/scripts/framerConfig.js#L289

framer/scripts/framerConfig.js

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

…najdova/material-ui into feat/typography-custom-variant

cristobalchao · 2020-08-05T15:07:15Z

Does this PR cover the following use case (see image attached)?

From a developer perspective, this would reduce verbosity tremendously

mnajdova · 2020-08-05T16:44:10Z

@cristobalchao

That use case is supported, the syntax is a bit different.

const theme = createMuiTheme({
  variants: {
    MuiTypography: [
      {
        props: { variant: 's8' },
        styles: {
          fontSize: 14,
          lineHeight: '20px',
          // other styles...
        },
      },
    ],
  },
});

And than you can use:

<Typography variant="s8">Hello world</Typography>

Here is a docs example: https://next.material-ui.com/customization/theme-components/#adding-new-component-variants that describes this API for the Button component.

cristobalchao · 2020-08-06T08:57:56Z

@mnajdova

Thanks for sharing this. I wonder for future versions, if it would make sense to consolidate everything under typography. As we can do now with non-custom variants, which would make everything more streamlined. Have you considered that approach?

mnajdova · 2020-08-06T10:05:23Z

@cristobalchao this is definitely something we want to explore. We are looking into different ways of using dynamic styles based on props. Once we solve that issue, this can be easily implemented.

oliviertassinari · 2020-08-06T10:21:02Z

@cristobalchao I believe it will require the same solution to the dynamic color issue #13875. While #15573 focus on allowing the support of new props, right from the theme, #13875 goes a step further. It's meant to bypass the design tokens -> style transformation step. Developers could leverage the design tokens of the theme directly.

mikeyamato · 2020-09-03T03:18:39Z

Thanks for making this update! However, I'm still seeing the prop type warning in my console. I wonder if anyone else is seeing the same.

mnajdova · 2020-09-03T04:25:50Z

@mikeyamato can you please ensure that you are on the latest v5 alpha version? This should not happen as the proptypes is basically relaxed to accept any string. If this is still the case for you, please create an issue.

mikeyamato · 2020-09-03T04:29:12Z

@mnajdova totally makes sense. Literally moments before you responded I noticed that this wasn't part of v4.11.0 but rather part of v5.0.0-alpha.6. Okay, going to test it out with v5. Thanks!

mikeyamato · 2020-09-03T05:39:05Z

Quick update from my end. I tried to upgrade to v5 but that resulted in various dependency issues with my existing project. Unfortunately I won't be able to take advantage of this feature just quite yet. But looking forward to utilizing it in the near future. Till then I'll need to live with the errors 😢 .

oliviertassinari · 2020-09-03T08:15:58Z

@mikeyamato What dependency issues did you face?

EliRobinson · 2021-04-20T00:46:20Z

<Typography variant="s8">Hello world</Typography>
Here is a docs example: https://next.material-ui.com/customization/components/#adding-new-component-variants that describes this API for the Button component.

FYI the docs example is here now:
https://next.material-ui.com/customization/theme-components/#adding-new-component-variants

oliviertassinari · 2021-04-20T16:23:30Z

@EliRobinson For the typography variant, there is even simpler: https://next.material-ui.com/customization/typography/#adding-amp-disabling-variants.

mnajdova added 3 commits July 31, 2020 13:59

added custom variants support to Typography

9769894

updated whitelistComponents list

75cd07b

typings

ca559fc

mnajdova commented Jul 31, 2020

View reviewed changes

packages/material-ui/src/Typography/Typography.test.js Outdated Show resolved Hide resolved

ts

0ecd5d6

mnajdova commented Jul 31, 2020

View reviewed changes

packages/material-ui/src/Typography/Typography.d.ts Outdated Show resolved Hide resolved

mnajdova mentioned this pull request Jul 31, 2020

[RFC] Support custom variants in the theme #21749

Closed

32 tasks

oliviertassinari reviewed Jul 31, 2020

View reviewed changes

packages/material-ui/src/Typography/Typography.js Outdated Show resolved Hide resolved

packages/material-ui/src/Typography/Typography.test.js Outdated Show resolved Hide resolved

packages/material-ui/src/Typography/Typography.test.js Outdated Show resolved Hide resolved

mnajdova added 2 commits July 31, 2020 16:18

inherit to p mapping

add9f3d

removed tests

332330c

mnajdova commented Jul 31, 2020

View reviewed changes

mnajdova added 3 commits July 31, 2020 16:37

added warnings test, removed unused imports

b34d233

prettier

16e61fe

docs:api

c201240

oliviertassinari reviewed Jul 31, 2020

View reviewed changes

packages/material-ui-styles/src/makeStyles/makeStyles.js Outdated Show resolved Hide resolved

mnajdova and others added 3 commits August 1, 2020 08:53

variantsMapping propType

e1f156b

reverted some changes

98c54da

Update packages/material-ui-styles/src/makeStyles/makeStyles.js

a295bce

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

github-actions bot mentioned this pull request Aug 1, 2020

Update snapshots for pr/22006 eps1lon/mui-scripts-incubator#652

Closed

framer fix

8f062ea

mnajdova commented Aug 1, 2020

View reviewed changes

eps1lon reviewed Aug 1, 2020

View reviewed changes

mnajdova added 2 commits August 1, 2020 11:11

typo

202b972

fixed prop rename

e05f141

oliviertassinari reviewed Aug 1, 2020

View reviewed changes

framer/scripts/framerConfig.js Show resolved Hide resolved

oliviertassinari approved these changes Aug 1, 2020

View reviewed changes

Update framer/scripts/framerConfig.js

ffd21aa

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

mnajdova requested a review from eps1lon August 1, 2020 17:20

mnajdova added 2 commits August 1, 2020 20:31

Merge branch 'next' into feat/typography-custom-variant

8b6374c

Merge branch 'feat/typography-custom-variant' of https://github.com/m…

eb12d8f

…najdova/material-ui into feat/typography-custom-variant

oliviertassinari added new feature New feature or request component: Typography The React component. labels Aug 2, 2020

mnajdova merged commit 30e912b into mui:next Aug 4, 2020

This comment has been minimized.

Sign in to view

mbrookes mentioned this pull request Aug 17, 2020

[theme] Allow custom typography variants #22257

Closed

eps1lon mentioned this pull request Sep 14, 2020

[Typography] Add ability to specify custom variants #20203

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Typography] Add custom variants support #22006

[Typography] Add custom variants support #22006

mnajdova commented Jul 31, 2020

mnajdova Jul 31, 2020

mui-pr-bot commented Jul 31, 2020 •

edited

mnajdova Jul 31, 2020

mnajdova Aug 1, 2020

eps1lon Aug 1, 2020

mnajdova Aug 1, 2020

eps1lon Aug 1, 2020

oliviertassinari Aug 1, 2020

cristobalchao commented Aug 5, 2020

This comment has been minimized.

mnajdova commented Aug 5, 2020 •

edited by oliviertassinari

cristobalchao commented Aug 6, 2020

mnajdova commented Aug 6, 2020

oliviertassinari commented Aug 6, 2020 •

edited by mbrookes

mikeyamato commented Sep 3, 2020

mnajdova commented Sep 3, 2020

mikeyamato commented Sep 3, 2020

mikeyamato commented Sep 3, 2020

oliviertassinari commented Sep 3, 2020

EliRobinson commented Apr 20, 2021 •

edited by oliviertassinari

oliviertassinari commented Apr 20, 2021 •

edited

[Typography] Add custom variants support #22006

[Typography] Add custom variants support #22006

Conversation

mnajdova commented Jul 31, 2020

mnajdova Jul 31, 2020

Choose a reason for hiding this comment

mui-pr-bot commented Jul 31, 2020 • edited

mnajdova Jul 31, 2020

Choose a reason for hiding this comment

mnajdova Aug 1, 2020

Choose a reason for hiding this comment

eps1lon Aug 1, 2020

Choose a reason for hiding this comment

mnajdova Aug 1, 2020

Choose a reason for hiding this comment

eps1lon Aug 1, 2020

Choose a reason for hiding this comment

oliviertassinari Aug 1, 2020

Choose a reason for hiding this comment

cristobalchao commented Aug 5, 2020

This comment has been minimized.

mnajdova commented Aug 5, 2020 • edited by oliviertassinari

cristobalchao commented Aug 6, 2020

mnajdova commented Aug 6, 2020

oliviertassinari commented Aug 6, 2020 • edited by mbrookes

mikeyamato commented Sep 3, 2020

mnajdova commented Sep 3, 2020

mikeyamato commented Sep 3, 2020

mikeyamato commented Sep 3, 2020

oliviertassinari commented Sep 3, 2020

EliRobinson commented Apr 20, 2021 • edited by oliviertassinari

oliviertassinari commented Apr 20, 2021 • edited

mui-pr-bot commented Jul 31, 2020 •

edited

mnajdova commented Aug 5, 2020 •

edited by oliviertassinari

oliviertassinari commented Aug 6, 2020 •

edited by mbrookes

EliRobinson commented Apr 20, 2021 •

edited by oliviertassinari

oliviertassinari commented Apr 20, 2021 •

edited