[Button] Deprecate connectedDisclosure

.changeset/famous-stingrays-change.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Deprecate connectedDisclosure prop on button

polaris-react/src/components/Button/Button.scss

@@ -1441,6 +1441,7 @@
   }
 
   > :first-child .Button,
+  > :first-child .Button::before,
   > :first-child .Button::after {
     border-radius: 0;
     border-top-left-radius: var(--p-border-radius-1);
@@ -1453,6 +1454,7 @@
   }
 
   > :last-child .Button,
+  > :last-child .Button::before,
   > :last-child .Button::after {
     border-radius: 0;
     border-top-right-radius: var(--p-border-radius-1);
@@ -1476,11 +1478,13 @@
 
 [data-buttongroup-connected-top='true'] {
   > :first-child .Button,
+  > :first-child .Button::before,
   > :first-child .Button::after {
     border-top-left-radius: 0;
   }
 
   > :last-child .Button,
+  > :last-child .Button::before,
   > :last-child .Button::after {
     border-top-right-radius: 0;
   }

polaris-react/src/components/Button/Button.stories.tsx

@@ -8,12 +8,16 @@ import {
   VerticalStack,
   Text,
   Box,
+  Popover,
+  ActionList,
+  Divider,
 } from '@shopify/polaris';
 import {
   PlusMinor,
   DeleteMinor,
   CancelSmallMinor,
   EditMajor,
+  ChevronDownMinor,
 } from '@shopify/polaris-icons';
 
 export default {
@@ -717,17 +721,57 @@ export function SelectDisclosure() {
 }
 
 export function Split() {
+  const [active, setActive] = React.useState(false);
   return (
     <div style={{height: '100px'}}>
-      <Button
-        primary
-        connectedDisclosure={{
-          accessibilityLabel: 'Other save actions',
-          actions: [{content: 'Save as draft'}],
-        }}
-      >
-        Save
-      </Button>
+      <ButtonGroup segmented>
+        <Button primary>Save</Button>
+
+        <div style={{width: '3px'}} />
+
+        <Popover
+          active={active}
+          preferredAlignment="right"
+          activator={
+            <Button
+              primary
+              onClick={() => setActive(true)}
+              icon={ChevronDownMinor}
+              accessibilityLabel="Other save actions"
+            />
+          }
+          autofocusTarget="first-node"
+          onClose={() => setActive(false)}
+        >
+          <ActionList
+            actionRole="menuitem"
+            items={[{content: 'Save as draft'}]}
+          />
+        </Popover>
+      </ButtonGroup>
+
+      <ButtonGroup segmented>
+        <Button>Save</Button>
+
+        <Popover
+          active={active}
+          preferredAlignment="right"
+          activator={
+            <Button
+              onClick={() => setActive(true)}
+              icon={ChevronDownMinor}
+              accessibilityLabel="Other save actions"
+            />
+          }
+          autofocusTarget="first-node"
+          onClose={() => setActive(false)}
+        >
+          <ActionList
+            actionRole="menuitem"
+            items={[{content: 'Save as draft'}]}
+          />
+        </Popover>
+      </ButtonGroup>
     </div>
   );
 }

polaris-react/src/components/Button/Button.tsx

@@ -51,7 +51,7 @@ export interface ButtonProps extends BaseButton {
   removeUnderline?: boolean;
   /** Icon to display to the left of the button content */
   icon?: React.ReactElement | IconSource;
-  /** Disclosure button connected right of the button. Toggles a popover action list. */
+  /** @deprecated See the split example to replicate this prop */
   connectedDisclosure?: ConnectedDisclosure;
   /** Indicates whether or not the button is the primary navigation link when rendered inside of an `IndexTable.Row` */
   dataPrimaryLink?: boolean;

polaris.shopify.com/pages/examples/button-split.tsx

@@ -1,19 +1,57 @@
-import {Button} from '@shopify/polaris';
+import {ActionList, Button, ButtonGroup, Popover} from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {ChevronDownMinor} from '@shopify/polaris-icons';
 
 function ButtonExample() {
+  const [active, setActive] = React.useState(false);
   return (
     <div style={{height: '100px'}}>
-      <Button
-        primary
-        connectedDisclosure={{
-          accessibilityLabel: 'Other save actions',
-          actions: [{content: 'Save as draft'}],
-        }}
-      >
-        Save
-      </Button>
+      <ButtonGroup segmented>
+        <Button primary>Save</Button>
+        <div style={{width: '3px'}} />
+        <Popover
+          active={active}
+          preferredAlignment="right"
+          activator={
+            <Button
+              primary
+              onClick={() => setActive(true)}
+              icon={ChevronDownMinor}
+              accessibilityLabel="Other save actions"
+            />
+          }
+          autofocusTarget="first-node"
+          onClose={() => setActive(false)}
+        >
+          <ActionList
+            actionRole="menuitem"
+            items={[{content: 'Save as draft'}]}
+          />
+        </Popover>
+      </ButtonGroup>
+
+      <ButtonGroup segmented>
+        <Button>Save</Button>
+        <Popover
+          active={active}
+          preferredAlignment="right"
+          activator={
+            <Button
+              onClick={() => setActive(true)}
+              icon={ChevronDownMinor}
+              accessibilityLabel="Other save actions"
+            />
+          }
+          autofocusTarget="first-node"
+          onClose={() => setActive(false)}
+        >
+          <ActionList
+            actionRole="menuitem"
+            items={[{content: 'Save as draft'}]}
+          />
+        </Popover>
+      </ButtonGroup>
     </div>
   );
 }