From 8c6a4af25cedf02172a388b9ad6df6d32a15906b Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloe.rice@shopify.com>
Date: Fri, 6 Oct 2023 03:15:25 -0400
Subject: [PATCH] [ButtonGroup] Fix segmented variant spacing when composing
 primary Buttons

---
 .changeset/proud-cougars-turn.md              |  5 +
 .../src/components/Button/Button.stories.tsx  | 94 ++++++++++---------
 .../components/ButtonGroup/ButtonGroup.scss   |  5 +
 3 files changed, 59 insertions(+), 45 deletions(-)
 create mode 100644 .changeset/proud-cougars-turn.md

diff --git a/.changeset/proud-cougars-turn.md b/.changeset/proud-cougars-turn.md
new file mode 100644
index 00000000000..7d462c060e5
--- /dev/null
+++ b/.changeset/proud-cougars-turn.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed negative margin of `segmented` `ButtonGroup.Item` when child `Button` is `primary`
diff --git a/polaris-react/src/components/Button/Button.stories.tsx b/polaris-react/src/components/Button/Button.stories.tsx
index 058bba96798..76064dd10bd 100644
--- a/polaris-react/src/components/Button/Button.stories.tsx
+++ b/polaris-react/src/components/Button/Button.stories.tsx
@@ -632,57 +632,61 @@ export function SelectDisclosure() {
 }
 
 export function Split() {
-  const [active, setActive] = React.useState(false);
+  const [active, setActive] = React.useState<string | null>(null);
+
+  const toggleActive = (id: string) => () => {
+    setActive((activeId) => (activeId !== id ? id : null));
+  };
   return (
     <div style={{height: '100px'}}>
-      <ButtonGroup variant="segmented">
-        <Button variant="primary">Save</Button>
-
-        <div style={{width: '3px'}} />
-
-        <Popover
-          active={active}
-          preferredAlignment="right"
-          activator={
-            <Button
-              variant="primary"
-              onClick={() => setActive(true)}
-              icon={ChevronDownMinor}
-              accessibilityLabel="Other save actions"
+      <InlineStack gap="500">
+        <ButtonGroup variant="segmented">
+          <Button variant="primary">Save</Button>
+
+          <Popover
+            active={active === 'popover1'}
+            preferredAlignment="right"
+            activator={
+              <Button
+                variant="primary"
+                onClick={toggleActive('popover1')}
+                icon={ChevronDownMinor}
+                accessibilityLabel="Other save actions"
+              />
+            }
+            autofocusTarget="first-node"
+            onClose={toggleActive('popover1')}
+          >
+            <ActionList
+              actionRole="menuitem"
+              items={[{content: 'Save as draft'}]}
             />
-          }
-          autofocusTarget="first-node"
-          onClose={() => setActive(false)}
-        >
-          <ActionList
-            actionRole="menuitem"
-            items={[{content: 'Save as draft'}]}
-          />
-        </Popover>
-      </ButtonGroup>
+          </Popover>
+        </ButtonGroup>
 
-      <ButtonGroup variant="segmented">
-        <Button>Save</Button>
+        <ButtonGroup variant="segmented">
+          <Button>Save</Button>
 
-        <Popover
-          active={active}
-          preferredAlignment="right"
-          activator={
-            <Button
-              onClick={() => setActive(true)}
-              icon={ChevronDownMinor}
-              accessibilityLabel="Other save actions"
+          <Popover
+            active={active === 'popover2'}
+            preferredAlignment="right"
+            activator={
+              <Button
+                onClick={toggleActive('popover2')}
+                icon={ChevronDownMinor}
+                accessibilityLabel="Other save actions"
+              />
+            }
+            autofocusTarget="first-node"
+            onClose={toggleActive('popover2')}
+          >
+            <ActionList
+              actionRole="menuitem"
+              items={[{content: 'Save as draft'}]}
             />
-          }
-          autofocusTarget="first-node"
-          onClose={() => setActive(false)}
-        >
-          <ActionList
-            actionRole="menuitem"
-            items={[{content: 'Save as draft'}]}
-          />
-        </Popover>
-      </ButtonGroup>
+          </Popover>
+        </ButtonGroup>
+      </InlineStack>
     </div>
   );
 }
diff --git a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss
index 3ebe2767bac..3da1abccdab 100644
--- a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss
+++ b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss
@@ -41,6 +41,11 @@
 
     &:not(:first-child) {
       margin-left: calc(-1 * var(--p-space-025));
+
+      /* stylelint-disable-next-line selector-max-specificity, selector-no-qualifying-type, selector-max-combinators -- Primary buttons segment groups need the negative margin-left applied directly on the button element. They have inset shine via shadow bevels that cause the appearance of double borders when composed in a segmented ButtonGroup, which flattens the joint between them and ruins the illusion of dimension. */
+      button[class*='Button-primary'] {
+        margin-left: calc(-1 * var(--p-space-025));
+      }
     }
   }