Fix segmented ButtonGroup spacing

.changeset/proud-cougars-turn.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed negative margin of `segmented` `ButtonGroup.Item` when child `Button` is `primary`

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>
   );
 }

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));
+      }
     }
   }