better with less CSS :)

mui · Jan 1, 2019 · 8158e51 · 8158e51
1 parent 2226552
commit 8158e51
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 18 deletions.
diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.js b/docs/src/pages/demos/buttons/CustomizedButtons.js
@@ -23,6 +23,7 @@ const styles = theme => ({
     fontSize: 16,
     padding: '6px 12px',
     border: '1px solid',
+    lineHeight: 1.5,
     backgroundColor: '#007bff',
     borderColor: '#007bff',
     fontFamily: [

diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
@@ -12,13 +12,11 @@ import { capitalize } from '../utils/helpers';
 export const styles = theme => ({
   /* Styles applied to the root element. */
   root: {
-    lineHeight: 1.3125, // To remove with v4.
+    lineHeight: 1.75, // To remove with v4.
     ...theme.typography.button,
     boxSizing: 'border-box',
     minWidth: 64,
-    minHeight: 36,
     padding: '6px 16px',
-    alignItems: 'center',
     borderRadius: theme.shape.borderRadius,
     color: theme.palette.text.primary,
     transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
@@ -38,10 +36,6 @@ export const styles = theme => ({
     '&$disabled': {
       color: theme.palette.action.disabled,
     },
-    '&:before': {
-      content: '""',
-      height: 24, // Same height as desired min-height
-    },
   },
   /* Styles applied to the span element that wraps the children. */
   label: {
@@ -84,6 +78,7 @@ export const styles = theme => ({
   flatSecondary: {},
   /* Styles applied to the root element if `variant="outlined"`. */
   outlined: {
+    padding: '5px 16px',
     border: `1px solid ${
       theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
     }`,
@@ -214,22 +209,12 @@ export const styles = theme => ({
   sizeSmall: {
     padding: '4px 8px',
     minWidth: 64,
-    minHeight: 31,
     fontSize: theme.typography.pxToRem(13),
-    '&:before': {
-      content: '""',
-      height: 23, // Same height as desired min-height
-    },
   },
   /* Styles applied to the root element if `size="large"`. */
   sizeLarge: {
     padding: '8px 24px',
-    minHeight: 42,
     fontSize: theme.typography.pxToRem(15),
-    '&:before': {
-      content: '""',
-      height: 26, // Same height as desired min-height
-    },
   },
   /* Styles applied to the root element if `fullWidth={true}`. */
   fullWidth: {

diff --git 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.3125, 0.4, caseAllCaps),
+    buttonNext: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
     captionNext: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
     overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
   };