From 8686c942222c8c7035404b0c71f0b5fc1ff5a022 Mon Sep 17 00:00:00 2001
From: Chris Schuhmacher <chris@fandom.com>
Date: Mon, 19 Aug 2019 15:23:33 -0700
Subject: [PATCH] cake-5090 | Adding spacing between dropdown and text

---
 .../__snapshots__/index.spec.js.snap          | 70 ++++++++-----------
 source/components/StyledDropdown/index.js     |  4 +-
 2 files changed, 30 insertions(+), 44 deletions(-)

diff --git a/source/components/StyledDropdown/__snapshots__/index.spec.js.snap b/source/components/StyledDropdown/__snapshots__/index.spec.js.snap
index 84f426f2..5fb56be8 100644
--- a/source/components/StyledDropdown/__snapshots__/index.spec.js.snap
+++ b/source/components/StyledDropdown/__snapshots__/index.spec.js.snap
@@ -39,7 +39,7 @@ exports[`Dropdown level2 renders correctly with default values 1`] = `
           "componentStyle": ComponentStyle {
             "componentId": "StyledDropdown__DropdownComponent-sc-1w57ze8-0",
             "isStatic": false,
-            "lastClassName": "jWKOuX",
+            "lastClassName": "BYEmZ",
             "rules": Array [
               "display:inline-block;position:relative;",
               ".DropdownToggle-sc-1p907bm-1",
@@ -53,7 +53,7 @@ exports[`Dropdown level2 renders correctly with default values 1`] = `
               [Function],
               ";display:none;left:50%;min-width:70%;padding:",
               "7",
-              "px 0;position:absolute;top:100%;transform:translateX(-50%);z-index:",
+              "px 0;position:absolute;top:25px;transform:translateX(-50%);z-index:",
               "1",
               ";",
               "border-radius:",
@@ -81,9 +81,7 @@ exports[`Dropdown level2 renders correctly with default values 1`] = `
               ";margin:-29px 0 0;}",
               "}}:not(.scrollable-list) > a{",
               ".StyledList-sc-1t1k18i-0",
-              "{position:relative;}}}&::before,&::after{bottom:-",
-              "1",
-              "px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
+              "{position:relative;}}}&::before,&::after{bottom:-7px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
               "2",
               ";}&::after{border:8px solid transparent;border-bottom-color:",
               [Function],
@@ -152,7 +150,7 @@ exports[`Dropdown level2 renders correctly with default values 1`] = `
       onMouseLeave={[Function]}
     >
       <li
-        className="is-level-2 StyledDropdown__DropdownComponent-sc-1w57ze8-0 jWKOuX"
+        className="is-level-2 StyledDropdown__DropdownComponent-sc-1w57ze8-0 BYEmZ"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -372,7 +370,7 @@ exports[`Dropdown level2 renders correctly with href set 1`] = `
           "componentStyle": ComponentStyle {
             "componentId": "StyledDropdown__DropdownComponent-sc-1w57ze8-0",
             "isStatic": false,
-            "lastClassName": "jWKOuX",
+            "lastClassName": "BYEmZ",
             "rules": Array [
               "display:inline-block;position:relative;",
               ".DropdownToggle-sc-1p907bm-1",
@@ -386,7 +384,7 @@ exports[`Dropdown level2 renders correctly with href set 1`] = `
               [Function],
               ";display:none;left:50%;min-width:70%;padding:",
               "7",
-              "px 0;position:absolute;top:100%;transform:translateX(-50%);z-index:",
+              "px 0;position:absolute;top:25px;transform:translateX(-50%);z-index:",
               "1",
               ";",
               "border-radius:",
@@ -414,9 +412,7 @@ exports[`Dropdown level2 renders correctly with href set 1`] = `
               ";margin:-29px 0 0;}",
               "}}:not(.scrollable-list) > a{",
               ".StyledList-sc-1t1k18i-0",
-              "{position:relative;}}}&::before,&::after{bottom:-",
-              "1",
-              "px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
+              "{position:relative;}}}&::before,&::after{bottom:-7px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
               "2",
               ";}&::after{border:8px solid transparent;border-bottom-color:",
               [Function],
@@ -485,7 +481,7 @@ exports[`Dropdown level2 renders correctly with href set 1`] = `
       onMouseLeave={[Function]}
     >
       <li
-        className="is-level-2 StyledDropdown__DropdownComponent-sc-1w57ze8-0 jWKOuX"
+        className="is-level-2 StyledDropdown__DropdownComponent-sc-1w57ze8-0 BYEmZ"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -700,7 +696,7 @@ exports[`Dropdown level2 renders correctly with isActive set 1`] = `
           "componentStyle": ComponentStyle {
             "componentId": "StyledDropdown__DropdownComponent-sc-1w57ze8-0",
             "isStatic": false,
-            "lastClassName": "jWKOuX",
+            "lastClassName": "BYEmZ",
             "rules": Array [
               "display:inline-block;position:relative;",
               ".DropdownToggle-sc-1p907bm-1",
@@ -714,7 +710,7 @@ exports[`Dropdown level2 renders correctly with isActive set 1`] = `
               [Function],
               ";display:none;left:50%;min-width:70%;padding:",
               "7",
-              "px 0;position:absolute;top:100%;transform:translateX(-50%);z-index:",
+              "px 0;position:absolute;top:25px;transform:translateX(-50%);z-index:",
               "1",
               ";",
               "border-radius:",
@@ -742,9 +738,7 @@ exports[`Dropdown level2 renders correctly with isActive set 1`] = `
               ";margin:-29px 0 0;}",
               "}}:not(.scrollable-list) > a{",
               ".StyledList-sc-1t1k18i-0",
-              "{position:relative;}}}&::before,&::after{bottom:-",
-              "1",
-              "px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
+              "{position:relative;}}}&::before,&::after{bottom:-7px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
               "2",
               ";}&::after{border:8px solid transparent;border-bottom-color:",
               [Function],
@@ -813,7 +807,7 @@ exports[`Dropdown level2 renders correctly with isActive set 1`] = `
       onMouseLeave={[Function]}
     >
       <li
-        className="is-active is-level-2 StyledDropdown__DropdownComponent-sc-1w57ze8-0 jWKOuX"
+        className="is-active is-level-2 StyledDropdown__DropdownComponent-sc-1w57ze8-0 BYEmZ"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -1028,7 +1022,7 @@ exports[`Dropdown level2 renders correctly with isStickedToParent set 1`] = `
           "componentStyle": ComponentStyle {
             "componentId": "StyledDropdown__DropdownComponent-sc-1w57ze8-0",
             "isStatic": false,
-            "lastClassName": "jWKOuX",
+            "lastClassName": "BYEmZ",
             "rules": Array [
               "display:inline-block;position:relative;",
               ".DropdownToggle-sc-1p907bm-1",
@@ -1042,7 +1036,7 @@ exports[`Dropdown level2 renders correctly with isStickedToParent set 1`] = `
               [Function],
               ";display:none;left:50%;min-width:70%;padding:",
               "7",
-              "px 0;position:absolute;top:100%;transform:translateX(-50%);z-index:",
+              "px 0;position:absolute;top:25px;transform:translateX(-50%);z-index:",
               "1",
               ";",
               "border-radius:",
@@ -1070,9 +1064,7 @@ exports[`Dropdown level2 renders correctly with isStickedToParent set 1`] = `
               ";margin:-29px 0 0;}",
               "}}:not(.scrollable-list) > a{",
               ".StyledList-sc-1t1k18i-0",
-              "{position:relative;}}}&::before,&::after{bottom:-",
-              "1",
-              "px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
+              "{position:relative;}}}&::before,&::after{bottom:-7px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
               "2",
               ";}&::after{border:8px solid transparent;border-bottom-color:",
               [Function],
@@ -1141,7 +1133,7 @@ exports[`Dropdown level2 renders correctly with isStickedToParent set 1`] = `
       onMouseLeave={[Function]}
     >
       <li
-        className="is-level-2 is-sticked-to-parent StyledDropdown__DropdownComponent-sc-1w57ze8-0 jWKOuX"
+        className="is-level-2 is-sticked-to-parent StyledDropdown__DropdownComponent-sc-1w57ze8-0 BYEmZ"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -1356,7 +1348,7 @@ exports[`Dropdown renders correctly with DropdownToggle and children 1`] = `
           "componentStyle": ComponentStyle {
             "componentId": "StyledDropdown__DropdownComponent-sc-1w57ze8-0",
             "isStatic": false,
-            "lastClassName": "jWKOuX",
+            "lastClassName": "BYEmZ",
             "rules": Array [
               "display:inline-block;position:relative;",
               ".DropdownToggle-sc-1p907bm-1",
@@ -1370,7 +1362,7 @@ exports[`Dropdown renders correctly with DropdownToggle and children 1`] = `
               [Function],
               ";display:none;left:50%;min-width:70%;padding:",
               "7",
-              "px 0;position:absolute;top:100%;transform:translateX(-50%);z-index:",
+              "px 0;position:absolute;top:25px;transform:translateX(-50%);z-index:",
               "1",
               ";",
               "border-radius:",
@@ -1398,9 +1390,7 @@ exports[`Dropdown renders correctly with DropdownToggle and children 1`] = `
               ";margin:-29px 0 0;}",
               "}}:not(.scrollable-list) > a{",
               ".StyledList-sc-1t1k18i-0",
-              "{position:relative;}}}&::before,&::after{bottom:-",
-              "1",
-              "px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
+              "{position:relative;}}}&::before,&::after{bottom:-7px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
               "2",
               ";}&::after{border:8px solid transparent;border-bottom-color:",
               [Function],
@@ -1469,7 +1459,7 @@ exports[`Dropdown renders correctly with DropdownToggle and children 1`] = `
       onMouseLeave={[Function]}
     >
       <div
-        className="StyledDropdown__DropdownComponent-sc-1w57ze8-0 jWKOuX"
+        className="StyledDropdown__DropdownComponent-sc-1w57ze8-0 BYEmZ"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -1701,7 +1691,7 @@ exports[`Dropdown renders correctly with DropdownToggle, toggleIconName and chil
           "componentStyle": ComponentStyle {
             "componentId": "StyledDropdown__DropdownComponent-sc-1w57ze8-0",
             "isStatic": false,
-            "lastClassName": "jWKOuX",
+            "lastClassName": "BYEmZ",
             "rules": Array [
               "display:inline-block;position:relative;",
               ".DropdownToggle-sc-1p907bm-1",
@@ -1715,7 +1705,7 @@ exports[`Dropdown renders correctly with DropdownToggle, toggleIconName and chil
               [Function],
               ";display:none;left:50%;min-width:70%;padding:",
               "7",
-              "px 0;position:absolute;top:100%;transform:translateX(-50%);z-index:",
+              "px 0;position:absolute;top:25px;transform:translateX(-50%);z-index:",
               "1",
               ";",
               "border-radius:",
@@ -1743,9 +1733,7 @@ exports[`Dropdown renders correctly with DropdownToggle, toggleIconName and chil
               ";margin:-29px 0 0;}",
               "}}:not(.scrollable-list) > a{",
               ".StyledList-sc-1t1k18i-0",
-              "{position:relative;}}}&::before,&::after{bottom:-",
-              "1",
-              "px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
+              "{position:relative;}}}&::before,&::after{bottom:-7px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
               "2",
               ";}&::after{border:8px solid transparent;border-bottom-color:",
               [Function],
@@ -1814,7 +1802,7 @@ exports[`Dropdown renders correctly with DropdownToggle, toggleIconName and chil
       onMouseLeave={[Function]}
     >
       <div
-        className="StyledDropdown__DropdownComponent-sc-1w57ze8-0 jWKOuX"
+        className="StyledDropdown__DropdownComponent-sc-1w57ze8-0 BYEmZ"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -2045,7 +2033,7 @@ exports[`Dropdown renders correctly with default values 1`] = `
           "componentStyle": ComponentStyle {
             "componentId": "StyledDropdown__DropdownComponent-sc-1w57ze8-0",
             "isStatic": false,
-            "lastClassName": "jWKOuX",
+            "lastClassName": "BYEmZ",
             "rules": Array [
               "display:inline-block;position:relative;",
               ".DropdownToggle-sc-1p907bm-1",
@@ -2059,7 +2047,7 @@ exports[`Dropdown renders correctly with default values 1`] = `
               [Function],
               ";display:none;left:50%;min-width:70%;padding:",
               "7",
-              "px 0;position:absolute;top:100%;transform:translateX(-50%);z-index:",
+              "px 0;position:absolute;top:25px;transform:translateX(-50%);z-index:",
               "1",
               ";",
               "border-radius:",
@@ -2087,9 +2075,7 @@ exports[`Dropdown renders correctly with default values 1`] = `
               ";margin:-29px 0 0;}",
               "}}:not(.scrollable-list) > a{",
               ".StyledList-sc-1t1k18i-0",
-              "{position:relative;}}}&::before,&::after{bottom:-",
-              "1",
-              "px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
+              "{position:relative;}}}&::before,&::after{bottom:-7px;content:'';display:none;height:0;left:50%;pointer-events:none;position:absolute;width:0;z-index:",
               "2",
               ";}&::after{border:8px solid transparent;border-bottom-color:",
               [Function],
@@ -2158,7 +2144,7 @@ exports[`Dropdown renders correctly with default values 1`] = `
       onMouseLeave={[Function]}
     >
       <div
-        className="StyledDropdown__DropdownComponent-sc-1w57ze8-0 jWKOuX"
+        className="StyledDropdown__DropdownComponent-sc-1w57ze8-0 BYEmZ"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
diff --git a/source/components/StyledDropdown/index.js b/source/components/StyledDropdown/index.js
index 6e63cebd..d6104693 100644
--- a/source/components/StyledDropdown/index.js
+++ b/source/components/StyledDropdown/index.js
@@ -40,7 +40,7 @@ const DropdownComponent = styled.div`
         /* we assume that there will be regular size .wds-list inside the dropdown content */
         padding: ${DROPDOWN_PADDING - LIST_VERTICAL_PADDING}px 0;
         position: absolute;
-        top: 100%;
+        top: 25px;
         transform: translateX(-50%);
         z-index: ${Z_INDEX};
 
@@ -79,7 +79,7 @@ const DropdownComponent = styled.div`
     }
 
     &::before, &::after {
-        bottom: -${BORDER_WIDTH}px;
+        bottom: -7px;
         content: '';
         display: none;
         height: 0;