[BulkActions] Add Tooltip to more actions button

.changeset/young-countries-smash.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated `BulkActions` to include wrapping tooltip on Popover activator

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,40 @@ export function BulkActionButton({
     }
   });
 
-  const buttonContent =
-    disclosure && !showContentInButton ? undefined : content;
+  const isActivatorForMoreActionsPopover = disclosure && !showContentInButton;
+
+  const buttonContent = isActivatorForMoreActionsPopover ? undefined : content;
+
+  const buttonMarkup = (
+    <Button
+      external={external}
+      url={url}
+      accessibilityLabel={
+        isActivatorForMoreActionsPopover ? content : accessibilityLabel
+      }
+      disclosure={disclosure && showContentInButton}
+      onClick={onAction}
+      disabled={disabled}
+      size="slim"
+      icon={
+        isActivatorForMoreActionsPopover ? (
+          <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>
+      {isActivatorForMoreActionsPopover ? (
+        <Tooltip content={content} preferredPosition="above">
+          {buttonMarkup}
+        </Tooltip>
+      ) : (
+        buttonMarkup
+      )}
       {indicator && <Indicator />}
     </div>
   );

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