From c15537155ab52032699d4d41d1fc7e0ffc0296d4 Mon Sep 17 00:00:00 2001 From: joshwooding <12938082+joshwooding@users.noreply.github.com> Date: Mon, 31 Dec 2018 21:25:51 +0000 Subject: [PATCH 1/3] Use flexbox for alignment --- packages/material-ui/src/Button/Button.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index d51ebde2054d8f..a7600aa8a5eab2 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -18,6 +18,8 @@ export const styles = theme => ({ minWidth: 64, minHeight: 36, padding: '6px 16px', + height: 0, // IE11 work around for alignItems + alignItems: 'center', borderRadius: theme.shape.borderRadius, color: theme.palette.text.primary, transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], { From 2226552a5bf755aecf65512f21e4b5c4c26d4fbb Mon Sep 17 00:00:00 2001 From: joshwooding <12938082+joshwooding@users.noreply.github.com> Date: Tue, 1 Jan 2019 01:57:01 +0000 Subject: [PATCH 2/3] Benchmark other IE workaround --- packages/material-ui/src/Button/Button.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index a7600aa8a5eab2..4e94d9a8f71381 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -18,7 +18,6 @@ export const styles = theme => ({ minWidth: 64, minHeight: 36, padding: '6px 16px', - height: 0, // IE11 work around for alignItems alignItems: 'center', borderRadius: theme.shape.borderRadius, color: theme.palette.text.primary, @@ -39,6 +38,10 @@ 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: { @@ -213,12 +216,20 @@ export const styles = theme => ({ 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: { From 8158e512e58fe68cc68303ad2787e267ce0b5c11 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 1 Jan 2019 22:11:46 +0100 Subject: [PATCH 3/3] better with less CSS :) --- .../pages/demos/buttons/CustomizedButtons.js | 1 + packages/material-ui/src/Button/Button.js | 19 ++----------------- .../src/styles/createTypography.js | 2 +- 3 files changed, 4 insertions(+), 18 deletions(-) diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.js b/docs/src/pages/demos/buttons/CustomizedButtons.js index d70ff7d5a397b7..bda3776d858825 100644 --- 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 index 4e94d9a8f71381..373854bd4d9f90 100644 --- 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 index 4c0976b8193b40..274dfa92efdd19 100644 --- 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), };