From 0489f9243d5d15b55cb85555ed42037127a26e70 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 20 Jan 2023 08:54:17 +0000
Subject: [PATCH] Improve styles of fancy components

---
 packages/bbui/src/ActionButton/ActionButton.svelte  |  1 +
 packages/bbui/src/FancyForm/FancyButtonRadio.svelte | 12 +++++++++---
 packages/bbui/src/FancyForm/FancyCheckbox.svelte    |  1 +
 packages/bbui/src/FancyForm/FancyField.svelte       |  5 +++++
 packages/bbui/src/FancyForm/FancyFieldLabel.svelte  |  1 +
 packages/bbui/src/FancyForm/FancyInput.svelte       |  2 ++
 packages/bbui/src/FancyForm/FancySelect.svelte      |  6 ++++--
 packages/bbui/src/FancyForm/index.js                |  1 +
 8 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index cfc810807e..cc4417be2a 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -88,6 +88,7 @@
   }
   .is-selected:not(.spectrum-ActionButton--emphasized) {
     background: var(--spectrum-global-color-gray-300);
+    border-color: var(--spectrum-global-color-gray-700);
   }
   .noPadding {
     padding: 0;
diff --git a/packages/bbui/src/FancyForm/FancyButtonRadio.svelte b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte
index 0fe9131a0b..719ccea97c 100644
--- a/packages/bbui/src/FancyForm/FancyButtonRadio.svelte
+++ b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte
@@ -33,7 +33,7 @@
   }
 </script>
 
-<FancyField {error} {value} {validate} {disabled}>
+<FancyField {error} {value} {validate} {disabled} autoHeight>
   {#if label}
     <FancyFieldLabel placeholder={false}>{label}</FancyFieldLabel>
   {/if}
@@ -42,7 +42,6 @@
     {#each options as option}
       <ActionButton
         selected={getOptionValue(option) === value}
-        size="S"
         on:click={() => onChange(getOptionValue(option))}
       >
         {getOptionLabel(option)}
@@ -53,11 +52,18 @@
 
 <style>
   .options {
-    margin-top: 22px;
+    margin-top: 34px;
+    margin-bottom: 14px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     gap: 6px;
   }
+  .options :global(.spectrum-ActionButton) {
+    font-size: 15px;
+    line-height: 17px;
+    height: auto;
+    padding: 6px 10px;
+  }
 </style>
diff --git a/packages/bbui/src/FancyForm/FancyCheckbox.svelte b/packages/bbui/src/FancyForm/FancyCheckbox.svelte
index 84caf117fe..191cc79485 100644
--- a/packages/bbui/src/FancyForm/FancyCheckbox.svelte
+++ b/packages/bbui/src/FancyForm/FancyCheckbox.svelte
@@ -39,6 +39,7 @@
   }
   .text {
     font-size: 15px;
+    line-height: 17px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
diff --git a/packages/bbui/src/FancyForm/FancyField.svelte b/packages/bbui/src/FancyForm/FancyField.svelte
index 536dabad2d..89f2dec7d0 100644
--- a/packages/bbui/src/FancyForm/FancyField.svelte
+++ b/packages/bbui/src/FancyForm/FancyField.svelte
@@ -10,6 +10,7 @@
   export let validate
   export let value
   export let ref
+  export let autoHeight
 
   const formContext = getContext("fancy-form")
   const id = Math.random()
@@ -41,6 +42,7 @@
   class:disabled
   class:focused
   class:clickable
+  class:auto-height={autoHeight}
 >
   <div class="content" on:click>
     <div class="field">
@@ -94,6 +96,9 @@
     height: 64px;
     padding: 0 16px;
   }
+  .fancy-field.auto-height .content {
+    height: auto;
+  }
   .content,
   .field {
     display: flex;
diff --git a/packages/bbui/src/FancyForm/FancyFieldLabel.svelte b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte
index 6ae6aede27..181cff50e4 100644
--- a/packages/bbui/src/FancyForm/FancyFieldLabel.svelte
+++ b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte
@@ -9,6 +9,7 @@
 <style>
   div {
     font-size: 14px;
+    line-height: 15px;
     font-weight: 500;
     position: absolute;
     top: 10px;
diff --git a/packages/bbui/src/FancyForm/FancyInput.svelte b/packages/bbui/src/FancyForm/FancyInput.svelte
index 0d30da8a7c..ef254949c8 100644
--- a/packages/bbui/src/FancyForm/FancyInput.svelte
+++ b/packages/bbui/src/FancyForm/FancyInput.svelte
@@ -47,6 +47,8 @@
     transform: translateY(9px);
     background: transparent;
     font-size: 15px;
+    line-height: 17px;
+    font-family: var(--font-sans);
     color: var(--spectrum-global-color-gray-900);
     outline: none;
     border: none;
diff --git a/packages/bbui/src/FancyForm/FancySelect.svelte b/packages/bbui/src/FancyForm/FancySelect.svelte
index 55ff8a8298..240871fc9a 100644
--- a/packages/bbui/src/FancyForm/FancySelect.svelte
+++ b/packages/bbui/src/FancyForm/FancySelect.svelte
@@ -96,16 +96,18 @@
     display: block;
     flex: 1 1 auto;
     font-size: 15px;
-    margin-top: 18px;
+    line-height: 17px;
     color: var(--spectrum-global-color-gray-900);
-    transition: margin-top 130ms ease-out, opacity 130ms ease-out;
+    transition: transform 130ms ease-out, opacity 130ms ease-out;
     opacity: 1;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     width: 0;
+    transform: translateY(9px);
   }
   .value.placeholder {
+    transform: translateY(0);
     opacity: 0;
     pointer-events: none;
     margin-top: 0;
diff --git a/packages/bbui/src/FancyForm/index.js b/packages/bbui/src/FancyForm/index.js
index 836c9ed679..241036fb35 100644
--- a/packages/bbui/src/FancyForm/index.js
+++ b/packages/bbui/src/FancyForm/index.js
@@ -3,3 +3,4 @@ export { default as FancyCheckbox } from "./FancyCheckbox.svelte"
 export { default as FancySelect } from "./FancySelect.svelte"
 export { default as FancyButton } from "./FancyButton.svelte"
 export { default as FancyForm } from "./FancyForm.svelte"
+export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"