feat(split-button): remove margin on buttons within container, add bo…

…x-shadow to container
Sage · Jan 18, 2022 · 88dc3cb · 88dc3cb
1 parent 34137ed
commit 88dc3cb
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 6 deletions.
diff --git a/src/components/split-button/__snapshots__/split-button.spec.js.snap b/src/components/split-button/__snapshots__/split-button.spec.js.snap
@@ -326,8 +326,6 @@ exports[`SplitButton for mint and aegean themes renders styles correctly 1`] = `
   color: var(--colorsActionMajor500);
   display: block;
   margin-left: 0;
-  margin-top: 3px;
-  margin-bottom: 3px;
   min-width: 100%;
   text-align: left;
   z-index: 1000;
@@ -349,8 +347,6 @@ exports[`SplitButton for mint and aegean themes renders styles correctly 1`] = `
   color: var(--colorsActionMajor500);
   display: block;
   margin-left: 0;
-  margin-top: 3px;
-  margin-bottom: 3px;
   min-width: 100%;
   z-index: 1000;
 }

diff --git a/src/components/split-button/split-button-children.style.js b/src/components/split-button/split-button-children.style.js
@@ -8,15 +8,14 @@ const StyledSplitButtonChildrenContainer = styled.div`
     min-width: ${({ minWidth }) => minWidth}px;
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
+    box-shadow: var(--boxShadow100);
 
     ${StyledButton} {
       background-color: var(--colorsActionMajorYang100);
       border: 1px solid var(--colorsActionMajorTransparent);
       color: var(--colorsActionMajor500);
       display: block;
       margin-left: 0;
-      margin-top: 3px;
-      margin-bottom: 3px;
       min-width: 100%;
       text-align: ${align};
       z-index: ${theme.zIndex.overlay};