all inputs using BBUI

packages/builder/src/components/common/Input.svelte

@@ -1,62 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { buildStyle } from "../../helpers.js"
-  export let value = ""
-  export let name = ""
-  export let textAlign = "left"
-  export let width = "160px"
-  export let placeholder = ""
-  export let suffix = ""
-  export let onChange = val => {}
-
-  let centerPlaceholder = textAlign === "center"
-
-  let style = buildStyle({ width, textAlign })
-
-  function handleChange(val) {
-    value = val
-    let _value = value !== "auto" ? value + suffix : value
-    onChange(_value)
-  }
-
-  $: displayValue =
-    suffix && value && value.endsWith(suffix)
-      ? value.replace(new RegExp(`${suffix}$`), "")
-      : value || ""
-</script>
-
-<input
-  {name}
-  class:centerPlaceholder
-  type="text"
-  value={displayValue}
-  {placeholder}
-  {style}
-  on:change={e => handleChange(e.target.value)} />
-
-<style>
-  input {
-    /* width: 32px; */
-    height: 36px;
-    font-size: 14px;
-    font-weight: 400;
-    margin: 0px 0px 0px 2px;
-    color: var(--ink);
-    padding: 0px 8px;
-    font-family: inter;
-    width: 164px;
-    box-sizing: border-box;
-    background-color: var(--grey-2);
-    border-radius: 4px;
-    border: 1px solid var(--grey-2);
-    outline: none;
-  }
-
-  input::placeholder {
-    text-align: left;
-  }
-
-  .centerPlaceholder::placeholder {
-    text-align: center;
-  }
-</style>

packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte

@@ -6,7 +6,6 @@
   import IconButton from "../../common/IconButton.svelte"
   import ActionButton from "../../common/ActionButton.svelte"
   import Select from "../../common/Select.svelte"
-  import Input from "../../common/Input.svelte"
   import getIcon from "../../common/icon"
   import { CloseIcon } from "components/common/Icons/"
 

packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte

@@ -0,0 +1,11 @@
+<script>
+  /*
+  This file exists because of how we pass this control to the 
+  properties panel - via a JS reference, not using svelte tags
+  ... checkout the use of Input in propertyCategories to see what i mean
+  */
+  import { Input } from "@budibase/bbui"
+  export let name, value, placeholder, type
+</script>
+
+<Input {name} {value} {placeholder} {type} thin on:change />

packages/builder/src/components/userInterface/propertyCategories.js

@@ -1,9 +1,9 @@
-import Input from "../common/Input.svelte"
+import Input from "./PropertyPanelControls/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
 import Colorpicker from "@budibase/colorpicker"
 /*
-  TODO: Allow for default values for all properties
+  TODO: Allow for default values for all proproperties
 */
 
 export const layout = [

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -1,4 +1,4 @@
-import Input from "../common/Input.svelte"
+import Input from "./PropertyPanelControls/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import Checkbox from "../common/Checkbox.svelte"
 import ModelSelect from "components/userInterface/ModelSelect.svelte"