[Button] Remove destructive boolean (#10164)

### WHY are these changes introduced?

Fixes #0000 <!-- link to issue if one exists -->

### WHAT is this pull request doing?

Removes `destructive` boolean prop from `Button`

Author: aveline

.changeset/loud-hounds-fetch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Renamed `destructive` prop to `tone` for `Button` component

polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx

@@ -15,7 +15,7 @@ interface SecondaryAction extends ButtonProps {
 
 export function SecondaryAction({
   children,
-  destructive,
+  tone,
   helpText,
   onAction,
   getOffsetWidth,
@@ -47,7 +47,7 @@ export function SecondaryAction({
     <div
       className={classNames(
         styles.SecondaryAction,
-        destructive && styles.destructive,
+        tone === 'critical' && styles.destructive,
       )}
       ref={secondaryActionsRef}
     >

polaris-react/src/components/Button/Button.tsx

@@ -23,8 +23,6 @@ import styles from './Button.scss';
 export interface ButtonProps extends BaseButton {
   /** The content to display inside the button */
   children?: string | string[];
-  /** Indicates a dangerous or potentially negative action */
-  destructive?: boolean;
   /**
    * Changes the size of the button, giving it more or less padding
    * @default 'medium'
@@ -117,7 +115,6 @@ export function Button({
   onTouchStart,
   onPointerDown,
   icon,
-  destructive,
   disclosure,
   removeUnderline,
   size = DEFAULT_SIZE,
@@ -220,12 +217,12 @@ export function Button({
   if (connectedDisclosure) {
     const connectedDisclosureClassName = classNames(
       styles.Button,
-      variant && variant === 'primary' && styles.primary,
-      variant && variant === 'monochromePlain' && styles.monochrome,
-      variant && variant === 'monochromePlain' && styles.plain,
+      variant === 'primary' && styles.primary,
+      variant === 'monochromePlain' && styles.monochrome,
+      variant === 'monochromePlain' && styles.plain,
       size && size !== DEFAULT_SIZE && styles[variationName('size', size)],
       textAlign && styles[variationName('textAlign', textAlign)],
-      destructive && styles.destructive,
+      tone === 'critical' && styles.destructive,
       connectedDisclosure.disabled && styles.disabled,
       styles.iconOnly,
       styles.ConnectedDisclosure,

polaris-react/src/components/Page/Page.stories.tsx

@@ -33,7 +33,7 @@ export function Default() {
       secondaryActions={[
         {
           content: 'Delete',
-          destructive: true,
+          tone: 'critical',
           icon: DeleteMinor,
           accessibilityLabel: 'Delete action label',
           onAction: () => console.log('Delete action'),
@@ -124,7 +124,7 @@ export function WithDestructiveSecondaryAction() {
   return (
     <Page
       title="General"
-      secondaryActions={[{content: 'Delete', destructive: true}]}
+      secondaryActions={[{content: 'Delete', tone: 'critical'}]}
     >
       <p>Page content</p>
     </Page>