Repository: codypearce/material-bread
Pull request #411 (2020-06-17 22:11:27)

MAT-38 Verify menu 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-38
## 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/TextButton/TextButton.stories.js b/src/Components/Button/TextButton/TextButton.stories.js
index 9326ea8..8886287 100644
--- a/src/Components/Button/TextButton/TextButton.stories.js
+++ b/src/Components/Button/TextButton/TextButton.stories.js
@@ -305,7 +305,7 @@ export default storiesOf('Components|Buttons/Text Button', module)
           loading
           icon={<Icon name="archive" />}
         />
-
+      </View>
     </Container>
   ))
   .add('disabled', () => (
diff --git a/src/Components/Menu/Menu.stories.js b/src/Components/Menu/Menu.stories.js
index e6ad6d2..9660806 100644
--- a/src/Components/Menu/Menu.stories.js
+++ b/src/Components/Menu/Menu.stories.js
@@ -11,6 +11,8 @@ const store = new Store({
   visibleOne: false,
   visibleTwo: false,
   visibleThree: false,
+  visibleFour: false,
+  visibleFive: false,
 });
 
 export default storiesOf('Components|Menu', module)
@@ -23,11 +25,11 @@ export default storiesOf('Components|Menu', module)
         {state => (
           <View style={{ marginBottom: 40 }}>
             <Menu
+              menuStyle={{ width: 324 }}
               visible={state.visibleOne}
               onBackdropPress={() => {
                 store.set({ visibleOne: false });
               }}
-              sameWidth
               button={
                 <Button
                   text={'Show menu'}
@@ -62,6 +64,7 @@ export default storiesOf('Components|Menu', module)
         {state => (
           <View>
             <Menu
+              menuStyle={{ width: 324 }}
               visible={state.visibleTwo}
               onBackdropPress={() => {
                 store.set({ visibleTwo: false });
@@ -187,54 +190,53 @@ export default storiesOf('Components|Menu', module)
         {state => (
           <View style={{ marginBottom: 40 }}>
             <Menu
-              visible={state.visibleOne}
+              menuStyle={{ width: 324, maxHeight: 200 }}
+              visible={state.visibleFive}
               onBackdropPress={() => {
-                store.set({ visibleOne: false });
+                store.set({ visibleFive: false });
               }}
-              sameWidth
               button={
                 <Button
                   text={'Show menu'}
                   onPress={() => {
-                    store.set({ visibleOne: !state.visibleOne });
+                    store.set({ visibleFive: !state.visibleFive });
                   }}
                   type="contained"
                 />
-              }
-              menuStyle={{ maxHeight: 200 }}>
+              }>
               <MenuItem
                 text={'Menu Item 1'}
-                onPress={() => store.set({ visibleOne: false })}
+                onPress={() => store.set({ visibleFive: false })}
               />
               <MenuItem
                 text={'Menu Item 2'}
-                onPress={() => store.set({ visibleOne: false })}
+                onPress={() => store.set({ visibleFive: false })}
               />
               <MenuItem
                 text={'Menu Item 3'}
                 disabled
-                onPress={() => store.set({ visibleOne: false })}
+                onPress={() => store.set({ visibleFive: false })}
               />
               <MenuItem
                 text={'Menu Item 4'}
-                onPress={() => store.set({ visibleOne: false })}
+                onPress={() => store.set({ visibleFive: false })}
               />
               <MenuItem
                 text={'Menu Item 5'}
-                onPress={() => store.set({ visibleOne: false })}
+                onPress={() => store.set({ visibleFive: false })}
               />
               <MenuItem
                 text={'Menu Item 6'}
-                onPress={() => store.set({ visibleOne: false })}
+                onPress={() => store.set({ visibleFive: false })}
               />
               <MenuItem
                 text={'Menu Item 7'}
                 disabled
-                onPress={() => store.set({ visibleOne: false })}
+                onPress={() => store.set({ visibleFive: false })}
               />
               <MenuItem
                 text={'Menu Item 8'}
-                onPress={() => store.set({ visibleOne: false })}
+                onPress={() => store.set({ visibleFive: false })}
               />
             </Menu>
           </View>
diff --git a/src/Components/Menu/MenuItem/MenuItem.js b/src/Components/Menu/MenuItem/MenuItem.js
index c1bdaae..8aa79bd 100644
--- a/src/Components/Menu/MenuItem/MenuItem.js
+++ b/src/Components/Menu/MenuItem/MenuItem.js
@@ -41,7 +41,7 @@ class MenuItem extends Component {
     const { icon } = this.props;
     return React.cloneElement(icon, {
       size: 24,
-      color: '#6e6e6e',
+      color: 'rgba(0, 0, 0, 0.54)',
     });
   }
 
diff --git a/src/Components/Menu/MenuItem/MenuItem.stories.js b/src/Components/Menu/MenuItem/MenuItem.stories.js
index 7ca27f6..327cb95 100644
--- a/src/Components/Menu/MenuItem/MenuItem.stories.js
+++ b/src/Components/Menu/MenuItem/MenuItem.stories.js
@@ -13,7 +13,7 @@ export default storiesOf('Components|Menu/MenuItem', module)
     <Container>
       <Header title={'Menu Item'} />
 
-      <Paper radius={6} style={{ width: 200, flex: 1 }}>
+      <Paper radius={6} style={{ width: 324, flex: 1 }}>
         <MenuItem text="Menu Item 1" />
         <MenuItem text="Menu Item 2" />
         <Divider />
@@ -26,8 +26,11 @@ export default storiesOf('Components|Menu/MenuItem', module)
     <Container>
       <Header title={'Menu icons'} />
 
-      <Paper radius={6} style={{ width: 200, flex: 1 }}>
-        <MenuItem text={'Preview'} icon={<Icon name={'remove-red-eye'} />} />
+      <Paper radius={6} style={{ width: 324, flex: 1 }}>
+        <MenuItem
+          text={'Preview'}
+          icon={<Icon name={'assignment-turned-in'} />}
+        />
         <MenuItem text={'Share'} icon={<Icon name={'person-add'} />} />
         <MenuItem text={'Get Link'} icon={<Icon name={'link'} />} />
         <Divider />
@@ -40,7 +43,7 @@ export default storiesOf('Components|Menu/MenuItem', module)
     <Container>
       <Header title={'Menu keyboard commands'} />
 
-      <Paper radius={6} style={{ width: 200, flex: 1 }}>
+      <Paper radius={6} style={{ width: 324, flex: 1 }}>
         <MenuItem
           text={'Cut'}
           icon={<Icon name={'content-cut'} />}
diff --git a/src/Components/Menu/MenuItem/MenuItem.styles.js b/src/Components/Menu/MenuItem/MenuItem.styles.js
index 6e28abb..79565fc 100644
--- a/src/Components/Menu/MenuItem/MenuItem.styles.js
+++ b/src/Components/Menu/MenuItem/MenuItem.styles.js
@@ -4,18 +4,20 @@ const styles = StyleSheet.create({
   container: {
     height: 48,
     minHeight: 32,
-
-    width: '100%',
+    width: 324,
     minWidth: 124,
     flex: 1,
     alignItems: 'center',
     flexDirection: 'row',
-    paddingHorizontal: 16,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
   },
   title: {
-    fontSize: 14,
+    fontSize: 16,
     fontWeight: '400',
-    color: '#6e6e6e',
+    lineHeight: 24,
+    letterSpacing: 0.44,
+    color: '#000000',
   },
 });
 


Test patch:
diff --git a/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap b/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
index dd37844..61edd85 100644
--- a/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
+++ b/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
@@ -39,8 +39,9 @@ exports[`MenuItem Renders 1`] = `
         "height": 48,
         "minHeight": 32,
         "minWidth": 124,
-        "paddingHorizontal": 16,
-        "width": "100%",
+        "paddingHorizontal": 24,
+        "paddingVertical": 12,
+        "width": 324,
       }
     }
     testID="mb-ripple"
@@ -52,9 +53,11 @@ exports[`MenuItem Renders 1`] = `
       style={
         Array [
           Object {
-            "color": "#6e6e6e",
-            "fontSize": 14,
+            "color": "#000000",
+            "fontSize": 16,
             "fontWeight": "400",
+            "letterSpacing": 0.44,
+            "lineHeight": 24,
           },
           Object {
             "color": "rgba(0,0,0,.87)",