Use slots to render lightning bolt icons in the correct position regardless of labels

packages/bbui/src/Form/Core/TextArea.svelte

@@ -75,6 +75,7 @@
   class:is-disabled={disabled}
   class:is-focused={isFocused}
 >
+  <!-- We need to ignore prettier here as we want no whitespace -->
   <!-- prettier-ignore -->
   <textarea
     bind:this={textarea}
@@ -90,6 +91,7 @@
     on:blur
     on:keypress
   >{value || ""}</textarea>
+  <slot />
 </div>
 
 <style>

packages/bbui/src/Form/Core/TextField.svelte

@@ -114,6 +114,7 @@
     inputmode={getInputMode(type)}
     autocomplete={autocompleteValue}
   />
+  <slot />
 </div>
 
 <style>

packages/bbui/src/Form/Input.svelte

@@ -41,5 +41,7 @@
     on:blur
     on:focus
     on:keyup
-  />
+  >
+    <slot />
+  </TextField>
 </Field>

packages/bbui/src/Form/TextArea.svelte

@@ -7,11 +7,13 @@
   export let label: string | undefined = undefined
   export let labelPosition = "above"
   export let placeholder: string | undefined = undefined
-  export let disabled = false
+  export let readonly: boolean = false
+  export let disabled: boolean = false
   export let error: string | undefined = undefined
   export let height: number | undefined = undefined
   export let minHeight: number | undefined = undefined
   export let helpText: string | undefined = undefined
+  export let updateOnChange: boolean = false
 
   let textarea: TextArea
   export function focus() {
@@ -33,11 +35,16 @@
   <TextArea
     bind:this={textarea}
     {disabled}
+    {readonly}
     {value}
     {placeholder}
     {height}
     {minHeight}
+    {updateOnChange}
     on:change={onChange}
     on:keypress
-  />
+    on:scrollable
+  >
+    <slot />
+  </TextArea>
 </Field>

packages/builder/src/components/common/bindings/DrawerBindableInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Icon, Input, Drawer, Button, CoreTextArea } from "@budibase/bbui"
+  import { Icon, Input, Drawer, Button, TextArea } from "@budibase/bbui"
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
@@ -67,7 +67,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="control" class:multiline class:disabled class:scrollable>
   <svelte:component
-    this={multiline ? CoreTextArea : Input}
+    this={multiline ? TextArea : Input}
     {label}
     {disabled}
     readonly={isJS}
@@ -78,18 +78,19 @@
     {placeholder}
     {updateOnChange}
     {autocomplete}
-  />
+  >
-  {#if !disabled && !disableBindings}
+    {#if !disabled && !disableBindings}
-    <div
+      <div
-      class="icon"
+        class="icon"
-      on:click={() => {
+        on:click={() => {
-        builderStore.propertyFocus(key)
+          builderStore.propertyFocus(key)
-        bindingDrawer.show()
+          bindingDrawer.show()
-      }}
+        }}
-    >
+      >
-      <Icon size="S" name="FlashOn" />
+        <Icon size="S" name="FlashOn" />
-    </div>
+      </div>
-  {/if}
+    {/if}
+  </svelte:component>
 </div>
 <Drawer
   on:drawerHide={onDrawerHide}