From 9aa1e5cf43f8d075a52d145d9ba232db089e9e00 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 7 Feb 2022 12:04:21 +0000
Subject: [PATCH] Improve text area and long form height settings

---
 packages/bbui/src/Form/Core/TextArea.svelte      | 16 ++++++++++++++--
 packages/bbui/src/Markdown/MarkdownEditor.svelte |  2 +-
 packages/bbui/src/Markdown/SpectrumMDE.svelte    |  4 ++--
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/bbui/src/Form/Core/TextArea.svelte b/packages/bbui/src/Form/Core/TextArea.svelte
index b615e97bff..465212cd44 100644
--- a/packages/bbui/src/Form/Core/TextArea.svelte
+++ b/packages/bbui/src/Form/Core/TextArea.svelte
@@ -22,11 +22,23 @@
     dispatch("change", event.target.value)
     focus = false
   }
+
+  const getStyleString = (attribute, value) => {
+    if (!attribute || value == null) {
+      return ""
+    }
+    if (isNaN(value)) {
+      return `${attribute}:${value};`
+    }
+    return `${attribute}:${value}px;`
+  }
+
+  $: heightString = getStyleString("height", height)
+  $: minHeightString = getStyleString("min-height", minHeight)
 </script>
 
 <div
-  style={(height ? `height: ${height}px;` : "") +
-    (minHeight ? `min-height: ${minHeight}px` : "")}
+  style={`${heightString}${minHeightString}`}
   class="spectrum-Textfield spectrum-Textfield--multiline"
   class:is-invalid={!!error}
   class:is-disabled={disabled}
diff --git a/packages/bbui/src/Markdown/MarkdownEditor.svelte b/packages/bbui/src/Markdown/MarkdownEditor.svelte
index 9265d14f46..7fb6414ad8 100644
--- a/packages/bbui/src/Markdown/MarkdownEditor.svelte
+++ b/packages/bbui/src/Markdown/MarkdownEditor.svelte
@@ -3,7 +3,7 @@
   import { createEventDispatcher } from "svelte"
 
   export let value = null
-  export let height = "300px"
+  export let height = null
   export let placeholder = null
   export let id = null
   export let fullScreenOffset = 0
diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
index fd7e0840e9..eb7198bf5b 100644
--- a/packages/bbui/src/Markdown/SpectrumMDE.svelte
+++ b/packages/bbui/src/Markdown/SpectrumMDE.svelte
@@ -3,7 +3,7 @@
   import "easymde/dist/easymde.min.css"
   import { onMount } from "svelte"
 
-  export let height = "300px"
+  export let height = null
   export let scroll = true
   export let easyMDEOptions = null
   export let mde = null
@@ -14,7 +14,7 @@
   let element
 
   onMount(() => {
-    height = height || "300px"
+    height = height || "200px"
     mde = new EasyMDE({
       element,
       spellChecker: false,