[OP-152] Rename btn-delete to btn-destructive (#222)

This PR renames the delete button to destructive as that is more general but still conveys intent. `btn-delete` is kept for backwards compatibility.

src/components/button.scss

@@ -219,6 +219,7 @@
   }
 }
 
+.btn-destructive,
 .btn-delete {
   @extend %btn-global;
 

src/components/button_group.scss

@@ -8,10 +8,12 @@
 
   .btn,
   .btn-primary,
+  .btn-destructive,
   .btn-delete,
   .btn-warning {
     + .btn,
     + .btn-primary,
+    + .btn-destructive,
     + .btn-delete,
     + .btn-warning {
       margin-left: -1px;

src/stories/Components/Button/Button.mdx

@@ -42,11 +42,12 @@ Button can be used as a standalone component, however, it does have a few depend
 
 <Canvas of={ButtonStories.Primary} />
 
-### Delete
+### Destructive
 
-`.btn-delete` Provides a filled button using the red danger color. This should be used as a destructive action such as delete.
+`.btn-destructive` Provides a filled button using the red danger color. This should be used as a destructive action such as delete.
+Note: `.btn-delete` also works for backwards compatibility, but `.btn-destructive` is the preferred class name.
 
-<Canvas of={ButtonStories.Delete} />
+<Canvas of={ButtonStories.Destructive} />
 
 ### Active
 
@@ -56,9 +57,9 @@ Button can be used as a standalone component, however, it does have a few depend
 
 ### No Border
 
-`.btn--no-border` This is a modifier which can be used with all button classes except delete. It provides a button with no border, but the same sizing and adapts it's color to all the btn variations.
+`.btn--no-border` This is a modifier which can be used with all button classes except destructive. It provides a button with no border, but the same sizing and adapts it's color to all the btn variations.
 
-Note: `.btn-delete` and `.btn-warning` do not support the `.btn--no-border` modifier. Borderless warning or delete buttons is not considered a good pattern and can easily lead to confusion so it has been disabled.
+Note: `.btn-destructive` and `.btn-warning` do not support the `.btn--no-border` modifier. Borderless warning or destructive buttons is not considered a good pattern and can easily lead to confusion so it has been disabled.
 
 <Canvas of={ButtonStories.NoBorder} />
 

src/stories/Components/Button/Button.stories.js

@@ -9,7 +9,7 @@ export default {
     label: { control: 'text' },
     priority: {
       control: { type: 'select' },
-      options: ['default', 'primary', 'delete', 'warning'],
+      options: ['default', 'primary', 'destructive', 'warning'],
     },
     noBorder: { control: 'boolean' },
     disabled: { control: 'boolean' },
@@ -47,10 +47,10 @@ export const Primary = {
   },
 }
 
-export const Delete = {
+export const Destructive = {
   args: {
     label: 'Delete',
-    priority: 'delete',
+    priority: 'destructive',
   },
 }
 

src/stories/Components/ButtonGroup/ButtonGroup.mdx

@@ -43,9 +43,9 @@ Button Group can be used as a standalone component, however, it does have a few
 
 <Canvas of={ButtonGroupStories.Primary} />
 
-### Delete
+### Destructive
 
-<Canvas of={ButtonGroupStories.Delete} />
+<Canvas of={ButtonGroupStories.Destructive} />
 
 ### Warning
 

src/stories/Components/ButtonGroup/ButtonGroup.stories.js

@@ -12,7 +12,7 @@ export default {
   argTypes: {
     priority: {
       control: { type: 'select' },
-      options: ['default', 'primary', 'delete', 'warning'],
+      options: ['default', 'primary', 'destructive', 'warning'],
     },
     noBorder: { control: 'boolean' },
     active: { control: 'boolean' },
@@ -41,9 +41,9 @@ export const Primary = {
   },
 }
 
-export const Delete = {
+export const Destructive = {
   args: {
-    priority: 'delete',
+    priority: 'destructive',
   },
 }
 
@@ -55,7 +55,7 @@ export const Warning = {
 
 export const Active = {
   args: {
-    priority: 'delete',
+    priority: 'destructive',
     active: true,
   },
 }

src/stories/Components/ConfirmDialog/ConfirmDialog.js

@@ -14,7 +14,7 @@ export const createConfirmDialog = ({ title, message, inlineDemo = false }) => {
     </div>
     <div class='confirm-dialog__footer'>
       <button class="btn">Cancel</button>
-      <button class='btn-delete'>Yes, I'm Sure</button>
+      <button class='btn-destructive'>Yes, I'm Sure</button>
     </div>
   </div>
 `