From ec72f61faec2826880af2c0dd7703e45a4fa418e Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Mon, 23 Sep 2024 12:37:48 -0700
Subject: [PATCH] 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 <alex.tideman@temporal.io>
---
 .../components/schedule/schedule-input-payload.svelte    | 2 +-
 src/lib/holocene/combobox/combobox.svelte                | 2 +-
 src/lib/holocene/input/chip-input.svelte                 | 9 ++++++++-
 src/lib/holocene/orderable-list/orderable-list.svelte    | 2 +-
 src/lib/holocene/textarea.svelte                         | 6 +++---
 5 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/schedule/schedule-input-payload.svelte b/src/lib/components/schedule/schedule-input-payload.svelte
index d0a7a7b00..4797a08d5 100644
--- 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
index ad0e0fd23..6e22e4daf 100644
--- 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
index afd51152d..846f51cc6 100644
--- 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
index 93ac3db9e..eb5618a1f 100644
--- 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
index 6ed1a226d..4e2f24474 100644
--- 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}