From dcb86fde00262dd16741d6e619c4fce016d3fbb9 Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Tue, 11 Apr 2023 10:25:04 +0100
Subject: [PATCH 1/2] chore: add tooltip to more actions button

---
 .changeset/young-countries-smash.md           |  5 ++
 .../BulkActionButton/BulkActionButton.tsx     | 50 +++++++++++--------
 .../BulkActions/tests/BulkActions.test.tsx    | 21 ++++++++
 3 files changed, 56 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/young-countries-smash.md

diff --git a/.changeset/young-countries-smash.md b/.changeset/young-countries-smash.md
new file mode 100644
index 00000000000..a285ef17cb4
--- /dev/null
+++ b/.changeset/young-countries-smash.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated `BulkActions` to include wrapping tooltip on Popover activator
diff --git a/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx b/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx
index 84b06366a59..78462055c3b 100644
--- a/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx
+++ b/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx
@@ -5,6 +5,7 @@ import type {DisableableAction} from '../../../../types';
 import {Button} from '../../../Button';
 import {Icon} from '../../../Icon';
 import {Indicator} from '../../../Indicator';
+import {Tooltip} from '../../../Tooltip';
 import {useComponentDidMount} from '../../../../utilities/use-component-did-mount';
 import styles from '../../BulkActions.scss';
 
@@ -36,29 +37,38 @@ export function BulkActionButton({
     }
   });
 
-  const buttonContent =
-    disclosure && !showContentInButton ? undefined : content;
+  const shouldShowDotsIcon = disclosure && !showContentInButton;
+
+  const buttonContent = shouldShowDotsIcon ? undefined : content;
+
+  const buttonMarkup = (
+    <Button
+      external={external}
+      url={url}
+      accessibilityLabel={shouldShowDotsIcon ? content : accessibilityLabel}
+      disclosure={disclosure && showContentInButton}
+      onClick={onAction}
+      disabled={disabled}
+      size="slim"
+      icon={
+        shouldShowDotsIcon ? (
+          <Icon source={HorizontalDotsMinor} color="base" />
+        ) : undefined
+      }
+    >
+      {buttonContent}
+    </Button>
+  );
 
   return (
     <div className={styles.BulkActionButton} ref={bulkActionButton}>
-      <Button
-        external={external}
-        url={url}
-        accessibilityLabel={
-          disclosure && !showContentInButton ? content : accessibilityLabel
-        }
-        disclosure={disclosure && showContentInButton}
-        onClick={onAction}
-        disabled={disabled}
-        size="slim"
-        icon={
-          disclosure && !showContentInButton ? (
-            <Icon source={HorizontalDotsMinor} color="base" />
-          ) : undefined
-        }
-      >
-        {buttonContent}
-      </Button>
+      {shouldShowDotsIcon ? (
+        <Tooltip content={content} preferredPosition="above">
+          {buttonMarkup}
+        </Tooltip>
+      ) : (
+        buttonMarkup
+      )}
       {indicator && <Indicator />}
     </div>
   );
diff --git a/polaris-react/src/components/BulkActions/tests/BulkActions.test.tsx b/polaris-react/src/components/BulkActions/tests/BulkActions.test.tsx
index 2f329c5561a..885fd7e8742 100644
--- a/polaris-react/src/components/BulkActions/tests/BulkActions.test.tsx
+++ b/polaris-react/src/components/BulkActions/tests/BulkActions.test.tsx
@@ -3,6 +3,7 @@ import {Transition, CSSTransition} from 'react-transition-group';
 import {mountWithApp} from 'tests/utilities';
 
 import {ActionList} from '../../ActionList';
+import {Tooltip} from '../../Tooltip';
 import {BulkActionButton, BulkActionMenu} from '../components';
 import type {BulkActionButtonProps} from '../components';
 import {BulkActions} from '../BulkActions';
@@ -307,4 +308,24 @@ describe('<BulkActions />', () => {
       });
     });
   });
+
+  describe('more actions', () => {
+    it('will be wrapped in a tooltip', () => {
+      const manyBulkActions = [
+        {content: 'Action'},
+        {content: 'Action 2'},
+        {content: 'Action 3'},
+        {content: 'Action 4'},
+        {content: 'Action 5'},
+        {content: 'Action 6'},
+      ];
+      const bulkActions = mountWithApp(
+        <BulkActions {...bulkActionProps} actions={manyBulkActions} />,
+      );
+
+      expect(bulkActions).toContainReactComponent(Tooltip, {
+        content: 'More actions',
+      });
+    });
+  });
 });

From 8a6527ba9296a3d999c37c73a5cf5b17c56eff75 Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Wed, 12 Apr 2023 09:10:34 +0100
Subject: [PATCH 2/2] chore: update variable name

---
 .../components/BulkActionButton/BulkActionButton.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx b/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx
index 78462055c3b..466d9ed45be 100644
--- a/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx
+++ b/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx
@@ -37,21 +37,23 @@ export function BulkActionButton({
     }
   });
 
-  const shouldShowDotsIcon = disclosure && !showContentInButton;
+  const isActivatorForMoreActionsPopover = disclosure && !showContentInButton;
 
-  const buttonContent = shouldShowDotsIcon ? undefined : content;
+  const buttonContent = isActivatorForMoreActionsPopover ? undefined : content;
 
   const buttonMarkup = (
     <Button
       external={external}
       url={url}
-      accessibilityLabel={shouldShowDotsIcon ? content : accessibilityLabel}
+      accessibilityLabel={
+        isActivatorForMoreActionsPopover ? content : accessibilityLabel
+      }
       disclosure={disclosure && showContentInButton}
       onClick={onAction}
       disabled={disabled}
       size="slim"
       icon={
-        shouldShowDotsIcon ? (
+        isActivatorForMoreActionsPopover ? (
           <Icon source={HorizontalDotsMinor} color="base" />
         ) : undefined
       }
@@ -62,7 +64,7 @@ export function BulkActionButton({
 
   return (
     <div className={styles.BulkActionButton} ref={bulkActionButton}>
-      {shouldShowDotsIcon ? (
+      {isActivatorForMoreActionsPopover ? (
         <Tooltip content={content} preferredPosition="above">
           {buttonMarkup}
         </Tooltip>