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/Accordion/AccordionItem.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the title of the accordion item heading
-   * Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
+   * Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
    */
   export let title = "title";
 

src/Button/Button.svelte

@@ -47,7 +47,7 @@
 
   /**
    * Set to `true` to render a custom HTML element
-   * Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
+   * Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)
    */
   export let as = false;
 

src/CodeSnippet/CodeSnippet.svelte

@@ -7,7 +7,7 @@
 
   /**
    * Set the code snippet text
-   * Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
+   * Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
    * @type {string}
    */
   export let code = undefined;

src/ContentSwitcher/Switch.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the switch text
-   * Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
+   * Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>)
    */
   export let text = "Provide text";
 

src/Grid/Column.svelte

@@ -13,7 +13,7 @@
 
   /**
    * Set to `true` to render a custom HTML element
-   * Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)
+   * Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)
    */
   export let as = false;
 

src/Grid/Grid.svelte

@@ -6,7 +6,7 @@
 
   /**
    * Set to `true` to render a custom HTML element
-   * Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)
+   * Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)
    */
   export let as = false;
 

src/Grid/Row.svelte

@@ -6,7 +6,7 @@
 
   /**
    * Set to `true` to render a custom HTML element
-   * Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)
+   * Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)
    */
   export let as = false;
 

src/Tabs/Tab.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the tab label
-   * Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>)
+   * Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)
    */
   export let label = "";
 

src/Tooltip/Tooltip.svelte

@@ -19,7 +19,7 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render for the tooltip button
-   * Icon size must be 16px (e.g. `Add16`, `Task16`)
+   * Icon size must be 16px (e.g., `Add16`, `Task16`)
    * @type {typeof import("carbon-icons-svelte").CarbonIcon}
    */
   export let icon = Information16;

src/UIShell/GlobalHeader/Header.svelte

@@ -25,7 +25,7 @@
 
   /**
    * Specify the platform name
-   * Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>)
+   * Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>)
    */
   export let platformName = "";
 

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>

src/UIShell/SideNav/HamburgerMenu.svelte

@@ -11,22 +11,20 @@
   /** Obtain a reference to the HTML button element */
   export let ref = null;
 
-  import { fly } from "svelte/transition";
   import Close20 from "carbon-icons-svelte/lib/Close20";
   import Menu20 from "carbon-icons-svelte/lib/Menu20";
   import { Icon } from "../../Icon";
 </script>
 
 <button
-  type="button"
   bind:this="{ref}"
+  type="button"
   title="Open menu"
   aria-label="{ariaLabel}"
   class:bx--header__action="{true}"
   class:bx--header__menu-trigger="{true}"
   class:bx--header__menu-toggle="{true}"
   {...$$restProps}
-  transition:fly="{{ x: -200, delay: 50, duration: 250 }}"
   on:click
   on:click="{() => (isOpen = !isOpen)}"
 >