[BulkActions] Add support for promotedBulkActions with critical `to…

…ne` (Shopify#11787) ### WHY are these changes introduced? Promoted `BulkActions` do not currently support destructive actions, when `destructive` is `true` it gets ignored. ### WHAT is this pull request doing? This PR adds support for destructive `promotedBulkActions`, mapping `destructive` to the rendered `Button`'s `tone` when provided. | Before | After | |--------|--------| |![Screenshot 2024-03-26 at 10 41 47 AM](https://github.com/Shopify/polaris/assets/18447883/3e1191f4-276c-4f2d-a622-588e70d0cda0) | ![Screenshot 2024-03-26 at 10 41 24 AM](https://github.com/Shopify/polaris/assets/18447883/b43b1f97-0cee-4ac0-bb6d-d2893de43a78)|
AnnaCheba · Mar 26, 2024 · 45cfcfa · 45cfcfa
1 parent 13c8ee7
commit 45cfcfa
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/.changeset/tidy-needles-talk.md b/.changeset/tidy-needles-talk.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for destructive `promotodBulkActions` to `BulkActions`
diff --git a/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx b/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx
@@ -1,7 +1,7 @@
 import React, {useRef} from 'react';
 import {MenuHorizontalIcon} from '@shopify/polaris-icons';
 
-import type {DisableableAction} from '../../../../types';
+import type {DestructableAction, DisableableAction} from '../../../../types';
 import type {ButtonProps} from '../../../Button';
 import {Button} from '../../../Button';
 import {Icon} from '../../../Icon';
@@ -16,7 +16,8 @@ export type BulkActionButtonProps = {
   handleMeasurement?(width: number): void;
   showContentInButton?: boolean;
   size?: Extract<ButtonProps['size'], 'micro' | 'medium'>;
-} & DisableableAction;
+} & DisableableAction &
+  DestructableAction;
 
 export function BulkActionButton({
   handleMeasurement,
@@ -27,6 +28,7 @@ export function BulkActionButton({
   disclosure,
   accessibilityLabel,
   disabled,
+  destructive,
   indicator,
   showContentInButton,
   size,
@@ -51,6 +53,7 @@ export function BulkActionButton({
       accessibilityLabel={
         isActivatorForMoreActionsPopover ? content : accessibilityLabel
       }
+      tone={destructive ? 'critical' : undefined}
       disclosure={disclosure && showContentInButton}
       onClick={onAction}
       disabled={disabled}

diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
@@ -910,6 +910,12 @@ export function WithBulkActions() {
       content: 'Edit customers',
       onAction: () => console.log('Todo: implement bulk edit'),
     },
+    {
+      icon: DeleteIcon,
+      destructive: true,
+      content: 'Delete customers',
+      onAction: () => console.log('Todo: implement bulk delete'),
+    },
   ];
   const bulkActions = [
     {
@@ -920,12 +926,6 @@ export function WithBulkActions() {
       content: 'Remove tags',
       onAction: () => console.log('Todo: implement bulk remove tags'),
     },
-    {
-      icon: DeleteIcon,
-      destructive: true,
-      content: 'Delete customers',
-      onAction: () => console.log('Todo: implement bulk delete'),
-    },
   ];
 
   const rowMarkup = customers.map(