feat(metadata-view): bulk custom actions

Refactor

Author: jpan-box

i18n/en-US.properties

@@ -1825,7 +1825,7 @@ boxui.shareMenu.viewAndDownload = View and Download
 # Description of permissions granted to users who have access to the shared link
 boxui.shareMenu.viewOnly = View Only
 # Aria-label for the dropdown menu that shows actions for selected items
-boxui.subHeader.bulkItemActionMenuAriaLabel = Show actions for selected items
+boxui.subHeader.bulkItemActionMenuAriaLabel = Bulk actions
 # Text for metadata button that will open the metadata side panel
 boxui.subHeader.metadata = Metadata
 # Error message for empty time formats. "HH:MM A" should be localized.

src/elements/common/sub-header/BulkItemActionMenu.tsx

@@ -25,7 +25,7 @@ export const BulkItemActionMenu = ({
 
     return (
         <DropdownMenu.Root>
-            <DropdownMenu.Trigger className="be-SubHeaderRight-bulkItemActionMenuDropdownTrigger">
+            <DropdownMenu.Trigger className="be-bulkItemActionMenu-trigger">
                 <Button
                     role="button"
                     aria-label={formatMessage(messages.bulkItemActionMenuAriaLabel)}
@@ -34,7 +34,7 @@ export const BulkItemActionMenu = ({
                     variant="secondary"
                 />
             </DropdownMenu.Trigger>
-            <DropdownMenu.Content align="start">
+            <DropdownMenu.Content align="end">
                 {actions.map(({ label, onClick }) => {
                     return (
                         <DropdownMenu.Item key={label} onSelect={() => onClick(selectedItemIds)}>

src/elements/common/sub-header/SubHeaderRight.scss

@@ -20,7 +20,7 @@
         margin-left: 7px;
     }
 
-    .be-SubHeaderRight-bulkItemActionMenuDropdownTrigger {
-        margin-right: 7px;
+    .be-bulkItemActionMenu-trigger {
+        margin-right: var(--space-2);
     }
 }

src/elements/common/sub-header/messages.ts

@@ -2,7 +2,7 @@ import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
     bulkItemActionMenuAriaLabel: {
-        defaultMessage: 'Show actions for selected items',
+        defaultMessage: 'Bulk actions',
         description: 'Aria-label for the dropdown menu that shows actions for selected items',
         id: 'boxui.subHeader.bulkItemActionMenuAriaLabel',
     },

src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx

@@ -192,6 +192,10 @@ export const metadataViewV2WithBulkItemActionMenuShowsEllipsis: Story = {
         const firstRow = canvas.getByRole('row', { name: /Child 2/i });
         const checkbox = within(firstRow).getByRole('checkbox');
         userEvent.click(checkbox);
+
+        await waitFor(() => {
+            expect(canvas.getByRole('button', { name: 'Bulk actions' })).toBeInTheDocument();
+        });
     },
 };
 
@@ -207,10 +211,10 @@ export const metadataViewV2WithBulkItemActionMenuShowsItemActionMenu: Story = {
         userEvent.click(checkbox);
 
         await waitFor(() => {
-            expect(canvas.getByRole('button', { name: 'Show actions for selected items' })).toBeInTheDocument();
+            expect(canvas.getByRole('button', { name: 'Bulk actions' })).toBeInTheDocument();
         });
 
-        const ellipsisButton = canvas.getByRole('button', { name: 'Show actions for selected items' });
+        const ellipsisButton = canvas.getByRole('button', { name: 'Bulk actions' });
 
         userEvent.click(ellipsisButton);
 
@@ -232,10 +236,10 @@ export const metadataViewV2WithBulkItemActionMenuCallsOnClick: Story = {
         userEvent.click(checkbox);
 
         await waitFor(() => {
-            expect(canvas.getByRole('button', { name: 'Show actions for selected items' })).toBeInTheDocument();
+            expect(canvas.getByRole('button', { name: 'Bulk actions' })).toBeInTheDocument();
         });
 
-        const ellipsisButton = canvas.getByRole('button', { name: 'Show actions for selected items' });
+        const ellipsisButton = canvas.getByRole('button', { name: 'Bulk actions' });
 
         userEvent.click(ellipsisButton);