From b19696b9f120c5cdab551e910e24d06cc6eb1282 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Fri, 2 Apr 2021 04:40:27 -0700
Subject: [PATCH] feat(context-menu): support danger kind for ContextMenuOption

---
 COMPONENT_INDEX.md                                   |  1 +
 docs/src/COMPONENT_API.json                          | 10 ++++++++++
 docs/src/pages/framed/ContextMenu/ContextMenu.svelte |  2 ++
 src/ContextMenu/ContextMenuOption.svelte             |  7 +++++++
 tests/ContextMenu.test.svelte                        |  1 +
 types/ContextMenu/ContextMenuOption.d.ts             |  6 ++++++
 6 files changed, 27 insertions(+)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 6ed4788d..79f942c5 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -800,6 +800,7 @@ None.
 | selected     | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to use the selected variant                                                                                          |
 | icon         | <code>let</code> | Yes      | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                                               | Specify the icon from `carbon-icons-svelte` to render<br />Icon is rendered to the left of the label text                          |
 | indented     | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to indent the label                                                                                                  |
+| kind         | <code>let</code> | No       | <code>"default" &#124; "danger"</code>                       | <code>"default"</code>                           | Specify the kind of option                                                                                                         |
 | disabled     | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the disabled state                                                                                         |
 | labelText    | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>                                  | Specify the label text<br />Alternatively, use the "labelText" slot (e.g., &lt;span slot="labelText"&gt;...&lt;/span&gt;)          |
 | shortcutText | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>                                  | Specify the shortcut text<br />Alternatively, use the "shortcutText" slot (e.g., &lt;span slot="shortcutText"&gt;...&lt;/span&gt;) |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index e1353c54..31b0c9f6 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1656,6 +1656,16 @@
       "moduleName": "ContextMenuOption",
       "filePath": "src/ContextMenu/ContextMenuOption.svelte",
       "props": [
+        {
+          "name": "kind",
+          "kind": "let",
+          "description": "Specify the kind of option",
+          "type": "\"default\" | \"danger\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "disabled",
           "kind": "let",
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenu.svelte b/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
index 8ea32eb9..f2c44d78 100644
--- a/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
@@ -42,4 +42,6 @@
     <ContextMenuOption id="1" labelText="Reduce noise" />
     <ContextMenuOption id="2" labelText="Auto-sharpen" />
   </ContextMenuGroup>
+  <ContextMenuDivider />
+  <ContextMenuOption indented kind="danger" labelText="Delete" />
 </ContextMenu>
diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte
index 8bd17780..a07913ae 100644
--- a/src/ContextMenu/ContextMenuOption.svelte
+++ b/src/ContextMenu/ContextMenuOption.svelte
@@ -1,4 +1,10 @@
 <script>
+  /**
+   * Specify the kind of option
+   * @type {"default" | "danger"}
+   */
+  export let kind = "default";
+
   /** Set to `true` to enable the disabled state */
   export let disabled = false;
 
@@ -158,6 +164,7 @@
   class:bx--context-menu-option="{true}"
   class:bx--context-menu-option--disabled="{true}"
   class:bx--context-menu-option--active="{subOptions && submenuOpen}"
+  class:bx--context-menu-option--danger="{!subOptions && kind === 'danger'}"
   indented="{indented}"
   aria-checked="{isSelectable || isRadio ? selected : undefined}"
   data-nested="{ref &&
diff --git a/tests/ContextMenu.test.svelte b/tests/ContextMenu.test.svelte
index fec21aa5..2cb1b82b 100644
--- a/tests/ContextMenu.test.svelte
+++ b/tests/ContextMenu.test.svelte
@@ -17,6 +17,7 @@
 
 <ContextMenu>
   <ContextMenuOption
+    kind="danger"
     indented
     labelText="Copy"
     shortcutText="⌘C"
diff --git a/types/ContextMenu/ContextMenuOption.d.ts b/types/ContextMenu/ContextMenuOption.d.ts
index b6763f33..67a1cf04 100644
--- a/types/ContextMenu/ContextMenuOption.d.ts
+++ b/types/ContextMenu/ContextMenuOption.d.ts
@@ -3,6 +3,12 @@ import { SvelteComponentTyped } from "svelte";
 
 export interface ContextMenuOptionProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+  /**
+   * Specify the kind of option
+   * @default "default"
+   */
+  kind?: "default" | "danger";
+
   /**
    * Set to `true` to enable the disabled state
    * @default false