Skip to content

Commit aa196b4

Browse files
oliviertassinarioliviertassinari
authored
[Typography] Better defaults (#15100)
* [Typography] Less opinionated * use the typography variants
1 parent 2fbf1b9 commit aa196b4

File tree

25 files changed

+73
-47
lines changed

25 files changed

+73
-47
lines changed

‎docs/src/modules/components/AppFrame.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ class AppFrame extends React.Component {
200200
<Notifications />
201201
<MarkdownLinks />
202202
<AppBar className={appBarClassName}>
203-
<Typography className={classes.banner} noWrap>
203+
<Typography className={classes.banner} variant="body2" noWrap>
204204
<Interpolate
205205
replacement={{
206206
versionNumber: (

‎docs/src/pages/demos/cards/ImgMediaCard.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function ImgMediaCard(props) {
3636
<Typography gutterBottom variant="h5" component="h2">
3737
Lizard
3838
</Typography>
39-
<Typography component="p">
39+
<Typography variant="body2" color="textSecondary" component="p">
4040
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
4141
across all continents except Antarctica
4242
</Typography>

‎docs/src/pages/demos/cards/MediaCard.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ function MediaCard(props) {
3232
<Typography gutterBottom variant="h5" component="h2">
3333
Lizard
3434
</Typography>
35-
<Typography component="p">
35+
<Typography variant="body2" color="textSecondary" component="p">
3636
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
3737
across all continents except Antarctica
3838
</Typography>

‎docs/src/pages/demos/cards/MediaCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ function MediaCard(props: Props) {
3434
<Typography gutterBottom variant="h5" component="h2">
3535
Lizard
3636
</Typography>
37-
<Typography component="p">
37+
<Typography variant="body2" color="textSecondary" component="p">
3838
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
3939
across all continents except Antarctica
4040
</Typography>

‎docs/src/pages/demos/cards/RecipeReviewCard.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ function RecipeReviewCard() {
7272
title="Paella dish"
7373
/>
7474
<CardContent>
75-
<Typography component="p">
75+
<Typography variant="body2" color="textSecondary" component="p">
7676
This impressive paella is a perfect party dish and a fun meal to cook together with your
7777
guests. Add 1 cup of frozen peas along with the mussels, if you like.
7878
</Typography>

‎docs/src/pages/demos/cards/RecipeReviewCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ function RecipeReviewCard() {
7474
title="Paella dish"
7575
/>
7676
<CardContent>
77-
<Typography component="p">
77+
<Typography variant="body2" color="textSecondary" component="p">
7878
This impressive paella is a perfect party dish and a fun meal to cook together with your
7979
guests. Add 1 cup of frozen peas along with the mussels, if you like.
8080
</Typography>

‎docs/src/pages/demos/cards/SimpleCard.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function SimpleCard(props) {
4444
<Typography className={classes.pos} color="textSecondary">
4545
adjective
4646
</Typography>
47-
<Typography component="p">
47+
<Typography variant="body2" component="p">
4848
well meaning and kindly.
4949
<br />
5050
{'"a benevolent smile"'}

‎docs/src/pages/demos/cards/SimpleCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function SimpleCard(props: Props) {
4646
<Typography className={classes.pos} color="textSecondary">
4747
adjective
4848
</Typography>
49-
<Typography component="p">
49+
<Typography variant="body2" component="p">
5050
well meaning and kindly.
5151
<br />
5252
{'"a benevolent smile"'}

‎docs/src/pages/demos/dividers/MiddleDividers.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const styles = theme => ({
2323
margin: theme.spacing(2),
2424
},
2525
section3: {
26-
margin: theme.spacing(6, 2, 2),
26+
margin: theme.spacing(3, 1, 1),
2727
},
2828
});
2929

@@ -44,7 +44,7 @@ function MiddleDividers(props) {
4444
</Typography>
4545
</Grid>
4646
</Grid>
47-
<Typography color="textSecondary">
47+
<Typography color="textSecondary" variant="body2">
4848
Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the
4949
hall.
5050
</Typography>
@@ -56,15 +56,13 @@ function MiddleDividers(props) {
5656
</Typography>
5757
<div>
5858
<Chip className={classes.chip} label="Extra Soft" />
59-
<Chip className={classes.chip} label="Soft" />
59+
<Chip className={classes.chip} color="primary" label="Soft" />
6060
<Chip className={classes.chip} label="Medium" />
6161
<Chip className={classes.chip} label="Hard" />
6262
</div>
6363
</div>
6464
<div className={classes.section3}>
65-
<Button variant="contained" color="primary" fullWidth>
66-
Add to cart
67-
</Button>
65+
<Button color="primary">Add to cart</Button>
6866
</div>
6967
</div>
7068
);

‎docs/src/pages/demos/dividers/MiddleDividers.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const styles = (theme: Theme) =>
2424
margin: theme.spacing(2),
2525
},
2626
section3: {
27-
margin: theme.spacing(6, 2, 2),
27+
margin: theme.spacing(3, 1, 1),
2828
},
2929
});
3030

@@ -47,7 +47,7 @@ function MiddleDividers(props: Props) {
4747
</Typography>
4848
</Grid>
4949
</Grid>
50-
<Typography color="textSecondary">
50+
<Typography color="textSecondary" variant="body2">
5151
Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the
5252
hall.
5353
</Typography>
@@ -59,15 +59,13 @@ function MiddleDividers(props: Props) {
5959
</Typography>
6060
<div>
6161
<Chip className={classes.chip} label="Extra Soft" />
62-
<Chip className={classes.chip} label="Soft" />
62+
<Chip className={classes.chip} color="primary" label="Soft" />
6363
<Chip className={classes.chip} label="Medium" />
6464
<Chip className={classes.chip} label="Hard" />
6565
</div>
6666
</div>
6767
<div className={classes.section3}>
68-
<Button variant="contained" color="primary" fullWidth>
69-
Add to cart
70-
</Button>
68+
<Button color="primary">Add to cart</Button>
7169
</div>
7270
</div>
7371
);

‎docs/src/pages/demos/lists/AlignItemsList.js

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,12 @@ function AlignItemsList(props) {
3131
primary="Brunch this weekend?"
3232
secondary={
3333
<React.Fragment>
34-
<Typography component="span" className={classes.inline} color="textPrimary">
34+
<Typography
35+
component="span"
36+
variant="body2"
37+
className={classes.inline}
38+
color="textPrimary"
39+
>
3540
Ali Connors
3641
</Typography>
3742
{" — I'll be in your neighborhood doing errands this…"}
@@ -47,7 +52,12 @@ function AlignItemsList(props) {
4752
primary="Summer BBQ"
4853
secondary={
4954
<React.Fragment>
50-
<Typography component="span" className={classes.inline} color="textPrimary">
55+
<Typography
56+
component="span"
57+
variant="body2"
58+
className={classes.inline}
59+
color="textPrimary"
60+
>
5161
to Scott, Alex, Jennifer
5262
</Typography>
5363
{" — Wish I could come, but I'm out of town this…"}
@@ -63,7 +73,12 @@ function AlignItemsList(props) {
6373
primary="Oui Oui"
6474
secondary={
6575
<React.Fragment>
66-
<Typography component="span" className={classes.inline} color="textPrimary">
76+
<Typography
77+
component="span"
78+
variant="body2"
79+
className={classes.inline}
80+
color="textPrimary"
81+
>
6782
Sandra Adams
6883
</Typography>
6984
{' — Do you have Paris recommendations? Have you ever…'}

‎docs/src/pages/layout/grid/ComplexGrid.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,17 @@ function ComplexGrid(props) {
4444
<Typography gutterBottom variant="subtitle1">
4545
Standard license
4646
</Typography>
47-
<Typography gutterBottom>Full resolution 1920x1080 • JPEG</Typography>
48-
<Typography color="textSecondary">ID: 1030114</Typography>
47+
<Typography variant="body2" gutterBottom>
48+
Full resolution 1920x1080 • JPEG
49+
</Typography>
50+
<Typography variant="body2" color="textSecondary">
51+
ID: 1030114
52+
</Typography>
4953
</Grid>
5054
<Grid item>
51-
<Typography style={{ cursor: 'pointer' }}>Remove</Typography>
55+
<Typography variant="body2" style={{ cursor: 'pointer' }}>
56+
Remove
57+
</Typography>
5258
</Grid>
5359
</Grid>
5460
<Grid item>

‎docs/src/pages/style/links/Links.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ function Links(props) {
2525
<Link href={dudUrl} color="inherit" className={classes.link}>
2626
{'color="inherit"'}
2727
</Link>
28-
<Link href={dudUrl} variant="body1" className={classes.link}>
29-
{'variant="body1"'}
28+
<Link href={dudUrl} variant="body2" className={classes.link}>
29+
{'variant="body2"'}
3030
</Link>
3131
</Typography>
3232
);

‎packages/material-ui/src/CssBaseline/CssBaseline.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,13 @@ const useStyles = makeStyles(
1818
},
1919
body: {
2020
margin: 0, // Remove the margin in all browsers.
21+
color: theme.palette.text.primary,
22+
...theme.typography.body2,
2123
backgroundColor: theme.palette.background.default,
2224
'@media print': {
2325
// Save printer ink.
2426
backgroundColor: theme.palette.common.white,
2527
},
26-
...theme.typography.body2,
2728
},
2829
},
2930
}),

‎packages/material-ui/src/FormHelperText/FormHelperText.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ export const styles = theme => ({
99
/* Styles applied to the root element. */
1010
root: {
1111
color: theme.palette.text.secondary,
12-
fontFamily: theme.typography.fontFamily,
13-
fontSize: theme.typography.pxToRem(12),
12+
...theme.typography.caption,
1413
textAlign: 'left',
1514
marginTop: 8,
1615
lineHeight: '1em',

‎packages/material-ui/src/FormLabel/FormLabel.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@ import withStyles from '../styles/withStyles';
88
export const styles = theme => ({
99
/* Styles applied to the root element. */
1010
root: {
11-
fontFamily: theme.typography.fontFamily,
1211
color: theme.palette.text.secondary,
13-
fontSize: theme.typography.pxToRem(16),
12+
...theme.typography.body1,
1413
lineHeight: 1,
1514
padding: 0,
1615
'&$focused': {

‎packages/material-ui/src/ListItemText/ListItemText.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ const ListItemText = React.forwardRef(function ListItemText(props, ref) {
7777
if (secondary != null && secondary.type !== Typography && !disableTypography) {
7878
secondary = (
7979
<Typography
80+
variant="body2"
8081
className={clsx(classes.secondary, {
8182
[classes.textDense]: dense,
8283
})}

‎packages/material-ui/src/SnackbarContent/SnackbarContent.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const SnackbarContent = React.forwardRef(function SnackbarContent(props, ref) {
5151
return (
5252
<Paper
5353
component={Typography}
54+
variant="body2"
5455
variantMapping={{
5556
body1: 'div',
5657
body2: 'div',

‎packages/material-ui/src/StepLabel/StepLabel.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ const StepLabel = React.forwardRef(function StepLabel(props, ref) {
122122
) : null}
123123
<span className={classes.labelContainer}>
124124
<Typography
125+
variant="body2"
125126
component="span"
126127
className={clsx(classes.label, {
127128
[classes.alternativeLabel]: alternativeLabel,

‎packages/material-ui/src/TableCell/TableCell.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const styles = theme => ({
2222
: darken(fade(theme.palette.divider, 1), 0.68)
2323
}`,
2424
textAlign: 'left',
25-
padding: '13px 40px 13px 16px',
25+
padding: '14px 40px 14px 16px',
2626
'&:last-child': {
2727
paddingRight: 16,
2828
},
@@ -47,7 +47,7 @@ export const styles = theme => ({
4747
},
4848
/* Styles applied to the root element if `padding="dense"`. */
4949
sizeSmall: {
50-
padding: '5px 24px 5px 16px',
50+
padding: '6px 24px 6px 16px',
5151
'&:last-child': {
5252
paddingRight: 16,
5353
},

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@ type Style = ThemeStyle | 'srOnly';
77
export interface TypographyProps
88
extends StandardProps<React.HTMLAttributes<HTMLElement>, TypographyClassKey> {
99
align?: PropTypes.Alignment;
10-
color?: PropTypes.Color | 'textPrimary' | 'textSecondary' | 'error';
10+
color?:
11+
| 'initial'
12+
| 'inherit'
13+
| 'primary'
14+
| 'secondary'
15+
| 'textPrimary'
16+
| 'textSecondary'
17+
| 'error';
1118
component?: React.ElementType<TypographyProps>;
1219
display?: 'initial' | 'block' | 'inline';
1320
gutterBottom?: boolean;

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ const Typography = React.forwardRef(function Typography(props, ref) {
147147
classes.root,
148148
{
149149
[classes[variant]]: variant !== 'inherit',
150-
[classes[`color${capitalize(color)}`]]: color !== 'default',
150+
[classes[`color${capitalize(color)}`]]: color !== 'initial',
151151
[classes.noWrap]: noWrap,
152152
[classes.gutterBottom]: gutterBottom,
153153
[classes.paragraph]: paragraph,
@@ -184,13 +184,13 @@ Typography.propTypes = {
184184
* The color of the component. It supports those theme colors that make sense for this component.
185185
*/
186186
color: PropTypes.oneOf([
187-
'default',
188-
'error',
187+
'initial',
189188
'inherit',
190189
'primary',
191190
'secondary',
192191
'textPrimary',
193192
'textSecondary',
193+
'error',
194194
]),
195195
/**
196196
* The component used for the root node.
@@ -249,12 +249,12 @@ Typography.propTypes = {
249249

250250
Typography.defaultProps = {
251251
align: 'inherit',
252-
color: 'default',
252+
color: 'initial',
253253
display: 'initial',
254254
gutterBottom: false,
255255
noWrap: false,
256256
paragraph: false,
257-
variant: 'body2',
257+
variant: 'body1',
258258
variantMapping: defaultVariantMapping,
259259
};
260260

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ describe('<Typography />', () => {
3535
assert.strictEqual(wrapper.text(), 'Hello');
3636
});
3737

38-
it('should render body2 root by default', () => {
38+
it('should render body1 root by default', () => {
3939
const wrapper = shallow(<Typography>Hello</Typography>);
40-
assert.strictEqual(wrapper.hasClass(classes.body2), true);
40+
assert.strictEqual(wrapper.hasClass(classes.body1), true);
4141
assert.strictEqual(wrapper.hasClass(classes.root), true);
4242
});
4343

‎packages/material-ui/src/styles/createTypography.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default function createTypography(palette, typography) {
3232
const coef = fontSize / 14;
3333
const pxToRem = size => `${(size / htmlFontSize) * coef}rem`;
3434
const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({
35-
color: palette.text.primary,
35+
// color: palette.text.primary,
3636
fontFamily,
3737
fontWeight,
3838
fontSize: pxToRem(size),
@@ -57,7 +57,7 @@ export default function createTypography(palette, typography) {
5757
subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
5858
subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
5959
body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
60-
body2: buildVariant(fontWeightRegular, 14, 1.5, 0.15),
60+
body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
6161
button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
6262
caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
6363
overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),

‎pages/api/typography.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ import Typography from '@material-ui/core/Typography';
2121
| <span class="prop-name">align</span> | <span class="prop-type">enum:&nbsp;'inherit', 'left', 'center', 'right', 'justify'<br></span> | <span class="prop-default">'inherit'</span> | Set the text-align on the component. |
2222
| <span class="prop-name">children</span> | <span class="prop-type">node</span> |   | The content of the component. |
2323
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
24-
| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'default', 'error', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary'<br></span> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
24+
| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error'<br></span> | <span class="prop-default">'initial'</span> | The color of the component. It supports those theme colors that make sense for this component. |
2525
| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> |   | The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component. |
2626
| <span class="prop-name">display</span> | <span class="prop-type">enum:&nbsp;'initial'&nbsp;&#124;<br>&nbsp;'block'&nbsp;&#124;<br>&nbsp;'inline'<br></span> | <span class="prop-default">'initial'</span> | Controls the display type |
2727
| <span class="prop-name">gutterBottom</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the text will have a bottom margin. |
2828
| <span class="prop-name">noWrap</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the text will not wrap, but instead will truncate with an ellipsis. |
2929
| <span class="prop-name">paragraph</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the text will have a bottom margin. |
30-
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit'<br></span> | <span class="prop-default">'body2'</span> | Applies the theme typography styles. |
30+
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit'<br></span> | <span class="prop-default">'body1'</span> | Applies the theme typography styles. |
3131
| <span class="prop-name">variantMapping</span> | <span class="prop-type">object</span> | <span class="prop-default">{ h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subtitle1: 'h6', subtitle2: 'h6', body1: 'p', body2: 'p',}</span> | We are empirically mapping the variant property to a range of different DOM element types. For instance, subtitle1 to `<h6>`. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` property. |
3232

3333
Any other properties supplied will be spread to the root element (native element).

0 commit comments

Comments
 (0)