Repository: codypearce/material-bread
Pull request #412 (2020-06-19 15:35:11)

MAT-57 Fix mobile menu item stories
<!--- 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-57
## 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/Menu/Menu.stories.js b/src/Components/Menu/Menu.stories.js
index 9660806..1c1e416 100644
--- a/src/Components/Menu/Menu.stories.js
+++ b/src/Components/Menu/Menu.stories.js
@@ -123,19 +123,23 @@ export default storiesOf('Components|Menu', module)
               }>
               <MenuItem
                 text={'Menu Item 1'}
+                style={{ paddingHorizontal: '12%' }}
                 onPress={() => store.set({ visibleThree: false })}
               />
               <MenuItem
                 text={'Menu Item 2'}
+                style={{ paddingHorizontal: '12%' }}
                 onPress={() => store.set({ visibleThree: false })}
               />
               <MenuItem
                 text={'Menu Item 3'}
+                style={{ paddingHorizontal: '12%' }}
                 disabled
                 onPress={() => store.set({ visibleThree: false })}
               />
               <MenuItem
                 text={'Menu Item 4'}
+                style={{ paddingHorizontal: '12%' }}
                 onPress={() => store.set({ visibleThree: false })}
               />
             </Menu>
diff --git a/src/Components/Menu/MenuItem/MenuItem.stories.js b/src/Components/Menu/MenuItem/MenuItem.stories.js
index 327cb95..255028b 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: 324, flex: 1 }}>
+      <Paper radius={6} style={{ width: 324 }}>
         <MenuItem text="Menu Item 1" />
         <MenuItem text="Menu Item 2" />
         <Divider />
@@ -26,7 +26,7 @@ export default storiesOf('Components|Menu/MenuItem', module)
     <Container>
       <Header title={'Menu icons'} />
 
-      <Paper radius={6} style={{ width: 324, flex: 1 }}>
+      <Paper radius={6} style={{ width: 324 }}>
         <MenuItem
           text={'Preview'}
           icon={<Icon name={'assignment-turned-in'} />}
@@ -43,7 +43,7 @@ export default storiesOf('Components|Menu/MenuItem', module)
     <Container>
       <Header title={'Menu keyboard commands'} />
 
-      <Paper radius={6} style={{ width: 324, flex: 1 }}>
+      <Paper radius={6} style={{ width: 324 }}>
         <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 79565fc..94d8046 100644
--- a/src/Components/Menu/MenuItem/MenuItem.styles.js
+++ b/src/Components/Menu/MenuItem/MenuItem.styles.js
@@ -2,15 +2,13 @@ import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
   container: {
-    height: 48,
     minHeight: 32,
     width: 324,
     minWidth: 124,
-    flex: 1,
     alignItems: 'center',
     flexDirection: 'row',
-    paddingHorizontal: 24,
     paddingVertical: 12,
+    paddingHorizontal: 24,
   },
   title: {
     fontSize: 16,


Test patch:
diff --git a/src/Components/Card/__snapshots__/Card.test.js.snap b/src/Components/Card/__snapshots__/Card.test.js.snap
index 82828fc..f8d00bd 100644
--- a/src/Components/Card/__snapshots__/Card.test.js.snap
+++ b/src/Components/Card/__snapshots__/Card.test.js.snap
@@ -8,6 +8,7 @@ exports[`Card Renders 1`] = `
       "borderBottomColor": "rgba(0,0,0,.4)",
       "borderRadius": 4,
       "borderWidth": 0,
+      "maxWidth": 500,
       "shadowColor": "#000",
       "shadowOffset": Object {
         "height": 1,
diff --git a/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap b/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
index 61edd85..7588725 100644
--- a/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
+++ b/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
@@ -34,9 +34,7 @@ exports[`MenuItem Renders 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": null,
-        "flex": 1,
         "flexDirection": "row",
-        "height": 48,
         "minHeight": 32,
         "minWidth": 124,
         "paddingHorizontal": 24,