Merge pull request #6566 from Sage/FE-6079-splitbutton-fix

fix(split-button): fix style when href is passed to a button
Sage · Feb 7, 2024 · cef388a · cef388a
2 parents 5f06ad0 + c66ef17
commit cef388a
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 10 deletions.
diff --git a/src/components/multi-action-button/multi-action-button.style.ts b/src/components/multi-action-button/multi-action-button.style.ts
@@ -100,14 +100,6 @@ const StyledButtonChildrenContainer = styled.div<StyledButtonChildrenContainerPr
       text-align: ${align};
       z-index: ${theme.zIndex.overlay};
 
-      /* Styling for Safari. */
-      @media not all and (min-resolution: 0.001dpcm) {
-        @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-          display: -webkit-box;
-          justify-content: ${align === "right" ? `flex-end` : `flex-start`};
-        }
-      }
-
       & + & {
         margin-top: 3px;
       }

diff --git a/src/components/split-button/split-button-children.style.ts b/src/components/split-button/split-button-children.style.ts
@@ -47,7 +47,8 @@ const StyledSplitButtonChildrenContainer = styled.div<StyledSplitButtonChildrenC
 
     ${StyledButton} {
       border: 1px solid var(--colorsActionMajorTransparent);
-      display: block;
+      display: flex;
+      justify-content: ${align};
       margin-left: 0;
       min-width: 100%;
       text-align: ${align};

diff --git a/src/components/split-button/split-button.stories.tsx b/src/components/split-button/split-button.stories.tsx
@@ -8,7 +8,7 @@ import { Accordion } from "../accordion";
 
 export const Default: ComponentStory<typeof SplitButton> = () => (
   <SplitButton text="Split button">
-    <Button>Button 1</Button>
+    <Button href="#">Button 1</Button>
     <Button>Button 2</Button>
     <Button>Button 3</Button>
   </SplitButton>