From e5e5b6cde618988ea454d5a4bf7c554b2790fb1e Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Mon, 30 Sep 2024 15:00:13 -0600
Subject: [PATCH 1/4] Fix centered option for MenuItem

---
 src/lib/holocene/menu/menu-item.svelte | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/lib/holocene/menu/menu-item.svelte b/src/lib/holocene/menu/menu-item.svelte
index e0eb51514..4dabcbfa4 100644
--- a/src/lib/holocene/menu/menu-item.svelte
+++ b/src/lib/holocene/menu/menu-item.svelte
@@ -111,6 +111,7 @@
     class={merge('menu-item', 'm-1', 'px-3', 'py-2', className)}
     class:disabled
     class:hoverable
+    class:justify-center={centered}
     aria-hidden={disabled ? 'true' : 'false'}
     aria-disabled={disabled}
     tabindex={disabled ? -1 : 0}
@@ -136,21 +137,17 @@
     <slot name="leading" />
     <div class:centered class="menu-item-wrapper">
       {#if description}
-        <div class="flex flex-col">
+        <div class="flex flex-col" class:items-center={centered}>
           <slot />
-          <span class="menu-item-description">
+          <span class="menu-item-description" class:text-center={centered}>
             {description}
           </span>
         </div>
       {:else}
         <slot />
       {/if}
-      {#if selected !== undefined}
-        <div class="flex h-6 w-6 shrink-0">
-          {#if selected}
-            <Icon name="checkmark" />
-          {/if}
-        </div>
+      {#if selected}
+        <Icon name="checkmark" class="shrink-0" />
       {/if}
     </div>
     <slot name="trailing" />

From bacbbd3bcaf273ce2d1383a2f3cfcea07be19128 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Mon, 30 Sep 2024 15:01:42 -0600
Subject: [PATCH 2/4] Update Menu stories

---
 src/lib/holocene/menu/menu.stories.svelte | 42 ++++++++++++++---------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/lib/holocene/menu/menu.stories.svelte b/src/lib/holocene/menu/menu.stories.svelte
index d70ac532b..e8b81e48a 100644
--- a/src/lib/holocene/menu/menu.stories.svelte
+++ b/src/lib/holocene/menu/menu.stories.svelte
@@ -31,7 +31,7 @@
       position: {
         name: 'Position',
         control: 'inline-radio',
-        options: ['left', 'right'],
+        options: ['left', 'right', 'top-left', 'top-right'],
       },
       menuElement: {
         name: 'Menu Element',
@@ -51,21 +51,31 @@
 </script>
 
 <Template let:args let:context>
-  <MenuContainer>
-    <MenuButton hasIndicator variant={args.variant} controls={context.id}>
-      <Icon slot="leading" name="temporal-logo" />
-      Menu
-    </MenuButton>
-    <Menu id={context.id}>
-      <MenuItem href="https://temporal.io" on:click={action('click')}>
-        Link
-      </MenuItem>
-      <MenuItem disabled href="https://temporal.io">Disabled Link</MenuItem>
-      <MenuItem on:click={action('click')} selected>Selected</MenuItem>
-      <MenuItem on:click={action('click')}>Standard</MenuItem>
-      <MenuItem on:click={action('click')} destructive>Destructive</MenuItem>
-    </Menu>
-  </MenuContainer>
+  <div class="flex items-center justify-center">
+    <MenuContainer>
+      <MenuButton hasIndicator variant={args.variant} controls={context.id}>
+        <Icon slot="leading" name="temporal-logo" />
+        Menu
+      </MenuButton>
+      <Menu id={context.id} class="w-64" {...args}>
+        <MenuItem href="https://temporal.io" on:click={action('click')}>
+          Link
+        </MenuItem>
+        <MenuItem disabled href="https://temporal.io">Disabled Link</MenuItem>
+        <MenuItem on:click={action('click')} selected>Selected</MenuItem>
+        <MenuItem
+          on:click={action('click')}
+          description="Selected description"
+          selected>Selected With Description</MenuItem
+        >
+        <MenuItem on:click={action('click')}>Standard</MenuItem>
+        <MenuItem on:click={action('click')} description="Standard description"
+          >Standard With Description</MenuItem
+        >
+        <MenuItem on:click={action('click')} destructive>Destructive</MenuItem>
+      </Menu>
+    </MenuContainer>
+  </div>
 </Template>
 
 <Story name="Primary" args={{ variant: 'primary' }} />

From dba2ee3f1c020145a93e3d72db8523bc35d2a96b Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Mon, 30 Sep 2024 15:28:46 -0600
Subject: [PATCH 3/4] Center selected icon with label in MenuItem

---
 src/lib/holocene/menu/menu-item.svelte | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/lib/holocene/menu/menu-item.svelte b/src/lib/holocene/menu/menu-item.svelte
index 4dabcbfa4..4ee9131bb 100644
--- a/src/lib/holocene/menu/menu-item.svelte
+++ b/src/lib/holocene/menu/menu-item.svelte
@@ -135,19 +135,17 @@
     {...$$restProps}
   >
     <slot name="leading" />
-    <div class:centered class="menu-item-wrapper">
+    <div class="grow">
+      <div class:centered class="menu-item-wrapper">
+        <slot />
+        {#if selected}
+          <Icon name="checkmark" class="shrink-0" />
+        {/if}
+      </div>
       {#if description}
-        <div class="flex flex-col" class:items-center={centered}>
-          <slot />
-          <span class="menu-item-description" class:text-center={centered}>
-            {description}
-          </span>
+        <div class="menu-item-description" class:text-center={centered}>
+          {description}
         </div>
-      {:else}
-        <slot />
-      {/if}
-      {#if selected}
-        <Icon name="checkmark" class="shrink-0" />
       {/if}
     </div>
     <slot name="trailing" />
@@ -176,7 +174,7 @@
   }
 
   .menu-item-wrapper {
-    @apply flex grow items-center justify-between gap-2;
+    @apply flex items-center justify-between gap-2;
 
     &.centered {
       @apply justify-center;
@@ -184,6 +182,6 @@
   }
 
   .menu-item-description {
-    @apply text-xs font-normal text-subtle;
+    @apply mr-6 text-xs font-normal text-subtle;
   }
 </style>

From 1fb4ace3c4a13652b26949133e137cf6849eb2c6 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Mon, 30 Sep 2024 15:30:10 -0600
Subject: [PATCH 4/4] Align checkboxes in EventTypeFilter to start

---
 .../lines-and-dots/event-type-filter.svelte      |  1 +
 src/lib/holocene/menu/menu-item.svelte           | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/lines-and-dots/event-type-filter.svelte b/src/lib/components/lines-and-dots/event-type-filter.svelte
index 724217388..f93a1f505 100644
--- a/src/lib/components/lines-and-dots/event-type-filter.svelte
+++ b/src/lib/components/lines-and-dots/event-type-filter.svelte
@@ -120,6 +120,7 @@
         on:click={() => {
           onOptionClick(option);
         }}
+        class="items-start"
       >
         <Checkbox
           on:click={() => onOptionClick(option)}
diff --git a/src/lib/holocene/menu/menu-item.svelte b/src/lib/holocene/menu/menu-item.svelte
index 4ee9131bb..cbe463465 100644
--- a/src/lib/holocene/menu/menu-item.svelte
+++ b/src/lib/holocene/menu/menu-item.svelte
@@ -108,7 +108,12 @@
   <a
     {href}
     role="menuitem"
-    class={merge('menu-item', 'm-1', 'px-3', 'py-2', className)}
+    class={merge(
+      'menu-item',
+      'm-1 px-3 py-2',
+      'flex items-center gap-2',
+      className,
+    )}
     class:disabled
     class:hoverable
     class:justify-center={centered}
@@ -123,7 +128,12 @@
 {:else}
   <li
     role="menuitem"
-    class={merge('menu-item', 'm-1', 'px-3', 'py-2', className)}
+    class={merge(
+      'menu-item',
+      'm-1 px-3 py-2',
+      'flex items-center gap-2',
+      className,
+    )}
     class:destructive
     class:disabled
     class:selected
@@ -154,7 +164,7 @@
 
 <style lang="postcss">
   .menu-item {
-    @apply flex cursor-pointer flex-row items-center gap-2 rounded border border-transparent text-sm font-medium focus-visible:border-inverse focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/70 dark:focus-visible:border-interactive;
+    @apply cursor-pointer rounded border border-transparent text-sm font-medium focus-visible:border-inverse focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/70 dark:focus-visible:border-interactive;
 
     &.hoverable {
       @apply hover:surface-interactive-secondary focus-visible:surface-interactive-secondary;