Merge pull request #3051 from onumossn/rippled-tabs

[Tabs] Use flat buttons for tabs
mui · Feb 1, 2016 · 5f47b3d · 5f47b3d
2 parents e331d45 + 5d848a8
commit 5f47b3d
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 34 deletions.
diff --git a/src/enhanced-button.jsx b/src/enhanced-button.jsx
@@ -285,6 +285,13 @@ const EnhancedButton = React.createClass({
       cursor: disabled ? 'default' : 'pointer',
       textDecoration: 'none',
       outline: 'none',
+      /*
+        This is needed so that ripples do not bleed
+        past border radius.
+        See: http://stackoverflow.com/questions/17298739/
+          css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
+       */
+      transform: disableTouchRipple && disableFocusRipple ? null : 'translate3d(0, 0, 0)',
     }, style);
 
     if (disabled && linkButton) {

diff --git a/src/flat-button.jsx b/src/flat-button.jsx
@@ -270,9 +270,6 @@ const FlatButton = React.createClass({
       minWidth: buttonMinWidth,
       padding: 0,
       margin: 0,
-      //This is need so that ripples do not bleed past border radius.
-      //See: http://stackoverflow.com/questions/17298739
-      transform: 'translate3d(0, 0, 0)',
     }, style);
 
     let iconCloned;

diff --git a/src/floating-action-button.jsx b/src/floating-action-button.jsx
@@ -204,13 +204,6 @@ const FloatingActionButton = React.createClass({
         borderRadius: '50%',
         textAlign: 'center',
         verticalAlign: 'bottom',
-        /*
-         This is need so that ripples do not bleed
-          past border radius.
-          See: http://stackoverflow.com/questions/17298739/
-            css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
-         */
-        transform: 'translate3d(0, 0, 0)',
       },
       containerWhenMini: {
         height: themeVariables.miniSize,

diff --git a/src/raised-button.jsx b/src/raised-button.jsx
@@ -254,13 +254,6 @@ const RaisedButton = React.createClass({
         borderRadius: 2,
         transition: Transitions.easeOut(),
         backgroundColor: this._getBackgroundColor(),
-        /*
-          This is need so that ripples do not bleed
-          past border radius.
-          See: http://stackoverflow.com/questions/17298739/
-            css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
-         */
-        transform: 'translate3d(0, 0, 0)',
       },
       label: {
         position: 'relative',

diff --git a/src/styles/getMuiTheme.js b/src/styles/getMuiTheme.js
@@ -225,7 +225,7 @@ export default function getMuiTheme(baseTheme, muiTheme) {
     },
     tabs: {
       backgroundColor: palette.primary1Color,
-      textColor: ColorManipulator.fade(palette.alternateTextColor, 0.6),
+      textColor: ColorManipulator.fade(palette.alternateTextColor, 0.7),
       selectedTextColor: palette.alternateTextColor,
     },
     textField: {

diff --git a/src/tabs/tab.jsx b/src/tabs/tab.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import StylePropable from '../mixins/style-propable';
 import getMuiTheme from '../styles/getMuiTheme';
+import EnhancedButton from '../enhanced-button';
 
 const Tab = React.createClass({
 
@@ -110,28 +111,21 @@ const Tab = React.createClass({
     const textColor = selected ? this.state.muiTheme.tabs.selectedTextColor : this.state.muiTheme.tabs.textColor;
 
     const styles = this.mergeStyles({
-      display: 'table-cell',
-      cursor: 'pointer',
-      textAlign: 'center',
-      verticalAlign: 'middle',
-      paddingTop: (icon && !label) ? 4 : 0,
+      padding: '0px 12px',
       height: (label && icon) ? 72 : 48,
       color: textColor,
-      outline: 'none',
-      fontSize: 14,
       fontWeight: 500,
-      whiteSpace: 'initial',
-      fontFamily: this.state.muiTheme.rawTheme.fontFamily,
-      boxSizing: 'border-box',
+      fontSize: 14,
       width: width,
+      textTransform: 'uppercase',
     }, style);
 
     let iconElement;
     if (icon && React.isValidElement(icon)) {
       const params = {
         style: {
           fontSize: 24,
-          marginBottom: (label) ? 4 : 0,
+          marginBottom: (label) ? 5 : 0,
           display: label ? 'block' : 'inline-block',
           color: textColor,
         },
@@ -143,15 +137,22 @@ const Tab = React.createClass({
       iconElement = React.cloneElement(icon, params);
     }
 
+    const rippleColor = styles.color;
+    const rippleOpacity = 0.3;
+
     return (
-      <div
+      <EnhancedButton
         {...other}
-        style={this.prepareStyles(styles)}
+        style={styles}
+        focusRippleColor={rippleColor}
+        touchRippleColor={rippleColor}
+        focusRippleOpacity={rippleOpacity}
+        touchRippleOpacity={rippleOpacity}
         onTouchTap={this._handleTouchTap}
       >
         {iconElement}
         {label}
-      </div>
+      </EnhancedButton>
     );
   },
 

diff --git a/src/tabs/tabs.jsx b/src/tabs/tabs.jsx
@@ -192,10 +192,8 @@ const Tabs = React.createClass({
         margin: 0,
         padding: 0,
         width: '100%',
-        height: 48,
         backgroundColor: themeVariables.backgroundColor,
         whiteSpace: 'nowrap',
-        display: 'table',
       },
     };