Repository: uber-web/baseui
Pull request #299 (2018-09-24 19:32:12)

fix(menu): change padding to margin for first/last children
#### Fixed Issues?

#298

#### Patch: Bug Fix?

**Yep**

#### Tests Added + Pass?

Yes



Patch:
diff --git a/src/menu/styled-components.js b/src/menu/styled-components.js
index 33985a1f9..0b75b1775 100644
--- a/src/menu/styled-components.js
+++ b/src/menu/styled-components.js
@@ -59,16 +59,10 @@ export const ListItem = styled(
         ? $theme.sizing.scale900
         : $theme.sizing.scale600,
     ':first-child': {
-      paddingTop:
-        $size === OPTION_LIST_SIZE.compact
-          ? $theme.sizing.scale500
-          : $theme.sizing.scale600,
+      marginTop: $theme.sizing.scale300,
     },
     ':last-child': {
-      paddingBottom:
-        $size === OPTION_LIST_SIZE.compact
-          ? $theme.sizing.scale500
-          : $theme.sizing.scale600,
+      marginBottom: $theme.sizing.scale300,
     },
   }),
 );
@@ -89,10 +83,10 @@ export const ListItemProfile = styled('li', ({$theme}: StyledPropsT) => ({
     backgroundColor: $theme.colors.mono300,
   },
   ':first-child': {
-    paddingTop: $theme.sizing.scale800,
+    marginTop: $theme.sizing.scale300,
   },
   ':last-child': {
-    paddingBottom: $theme.sizing.scale800,
+    marginBottom: $theme.sizing.scale300,
   },
 }));
 


Test patch:
diff --git a/src/menu/__tests__/__snapshots__/styled-components.test.js.snap b/src/menu/__tests__/__snapshots__/styled-components.test.js.snap
index 0f26c302c..3918a9dfb 100644
--- a/src/menu/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/menu/__tests__/__snapshots__/styled-components.test.js.snap
@@ -15,13 +15,13 @@ Object {
 exports[`Menu Styled Components ListItem - basic render: correct styles 1`] = `
 Object {
   ":first-child": Object {
-    "paddingTop": "$theme.sizing.scale600",
+    "marginTop": "$theme.sizing.scale300",
   },
   ":hover": Object {
     "backgroundColor": "$theme.colors.mono300",
   },
   ":last-child": Object {
-    "paddingBottom": "$theme.sizing.scale600",
+    "marginBottom": "$theme.sizing.scale300",
   },
   "color": "$theme.colors.black",
   "cursor": "pointer",
@@ -44,13 +44,13 @@ Object {
 exports[`Menu Styled Components ListItem - compact: correct styles 1`] = `
 Object {
   ":first-child": Object {
-    "paddingTop": "$theme.sizing.scale500",
+    "marginTop": "$theme.sizing.scale300",
   },
   ":hover": Object {
     "backgroundColor": "$theme.colors.mono300",
   },
   ":last-child": Object {
-    "paddingBottom": "$theme.sizing.scale500",
+    "marginBottom": "$theme.sizing.scale300",
   },
   "color": "$theme.colors.black",
   "cursor": "pointer",
@@ -73,13 +73,13 @@ Object {
 exports[`Menu Styled Components ListItem - highlighted render: correct styles 1`] = `
 Object {
   ":first-child": Object {
-    "paddingTop": "$theme.sizing.scale600",
+    "marginTop": "$theme.sizing.scale300",
   },
   ":hover": Object {
     "backgroundColor": "$theme.colors.mono300",
   },
   ":last-child": Object {
-    "paddingBottom": "$theme.sizing.scale600",
+    "marginBottom": "$theme.sizing.scale300",
   },
   "color": "$theme.colors.primary",
   "cursor": "pointer",
@@ -102,13 +102,13 @@ Object {
 exports[`Menu Styled Components ListItemProfile - basic render: correct styles 1`] = `
 Object {
   ":first-child": Object {
-    "paddingTop": "$theme.sizing.scale800",
+    "marginTop": "$theme.sizing.scale300",
   },
   ":hover": Object {
     "backgroundColor": "$theme.colors.mono300",
   },
   ":last-child": Object {
-    "paddingBottom": "$theme.sizing.scale800",
+    "marginBottom": "$theme.sizing.scale300",
   },
   "alignItems": "center",
   "cursor": "pointer",