From 8db790308f5b238ac604cd746588cc7a415697e9 Mon Sep 17 00:00:00 2001
From: Davide Bizzi <davide.bizzi@unguess.io>
Date: Wed, 9 Oct 2024 17:20:37 +0200
Subject: [PATCH] fix: Restore negative margin in splitbutton

---
 src/stories/buttons/split-button/index.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/stories/buttons/split-button/index.tsx b/src/stories/buttons/split-button/index.tsx
index 69f9f1bf..e25fd9a9 100644
--- a/src/stories/buttons/split-button/index.tsx
+++ b/src/stories/buttons/split-button/index.tsx
@@ -1,7 +1,14 @@
 import { SplitButton as ZendeskSplitButton } from "@zendeskgarden/react-buttons";
 import { forwardRef } from "react";
+import styled from "styled-components";
 import { SplitButtonArgs } from "./_types";
 
+const SplitButtonWrapper = styled.div`
+  [data-garden-id="buttons.button"] {
+    margin-right: -1px;
+  }
+`;
+
 /**
 A Split button is a hybrid between a Dropdown Menu and a Button. It lets users choose from parallel actions and take action on their choice.
 <hr>
@@ -10,7 +17,11 @@ Used for this:
 - To reduce visual complexity when there are multiple actions a user can take
 **/
 const SplitButton = forwardRef<HTMLDivElement, SplitButtonArgs>(
-  (props, ref) => <ZendeskSplitButton ref={ref} {...props} />
+  (props, ref) => (
+    <SplitButtonWrapper>
+      <ZendeskSplitButton ref={ref} {...props} />
+    </SplitButtonWrapper>
+  )
 );
 
 export { SplitButton };