Merge pull request #405 from JramR7/MAT-51

MAT-51-FIX Change loading and density bugs
codypearce · Jun 18, 2020 · caadfeb · caadfeb
2 parents cf5f3be + 8ad85f7
commit caadfeb
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 26 deletions.
diff --git a/src/Components/Button/ButtonBase/ButtonBase.js b/src/Components/Button/ButtonBase/ButtonBase.js
@@ -55,6 +55,7 @@ class ButtonBase extends Component {
       textStyle,
       typeTextColor,
       theme,
+      hideLabel,
       useInputCasing,
     } = this.props;
 
@@ -65,7 +66,7 @@ class ButtonBase extends Component {
         style={[
           theme.buttonText,
           {
-            color: typeTextColor,
+            color: hideLabel ? 'transparent' : typeTextColor,
             fontSize: theme.buttonText.fontSize,
             letterSpacing: theme.buttonText.letterSpacing,
           },
@@ -160,6 +161,7 @@ class ButtonBase extends Component {
             alignItems: 'center',
             justifyContent: 'center',
             flexDirection: hideLabel ? 'column' : 'row',
+            padding: hideLabel ? 18 : 0,
             width: fullWidth ? '100%' : 'auto',
             minWidth: 64,
             height: densityHeight,

diff --git a/src/Components/Button/ContainedButton/ContainedButton.stories.js b/src/Components/Button/ContainedButton/ContainedButton.stories.js
@@ -108,7 +108,7 @@ export default storiesOf('Components|Buttons/Contained Button', module)
         <Button
           text={'Buy'}
           color={'#673AB7'}
-          dense
+          density={-2}
           icon={<Icon name="attach-money" />}
           type="contained"
           iconPosition={'right'}
@@ -170,7 +170,7 @@ export default storiesOf('Components|Buttons/Contained Button', module)
   ))
   .add('density', () => (
     <Container>
-      <Header title={'Dense Contained Button'} />
+      <Header title={'Density Contained Button'} />
 
       <BodyText text={'Density -1: 32px'} style={{ marginBottom: 15 }} />
       <View
@@ -311,20 +311,21 @@ export default storiesOf('Components|Buttons/Contained Button', module)
           flexWrap: 'wrap',
           marginBottom: 20,
         }}>
-        <Button loading type="contained" />
+        <Button text={'Home'} loading hideLabel type="contained" />
         <Button
+          text={'Favorite'}
           color={'#E91E63'}
           borderSize={2}
           loading
+          hideLabel
           type="contained"
           icon={<Icon name="favorite" />}
         />
-        <Button color={'#FF5722'} loading radius={60} type="contained" />
-        <Button tcolor={'#673AB7'} dense radius={0} loading type="contained" />
         <Button
           text={'Settings'}
           color={'#FF5722'}
           loading
+          hideLabel
           radius={60}
           type="contained"
         />
@@ -334,13 +335,14 @@ export default storiesOf('Components|Buttons/Contained Button', module)
           density={-2}
           radius={0}
           loading
+          hideLabel
           type="contained"
-          icon={<Icon name="attach-money" />}
         />
         <Button
           text={'Archive'}
           color={'#009688'}
           loading
+          hideLabel
           type="contained"
           icon={<Icon name="archive" />}
         />

diff --git a/src/Components/Button/FlatButton/FlatButton.stories.js b/src/Components/Button/FlatButton/FlatButton.stories.js
@@ -306,19 +306,21 @@ export default storiesOf('Components|Buttons/Flat Button', module)
           flexWrap: 'wrap',
           marginBottom: 20,
         }}>
-        <Button text={'Home'} loading type="flat" />
+        <Button text={'Home'} loading hideLabel type="flat" />
         <Button
           text={'Favorite'}
           color={'#E91E63'}
           borderSize={2}
           loading
+          hideLabel
           type="flat"
           icon={<Icon name="favorite" />}
         />
         <Button
           text={'Settings'}
           color={'#FF5722'}
           loading
+          hideLabel
           radius={60}
           type="flat"
         />
@@ -328,13 +330,15 @@ export default storiesOf('Components|Buttons/Flat Button', module)
           density={-2}
           radius={0}
           loading
+          hideLabel
           type="flat"
           icon={<Icon name="attach-money" />}
         />
         <Button
           text={'Archive'}
           color={'#009688'}
           loading
+          hideLabel
           type="flat"
           icon={<Icon name="archive" />}
         />

diff --git a/src/Components/Button/OutlinedButton/OutlinedButton.stories.js b/src/Components/Button/OutlinedButton/OutlinedButton.stories.js
@@ -108,7 +108,7 @@ export default storiesOf('Components|Buttons/Outlined Button', module)
         <Button
           text={'Buy'}
           textColor={'#673AB7'}
-          dense
+          density={-2}
           icon={<Icon name="attach-money" />}
           type="outlined"
           iconPosition={'right'}
@@ -170,7 +170,7 @@ export default storiesOf('Components|Buttons/Outlined Button', module)
   ))
   .add('density', () => (
     <Container>
-      <Header title={'Dense Outlined Button'} />
+      <Header title={'Density Outlined Button'} />
 
       <BodyText text={'Density -1: 32px'} style={{ marginBottom: 15 }} />
       <View
@@ -311,17 +311,39 @@ export default storiesOf('Components|Buttons/Outlined Button', module)
           flexWrap: 'wrap',
           marginBottom: 20,
         }}>
-        <Button loading type="outlined" />
-        <Button textColor={'#E91E63'} borderSize={2} loading type="outlined" />
-        <Button textColor={'#FF5722'} loading radius={60} type="outlined" />
+        <Button text={'Home'} loading hideLabel type="outlined" />
+        <Button
+          textColor={'#E91E63'}
+          borderSize={2}
+          loading
+          hideLabel
+          text={'Favorite'}
+          type="outlined"
+        />
+        <Button
+          text={'Settings'}
+          textColor={'#FF5722'}
+          loading
+          hideLabel
+          radius={60}
+          type="outlined"
+        />
         <Button
+          text={'Buy'}
           ttextColor={'#673AB7'}
           density={-2}
           radius={0}
           loading
+          hideLabel
+          type="outlined"
+        />
+        <Button
+          text={'Archive'}
+          textColor={'#009688'}
+          loading
+          hideLabel
           type="outlined"
         />
-        <Button textColor={'#009688'} loading type="outlined" />
       </View>
     </Container>
   ))

diff --git a/src/Components/Button/TextButton/TextButton.stories.js b/src/Components/Button/TextButton/TextButton.stories.js
@@ -101,7 +101,7 @@ export default storiesOf('Components|Buttons/Text Button', module)
         <Button
           text={'Buy'}
           ttextColor={'#673AB7'}
-          dense
+          density={-2}
           icon={<Icon name="attach-money" />}
           iconPosition={'right'}
         />
@@ -153,7 +153,7 @@ export default storiesOf('Components|Buttons/Text Button', module)
   ))
   .add('density', () => (
     <Container>
-      <Header title={'Dense Text Button'} />
+      <Header title={'Density Text Button'} />
 
       <BodyText text={'Density -1: 32px'} style={{ marginBottom: 15 }} />
       <View
@@ -282,30 +282,39 @@ export default storiesOf('Components|Buttons/Text Button', module)
           flexWrap: 'wrap',
           marginBottom: 20,
         }}>
-        <Button text={'Home'} loading />
+        <Button text={'Home'} loading hideLabel />
         <Button
           text={'Favorite'}
           textColor={'#E91E63'}
           borderSize={2}
           loading
+          hideLabel
           icon={<Icon name="favorite" />}
         />
-        <Button text={'Settings'} textColor={'#FF5722'} loading radius={60} />
+        <Button
+          text={'Settings'}
+          textColor={'#FF5722'}
+          loading
+          hideLabel
+          radius={60}
+        />
         <Button
           text={'Buy'}
           ttextColor={'#673AB7'}
           density={-2}
           radius={0}
           loading
+          hideLabel
           icon={<Icon name="attach-money" />}
         />
         <Button
           text={'Archive'}
           textColor={'#009688'}
           loading
+          hideLabel
           icon={<Icon name="archive" />}
         />
-
+      </View>
     </Container>
   ))
   .add('disabled', () => (

diff --git a/src/Components/DataTable/DataTableHeader/__snapshots__/DataTableHeader.test.js.snap b/src/Components/DataTable/DataTableHeader/__snapshots__/DataTableHeader.test.js.snap
@@ -9,7 +9,7 @@ exports[`DataTableHeader Renders 1`] = `
         "flexDirection": "row",
         "height": 64,
         "minWidth": "auto",
-        "paddingHorizontal": 16,
+        "paddingVertical": 20,
         "width": "100%",
       },
       undefined,
@@ -18,12 +18,18 @@ exports[`DataTableHeader Renders 1`] = `
 >
   <View
     style={
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "width": "100%",
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "width": "100%",
+        },
+        Object {
+          "paddingLeft": 16,
+          "paddingRight": 16,
+        },
+      ]
     }
   >
     <View

diff --git a/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap b/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
@@ -73,6 +73,7 @@ exports[`TextFieldFilled Renders 1`] = `
           "height": 36,
           "letterSpacing": 1.25,
           "lineHeight": 16,
+          "paddingVertical": 8,
           "textAlign": "center",
           "textTransform": "uppercase",
         },

diff --git a/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap b/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
@@ -72,6 +72,7 @@ exports[`TextFieldFlat Renders 1`] = `
           "height": 36,
           "letterSpacing": 1.25,
           "lineHeight": 16,
+          "paddingVertical": 8,
           "textAlign": "center",
           "textTransform": "uppercase",
         },

diff --git a/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap b/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
@@ -72,6 +72,7 @@ exports[`TextFieldOutline Renders 1`] = `
           "height": 36,
           "letterSpacing": 1.25,
           "lineHeight": 16,
+          "paddingVertical": 8,
           "textAlign": "center",
           "textTransform": "uppercase",
         },