Padding, border-radius fixes (#2062)

* Small padding fixes * Styling to unround search attributes * Add padding-top to loading on labs mode to better center the logo * Fix datetime rounded, fix max height on menu, add gap * Unround boolean filter
temporalio · Apr 30, 2024 · ee67885 · ee67885
1 parent 340ed37
commit ee67885
Show file tree

Hide file tree

Showing 13 changed files with 22 additions and 38 deletions.
diff --git a/src/lib/components/schedule/schedules-interval-view.svelte b/src/lib/components/schedule/schedules-interval-view.svelte
@@ -100,7 +100,7 @@
   <p>
     {translate('schedules.offset-description')}
   </p>
-  <div class="flex w-48 gap-0">
+  <div class="flex w-48 gap-2">
     <Input
       id="phase"
       class="w-28"
@@ -111,12 +111,10 @@
       maxLength={3}
       hideCount
       error={error(phase)}
-      unroundRight
     />
     <Select
       label={translate('schedules.offset-unit')}
       labelHidden
-      unroundLeft
       id="phase-unit"
       bind:value={offsetUnit}
     >

diff --git a/src/lib/components/workflow/filter-search/boolean-filter.svelte b/src/lib/components/workflow/filter-search/boolean-filter.svelte
@@ -24,7 +24,6 @@
 
 <MenuContainer>
   <MenuButton
-    unroundLeft
     class="!border-l-0"
     id="boolean-filter"
     controls="boolean-filter-menu"

diff --git a/src/lib/components/workflow/filter-search/conditional-menu.svelte b/src/lib/components/workflow/filter-search/conditional-menu.svelte
@@ -43,7 +43,6 @@
 
 <MenuContainer>
   <MenuButton
-    unround
     class="{noBorderRight ? '!border-r-0' : ''} {noBorderLeft
       ? '!border-l-0'
       : ''} whitespace-nowrap"

diff --git a/src/lib/components/workflow/filter-search/datetime-filter.svelte b/src/lib/components/workflow/filter-search/datetime-filter.svelte
@@ -138,7 +138,6 @@
   />
   <MenuContainer>
     <MenuButton
-      unroundLeft
       id="time-range-filter"
       controls="time-range-filter-menu"
       class="whitespace-nowrap"
@@ -148,7 +147,7 @@
     <Menu
       keepOpen
       id="time-range-filter-menu"
-      class="w-[27rem] !overflow-visible"
+      class="max-h-fit w-[27rem] !overflow-visible"
     >
       {#if isTimeRange}
         <MenuItem>
@@ -198,20 +197,18 @@
               name="time-filter-type"
               group={type}
             />
-            <div class="ml-6 flex gap-0 pt-2">
+            <div class="ml-6 flex gap-2 pt-2">
               <Input
                 label={translate('common.relative')}
                 labelHidden
                 id="relative-datetime-input"
                 bind:value={relativeTime}
                 placeholder="00"
                 error={error(relativeTime)}
-                unroundRight
                 class="h-10"
                 disabled={$type !== 'relative'}
               />
               <Select
-                unroundLeft
                 bind:value={timeUnit}
                 id="relative-datetime-unit-input"
                 label={translate('common.time-unit')}

diff --git a/src/lib/components/workflow/filter-search/index.svelte b/src/lib/components/workflow/filter-search/index.svelte
@@ -288,4 +288,17 @@
   .filter {
     @apply grow;
   }
+
+  :global(.attribute-selected) {
+    @apply rounded-r-none;
+  }
+
+  :global(#conditional-menu-button) {
+    @apply rounded-none;
+  }
+
+  :global(#time-range-filter),
+  :global(#boolean-filter) {
+    @apply rounded-l-none;
+  }
 </style>
diff --git a/src/lib/components/workflow/filter-search/search-attribute-menu.svelte b/src/lib/components/workflow/filter-search/search-attribute-menu.svelte
@@ -55,11 +55,10 @@
 <MenuContainer>
   <MenuButton
     controls="search-attribute-menu"
-    unroundRight={Boolean($filter.attribute)}
     disabled={$activeQueryIndex !== null}
     count={$filter.attribute ? 0 : $workflowFilters.length}
     on:click={() => (searchAttributeValue = '')}
-    class="text-nowrap"
+    class="text-nowrap {!!$filter.attribute && 'attribute-selected'}"
   >
     <svelte:fragment slot="leading">
       {#if !$filter.attribute}

diff --git a/src/lib/holocene/menu/menu-button.svelte b/src/lib/holocene/menu/menu-button.svelte
@@ -28,9 +28,6 @@
     hasIndicator?: boolean;
     id?: string;
     label?: string;
-    unround?: boolean;
-    unroundRight?: boolean;
-    unroundLeft?: boolean;
     variant?: MenuButtonVariant;
     class?: string;
     active?: boolean;

diff --git a/src/lib/holocene/menu/menu.svelte b/src/lib/holocene/menu/menu.svelte
@@ -43,7 +43,7 @@
 <ul
   in:fly={{ duration: 100 }}
   role="menu"
-  class={merge('menu', position, className)}
+  class={merge(['menu', 'max-h-[320px]'], position, className)}
   class:hidden={!$open}
   aria-labelledby={id}
   tabindex={-1}
@@ -58,7 +58,7 @@
 
 <style lang="postcss">
   .menu {
-    @apply surface-primary absolute z-20 mt-1 max-h-[320px] min-w-full list-none overflow-auto rounded-lg border border-primary text-primary shadow;
+    @apply surface-primary absolute z-20 mt-1 min-w-full list-none overflow-auto rounded-lg border border-primary text-primary shadow;
 
     &.left {
       @apply left-0 origin-top-left;

diff --git a/src/lib/holocene/radio-input/radio-group.svelte b/src/lib/holocene/radio-input/radio-group.svelte
@@ -26,7 +26,7 @@
   });
 </script>
 
-<div class={merge('flex flex-col gap-2', className)} {...$$restProps}>
+<div class={merge('flex flex-col gap-2 p-1', className)} {...$$restProps}>
   {#if description}
     <p class="font-secondary text-sm font-medium">{description}</p>
   {/if}

diff --git a/src/lib/holocene/select/select.stories.svelte b/src/lib/holocene/select/select.stories.svelte
@@ -16,8 +16,6 @@
       leadingIcon: undefined,
       labelHidden: false,
       disabled: false,
-      unroundLeft: false,
-      unroundRight: false,
     },
     argTypes: {
       label: { name: 'Label', control: 'text' },
@@ -29,16 +27,6 @@
       },
       disabled: { name: 'Disabled', control: 'boolean' },
       labelHidden: { name: 'Label Hidden', control: 'boolean' },
-      unroundLeft: {
-        name: 'Left',
-        control: 'boolean',
-        table: { category: 'Styling', subcategory: 'Unround' },
-      },
-      unroundRight: {
-        name: 'Right',
-        control: 'boolean',
-        table: { category: 'Styling', subcategory: 'Unround' },
-      },
       onChange: { table: { disable: true } },
       value: { table: { disable: true } },
     },

diff --git a/src/lib/holocene/select/select.svelte b/src/lib/holocene/select/select.svelte
@@ -41,8 +41,6 @@
     placeholder?: string;
     disabled?: boolean;
     leadingIcon?: IconName;
-    unroundRight?: boolean;
-    unroundLeft?: boolean;
     onChange?: (value: T) => void;
     'data-testid'?: string;
     variant?: MenuButtonVariant;
@@ -55,8 +53,6 @@
   export let placeholder = '';
   export let disabled = false;
   export let leadingIcon: IconName = null;
-  export let unroundRight = false;
-  export let unroundLeft = false;
   export let onChange: (value: T) => void = noop;
   export let variant: MenuButtonVariant = 'secondary';
 
@@ -107,8 +103,6 @@
   <MenuButton
     hasIndicator={!disabled}
     {disabled}
-    {unroundLeft}
-    {unroundRight}
     controls="{id}-select"
     {variant}
   >

diff --git a/src/lib/holocene/split-button.svelte b/src/lib/holocene/split-button.svelte
@@ -26,7 +26,7 @@
       {label}
     </Button>
     <MenuButton
-      class="max-w-fit grow-0 px-1"
+      class="max-w-fit grow-0 px-3"
       id="{id}-menu-button"
       label={menuLabel}
       controls="{id}-menu"

diff --git a/src/lib/layouts/workflow-run-layout.svelte b/src/lib/layouts/workflow-run-layout.svelte
@@ -160,7 +160,7 @@
     {#if workflowError}
       <WorkflowError error={workflowError} />
     {:else if !$workflowRun.workflow}
-      <Loading />
+      <Loading class="pt-24" />
     {:else}
       <div class="px-8 pt-24 md:pt-20">
         <WorkflowHeader namespace={$page.params.namespace} />