Merge pull request #4130 from nathanmarks/button-label-alignment

[Buttons] Fixed alignment related regressions
mui · Apr 30, 2016 · 5986091 · 5986091
2 parents 66417b7 + 6837968
commit 5986091
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/src/FlatButton/FlatButton.js b/src/FlatButton/FlatButton.js
@@ -202,6 +202,7 @@ class FlatButton extends Component {
 
     const mergedRootStyles = Object.assign({}, {
       height: buttonHeight,
+      lineHeight: `${buttonHeight}px`,
       minWidth: buttonMinWidth,
       color: defaultTextColor,
       transition: transitions.easeOut(),
@@ -222,7 +223,6 @@ class FlatButton extends Component {
       iconCloned = React.cloneElement(icon, {
         color: mergedRootStyles.color,
         style: {
-          lineHeight: `${buttonHeight}px`,
           verticalAlign: 'middle',
           marginLeft: label && labelPosition !== 'before' ? 12 : 0,
           marginRight: label && labelPosition === 'before' ? 12 : 0,
@@ -241,7 +241,6 @@ class FlatButton extends Component {
       textTransform: textTransform,
       fontWeight: fontWeight,
       fontSize: fontSize,
-      lineHeight: `${buttonHeight}px`,
     }, labelStyleIcon, labelStyle);
 
     const labelElement = label ? (

diff --git a/src/RaisedButton/RaisedButton.js b/src/RaisedButton/RaisedButton.js
@@ -66,6 +66,7 @@ function getStyles(props, context, state) {
       position: 'relative',
       minWidth: fullWidth ? '100%' : button.minWidth,
       height: buttonHeight,
+      lineHeight: `${buttonHeight}px`,
       width: '100%',
       padding: 0,
       borderRadius: borderRadius,
@@ -94,7 +95,6 @@ function getStyles(props, context, state) {
     },
     overlay: {
       height: buttonHeight,
-      lineHeight: `${buttonHeight}px`,
       borderRadius: borderRadius,
       backgroundColor: (state.keyboardFocused || state.hovered) && !disabled &&
         fade(labelColor, amount),

diff --git a/src/internal/EnhancedButton.js b/src/internal/EnhancedButton.js
@@ -274,7 +274,8 @@ class EnhancedButton extends Component {
       cursor: disabled ? 'default' : 'pointer',
       textDecoration: 'none',
       outline: 'none',
-      font: 'inherit',
+      fontSize: 'inherit',
+      fontWeight: 'inherit',
       /**
        * This is needed so that ripples do not bleed
        * past border radius.