Make UI Shell HeaderAction panel transition configurable (#419)

* fix(ui-shell): remove fly transition from hamburger menu

* feat(header-action): make panel transition configurable

* chore: rebuild types, docs

* docs(ui-shell): document transition prop in Header app switcher example

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>