[Typography] Less opinionated

mui · Mar 28, 2019 · 9febe8a · 9febe8a
1 parent 264c64d
commit 9febe8a
Show file tree

Hide file tree

Showing 23 changed files with 71 additions and 43 deletions.
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -200,7 +200,7 @@ class AppFrame extends React.Component {
               <Notifications />
               <MarkdownLinks />
               <AppBar className={appBarClassName}>
-                <Typography className={classes.banner} noWrap>
+                <Typography className={classes.banner} variant="body2" noWrap>
                   <Interpolate
                     replacement={{
                       versionNumber: (

diff --git a/docs/src/pages/demos/cards/ImgMediaCard.js b/docs/src/pages/demos/cards/ImgMediaCard.js
@@ -36,7 +36,7 @@ function ImgMediaCard(props) {
           <Typography gutterBottom variant="h5" component="h2">
             Lizard
           </Typography>
-          <Typography component="p">
+          <Typography variant="body2" color="textSecondary" component="p">
             Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
             across all continents except Antarctica
           </Typography>

diff --git a/docs/src/pages/demos/cards/MediaCard.js b/docs/src/pages/demos/cards/MediaCard.js
@@ -32,7 +32,7 @@ function MediaCard(props) {
           <Typography gutterBottom variant="h5" component="h2">
             Lizard
           </Typography>
-          <Typography component="p">
+          <Typography variant="body2" color="textSecondary" component="p">
             Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
             across all continents except Antarctica
           </Typography>

diff --git a/docs/src/pages/demos/cards/MediaCard.tsx b/docs/src/pages/demos/cards/MediaCard.tsx
@@ -34,7 +34,7 @@ function MediaCard(props: Props) {
           <Typography gutterBottom variant="h5" component="h2">
             Lizard
           </Typography>
-          <Typography component="p">
+          <Typography variant="body2" color="textSecondary" component="p">
             Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
             across all continents except Antarctica
           </Typography>

diff --git a/docs/src/pages/demos/cards/RecipeReviewCard.js b/docs/src/pages/demos/cards/RecipeReviewCard.js
@@ -72,7 +72,7 @@ function RecipeReviewCard() {
         title="Paella dish"
       />
       <CardContent>
-        <Typography component="p">
+        <Typography variant="body2" color="textSecondary" component="p">
           This impressive paella is a perfect party dish and a fun meal to cook together with your
           guests. Add 1 cup of frozen peas along with the mussels, if you like.
         </Typography>

diff --git a/docs/src/pages/demos/cards/RecipeReviewCard.tsx b/docs/src/pages/demos/cards/RecipeReviewCard.tsx
@@ -74,7 +74,7 @@ function RecipeReviewCard() {
         title="Paella dish"
       />
       <CardContent>
-        <Typography component="p">
+        <Typography variant="body2" color="textSecondary" component="p">
           This impressive paella is a perfect party dish and a fun meal to cook together with your
           guests. Add 1 cup of frozen peas along with the mussels, if you like.
         </Typography>

diff --git a/docs/src/pages/demos/cards/SimpleCard.js b/docs/src/pages/demos/cards/SimpleCard.js
@@ -44,7 +44,7 @@ function SimpleCard(props) {
         <Typography className={classes.pos} color="textSecondary">
           adjective
         </Typography>
-        <Typography component="p">
+        <Typography variant="body2" component="p">
           well meaning and kindly.
           <br />
           {'"a benevolent smile"'}

diff --git a/docs/src/pages/demos/cards/SimpleCard.tsx b/docs/src/pages/demos/cards/SimpleCard.tsx
@@ -46,7 +46,7 @@ function SimpleCard(props: Props) {
         <Typography className={classes.pos} color="textSecondary">
           adjective
         </Typography>
-        <Typography component="p">
+        <Typography variant="body2" component="p">
           well meaning and kindly.
           <br />
           {'"a benevolent smile"'}

diff --git a/docs/src/pages/demos/dividers/MiddleDividers.js b/docs/src/pages/demos/dividers/MiddleDividers.js
@@ -23,7 +23,7 @@ const styles = theme => ({
     margin: theme.spacing(2),
   },
   section3: {
-    margin: theme.spacing(6, 2, 2),
+    margin: theme.spacing(3, 1, 1),
   },
 });
 
@@ -44,7 +44,7 @@ function MiddleDividers(props) {
             </Typography>
           </Grid>
         </Grid>
-        <Typography color="textSecondary">
+        <Typography color="textSecondary" variant="body2">
           Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the
           hall.
         </Typography>
@@ -56,15 +56,13 @@ function MiddleDividers(props) {
         </Typography>
         <div>
           <Chip className={classes.chip} label="Extra Soft" />
-          <Chip className={classes.chip} label="Soft" />
+          <Chip className={classes.chip} color="primary" label="Soft" />
           <Chip className={classes.chip} label="Medium" />
           <Chip className={classes.chip} label="Hard" />
         </div>
       </div>
       <div className={classes.section3}>
-        <Button variant="contained" color="primary" fullWidth>
-          Add to cart
-        </Button>
+        <Button color="primary">Add to cart</Button>
       </div>
     </div>
   );

diff --git a/docs/src/pages/demos/dividers/MiddleDividers.tsx b/docs/src/pages/demos/dividers/MiddleDividers.tsx
@@ -24,7 +24,7 @@ const styles = (theme: Theme) =>
       margin: theme.spacing(2),
     },
     section3: {
-      margin: theme.spacing(6, 2, 2),
+      margin: theme.spacing(3, 1, 1),
     },
   });
 
@@ -47,7 +47,7 @@ function MiddleDividers(props: Props) {
             </Typography>
           </Grid>
         </Grid>
-        <Typography color="textSecondary">
+        <Typography color="textSecondary" variant="body2">
           Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the
           hall.
         </Typography>
@@ -59,15 +59,13 @@ function MiddleDividers(props: Props) {
         </Typography>
         <div>
           <Chip className={classes.chip} label="Extra Soft" />
-          <Chip className={classes.chip} label="Soft" />
+          <Chip className={classes.chip} color="primary" label="Soft" />
           <Chip className={classes.chip} label="Medium" />
           <Chip className={classes.chip} label="Hard" />
         </div>
       </div>
       <div className={classes.section3}>
-        <Button variant="contained" color="primary" fullWidth>
-          Add to cart
-        </Button>
+        <Button color="primary">Add to cart</Button>
       </div>
     </div>
   );

diff --git a/docs/src/pages/demos/lists/AlignItemsList.js b/docs/src/pages/demos/lists/AlignItemsList.js
@@ -31,7 +31,12 @@ function AlignItemsList(props) {
           primary="Brunch this weekend?"
           secondary={
             <React.Fragment>
-              <Typography component="span" className={classes.inline} color="textPrimary">
+              <Typography
+                component="span"
+                variant="body2"
+                className={classes.inline}
+                color="textPrimary"
+              >
                 Ali Connors
               </Typography>
               {" — I'll be in your neighborhood doing errands this…"}
@@ -47,7 +52,12 @@ function AlignItemsList(props) {
           primary="Summer BBQ"
           secondary={
             <React.Fragment>
-              <Typography component="span" className={classes.inline} color="textPrimary">
+              <Typography
+                component="span"
+                variant="body2"
+                className={classes.inline}
+                color="textPrimary"
+              >
                 to Scott, Alex, Jennifer
               </Typography>
               {" — Wish I could come, but I'm out of town this…"}
@@ -63,7 +73,12 @@ function AlignItemsList(props) {
           primary="Oui Oui"
           secondary={
             <React.Fragment>
-              <Typography component="span" className={classes.inline} color="textPrimary">
+              <Typography
+                component="span"
+                variant="body2"
+                className={classes.inline}
+                color="textPrimary"
+              >
                 Sandra Adams
               </Typography>
               {' — Do you have Paris recommendations? Have you ever…'}

diff --git a/docs/src/pages/layout/grid/ComplexGrid.js b/docs/src/pages/layout/grid/ComplexGrid.js
@@ -44,11 +44,17 @@ function ComplexGrid(props) {
                 <Typography gutterBottom variant="subtitle1">
                   Standard license
                 </Typography>
-                <Typography gutterBottom>Full resolution 1920x1080 • JPEG</Typography>
-                <Typography color="textSecondary">ID: 1030114</Typography>
+                <Typography variant="body2" gutterBottom>
+                  Full resolution 1920x1080 • JPEG
+                </Typography>
+                <Typography variant="body2" color="textSecondary">
+                  ID: 1030114
+                </Typography>
               </Grid>
               <Grid item>
-                <Typography style={{ cursor: 'pointer' }}>Remove</Typography>
+                <Typography variant="body2" style={{ cursor: 'pointer' }}>
+                  Remove
+                </Typography>
               </Grid>
             </Grid>
             <Grid item>

diff --git a/docs/src/pages/style/links/Links.js b/docs/src/pages/style/links/Links.js
@@ -25,8 +25,8 @@ function Links(props) {
       <Link href={dudUrl} color="inherit" className={classes.link}>
         {'color="inherit"'}
       </Link>
-      <Link href={dudUrl} variant="body1" className={classes.link}>
-        {'variant="body1"'}
+      <Link href={dudUrl} variant="body2" className={classes.link}>
+        {'variant="body2"'}
       </Link>
     </Typography>
   );

diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.js b/packages/material-ui/src/CssBaseline/CssBaseline.js
@@ -18,12 +18,13 @@ const useStyles = makeStyles(
       },
       body: {
         margin: 0, // Remove the margin in all browsers.
+        color: theme.palette.text.primary,
+        ...theme.typography.body2,
         backgroundColor: theme.palette.background.default,
         '@media print': {
           // Save printer ink.
           backgroundColor: theme.palette.common.white,
         },
-        ...theme.typography.body2,
       },
     },
   }),

diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js
@@ -77,6 +77,7 @@ const ListItemText = React.forwardRef(function ListItemText(props, ref) {
         if (secondary != null && secondary.type !== Typography && !disableTypography) {
           secondary = (
             <Typography
+              variant="body2"
               className={clsx(classes.secondary, {
                 [classes.textDense]: dense,
               })}

diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js
@@ -51,6 +51,7 @@ const SnackbarContent = React.forwardRef(function SnackbarContent(props, ref) {
   return (
     <Paper
       component={Typography}
+      variant="body2"
       variantMapping={{
         body1: 'div',
         body2: 'div',

diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js
@@ -122,6 +122,7 @@ const StepLabel = React.forwardRef(function StepLabel(props, ref) {
       ) : null}
       <span className={classes.labelContainer}>
         <Typography
+          variant="body2"
           component="span"
           className={clsx(classes.label, {
             [classes.alternativeLabel]: alternativeLabel,

diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js
@@ -22,7 +22,7 @@ export const styles = theme => ({
         : darken(fade(theme.palette.divider, 1), 0.68)
     }`,
     textAlign: 'left',
-    padding: '13px 40px 13px 16px',
+    padding: '14px 40px 14px 16px',
     '&:last-child': {
       paddingRight: 16,
     },
@@ -47,7 +47,7 @@ export const styles = theme => ({
   },
   /* Styles applied to the root element if `padding="dense"`. */
   sizeSmall: {
-    padding: '5px 24px 5px 16px',
+    padding: '6px 24px 6px 16px',
     '&:last-child': {
       paddingRight: 16,
     },

diff --git a/packages/material-ui/src/Typography/Typography.d.ts b/packages/material-ui/src/Typography/Typography.d.ts
@@ -7,7 +7,14 @@ type Style = ThemeStyle | 'srOnly';
 export interface TypographyProps
   extends StandardProps<React.HTMLAttributes<HTMLElement>, TypographyClassKey> {
   align?: PropTypes.Alignment;
-  color?: PropTypes.Color | 'textPrimary' | 'textSecondary' | 'error';
+  color?:
+    | 'initial'
+    | 'inherit'
+    | 'primary'
+    | 'secondary'
+    | 'textPrimary'
+    | 'textSecondary'
+    | 'error';
   component?: React.ElementType<TypographyProps>;
   display?: 'initial' | 'block' | 'inline';
   gutterBottom?: boolean;

diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js
@@ -147,7 +147,7 @@ const Typography = React.forwardRef(function Typography(props, ref) {
         classes.root,
         {
           [classes[variant]]: variant !== 'inherit',
-          [classes[`color${capitalize(color)}`]]: color !== 'default',
+          [classes[`color${capitalize(color)}`]]: color !== 'initial',
           [classes.noWrap]: noWrap,
           [classes.gutterBottom]: gutterBottom,
           [classes.paragraph]: paragraph,
@@ -184,13 +184,13 @@ Typography.propTypes = {
    * The color of the component. It supports those theme colors that make sense for this component.
    */
   color: PropTypes.oneOf([
-    'default',
-    'error',
+    'initial',
     'inherit',
     'primary',
     'secondary',
     'textPrimary',
     'textSecondary',
+    'error',
   ]),
   /**
    * The component used for the root node.
@@ -249,12 +249,12 @@ Typography.propTypes = {
 
 Typography.defaultProps = {
   align: 'inherit',
-  color: 'default',
+  color: 'initial',
   display: 'initial',
   gutterBottom: false,
   noWrap: false,
   paragraph: false,
-  variant: 'body2',
+  variant: 'body1',
   variantMapping: defaultVariantMapping,
 };
 

diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js
@@ -35,9 +35,9 @@ describe('<Typography />', () => {
     assert.strictEqual(wrapper.text(), 'Hello');
   });
 
-  it('should render body2 root by default', () => {
+  it('should render body1 root by default', () => {
     const wrapper = shallow(<Typography>Hello</Typography>);
-    assert.strictEqual(wrapper.hasClass(classes.body2), true);
+    assert.strictEqual(wrapper.hasClass(classes.body1), true);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
   });
 

diff --git a/packages/material-ui/src/styles/createTypography.js b/packages/material-ui/src/styles/createTypography.js
@@ -32,7 +32,7 @@ export default function createTypography(palette, typography) {
   const coef = fontSize / 14;
   const pxToRem = size => `${(size / htmlFontSize) * coef}rem`;
   const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({
-    color: palette.text.primary,
+    // color: palette.text.primary,
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
@@ -57,7 +57,7 @@ export default function createTypography(palette, typography) {
     subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
     subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
     body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
-    body2: buildVariant(fontWeightRegular, 14, 1.5, 0.15),
+    body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
     button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
     caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
     overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),

diff --git a/pages/api/typography.md b/pages/api/typography.md
@@ -21,13 +21,13 @@ import Typography from '@material-ui/core/Typography';
 | <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. |
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |   | The content of the component. |
 | <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. |
-| <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. |
+| <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. |
 | <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. |
 | <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 |
 | <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. |
 | <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. |
 | <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. |
-| <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. |
+| <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. |
 | <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. |
 
 Any other properties supplied will be spread to the root element (native element).