From 107af4205a9afb034673811efb997c02bb4e5714 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 18 Jan 2023 14:48:04 +0000
Subject: [PATCH] Update fancy components and fix select rounded corners

---
 .../bbui/src/FancyForm/FancyButton.svelte     |   1 -
 .../bbui/src/FancyForm/FancyCheckbox.svelte   |  20 ++-
 packages/bbui/src/FancyForm/FancyField.svelte |   7 +-
 .../bbui/src/FancyForm/FancyFieldLabel.svelte |  24 +++
 packages/bbui/src/FancyForm/FancyForm.svelte  |   4 +-
 packages/bbui/src/FancyForm/FancyInput.svelte |  18 +--
 .../bbui/src/FancyForm/FancySelect.svelte     | 139 ++++++++----------
 7 files changed, 107 insertions(+), 106 deletions(-)
 create mode 100644 packages/bbui/src/FancyForm/FancyFieldLabel.svelte

diff --git a/packages/bbui/src/FancyForm/FancyButton.svelte b/packages/bbui/src/FancyForm/FancyButton.svelte
index 677d98cecc..09615df8fa 100644
--- a/packages/bbui/src/FancyForm/FancyButton.svelte
+++ b/packages/bbui/src/FancyForm/FancyButton.svelte
@@ -22,7 +22,6 @@
 <style>
   img {
     width: 22px;
-    margin-right: 6px;
   }
   div {
     font-size: var(--font-size-l);
diff --git a/packages/bbui/src/FancyForm/FancyCheckbox.svelte b/packages/bbui/src/FancyForm/FancyCheckbox.svelte
index 91b6239bde..84caf117fe 100644
--- a/packages/bbui/src/FancyForm/FancyCheckbox.svelte
+++ b/packages/bbui/src/FancyForm/FancyCheckbox.svelte
@@ -25,10 +25,10 @@
   <span>
     <Checkbox {disabled} {value} />
   </span>
-  {#if text}
-    {text}
-  {/if}
-  <div>
+  <div class="text">
+    {#if text}
+      {text}
+    {/if}
     <slot />
   </div>
 </FancyField>
@@ -37,4 +37,16 @@
   span {
     pointer-events: none;
   }
+  .text {
+    font-size: 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .text > :global(*) {
+    font-size: inherit !important;
+  }
 </style>
diff --git a/packages/bbui/src/FancyForm/FancyField.svelte b/packages/bbui/src/FancyForm/FancyField.svelte
index ecdb262945..536dabad2d 100644
--- a/packages/bbui/src/FancyForm/FancyField.svelte
+++ b/packages/bbui/src/FancyForm/FancyField.svelte
@@ -1,6 +1,7 @@
 <script>
   import Icon from "../Icon/Icon.svelte"
   import { getContext, onMount } from "svelte"
+  import { slide } from "svelte/transition"
 
   export let disabled = false
   export let error = null
@@ -8,6 +9,7 @@
   export let clickable = false
   export let validate
   export let value
+  export let ref
 
   const formContext = getContext("fancy-form")
   const id = Math.random()
@@ -33,6 +35,7 @@
 </script>
 
 <div
+  bind:this={ref}
   class="fancy-field"
   class:error
   class:disabled
@@ -50,7 +53,7 @@
     {/if}
   </div>
   {#if error}
-    <div class="error-message">
+    <div transition:slide|local={{ duration: 130 }} class="error-message">
       {error}
     </div>
   {/if}
@@ -97,7 +100,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: 10px;
+    gap: 16px;
   }
   .field {
     flex: 1 1 auto;
diff --git a/packages/bbui/src/FancyForm/FancyFieldLabel.svelte b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte
new file mode 100644
index 0000000000..b1e29cd9c1
--- /dev/null
+++ b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte
@@ -0,0 +1,24 @@
+<script>
+  export let placeholder = true
+</script>
+
+<div class:placeholder>
+  <slot />
+</div>
+
+<style>
+  div {
+    font-size: 14px;
+    font-weight: 500;
+    transform: translateY(-50%);
+    position: absolute;
+    top: 18px;
+    color: var(--spectrum-global-color-gray-600);
+    transition: font-size 130ms ease-out, top 130ms ease-out;
+  }
+  div.placeholder {
+    top: 50%;
+    font-size: 15px;
+    transform: translateY(-50%);
+  }
+</style>
diff --git a/packages/bbui/src/FancyForm/FancyForm.svelte b/packages/bbui/src/FancyForm/FancyForm.svelte
index f197d81118..f874238572 100644
--- a/packages/bbui/src/FancyForm/FancyForm.svelte
+++ b/packages/bbui/src/FancyForm/FancyForm.svelte
@@ -29,11 +29,11 @@
 </div>
 
 <style>
-  .fancy-form :global(.fancy-field:not(:first-child)) {
+  .fancy-form :global(.fancy-field:not(:first-of-type)) {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
-  .fancy-form :global(.fancy-field:not(:last-child)) {
+  .fancy-form :global(.fancy-field:not(:last-of-type)) {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
diff --git a/packages/bbui/src/FancyForm/FancyInput.svelte b/packages/bbui/src/FancyForm/FancyInput.svelte
index 3ccc86f8b7..0d30da8a7c 100644
--- a/packages/bbui/src/FancyForm/FancyInput.svelte
+++ b/packages/bbui/src/FancyForm/FancyInput.svelte
@@ -1,6 +1,7 @@
 <script>
   import { createEventDispatcher } from "svelte"
   import FancyField from "./FancyField.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
 
   export let label
   export let value
@@ -26,9 +27,7 @@
 
 <FancyField {error} {value} {validate} {disabled} {focused}>
   {#if label}
-    <div class="label" class:placeholder>
-      {label}
-    </div>
+    <FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
   {/if}
   <input
     {disabled}
@@ -42,19 +41,6 @@
 </FancyField>
 
 <style>
-  .label {
-    font-size: 14px;
-    font-weight: 500;
-    transform: translateY(calc(-50% - 12px));
-    position: absolute;
-    top: 50%;
-    color: var(--spectrum-global-color-gray-600);
-    transition: font-size 130ms ease-out, transform 130ms ease-out;
-  }
-  .label.placeholder {
-    font-size: 15px;
-    transform: translateY(-50%);
-  }
   input {
     width: 100%;
     transition: transform 130ms ease-out;
diff --git a/packages/bbui/src/FancyForm/FancySelect.svelte b/packages/bbui/src/FancyForm/FancySelect.svelte
index 59eed3c193..55ff8a8298 100644
--- a/packages/bbui/src/FancyForm/FancySelect.svelte
+++ b/packages/bbui/src/FancyForm/FancySelect.svelte
@@ -3,6 +3,7 @@
   import FancyField from "./FancyField.svelte"
   import Icon from "../Icon/Icon.svelte"
   import Popover from "../Popover/Popover.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
 
   export let label
   export let value
@@ -38,88 +39,59 @@
   }
 </script>
 
-<div bind:this={wrapper}>
-  <FancyField
-    {error}
-    {value}
-    {validate}
-    {disabled}
-    clickable
-    on:click={() => (open = true)}
-  >
-    {#if label}
-      <div class="label" class:placeholder>
-        {label}
-      </div>
+<FancyField
+  bind:ref={wrapper}
+  {error}
+  {value}
+  {validate}
+  {disabled}
+  clickable
+  on:click={() => (open = true)}
+>
+  {#if label}
+    <FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
+  {/if}
+
+  <div class="value" class:placeholder>
+    {value || ""}
+  </div>
+
+  <div class="arrow">
+    <Icon name="ChevronDown" />
+  </div>
+</FancyField>
+
+<Popover
+  anchor={wrapper}
+  align="left"
+  portalTarget={document.documentElement}
+  bind:this={popover}
+  {open}
+  on:close={() => (open = false)}
+  useAnchorWidth={true}
+  maxWidth={null}
+>
+  <div class="popover-content">
+    {#if options.length}
+      {#each options as option, idx}
+        <div
+          class="popover-option"
+          tabindex="0"
+          on:click={() => onChange(getOptionValue(option, idx))}
+        >
+          <span class="option-text">
+            {getOptionLabel(option, idx)}
+          </span>
+          {#if value === getOptionValue(option, idx)}
+            <Icon name="Checkmark" />
+          {/if}
+        </div>
+      {/each}
     {/if}
-
-    <div class="value" class:placeholder>
-      {value || ""}
-    </div>
-
-    <div class="arrow">
-      <Icon name="ChevronDown" />
-    </div>
-  </FancyField>
-</div>
-
-<svelte:head>
-  <script>
-    console.log("FOO")
-  </script>
-</svelte:head>
-
-<span>
-  <Popover
-    anchor={wrapper}
-    align="left"
-    portalTarget={document.documentElement}
-    bind:this={popover}
-    {open}
-    on:close={() => (open = false)}
-    useAnchorWidth={true}
-    maxWidth={null}
-  >
-    <div class="popover-content">
-      {#if options.length}
-        {#each options as option, idx}
-          <div
-            class="popover-option"
-            tabindex="0"
-            on:click={() => onChange(getOptionValue(option, idx))}
-          >
-            <span class="option-text">
-              {getOptionLabel(option, idx)}
-            </span>
-            {#if value === getOptionValue(option, idx)}
-              <Icon name="Checkmark" />
-            {/if}
-          </div>
-        {/each}
-      {/if}
-    </div>
-  </Popover>
-</span>
+  </div>
+</Popover>
 
 <style>
-  span :global(.spectrum-Popover) {
-    background: red !important;
-  }
-
-  .label {
-    font-size: 14px;
-    font-weight: 500;
-    transform: translateY(-50%);
-    position: absolute;
-    top: 18px;
-    color: var(--spectrum-global-color-gray-600);
-    transition: font-size 130ms ease-out, top 130ms ease-out;
-  }
-  .label.placeholder {
-    top: 50%;
-    font-size: 15px;
-    transform: translateY(-50%);
-  }
   .value {
     display: block;
     flex: 1 1 auto;
@@ -128,6 +100,10 @@
     color: var(--spectrum-global-color-gray-900);
     transition: margin-top 130ms ease-out, opacity 130ms ease-out;
     opacity: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 0;
   }
   .value.placeholder {
     opacity: 0;
@@ -139,15 +115,16 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    padding: 10px 0;
+    padding: 7px 0;
   }
   .popover-option {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding: 7px 12px;
+    padding: 7px 16px;
     transition: background 130ms ease-out;
+    font-size: 15px;
   }
   .popover-option:hover {
     background: var(--spectrum-global-color-gray-200);