From 1eebab89105ac9120f2a452afcc9779b72ffd218 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 25 Jan 2023 15:55:57 +0000
Subject: [PATCH] Add suffix prop to fancy input component

---
 packages/bbui/src/FancyForm/FancyInput.svelte | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/bbui/src/FancyForm/FancyInput.svelte b/packages/bbui/src/FancyForm/FancyInput.svelte
index ef254949c8..7437deeb98 100644
--- a/packages/bbui/src/FancyForm/FancyInput.svelte
+++ b/packages/bbui/src/FancyForm/FancyInput.svelte
@@ -2,6 +2,7 @@
   import { createEventDispatcher } from "svelte"
   import FancyField from "./FancyField.svelte"
   import FancyFieldLabel from "./FancyFieldLabel.svelte"
+  import { fade } from "svelte/transition"
 
   export let label
   export let value
@@ -9,6 +10,7 @@
   export let disabled = false
   export let error = null
   export let validate = null
+  export let suffix = null
 
   const dispatch = createEventDispatcher()
 
@@ -38,6 +40,9 @@
     on:blur={() => (focused = false)}
     class:placeholder
   />
+  {#if suffix && !placeholder}
+    <div in:fade|local={{ duration: 130 }} class="suffix">{suffix}</div>
+  {/if}
 </FancyField>
 
 <style>
@@ -60,4 +65,11 @@
     left: 0;
     height: 100%;
   }
+  .suffix {
+    color: var(--spectrum-global-color-gray-600);
+    transform: translateY(9px);
+    font-size: 15px;
+    line-height: 17px;
+    font-family: var(--font-sans);
+  }
 </style>