Repository: codypearce/material-bread
Pull request #396 (2020-06-09 22:51:59)

MAT-17 Modify button styles
Check Contained, Text, Outlined and flat buttons
styles
<!--- The title of this PR should be a Jira issue ID and summary.  Example: `TCK-100 Add something to something` -->

## Issue Link
<!--- Please link to the Jira issue here or delete this section -->
https://fullstacklabs.atlassian.net/browse/MAT-17

## Checklist:
<!--- Go over all the following points, and put an `x` in all the boxes that apply -->
- [ ] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [x] All new and existing tests passed locally.


Patch:
diff --git a/src/Components/Button/ButtonBase/ButtonBase.js b/src/Components/Button/ButtonBase/ButtonBase.js
index e44ae2f..a28566e 100644
--- a/src/Components/Button/ButtonBase/ButtonBase.js
+++ b/src/Components/Button/ButtonBase/ButtonBase.js
@@ -55,12 +55,11 @@ class ButtonBase extends Component {
       textStyle,
       typeTextColor,
       theme,
-      hideLabel,
       dense,
       useInputCasing,
     } = this.props;
 
-    if (hideLabel) return null;
+    let modifiedText = text || ' ';
     return (
       <Text
         numberOfLines={1}
@@ -73,7 +72,7 @@ class ButtonBase extends Component {
           },
           textStyle,
         ]}>
-        {useInputCasing ? text : text.toUpperCase()}
+        {useInputCasing ? modifiedText : modifiedText.toUpperCase()}
       </Text>
     );
   }
@@ -111,8 +110,8 @@ class ButtonBase extends Component {
     if (icon) {
       return React.cloneElement(icon, {
         style: {
-          marginRight: iconPosition == 'left' ? 8 : 0,
-          marginLeft: iconPosition == 'right' ? 8 : 0,
+          marginRight: iconPosition == 'left' ? 12 : 0,
+          marginLeft: iconPosition == 'right' ? 12 : 0,
         },
         size: iconSize || (dense ? 14 : 18),
         color: typeTextColor ? typeTextColor : 'white',
@@ -162,8 +161,8 @@ class ButtonBase extends Component {
             minWidth: dense ? 'auto' : 64,
             height: dense ? 32 : 36,
             minHeight: dense ? 32 : 36,
-            paddingLeft: iconPosition === 'left' && icon ? 12 : 16,
-            paddingRight: iconPosition === 'right' && icon ? 12 : 16,
+            paddingLeft: iconPosition === 'left' && icon ? 18 : 16,
+            paddingRight: iconPosition === 'right' && icon ? 18 : 16,
             borderRadius: radius ? radius : theme.button.borderRadius,
           },
           typeButtonStyles,
diff --git a/src/Components/Button/ContainedButton/ContainedButton.js b/src/Components/Button/ContainedButton/ContainedButton.js
index 187594b..5456d0f 100644
--- a/src/Components/Button/ContainedButton/ContainedButton.js
+++ b/src/Components/Button/ContainedButton/ContainedButton.js
@@ -23,17 +23,17 @@ class ContainedButton extends Component {
   };
   state = {
     stateBackgroundColor: null,
-    elevation: new Animated.Value(6),
+    elevation: new Animated.Value(8),
     animatedShadowRadius: new Animated.Value(4.65),
     animatedShadowOpacity: new Animated.Value(0.27),
-    animatedShadowHeight: new Animated.Value(3),
-    animatedShadowWidth: new Animated.Value(1),
+    animatedShadowHeight: new Animated.Value(2),
+    animatedShadowWidth: new Animated.Value(-1.5),
   };
 
   animateShadow(active) {
-    const animationDuration = active ? 400 : 150;
+    const animationDuration = active ? 200 : 50;
     if (Platform.OS === 'android') {
-      const elevation = active ? 10 : 6;
+      const elevation = active ? 8 : 2;
       Animated.timing(this.state.elevation, {
         toValue: elevation,
         duration: animationDuration,
@@ -48,8 +48,8 @@ class ContainedButton extends Component {
 
       const shadowRadius = active ? 6.65 : 4.65;
       const shadowShadowOpacity = active ? 0.27 : 0.35;
-      const shadowHeight = active ? 5 : 3;
-      const shadowWidth = active ? 1.5 : 1;
+      const shadowHeight = active ? 4 : 2;
+      const shadowWidth = active ? -1.5 : -0.5;
 
       Animated.parallel([
         Animated.timing(animatedShadowRadius, {
@@ -157,7 +157,7 @@ class ContainedButton extends Component {
   handleHover(toggle) {
     const bgColor = this.getBackgroundColor();
     let implementedColor = toggle
-      ? this.getOverlayColor(bgColor, 0.04, 0.08)
+      ? this.getOverlayColor(bgColor, 0.08, 0.08)
       : null;
 
     this.setState({ stateBackgroundColor: implementedColor });
diff --git a/src/Components/Button/FlatButton/FlatButton.js b/src/Components/Button/FlatButton/FlatButton.js
index 8ff66f5..477b1b3 100644
--- a/src/Components/Button/FlatButton/FlatButton.js
+++ b/src/Components/Button/FlatButton/FlatButton.js
@@ -82,7 +82,7 @@ class FlatButton extends Component {
   handleHover(toggle) {
     const bgColor = this.getBackgroundColor();
     let implementedColor = toggle
-      ? this.getOverlayColor(bgColor, 0.04, 0.08)
+      ? this.getOverlayColor(bgColor, 0.08, 0.08)
       : null;
 
     this.setState({ stateBackgroundColor: implementedColor });
diff --git a/src/Components/Button/OutlinedButton/OutlinedButton.js b/src/Components/Button/OutlinedButton/OutlinedButton.js
index 57df937..39fb009 100644
--- a/src/Components/Button/OutlinedButton/OutlinedButton.js
+++ b/src/Components/Button/OutlinedButton/OutlinedButton.js
@@ -73,7 +73,7 @@ class OutlinedButton extends Component {
   handleHover(toggle) {
     let implementedColor = toggle
       ? color(this.getTextColor())
-          .alpha(0.04)
+          .alpha(0.08)
           .rgb()
           .string()
       : null;
diff --git a/src/Components/Button/TextButton/TextButton.js b/src/Components/Button/TextButton/TextButton.js
index 50bf00c..6cbab2e 100644
--- a/src/Components/Button/TextButton/TextButton.js
+++ b/src/Components/Button/TextButton/TextButton.js
@@ -68,7 +68,7 @@ class TextButton extends Component {
   handleHover(toggle) {
     let implementedColor = toggle
       ? color(this.getTextColor())
-          .alpha(0.04)
+          .alpha(0.08)
           .rgb()
           .string()
       : null;
diff --git a/src/Theme/defaultTheme.js b/src/Theme/defaultTheme.js
index e5ebe8c..174ae7e 100644
--- a/src/Theme/defaultTheme.js
+++ b/src/Theme/defaultTheme.js
@@ -94,12 +94,20 @@ export default {
     size: 20,
   },
   button: {
-    padding: 8,
-    borderRadius: 4,
-  },
-  buttonText: {
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+    borderRadius: 3,
+    alignItems: 'center',
+    textAlign: 'center',
+    letterSpacing: 1.25,
+    textTransform: 'uppercase',
     fontSize: 14,
     fontWeight: '500',
+    lineHeight: 16,
+    display: 'flex',
+  },
+  buttonText: {
+    fontStyle: 'normal',
     letterSpacing: 0.5,
     color: '#2196f3',
   },
@@ -107,6 +115,7 @@ export default {
     borderColor: 'rgba(0,0,0,.29)',
     borderWidth: StyleSheet.hairlineWidth,
     paddingHorizontal: 16,
+    boxSizing: 'border-box',
   },
   containedButton: {
     paddingHorizontal: 16,


Test patch:
diff --git a/src/Components/Appbar/__snapshots__/Appbar.test.js.snap b/src/Components/Appbar/__snapshots__/Appbar.test.js.snap
index 2fdbcae..b94f279 100644
--- a/src/Components/Appbar/__snapshots__/Appbar.test.js.snap
+++ b/src/Components/Appbar/__snapshots__/Appbar.test.js.snap
@@ -15,11 +15,11 @@ exports[`Appbar Renders 1`] = `
       "position": "relative",
       "shadowColor": "#000",
       "shadowOffset": Object {
-        "height": 3,
+        "height": 2,
         "width": 0,
       },
-      "shadowOpacity": 0.27,
-      "shadowRadius": 4.65,
+      "shadowOpacity": 0.23,
+      "shadowRadius": 2.62,
       "width": "100%",
       "zIndex": 2,
     }
diff --git a/src/Components/AppbarBottom/__snapshots__/AppbarBottom.test.js.snap b/src/Components/AppbarBottom/__snapshots__/AppbarBottom.test.js.snap
index 7db9b20..6a1d12e 100644
--- a/src/Components/AppbarBottom/__snapshots__/AppbarBottom.test.js.snap
+++ b/src/Components/AppbarBottom/__snapshots__/AppbarBottom.test.js.snap
@@ -23,6 +23,13 @@ exports[`AppbarBottom Renders 1`] = `
             "minWidth": "auto",
             "padding": 16,
             "position": "relative",
+            "shadowColor": "#000",
+            "shadowOffset": Object {
+              "height": 4,
+              "width": 0,
+            },
+            "shadowOpacity": 0.3,
+            "shadowRadius": 4.65,
           },
           Object {
             "backgroundColor": "#1e88e5",
diff --git a/src/Components/Drawer/__snapshots__/Drawer.test.js.snap b/src/Components/Drawer/__snapshots__/Drawer.test.js.snap
index 365b07a..97cf782 100644
--- a/src/Components/Drawer/__snapshots__/Drawer.test.js.snap
+++ b/src/Components/Drawer/__snapshots__/Drawer.test.js.snap
@@ -29,11 +29,11 @@ exports[`Drawer Renders 1`] = `
         "position": "absolute",
         "shadowColor": "#000",
         "shadowOffset": Object {
-          "height": 4,
+          "height": 8,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 4.65,
+        "shadowOpacity": 0.44,
+        "shadowRadius": 10.32,
         "top": 0,
         "transform": Array [
           Object {
diff --git a/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap b/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap
index 03da7db..eb5921d 100644
--- a/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap
+++ b/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap
@@ -66,6 +66,13 @@ exports[`DrawerBottom Renders 1`] = `
           "height": 1334,
           "overflow": "hidden",
           "paddingVertical": 20,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 8,
+            "width": 0,
+          },
+          "shadowOpacity": 0.44,
+          "shadowRadius": 10.32,
           "transform": Array [
             Object {
               "translateY": 1334,
diff --git a/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap b/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap
index 6937c3b..f55a1b3 100644
--- a/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap
+++ b/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap
@@ -59,6 +59,13 @@ exports[`SheetBottom Renders 1`] = `
             "backgroundColor": "#fff",
             "overflow": "hidden",
             "paddingVertical": 20,
+            "shadowColor": "#000",
+            "shadowOffset": Object {
+              "height": 8,
+              "width": 0,
+            },
+            "shadowOpacity": 0.44,
+            "shadowRadius": 10.32,
             "width": "100%",
             "zIndex": 1000,
           },
diff --git a/src/Components/SheetSide/__snapshots__/SheetSide.test.js.snap b/src/Components/SheetSide/__snapshots__/SheetSide.test.js.snap
index 2b9ee81..9afff92 100644
--- a/src/Components/SheetSide/__snapshots__/SheetSide.test.js.snap
+++ b/src/Components/SheetSide/__snapshots__/SheetSide.test.js.snap
@@ -53,6 +53,13 @@ exports[`SheetSide Renders 1`] = `
             "backgroundColor": "#fff",
             "overflow": "hidden",
             "paddingVertical": 16,
+            "shadowColor": "#000",
+            "shadowOffset": Object {
+              "height": 8,
+              "width": 0,
+            },
+            "shadowOpacity": 0.44,
+            "shadowRadius": 10.32,
             "zIndex": 1000,
           },
           undefined,
diff --git a/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap b/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
index e168147..817b91a 100644
--- a/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
+++ b/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
@@ -65,13 +65,21 @@ exports[`TextFieldFilled Renders 1`] = `
           "lineHeight": 14,
         },
         "button": Object {
-          "borderRadius": 4,
-          "padding": 8,
+          "alignItems": "center",
+          "borderRadius": 3,
+          "display": "flex",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 1.25,
+          "lineHeight": 16,
+          "paddingHorizontal": 8,
+          "paddingVertical": 10,
+          "textAlign": "center",
+          "textTransform": "uppercase",
         },
         "buttonText": Object {
           "color": "#2196f3",
-          "fontSize": 14,
-          "fontWeight": "500",
+          "fontStyle": "normal",
           "letterSpacing": 0.5,
         },
         "caption": Object {
@@ -176,6 +184,7 @@ exports[`TextFieldFilled Renders 1`] = `
         "outlinedButton": Object {
           "borderColor": "rgba(0,0,0,.29)",
           "borderWidth": 0.5,
+          "boxSizing": "border-box",
           "paddingHorizontal": 16,
         },
         "overline": Object {
diff --git a/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap b/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
index 1f2726a..b19fa84 100644
--- a/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
+++ b/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
@@ -64,13 +64,21 @@ exports[`TextFieldFlat Renders 1`] = `
           "lineHeight": 14,
         },
         "button": Object {
-          "borderRadius": 4,
-          "padding": 8,
+          "alignItems": "center",
+          "borderRadius": 3,
+          "display": "flex",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 1.25,
+          "lineHeight": 16,
+          "paddingHorizontal": 8,
+          "paddingVertical": 10,
+          "textAlign": "center",
+          "textTransform": "uppercase",
         },
         "buttonText": Object {
           "color": "#2196f3",
-          "fontSize": 14,
-          "fontWeight": "500",
+          "fontStyle": "normal",
           "letterSpacing": 0.5,
         },
         "caption": Object {
@@ -175,6 +183,7 @@ exports[`TextFieldFlat Renders 1`] = `
         "outlinedButton": Object {
           "borderColor": "rgba(0,0,0,.29)",
           "borderWidth": 0.5,
+          "boxSizing": "border-box",
           "paddingHorizontal": 16,
         },
         "overline": Object {
diff --git a/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap b/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
index 990749c..3c1ce7f 100644
--- a/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
+++ b/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
@@ -64,13 +64,21 @@ exports[`TextFieldOutline Renders 1`] = `
           "lineHeight": 14,
         },
         "button": Object {
-          "borderRadius": 4,
-          "padding": 8,
+          "alignItems": "center",
+          "borderRadius": 3,
+          "display": "flex",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 1.25,
+          "lineHeight": 16,
+          "paddingHorizontal": 8,
+          "paddingVertical": 10,
+          "textAlign": "center",
+          "textTransform": "uppercase",
         },
         "buttonText": Object {
           "color": "#2196f3",
-          "fontSize": 14,
-          "fontWeight": "500",
+          "fontStyle": "normal",
           "letterSpacing": 0.5,
         },
         "caption": Object {
@@ -175,6 +183,7 @@ exports[`TextFieldOutline Renders 1`] = `
         "outlinedButton": Object {
           "borderColor": "rgba(0,0,0,.29)",
           "borderWidth": 0.5,
+          "boxSizing": "border-box",
           "paddingHorizontal": 16,
         },
         "overline": Object {