Update Label spacing (#2336)

* Update Combobox Label spacing to match Select * Update Label spacing on Holocene components to match Select and Input * Update Label spacing on custom components --------- Co-authored-by: Alex Tideman <[email protected]>
temporalio · Sep 23, 2024 · ec72f61 · ec72f61
1 parent 68707df
commit ec72f61
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/src/lib/components/schedule/schedule-input-payload.svelte b/src/lib/components/schedule/schedule-input-payload.svelte
@@ -20,7 +20,7 @@
   };
 </script>
 
-<div class="flex flex-col gap-4">
+<div class="flex flex-col gap-1">
   <Label for="schedule-input" label={translate('workflows.input')} />
   <PayloadDecoder
     value={payloads}

diff --git a/src/lib/holocene/combobox/combobox.svelte b/src/lib/holocene/combobox/combobox.svelte
@@ -255,7 +255,7 @@
 </script>
 
 <MenuContainer {open} on:close={handleMenuClose}>
-  <Label hidden={labelHidden} {required} {label} for={id} />
+  <Label class="pb-1" hidden={labelHidden} {required} {label} for={id} />
   <div class="combobox-wrapper" class:disabled class:invalid={!valid}>
     {#if leadingIcon}
       <Icon width={20} height={20} class="ml-2 shrink-0" name={leadingIcon} />

diff --git a/src/lib/holocene/input/chip-input.svelte b/src/lib/holocene/input/chip-input.svelte
@@ -95,7 +95,14 @@
 </script>
 
 <div class={merge(disabled && 'cursor-not-allowed', className)}>
-  <Label {required} {label} {disabled} hidden={labelHidden} for={id} />
+  <Label
+    class="pb-1"
+    {required}
+    {label}
+    {disabled}
+    hidden={labelHidden}
+    for={id}
+  />
   <div
     bind:this={inputContainer}
     class={merge(

diff --git a/src/lib/holocene/orderable-list/orderable-list.svelte b/src/lib/holocene/orderable-list/orderable-list.svelte
@@ -15,7 +15,7 @@
 
 <style lang="postcss">
   .orderable-section {
-    @apply flex flex-col gap-2;
+    @apply flex flex-col gap-1;
   }
 
   .orderable-list {

diff --git a/src/lib/holocene/textarea.svelte b/src/lib/holocene/textarea.svelte
@@ -39,10 +39,10 @@
   export { className as class };
 </script>
 
-<div class={merge('group', className)}>
+<div class={merge('group flex flex-col gap-1', className)}>
   <Label {required} hidden={labelHidden} {label} for={id} />
   {#if description}
-    <p class="pb-2 text-sm">{description}</p>
+    <p class="-mt-1 text-sm">{description}</p>
   {/if}
   <div
     class={merge(
@@ -70,7 +70,7 @@
       maxlength={maxLength > 0 ? maxLength : undefined}
     />
   </div>
-  <div class="mt-2 flex justify-between gap-2">
+  <div class="flex justify-between gap-2">
     <div
       class="error-msg"
       class:min-width={maxLength}