From 5d153601b33f1f9b1ea7790eec71c886db0c8222 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Sat, 12 Mar 2022 14:14:22 -0800
Subject: [PATCH] fix(header-action-link): align icon with `HeaderAction`
 (#1161)

---
 src/UIShell/GlobalHeader/HeaderAction.svelte  | 68 +++++++++----------
 .../GlobalHeader/HeaderActionLink.svelte      |  9 ++-
 2 files changed, 37 insertions(+), 40 deletions(-)

diff --git a/src/UIShell/GlobalHeader/HeaderAction.svelte b/src/UIShell/GlobalHeader/HeaderAction.svelte
index 124ffef3..a29a5cfd 100644
--- a/src/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/UIShell/GlobalHeader/HeaderAction.svelte
@@ -54,43 +54,41 @@
   }}"
 />
 
-<div>
-  <button
-    bind:this="{ref}"
-    type="button"
-    class:bx--header__action="{true}"
-    class:bx--header__action--active="{isOpen}"
-    class:action-text="{text}"
-    {...$$restProps}
-    on:click
-    on:click="{() => {
-      isOpen = !isOpen;
-      dispatch(isOpen ? 'open' : 'close');
+<button
+  bind:this="{ref}"
+  type="button"
+  class:bx--header__action="{true}"
+  class:bx--header__action--active="{isOpen}"
+  class:action-text="{text}"
+  {...$$restProps}
+  on:click
+  on:click="{() => {
+    isOpen = !isOpen;
+    dispatch(isOpen ? 'open' : 'close');
+  }}"
+>
+  <svelte:component this="{icon}" style="{isOpen ? 'display: none' : ''}" />
+  <svelte:component
+    this="{closeIcon}"
+    style="{!isOpen ? 'display: none' : ''}"
+  />
+  <slot name="text">
+    {#if text}<span>{text}</span>{/if}
+  </slot>
+</button>
+{#if isOpen}
+  <div
+    bind:this="{refPanel}"
+    class:bx--header-panel="{true}"
+    class:bx--header-panel--expanded="{true}"
+    transition:slide="{{
+      ...transition,
+      duration: transition === false ? 0 : transition.duration,
     }}"
   >
-    <svelte:component this="{icon}" style="{isOpen ? 'display: none' : ''}" />
-    <svelte:component
-      this="{closeIcon}"
-      style="{!isOpen ? 'display: none' : ''}"
-    />
-    <slot name="text">
-      {#if text}<span>{text}</span>{/if}
-    </slot>
-  </button>
-  {#if isOpen}
-    <div
-      bind:this="{refPanel}"
-      class:bx--header-panel="{true}"
-      class:bx--header-panel--expanded="{true}"
-      transition:slide="{{
-        ...transition,
-        duration: transition === false ? 0 : transition.duration,
-      }}"
-    >
-      <slot />
-    </div>
-  {/if}
-</div>
+    <slot />
+  </div>
+{/if}
 
 <style>
   .action-text {
diff --git a/src/UIShell/GlobalHeader/HeaderActionLink.svelte b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
index 5fbd292c..508594e2 100644
--- a/src/UIShell/GlobalHeader/HeaderActionLink.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
@@ -22,7 +22,6 @@
   bind:this="{ref}"
   class:bx--header__action="{true}"
   class:bx--header__action--active="{linkIsActive}"
-  class:action-link="{true}"
   href="{href}"
   rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
   {...$$restProps}
@@ -31,11 +30,11 @@
 </a>
 
 <style>
-  .action-link {
-    text-align: center;
+  .bx--header__action {
+    display: flex;
     align-items: center;
-    vertical-align: middle;
     justify-content: center;
-    padding-top: 10px;
+    /** Hot fix to align icon with `HeaderAction` */
+    padding-bottom: 2px;
   }
 </style>