Add closeIcon option and remove stopPropagation on:click in HeaderAction (#840)

* Remove stopPropagation on:click

Remove stopPropagation on:click helps when you have more then one acction to switch between actions tabs

* fix bug for default icon

* add closeIcon attribute to HeaderAction

COMPONENT_INDEX.md

@@ -1613,6 +1613,7 @@ export interface HeaderActionSlideTransition {
 | ref        | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                   | <code>null</code>              | Obtain a reference to the button HTML element                                                                 |
 | isOpen     | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>             | Set to `true` to open the panel                                                                               |
 | icon       | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                             | Specify the icon from `carbon-icons-svelte` to render                                                         |
+| closeIcon  | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                             | Specify the close icon from `carbon-icons-svelte` to render                                                   |
 | text       | <code>let</code> | No       | <code>string</code>                                          | --                             | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
 | transition | <code>let</code> | No       | <code>false &#124; HeaderActionSlideTransition</code>        | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition       |
 

docs/src/COMPONENT_API.json

@@ -4379,6 +4379,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "closeIcon",
+          "kind": "let",
+          "description": "Specify the close icon from `carbon-icons-svelte` to render",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "text",
           "kind": "let",

docs/src/pages/framed/UIShell/HeaderUtilities.svelte

@@ -19,9 +19,11 @@
     Column,
   } from "carbon-components-svelte";
   import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
+  import UserAvatarFilledAlt20 from "carbon-icons-svelte/lib/UserAvatarFilledAlt20";
 
   let isSideNavOpen = false;
-  let isOpen = false;
+  let isOpen1 = false;
+  let isOpen2 = false;
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
@@ -30,7 +32,25 @@
   </div>
   <HeaderUtilities>
     <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
-    <HeaderAction bind:isOpen>
+    <HeaderAction
+      bind:isOpen="{isOpen1}"
+      icon="{UserAvatarFilledAlt20}"
+      closeIcon="{UserAvatarFilledAlt20}"
+    >
+      <HeaderPanelLinks>
+        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 2</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 3</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 4</HeaderPanelLink>
+        <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 2</HeaderPanelLink>
+        <HeaderPanelDivider>Switcher subject 3</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+      </HeaderPanelLinks>
+    </HeaderAction>
+    <HeaderAction bind:isOpen="{isOpen2}">
       <HeaderPanelLinks>
         <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
         <HeaderPanelLink>Switcher item 1</HeaderPanelLink>

src/UIShell/GlobalHeader/HeaderAction.svelte

@@ -10,7 +10,13 @@
    * Specify the icon from `carbon-icons-svelte` to render
    * @type {typeof import("carbon-icons-svelte").CarbonIcon}
    */
-  export let icon = undefined;
+  export let icon = AppSwitcher20;
+
+  /**
+   * Specify the close icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let closeIcon = Close20;
 
   /**
    * Specify the text
@@ -58,12 +64,13 @@
     class:action-text="{text}"
     {...$$restProps}
     on:click
-    on:click|stopPropagation="{() => {
+    on:click="{() => {
       isOpen = !isOpen;
       dispatch(isOpen ? 'open' : 'close');
     }}"
   >
-    <Icon render="{icon || (isOpen ? Close20 : AppSwitcher20)}" />
+    <Icon render="{icon}" style="{isOpen ? 'display: none' : ''}" />
+    <Icon render="{closeIcon}" style="{!isOpen ? 'display: none' : ''}" />
     <slot name="text">
       {#if text}<span>{text}</span>{/if}
     </slot>

types/UIShell/GlobalHeader/HeaderAction.d.ts

@@ -20,6 +20,11 @@ export interface HeaderActionProps
    */
   icon?: typeof import("carbon-icons-svelte").CarbonIcon;
 
+  /**
+   * Specify the close icon from `carbon-icons-svelte` to render
+   */
+  closeIcon?: typeof import("carbon-icons-svelte").CarbonIcon;
+
   /**
    * Specify the text
    * Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)