fix(button): update button kind prop type (#7212)

* refactor(button): update class names to double dash convention

* fix(button): update button kind prop type

* chore: update snapshots

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: emyarod

packages/components/src/components/button/_button.scss

@@ -283,7 +283,9 @@
       color: $text-04;
     }
 
-    &-tertiary {
+    // TODO: deprecate single dash tertiary
+    &-tertiary,
+    &--tertiary {
       @include button-theme(
         transparent,
         $danger-02,
@@ -309,7 +311,9 @@
       }
     }
 
-    &-ghost {
+    // TODO: deprecate single dash ghost
+    &-ghost,
+    &--ghost {
       @include button-theme(
         transparent,
         transparent,

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -190,6 +190,8 @@ Map {
             "danger",
             "ghost",
             "danger--primary",
+            "danger--ghost",
+            "danger--tertiary",
             "tertiary",
           ],
         ],
@@ -2450,6 +2452,8 @@ Map {
             "danger",
             "ghost",
             "danger--primary",
+            "danger--ghost",
+            "danger--tertiary",
             "tertiary",
           ],
         ],
@@ -2554,6 +2558,8 @@ Map {
             "danger",
             "ghost",
             "danger--primary",
+            "danger--ghost",
+            "danger--tertiary",
             "tertiary",
           ],
         ],
@@ -3366,6 +3372,8 @@ Map {
             "danger",
             "ghost",
             "danger--primary",
+            "danger--ghost",
+            "danger--tertiary",
             "tertiary",
           ],
         ],

packages/react/src/components/Button/Button-story.js

@@ -159,9 +159,9 @@ export const Danger = () => {
     <>
       <Button kind="danger">Button</Button>
       &nbsp;
-      <Button kind="danger-tertiary">Tertiary Danger Button</Button>
+      <Button kind="danger--tertiary">Tertiary Danger Button</Button>
       &nbsp;
-      <Button kind="danger-ghost">Ghost Danger Button</Button>
+      <Button kind="danger--ghost">Ghost Danger Button</Button>
     </>
   );
 };

packages/react/src/components/Button/Button-test.js

@@ -277,18 +277,20 @@ describe('DangerButton', () => {
   });
 
   describe('Renders tertiary variation as expected', () => {
-    const wrapper = shallow(<Button kind="danger-tertiary" />);
+    const wrapper = shallow(<Button kind="danger--tertiary" />);
 
     it('has the expected classes', () => {
-      expect(wrapper.hasClass(`${prefix}--btn--danger-tertiary`)).toEqual(true);
+      expect(wrapper.hasClass(`${prefix}--btn--danger--tertiary`)).toEqual(
+        true
+      );
     });
   });
 
   describe('Renders ghost variation as expected', () => {
-    const wrapper = shallow(<Button kind="danger-ghost" />);
+    const wrapper = shallow(<Button kind="danger--ghost" />);
 
     it('has the expected classes', () => {
-      expect(wrapper.hasClass(`${prefix}--btn--danger-ghost`)).toEqual(true);
+      expect(wrapper.hasClass(`${prefix}--btn--danger--ghost`)).toEqual(true);
     });
   });
 });

packages/react/src/components/Button/Button.mdx

@@ -59,8 +59,8 @@ user interacts with it.
 
 Icon buttons allow users to take actions, and make choices, with a single tap.
 Icon buttons can take the form of any of the seven types (Primary, Secondary,
-Tertiary, Danger, Danger tertiary, Danger ghost and Ghost) but most commonly will be styled as primary or ghost
-buttons.
+Tertiary, Danger, Danger tertiary, Danger ghost and Ghost) but most commonly
+will be styled as primary or ghost buttons.
 
 <Preview>
   <Story id="button--icon-button" />
@@ -162,24 +162,25 @@ button is interacted with.
 ### Button `kind`
 
 Carbon has seven types of buttons, `primary`, `secondary`, `tertiary`, `ghost`,
-`danger`, `danger-tertiary`, and `danger-ghost`. If no `kind` is specified, a `primary` button will be rendered.
-For more information on when to use each variant, check out the
+`danger`, `danger--tertiary`, and `danger--ghost`. If no `kind` is specified, a
+`primary` button will be rendered. For more information on when to use each
+variant, check out the
 [design documentation](https://www.carbondesignsystem.com/components/button/usage#overview)
 
 <Button>Primary</Button> <Button kind="secondary">Secondary</Button> <Button kind="tertiary">
   Tertiary{' '}
-</Button> <Button kind="danger">Danger</Button> <Button kind="danger-tertiary">Danger Tertiary</Button> 
-<Button kind="danger-ghost">Danger Ghost</Button> <Button kind="ghost">
-  Ghost
+</Button> <Button kind="danger">Danger</Button> <Button kind="danger--tertiary">
+  Danger Tertiary
 </Button>
+<Button kind="danger--ghost">Danger Ghost</Button> <Button kind="ghost">Ghost</Button>
 
 ```jsx
 <Button>Primary</Button>
 <Button kind="secondary">Secondary</Button>
 <Button kind="tertiary">Tertiary</Button>
 <Button kind="danger">Danger</Button>
-<Button kind="danger-tertiary">Danger Tertiary</Button>
-<Button kind="danger-ghost">Danger Ghost</Button>
+<Button kind="danger--tertiary">Danger Tertiary</Button>
+<Button kind="danger--ghost">Danger Ghost</Button>
 <Button kind="ghost">Ghost</Button>
 ```
 

packages/react/src/prop-types/types.js

@@ -11,5 +11,7 @@ export const ButtonKinds = [
   'danger',
   'ghost',
   'danger--primary',
+  'danger--ghost',
+  'danger--tertiary',
   'tertiary',
 ];