MenuItem updates (#2361)

* Fix centered option for MenuItem * Update Menu stories * Center selected icon with label in MenuItem * Align checkboxes in EventTypeFilter to start
temporalio · Oct 1, 2024 · 229e732 · 229e732
1 parent fcc8279
commit 229e732
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 36 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
@@ -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
@@ -108,9 +108,15 @@
   <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}
     aria-hidden={disabled ? 'true' : 'false'}
     aria-disabled={disabled}
     tabindex={disabled ? -1 : 0}
@@ -122,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
@@ -134,22 +145,16 @@
     {...$$restProps}
   >
     <slot name="leading" />
-    <div class:centered class="menu-item-wrapper">
-      {#if description}
-        <div class="flex flex-col">
-          <slot />
-          <span class="menu-item-description">
-            {description}
-          </span>
-        </div>
-      {:else}
+    <div class="grow">
+      <div class:centered class="menu-item-wrapper">
         <slot />
-      {/if}
-      {#if selected !== undefined}
-        <div class="flex h-6 w-6 shrink-0">
-          {#if selected}
-            <Icon name="checkmark" />
-          {/if}
+        {#if selected}
+          <Icon name="checkmark" class="shrink-0" />
+        {/if}
+      </div>
+      {#if description}
+        <div class="menu-item-description" class:text-center={centered}>
+          {description}
         </div>
       {/if}
     </div>
@@ -159,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;
@@ -179,14 +184,14 @@
   }
 
   .menu-item-wrapper {
-    @apply flex grow items-center justify-between gap-2;
+    @apply flex items-center justify-between gap-2;
 
     &.centered {
       @apply justify-center;
     }
   }
 
   .menu-item-description {
-    @apply text-xs font-normal text-subtle;
+    @apply mr-6 text-xs font-normal text-subtle;
   }
 </style>
diff --git 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' }} />