[BulkActions] Add Tooltip to more actions button (#8912)

### WHY are these changes introduced?

Fixes Shopify/web#87957

Signposts the intent of the horizontal dot menu more clearly for greater
ease of understanding.

### WHAT is this pull request doing?

This PR introduces a Tooltip that wraps the activator button in the
BulkActions component which opens up the Popover containing the
additional bulk actions not rendered by default as promoted bulk
actions.

<img width="1963" alt="Screenshot 2023-04-11 at 10 25 46"
src="https://user-images.githubusercontent.com/2562596/231116970-4f34b3ec-f4eb-4cc3-859d-203350af6315.png">

Spinstance:
https://admin.web.bulk-actions-tooltip.marc-thomas.eu.spin.dev/store/shop1/products?selectedView=all

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: mrcthms

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