From ba36ee60682fa9f2d086cf430d5d0d8aff3139a5 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 26 Nov 2020 16:31:01 -0800
Subject: [PATCH] feat(header-action): make panel transition configurable

---
 src/UIShell/GlobalHeader/HeaderAction.svelte | 15 +++++++++++++--
 tests/HeaderSwitcher.test.svelte             |  2 +-
 tests/HeaderUtilities.test.svelte            |  6 +++++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/UIShell/GlobalHeader/HeaderAction.svelte b/src/UIShell/GlobalHeader/HeaderAction.svelte
index a6bf0b43..37e6b2d7 100644
--- a/src/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/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>
diff --git a/tests/HeaderSwitcher.test.svelte b/tests/HeaderSwitcher.test.svelte
index e996cfbf..f1d2843b 100644
--- a/tests/HeaderSwitcher.test.svelte
+++ b/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>
diff --git a/tests/HeaderUtilities.test.svelte b/tests/HeaderUtilities.test.svelte
index ed2eeef3..77a414bb 100644
--- a/tests/HeaderUtilities.test.svelte
+++ b/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>