Repository: mui/material-ui (TypeScript)
Date: 2018-12-17 23:21:54+00:00
Task type: Bug Fix

Issue:
Button text is not vertically aligned
I feel like the buttons in material ui v3.6.2 do not have the text vertically aligned while rendering on Chrome 70.

I think that that they looked fine in material-ui v0.x but in the recent material-ui versions they are a bit taller and have a "chin" under the text.

Here are some screenshots from the docs:

|v0.x|v3.6.2|
|--|--|
|![screen shot 2018-12-17 at 21 16 00](https://user-images.githubusercontent.com/1521321/50111059-8a219880-0244-11e9-9d6b-646a49cb6895.png)|![screen shot 2018-12-17 at 21 12 04](https://user-images.githubusercontent.com/1521321/50111060-8aba2f00-0244-11e9-8290-de25632c45f1.png)|
|[DOM link](https://v0.material-ui.com/#/components/raised-button)| [DOM link](https://v3-6-0.material-ui.com/demos/buttons/#contained-buttons)|


Issue discussion:
@adipascu Yes, you are right, the height of the button component is wrong 😱:

![capture d ecran 2018-12-17 a 23 53 30](https://user-images.githubusercontent.com/3165635/50120786-ff966480-0256-11e9-8b7f-460c0242119f.png)

It should be 36px over 37px. I propose the following fix:
```diff
export const styles = theme => ({
  /* Styles applied to the root element. */
  root: {
    ...theme.typography.button,
    boxSizing: 'border-box',
    minWidth: 64,
    minHeight: 36,
-   padding: '8px 16px',
+   padding: '6px 16px',
```
https://github.com/mui-org/material-ui/blob/dc396ad3d13224412105e86be43ddb607f8a543d/packages/material-ui/src/Button/Button.js#L20

What do you think about it? Do you want to work on it? :)

Solution patch:
diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.js b/docs/src/pages/demos/buttons/CustomizedButtons.js
--- a/docs/src/pages/demos/buttons/CustomizedButtons.js
+++ b/docs/src/pages/demos/buttons/CustomizedButtons.js
@@ -7,10 +7,6 @@ import purple from '@material-ui/core/colors/purple';
 import green from '@material-ui/core/colors/green';
 
 const styles = theme => ({
-  container: {
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
   margin: {
     margin: theme.spacing.unit,
   },
@@ -69,7 +65,7 @@ function CustomizedInputs(props) {
   const { classes } = props;
 
   return (
-    <div className={classes.container}>
+    <div>
       <Button
         variant="contained"
         color="primary"
diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
--- a/packages/material-ui/src/Button/Button.js
+++ b/packages/material-ui/src/Button/Button.js
@@ -13,11 +13,12 @@ import { capitalize } from '../utils/helpers';
 export const styles = theme => ({
   /* Styles applied to the root element. */
   root: {
+    lineHeight: 1.3125, // To remove with v4.
     ...theme.typography.button,
     boxSizing: 'border-box',
     minWidth: 64,
     minHeight: 36,
-    padding: '8px 16px',
+    padding: '6px 16px',
     borderRadius: theme.shape.borderRadius,
     color: theme.palette.text.primary,
     transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
@@ -47,7 +48,7 @@ export const styles = theme => ({
   },
   /* Styles applied to the root element if `variant="text"`. */
   text: {
-    padding: theme.spacing.unit,
+    padding: '6px 8px',
   },
   /* Styles applied to the root element if `variant="text"` and `color="primary"`. */
   textPrimary: {
@@ -207,16 +208,15 @@ export const styles = theme => ({
   },
   /* Styles applied to the root element if `size="small"`. */
   sizeSmall: {
-    padding: '7px 8px',
+    padding: '4px 8px',
     minWidth: 64,
-    minHeight: 32,
+    minHeight: 31,
     fontSize: theme.typography.pxToRem(13),
   },
   /* Styles applied to the root element if `size="large"`. */
   sizeLarge: {
     padding: '8px 24px',
-    minWidth: 112,
-    minHeight: 40,
+    minHeight: 42,
     fontSize: theme.typography.pxToRem(15),
   },
   /* Styles applied to the root element if `fullWidth={true}`. */
diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js
--- a/packages/material-ui/src/ListItemText/ListItemText.js
+++ b/packages/material-ui/src/ListItemText/ListItemText.js
@@ -52,6 +52,7 @@ function ListItemText(props) {
     primaryTypographyProps,
     secondary: secondaryProp,
     secondaryTypographyProps,
+    theme,
     ...other
   } = props;
 
@@ -62,8 +63,7 @@ function ListItemText(props) {
         if (primary != null && primary.type !== Typography && !disableTypography) {
           primary = (
             <Typography
-              variant="subheading"
-              internalDeprecatedVariant
+              variant={theme.typography.useNextVariants ? 'body1' : 'subheading'}
               className={classNames(classes.primary, { [classes.textDense]: dense })}
               component="span"
               {...primaryTypographyProps}
@@ -153,6 +153,10 @@ ListItemText.propTypes = {
    * (as long as disableTypography is not `true`).
    */
   secondaryTypographyProps: PropTypes.object,
+  /**
+   * @ignore
+   */
+  theme: PropTypes.object.isRequired,
 };
 
 ListItemText.defaultProps = {
@@ -160,4 +164,4 @@ ListItemText.defaultProps = {
   inset: false,
 };
 
-export default withStyles(styles, { name: 'MuiListItemText' })(ListItemText);
+export default withStyles(styles, { name: 'MuiListItemText', withTheme: true })(ListItemText);
diff --git a/packages/material-ui/src/styles/createTypography.js b/packages/material-ui/src/styles/createTypography.js
--- a/packages/material-ui/src/styles/createTypography.js
+++ b/packages/material-ui/src/styles/createTypography.js
@@ -71,7 +71,7 @@ export default function createTypography(palette, typography) {
     subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
     body1Next: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
     body2Next: buildVariant(fontWeightRegular, 14, 1.5, 0.15),
-    buttonNext: buildVariant(fontWeightMedium, 14, 1.5, 0.4, caseAllCaps),
+    buttonNext: buildVariant(fontWeightMedium, 14, 1.3125, 0.4, caseAllCaps),
     captionNext: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
     overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
   };


Test patch:
diff --git a/packages/material-ui/src/ListItemText/ListItemText.test.js b/packages/material-ui/src/ListItemText/ListItemText.test.js
--- a/packages/material-ui/src/ListItemText/ListItemText.test.js
+++ b/packages/material-ui/src/ListItemText/ListItemText.test.js
@@ -52,7 +52,7 @@ describe('<ListItemText />', () => {
       const listItemText = findOutermostIntrinsic(wrapper);
       const typography = listItemText.find(Typography);
       assert.strictEqual(typography.exists(), true);
-      assert.strictEqual(typography.props().variant, 'subheading');
+      assert.strictEqual(typography.props().variant, 'body1');
       assert.strictEqual(wrapper.text(), 'This is the primary text');
     });
 
@@ -109,7 +109,7 @@ describe('<ListItemText />', () => {
       assert.strictEqual(texts.length, 2);
 
       const primaryText = texts.first();
-      assert.strictEqual(primaryText.props().variant, 'subheading');
+      assert.strictEqual(primaryText.props().variant, 'body1');
       assert.strictEqual(primaryText.text(), 'This is the primary text');
 
       const secondaryText = texts.last();