feat(header-action): make panel transition configurable

src/UIShell/GlobalHeader/HeaderAction.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @typedef {{ delay?: number; duration?: number; easing?: (t: number) => number; }} HeaderActionSlideTransition
+   */
+
   /** Set to `true` to open the panel */
   export let isOpen = false;
 
@@ -10,7 +14,7 @@
 
   /**
    * Specify the text
-   * Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>)
+   * Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)
    * @type {string}
    */
   export let text = undefined;
@@ -18,6 +22,13 @@
   /** Obtain a reference to the button HTML element */
   export let ref = null;
 
+  /**
+   * Customize the panel transition (i.e., `transition:slide`)
+   * Set to `false` to disable the transition
+   * @type {false | HeaderActionSlideTransition}
+   */
+  export let transition = { duration: 200 };
+
   import { createEventDispatcher } from "svelte";
   import { slide } from "svelte/transition";
   import Close20 from "carbon-icons-svelte/lib/Close20";
@@ -78,7 +89,7 @@
       bind:this="{refPanel}"
       class:bx--header-panel="{true}"
       class:bx--header-panel--expanded="{true}"
-      transition:slide="{{ duration: 200 }}"
+      transition:slide="{{ ...transition, duration: transition === false ? 0 : transition.duration }}"
     >
       <slot />
     </div>

tests/HeaderSwitcher.test.svelte

@@ -27,7 +27,7 @@
     <SkipToContent />
   </div>
   <HeaderUtilities>
-    <HeaderAction bind:isOpen>
+    <HeaderAction bind:isOpen transition="{false}">
       <HeaderPanelLinks>
         <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
         <HeaderPanelLink>Switcher item 1</HeaderPanelLink>

tests/HeaderUtilities.test.svelte

@@ -20,6 +20,7 @@
     Column,
   } from "../types";
   import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
+  import { quintOut } from "svelte/easing";
 
   let isSideNavOpen = false;
   let isOpen = false;
@@ -32,7 +33,10 @@
   <HeaderUtilities>
     <HeaderActionSearch />
     <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
-    <HeaderAction bind:isOpen>
+    <HeaderAction
+      bind:isOpen
+      transition="{{ duration: 400, easing: quintOut }}"
+    >
       <HeaderPanelLinks>
         <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
         <HeaderPanelLink>Switcher item 1</HeaderPanelLink>