Merge pull request #543 from mjashanks/master

Cleanup - Using BBUI components

packages/builder/cypress/support/commands.js

@@ -131,9 +131,9 @@ Cypress.Commands.add("navigateToFrontend", () => {
 
 Cypress.Commands.add("createScreen", (screenName, route) => {
   cy.get(".newscreen").click()
-  cy.get(".uk-input:first").type(screenName)
+  cy.get("[data-cy=new-screen-dialog] input:first").type(screenName)
   if (route) {
-    cy.get(".uk-input:last").type(route)
+    cy.get("[data-cy=new-screen-dialog] input:last").type(route)
   }
   cy.get(".uk-modal-footer").within(() => {
     cy.contains("Create Screen").click()

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

@@ -29,8 +29,10 @@
   }
 
   const ok = () => {
+    const result = onOk()
+    // allow caller to return false, to cancel the "ok"
+    if (result === false) return
     hide()
-    onOk()
   }
 </script>
 

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/common/Inputs/InputGroup.svelte

@@ -1,50 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import Input from "../Input.svelte"
-
-  export let meta = []
-  export let label = ""
-  export let value = ["0", "0", "0", "0"]
-  export let suffix = ""
-
-  export let onChange = () => {}
-
-  function handleChange(val, idx) {
-    value.splice(idx, 1, val !== "auto" && suffix ? val + suffix : val)
-
-    value = value
-    let _value = value.map(v =>
-      suffix && !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
-    )
-    onChange(_value)
-  }
-
-  $: displayValues =
-    value && suffix
-      ? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
-      : value || []
-</script>
-
-<div class="input-container">
-  <div class="label">{label}</div>
-  <div class="inputs-group">
-    {#each meta as m, i}
-      <Input
-        width="37px"
-        textAlign="center"
-        placeholder={m.placeholder || ''}
-        value={!displayValues || displayValues[i] === '0' ? '' : displayValues[i]}
-        onChange={value => handleChange(value || 0, i)} />
-    {/each}
-  </div>
-</div>
-
-<style>
-  .label {
-    flex: 0;
-  }
-
-  .inputs-group {
-    flex: 1;
-  }
-</style>

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

@@ -1,65 +0,0 @@
-<script>
-  import getIcon from "./icon"
-
-  export let icon
-  export let value
-</script>
-
-<div class="select-container">
-  {#if icon}
-    <i class={icon} />
-  {/if}
-  <select class:adjusted={icon} on:change bind:value>
-    <slot />
-  </select>
-  <span class="arrow">
-    {@html getIcon('chevron-down', '24')}
-  </span>
-</div>
-
-<style>
-  .select-container {
-    font-size: 14px;
-    position: relative;
-    border: var(--grey-4) 1px solid;
-  }
-
-  .adjusted {
-    padding-left: 30px;
-  }
-
-  i {
-    position: absolute;
-    left: 10px;
-    top: 10px;
-  }
-
-  select {
-    height: 40px;
-    display: block;
-    font-family: sans-serif;
-    font-weight: 400;
-    font-size: 14px;
-    color: var(--ink);
-    padding: 0 40px 0px 20px;
-    width: 100%;
-    max-width: 100%;
-    box-sizing: border-box;
-    margin: 0;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    background: var(--white);
-  }
-
-  .arrow {
-    position: absolute;
-    right: 10px;
-    bottom: 0;
-    margin: auto;
-    width: 30px;
-    height: 30px;
-    pointer-events: none;
-    color: var(--ink);
-  }
-</style>

packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte

@@ -3,7 +3,6 @@
   import fsort from "fast-sort"
   import { store, backendUiStore } from "builderStore"
   import { Button, Icon } from "@budibase/bbui"
-  import Select from "components/common/Select.svelte"
   import ActionButton from "components/common/ActionButton.svelte"
   import LinkedRecord from "./LinkedRecord.svelte"
   import TablePagination from "./TablePagination.svelte"

packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte

@@ -5,7 +5,6 @@
   import { compose, map, get, flatten } from "lodash/fp"
   import { Input, TextArea, Button } from "@budibase/bbui"
   import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
-  import Select from "components/common/Select.svelte"
   import RecordFieldControl from "./RecordFieldControl.svelte"
   import * as api from "../api"
   import ErrorsBox from "components/common/ErrorsBox.svelte"

packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte

@@ -1,94 +0,0 @@
-<script>
-  import { store, backendUiStore } from "builderStore"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import * as api from "../api"
-
-  export let onClosed
-
-  let username
-  let password
-  let accessLevelId
-
-  $: valid = username && password && accessLevelId
-  $: appId = $store.appId
-
-  async function createUser() {
-    const user = { name: username, username, password, accessLevelId }
-    const response = await api.createUser(user)
-    backendUiStore.actions.users.create(response)
-    onClosed()
-  }
-</script>
-
-<form on:submit|preventDefault class="uk-form-stacked">
-  <div class="main">
-    <div class="heading">
-      <i class="ri-list-settings-line button--toggled" />
-      <div class="title">Create User</div>
-    </div>
-    <div class="uk-margin">
-      <label class="uk-form-label" for="form-stacked-text">Username</label>
-      <input
-        data-cy="username"
-        class="uk-input"
-        type="text"
-        bind:value={username} />
-    </div>
-    <div class="uk-margin">
-      <label class="uk-form-label" for="form-stacked-text">Password</label>
-      <input
-        data-cy="password"
-        class="uk-input"
-        type="password"
-        bind:value={password} />
-    </div>
-    <div class="uk-margin">
-      <label class="uk-form-label" for="form-stacked-text">Access Level</label>
-      <select
-        data-cy="accessLevel"
-        class="uk-select"
-        bind:value={accessLevelId}>
-        <option value="" />
-        <option value="POWER_USER">Power User</option>
-        <option value="ADMIN">Admin</option>
-      </select>
-    </div>
-  </div>
-  <footer>
-    <div class="button">
-      <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
-    </div>
-    <ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
-  </footer>
-</form>
-
-<style>
-  .main {
-    padding: 40px 40px 20px 40px;
-  }
-
-  .title {
-    font-size: 24px;
-    font-weight: 600;
-    color: var(--ink);
-    margin-left: 12px;
-  }
-
-  .heading {
-    display: flex;
-    align-items: baseline;
-  }
-
-  footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 20px;
-    background: var(--grey-1);
-    border-radius: 0 0 5px 5px;
-  }
-
-  .button {
-    margin-right: 20px;
-  }
-</style>

packages/builder/src/components/database/ModelDataTable/modals/index.js

@@ -1,3 +1,2 @@
 export { default as DeleteRecordModal } from "./DeleteRecord.svelte"
 export { default as CreateEditRecordModal } from "./CreateEditRecord.svelte"
-export { default as CreateUserModal } from "./CreateUser.svelte"

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -1,6 +1,5 @@
 <script>
   import { setContext, onMount } from "svelte"
-  import PropsView from "./PropsView.svelte"
 
   import { store } from "builderStore"
   import IconButton from "components/common/IconButton.svelte"
@@ -11,7 +10,6 @@
     CircleIndicator,
     EventsIcon,
   } from "components/common/Icons/"
-  import LayoutEditor from "./LayoutEditor.svelte"
   import EventsEditor from "./EventsEditor"
   import panelStructure from "./temporaryPanelStructure.js"
   import CategoryTab from "./CategoryTab.svelte"

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

@@ -1,12 +1,10 @@
 <script>
   import { store } from "builderStore"
-  import { Button } from "@budibase/bbui"
+  import { Button, Select } from "@budibase/bbui"
   import Modal from "../../common/Modal.svelte"
   import HandlerSelector from "./HandlerSelector.svelte"
   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/EventsEditor/HandlerSelector.svelte

@@ -1,7 +1,6 @@
 <script>
-  import { Button } from "@budibase/bbui"
+  import { Button, Select } from "@budibase/bbui"
   import IconButton from "components/common/IconButton.svelte"
-  import Select from "components/common/Select.svelte"
   import StateBindingCascader from "./StateBindingCascader.svelte"
   import { find, map, keys, reduce, keyBy } from "lodash/fp"
   import { pipe } from "components/common/core"

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

@@ -1,7 +1,6 @@
 <script>
-  import { Input } from "@budibase/bbui"
+  import { Input, Select } from "@budibase/bbui"
   import IconButton from "components/common/IconButton.svelte"
-  import Select from "components/common/Select.svelte"
   import { find, map, keys, reduce, keyBy } from "lodash/fp"
   import { pipe } from "components/common/core"
   import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"

packages/builder/src/components/userInterface/LayoutEditor.svelte

@@ -1,170 +0,0 @@
-<script>
-  import InputGroup from "../common/Inputs/InputGroup.svelte"
-  import LayoutTemplateControls from "./LayoutTemplateControls.svelte"
-
-  export let onStyleChanged = () => {}
-  export let component
-
-  const tbrl = [
-    { placeholder: "T" },
-    { placeholder: "R" },
-    { placeholder: "B" },
-    { placeholder: "L" },
-  ]
-
-  const se = [{ placeholder: "START" }, { placeholder: "END" }]
-
-  const single = [{ placeholder: "" }]
-
-  $: layout = {
-    ...component._styles.position,
-    ...component._styles.layout,
-  }
-
-  $: layouts = {
-    templaterows: ["Grid Rows", single],
-    templatecolumns: ["Grid Columns", single],
-  }
-
-  $: display = {
-    direction: ["Direction", single],
-    align: ["Align", single],
-    justify: ["Justify", single],
-  }
-
-  $: positions = {
-    column: ["Column", se],
-    row: ["Row", se],
-  }
-
-  $: spacing = {
-    margin: ["Margin", tbrl, "small"],
-    padding: ["Padding", tbrl, "small"],
-  }
-
-  $: size = {
-    height: ["Height", single],
-    width: ["Width", single],
-  }
-
-  $: zindex = {
-    zindex: ["Z-Index", single],
-  }
-
-  const newValue = n => Array(n).fill("")
-</script>
-
-<h3>Layout</h3>
-<div class="layout-pos">
-  {#each Object.entries(display) as [key, [name, meta, size]] (component._id + key)}
-    <div class="grid">
-      <h5>{name}:</h5>
-      <LayoutTemplateControls
-        onStyleChanged={_value => onStyleChanged('layout', key, _value)}
-        values={layout[key] || newValue(meta.length)}
-        propertyName={name}
-        {meta}
-        {size}
-        type="text" />
-    </div>
-  {/each}
-</div>
-
-<!-- <h4>Positioning</h4>
-<div class="layout-pos">
-  {#each Object.entries(positions) as [key, [name, meta, size]] (component._id + key)}
-    <div class="grid">
-      <h5>{name}:</h5>
-      <InputGroup
-        onStyleChanged={_value => onStyleChanged('position', key, _value)}
-        values={layout[key] || newValue(meta.length)}
-        {meta}
-        {size} />
-    </div>
-  {/each}
-</div> -->
-
-<h3>Spacing</h3>
-<div class="layout-spacing">
-  {#each Object.entries(spacing) as [key, [name, meta, size]] (component._id + key)}
-    <div class="grid">
-      <h5>{name}:</h5>
-      <InputGroup
-        onStyleChanged={_value => onStyleChanged('position', key, _value)}
-        values={layout[key] || newValue(meta.length)}
-        {meta}
-        {size}
-        type="text" />
-    </div>
-  {/each}
-</div>
-
-<h3>Size</h3>
-<div class="layout-layer">
-  {#each Object.entries(size) as [key, [name, meta, size]] (component._id + key)}
-    <div class="grid">
-      <h5>{name}:</h5>
-      <InputGroup
-        onStyleChanged={_value => onStyleChanged('position', key, _value)}
-        values={layout[key] || newValue(meta.length)}
-        type="text"
-        {meta}
-        {size} />
-    </div>
-  {/each}
-</div>
-
-<h3>Order</h3>
-<div class="layout-layer">
-  {#each Object.entries(zindex) as [key, [name, meta, size]] (component._id + key)}
-    <div class="grid">
-      <h5>{name}:</h5>
-      <InputGroup
-        onStyleChanged={_value => onStyleChanged('position', key, _value)}
-        values={layout[key] || newValue(meta.length)}
-        {meta}
-        {size} />
-    </div>
-  {/each}
-</div>
-
-<style>
-  h3 {
-    text-transform: uppercase;
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--ink);
-    opacity: 0.6;
-    margin-bottom: 10px;
-  }
-
-  h4 {
-    text-transform: uppercase;
-    font-size: 10px;
-    font-weight: 600;
-    color: var(--ink);
-    opacity: 0.4;
-    margin-bottom: 10px;
-  }
-
-  h5 {
-    font-size: 13px;
-    font-weight: 400;
-    color: var(--ink);
-    opacity: 0.8;
-    padding-top: 13px;
-    margin-bottom: 0;
-  }
-
-  div > div {
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-gap: 10px;
-    height: 40px;
-    margin-bottom: 15px;
-  }
-
-  .grid {
-    grid-template-columns: 70px 2fr;
-  }
-</style>

packages/builder/src/components/userInterface/NewScreen.svelte

@@ -1,6 +1,5 @@
 <script>
   import { store } from "builderStore"
-  import PropsView from "./PropsView.svelte"
   import Button from "components/common/Button.svelte"
   import ActionButton from "components/common/ActionButton.svelte"
   import ButtonGroup from "components/common/ButtonGroup.svelte"
@@ -9,6 +8,7 @@
   import UIkit from "uikit"
   import { isRootComponent } from "./pagesParsing/searchComponents"
   import { splitName } from "./pagesParsing/splitRootComponentName.js"
+  import { Input, Select } from "@budibase/bbui"
 
   import { find, filter, some, map, includes } from "lodash/fp"
   import { assign } from "lodash"
@@ -22,8 +22,7 @@
   let layoutComponent
   let screens
   let name = ""
-
+  let routeError
-  let saveAttempted = false
 
   $: layoutComponents = Object.values($store.components).filter(
     componentDefinition => componentDefinition.container
@@ -38,18 +37,21 @@
   $: route = !route && $store.screens.length === 0 ? "*" : route
 
   const save = () => {
-    saveAttempted = true
+    if (!route) {
+      routeError = "Url is required"
+    } else {
+      if (routeNameExists(route)) {
+        routeError = "This url is already taken"
+      } else {
+        routeError = ""
+      }
+    }
 
-    const isValid =
+    if (routeError) return false
-      name.length > 0 &&
-      !screenNameExists(name) &&
-      route.length > 0 &&
-      !routeNameExists(route) &&
-      layoutComponent
-
-    if (!isValid) return
 
     store.createScreen(name, route, layoutComponent._component)
+    name = ""
+    route = ""
     dialog.hide()
   }
 
@@ -57,12 +59,6 @@
     dialog.hide()
   }
 
-  const screenNameExists = name => {
-    return $store.screens.some(
-      screen => screen.name.toLowerCase() === name.toLowerCase()
-    )
-  }
-
   const routeNameExists = route => {
     return $store.screens.some(
       screen => screen.route.toLowerCase() === route.toLowerCase()
@@ -83,40 +79,26 @@
   onOk={save}
   okText="Create Screen">
 
-  <div class="uk-form-horizontal">
+  <div data-cy="new-screen-dialog">
     <div class="uk-margin">
-      <label class="uk-form-label">Name</label>
+      <Input label="Name" bind:value={name} />
-      <div class="uk-form-controls">
-        <input
-          class="uk-input uk-form-small"
-          class:uk-form-danger={saveAttempted && (name.length === 0 || screenNameExists(name))}
-          bind:value={name} />
-      </div>
     </div>
 
     <div class="uk-margin">
-      <label class="uk-form-label">Route (URL)</label>
+      <Input
-      <div class="uk-form-controls">
+        label="Url"
-        <input
+        error={routeError}
-          class="uk-input uk-form-small"
-          class:uk-form-danger={saveAttempted && (route.length === 0 || routeNameExists(route))}
         bind:value={route}
         on:change={routeChanged} />
     </div>
-    </div>
 
     <div class="uk-margin">
-      <label class="uk-form-label">Layout Component</label>
+      <label>Layout Component</label>
-      <div class="uk-form-controls">
+      <Select bind:value={layoutComponent} secondary>
-        <select
-          class="uk-select uk-form-small"
-          bind:value={layoutComponent}
-          class:uk-form-danger={saveAttempted && !layoutComponent}>
         {#each layoutComponents as { _component, name }}
           <option value={_component}>{name}</option>
         {/each}
-        </select>
+      </Select>
-      </div>
     </div>
   </div>
 
@@ -127,28 +109,4 @@
     display: flex;
     flex-direction: column;
   }
-
-  .uk-form-controls {
-    margin-left: 0 !important;
-  }
-
-  .uk-form-label {
-    padding-bottom: 10px;
-    font-weight: 500;
-    font-size: 16px;
-    color: var(--grey-7);
-  }
-
-  .uk-input {
-    height: 40px !important;
-    border-radius: 3px;
-  }
-
-  .uk-select {
-    height: 40px !important;
-    font-weight: 500px;
-    color: var(--grey-5);
-    border: 1px solid var(--grey-2);
-    border-radius: 3px;
-  }
 </style>

packages/builder/src/components/userInterface/PropControl.svelte

@@ -1,44 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import Checkbox from "../common/Checkbox.svelte"
-  import StateBindingControl from "./StateBindingControl.svelte"
-
-  export let index
-  export let prop_name
-  export let prop_value
-  export let prop_definition = {}
-</script>
-
-<div class="root">
-  {#if prop_definition.type !== 'event'}
-    <h5>{prop_name}</h5>
-    <StateBindingControl
-      value={prop_value}
-      type={prop_definition.type || prop_definition}
-      options={prop_definition.options}
-      styleBindingProperty={prop_definition.styleBindingProperty}
-      onChanged={v => store.setComponentProp(prop_name, v)} />
-  {/if}
-</div>
-
-<style>
-  .root {
-    height: 40px;
-    margin-bottom: 15px;
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: 70px 1fr;
-    grid-gap: 10px;
-    align-items: baseline;
-  }
-
-  h5 {
-    word-wrap: break-word;
-    font-size: 13px;
-    font-weight: 400;
-    color: var(--ink);
-    opacity: 0.8;
-    padding-top: 13px;
-    margin-bottom: 0;
-  }
-</style>

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/PropsView.svelte

@@ -1,52 +0,0 @@
-<script>
-  import { some, includes, filter } from "lodash/fp"
-  import PropControl from "./PropControl.svelte"
-  import IconButton from "../common/IconButton.svelte"
-
-  export let component
-  export let components
-
-  let errors = []
-  const props_to_ignore = ["_component", "_children", "_styles", "_code", "_id"]
-
-  $: componentDef = components[component._component]
-</script>
-
-<div class="root">
-
-  <form on:submit|preventDefault class="uk-form-stacked form-root">
-    {#if componentDef}
-      {#each Object.entries(componentDef.props) as [prop_name, prop_def], index}
-        {#if prop_def !== 'event'}
-          <div class="prop-container">
-            <PropControl
-              {prop_name}
-              prop_value={component[prop_name]}
-              prop_definition={prop_def}
-              {index}
-              disabled={false} />
-
-          </div>
-        {/if}
-      {/each}
-    {/if}
-  </form>
-
-</div>
-
-<style>
-  .root {
-    font-size: 10pt;
-    width: 100%;
-  }
-
-  .form-root {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .prop-container {
-    flex: 1 1 auto;
-    min-width: 250px;
-  }
-</style>

packages/builder/src/components/userInterface/SettingsView.svelte

@@ -1,7 +1,6 @@
 <script>
   import PropertyControl from "./PropertyControl.svelte"
-  import InputGroup from "../common/Inputs/InputGroup.svelte"
+  import Input from "./PropertyPanelControls/Input.svelte"
-  import Input from "../common/Input.svelte"
   import { goto } from "@sveltech/routify"
   import { excludeProps } from "./propertyCategories.js"
 

packages/builder/src/components/userInterface/StateBindingControl.svelte

@@ -1,63 +0,0 @@
-<script>
-  import { backendUiStore } from "builderStore"
-  import IconButton from "../common/IconButton.svelte"
-  import Input from "../common/Input.svelte"
-
-  export let value = ""
-  export let onChanged = () => {}
-  export let type = ""
-  export let options = []
-  export let styleBindingProperty = ""
-
-  $: bindOptionToStyle = !!styleBindingProperty
-</script>
-
-<div class="unbound-container">
-  {#if type === 'bool'}
-    <div>
-      <IconButton
-        icon={value == true ? 'check-square' : 'square'}
-        size="19"
-        on:click={() => onChanged(!value)} />
-    </div>
-  {:else if type === 'models'}
-    <select
-      class="uk-select uk-form-small"
-      bind:value
-      on:change={() => {
-        onChanged(value)
-      }}>
-      {#each $backendUiStore.models || [] as option}
-        <option value={option}>{option.name}</option>
-      {/each}
-    </select>
-  {:else if type === 'options' || type === 'models'}
-    <select
-      class="uk-select uk-form-small"
-      {value}
-      on:change={ev => onChanged(ev.target.value)}>
-      {#each options || [] as option}
-        {#if bindOptionToStyle}
-          <option style={`${styleBindingProperty}: ${option};`} value={option}>
-            {option}
-          </option>
-        {:else}
-          <option value={option}>{option}</option>
-        {/if}
-      {/each}
-    </select>
-  {/if}
-</div>
-
-<style>
-  .unbound-container {
-    display: flex;
-  }
-
-  .bound-header > div:nth-child(1) {
-    flex: 1 0 auto;
-    width: 30px;
-    color: var(--secondary50);
-    padding-left: 5px;
-  }
-</style>

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

@@ -1,4 +1,4 @@
-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"

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"

packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte

@@ -1,5 +1,6 @@
 <script>
   import { backendUiStore } from "builderStore"
+  import { Input } from "@budibase/bbui"
 
   export let value
 </script>
@@ -19,8 +20,7 @@
     <label class="uk-form-label fields">Fields</label>
     {#each Object.keys(value.model.schema) as field}
       <div class="uk-form-controls uk-margin">
-        <label class="uk-form-label">{field}</label>
+        <Input bind:value={value[field]} label={field} />
-        <input type="text" class="budibase__input" bind:value={value[field]} />
       </div>
     {/each}
   </div>

packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte

@@ -5,7 +5,7 @@
   import { notifier } from "builderStore/store/notifications"
   import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
   import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
-  import { Button } from "@budibase/bbui"
+  import { Button, Input } from "@budibase/bbui"
 
   const { open, close } = getContext("simple-modal")
 
@@ -112,13 +112,7 @@
         <div class="panel-body">
           <div class="block-label">Workflow: {workflow.name}</div>
           <div class="config-item">
-            <label>Name</label>
+            <Input label="Name" bind:value={workflow.name} thin />
-            <div class="form">
-              <input
-                type="text"
-                class="budibase_input"
-                bind:value={workflow.name} />
-            </div>
           </div>
           <div class="config-item">
             <label class="uk-form-label">User Access</label>
@@ -194,28 +188,12 @@
     margin-bottom: 20px;
   }
 
-  .budibase_input {
-    height: 36px;
-    width: 244px;
-    border-radius: 3px;
-    background-color: var(--grey-2);
-    border: 1px solid var(--grey-2);
-    text-align: left;
-    color: var(--ink);
-    font-size: 14px;
-    padding-left: 12px;
-  }
-
   header > span {
     color: var(--grey-5);
     margin-right: 20px;
     cursor: pointer;
   }
 
-  .form {
-    margin-top: 12px;
-  }
-
   label {
     font-weight: 500;
     font-size: 14px;

packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte

@@ -3,6 +3,7 @@
   import ComponentSelector from "./ParamInputs/ComponentSelector.svelte"
   import ModelSelector from "./ParamInputs/ModelSelector.svelte"
   import RecordSelector from "./ParamInputs/RecordSelector.svelte"
+  import { Input, TextArea, Select } from "@budibase/bbui"
 
   export let workflowBlock
 
@@ -18,42 +19,34 @@
   <div class="block-field">
     <label class="label">{parameter}</label>
     {#if Array.isArray(type)}
-      <select class="budibase_input" bind:value={workflowBlock.args[parameter]}>
+      <Select bind:value={workflowBlock.args[parameter]} thin>
         {#each type as option}
           <option value={option}>{option}</option>
         {/each}
-      </select>
+      </Select>
     {:else if type === 'component'}
       <ComponentSelector bind:value={workflowBlock.args[parameter]} />
     {:else if type === 'accessLevel'}
-      <select class="budibase_input" bind:value={workflowBlock.args[parameter]}>
+      <Select bind:value={workflowBlock.args[parameter]} thin>
         <option value="ADMIN">Admin</option>
         <option value="POWER_USER">Power User</option>
-      </select>
+      </Select>
     {:else if type === 'password'}
-      <input
+      <Input type="password" thin bind:value={workflowBlock.args[parameter]} />
-        type="password"
-        class="budibase_input"
-        bind:value={workflowBlock.args[parameter]} />
     {:else if type === 'number'}
-      <input
+      <Input type="number" thin bind:value={workflowBlock.args[parameter]} />
-        type="number"
-        class="budibase_input"
-        bind:value={workflowBlock.args[parameter]} />
     {:else if type === 'longText'}
-      <textarea
+      <TextArea
         type="text"
-        class="budibase_input"
+        thin
-        bind:value={workflowBlock.args[parameter]} />
+        bind:value={workflowBlock.args[parameter]}
+        label="" />
     {:else if type === 'model'}
       <ModelSelector bind:value={workflowBlock.args[parameter]} />
     {:else if type === 'record'}
       <RecordSelector bind:value={workflowBlock.args[parameter]} />
     {:else if type === 'string'}
-      <input
+      <Input type="text" thin bind:value={workflowBlock.args[parameter]} />
-        type="text"
-        class="budibase_input"
-        bind:value={workflowBlock.args[parameter]} />
     {/if}
   </div>
 {/each}
@@ -62,17 +55,6 @@
   .block-field {
     display: grid;
   }
-  .budibase_input {
-    height: 36px;
-    border-radius: 5px;
-    background-color: var(--grey-2);
-    border: 1px solid var(--grey-2);
-    text-align: left;
-    color: var(--ink);
-    font-size: 14px;
-    padding-left: 12px;
-    margin-top: 8px;
-  }
 
   label {
     text-transform: capitalize;

packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte

@@ -2,6 +2,7 @@
   import { store, backendUiStore, workflowStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import ActionButton from "components/common/ActionButton.svelte"
+  import { Input } from "@budibase/bbui"
 
   export let onClosed
 
@@ -26,8 +27,7 @@
   Create Workflow
 </header>
 <div>
-  <label class="uk-form-label" for="form-stacked-text">Name</label>
+  <Input bind:value={name} label="Name" />
-  <input class="uk-input" type="text" bind:value={name} />
 </div>
 <footer>
   <a href="https://docs.budibase.com">

packages/builder/src/index.html

@@ -11,9 +11,7 @@
   
 	<link rel='icon' type='image/png' href='/_builder/favicon.png'>
 	<link rel='stylesheet' href='/_builder/global.css'>
-	<link rel='stylesheet' href='/_builder/codemirror.css'>
 	<link rel='stylesheet' href='/_builder/budibase.css'>
-	<link rel='stylesheet' href='/_builder/monokai.css'>
 	<link rel='stylesheet' href='/_builder/bundle.css'>
 	<link rel='stylesheet' href='/_builder/bbui.css'>
 	<link rel='stylesheet' href='/_builder/fonts.css'>