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

@@ -32,7 +32,11 @@
   </div>
   <HeaderUtilities>
     <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
-    <HeaderAction bind:isOpen="{isOpen1}" icon="{UserAvatarFilledAlt20}">
+    <HeaderAction
+      bind:isOpen="{isOpen1}"
+      icon="{UserAvatarFilledAlt20}"
+      closeIcon="{UserAvatarFilledAlt20}"
+    >
       <HeaderPanelLinks>
         <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
         <HeaderPanelLink>Switcher item 1</HeaderPanelLink>

src/UIShell/GlobalHeader/HeaderAction.svelte

@@ -12,6 +12,12 @@
    */
   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
    * Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)
@@ -63,7 +69,8 @@
       dispatch(isOpen ? 'open' : 'close');
     }}"
   >
-    <Icon render="{icon}" />
+    <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>)