[Button] Fix vertical text alignment by reducing padding

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"

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}`. */

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,11 +153,15 @@ ListItemText.propTypes = {
    * (as long as disableTypography is not `true`).
    */
   secondaryTypographyProps: PropTypes.object,
+  /**
+   * @ignore
+   */
+  theme: PropTypes.object.isRequired,
 };
 
 ListItemText.defaultProps = {
   disableTypography: false,
   inset: false,
 };
 
-export default withStyles(styles, { name: 'MuiListItemText' })(ListItemText);
+export default withStyles(styles, { name: 'MuiListItemText', withTheme: true })(ListItemText);

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();

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),
   };