feat(context-menu): support danger kind for ContextMenuOption

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;) |

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",

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>

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 &&

tests/ContextMenu.test.svelte

@@ -17,6 +17,7 @@
 
 <ContextMenu>
   <ContextMenuOption
+    kind="danger"
     indented
     labelText="Copy"
     shortcutText="⌘C"

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