using BBUI inputs where possible

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

@@ -8,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"
@@ -21,6 +22,8 @@
   let layoutComponent
   let screens
   let name = ""
+  let nameError = ""
+  let routeError
 
   let saveAttempted = false
 
@@ -39,12 +42,27 @@
   const save = () => {
     saveAttempted = true
 
-    const isValid =
-      name.length > 0 &&
-      !screenNameExists(name) &&
-      route.length > 0 &&
-      !routeNameExists(route) &&
-      layoutComponent
+    if (name.length === 0) {
+      nameError = "Name is required"
+    } else {
+      if (screenNameExists(name)) {
+        nameError = "This name is already taken"
+      } else {
+        nameError = ""
+      }
+    }
+
+    if (route.length === 0) {
+      routeError = "Url is required"
+    } else {
+      if (routeNameExists(name)) {
+        routeError = "This url is already taken"
+      } else {
+        routeError = ""
+      }
+    }
+
+    const isValid = !routeError && !nameError
 
     if (!isValid) return
 
@@ -82,40 +100,26 @@
   onOk={save}
   okText="Create Screen">
 
-  <div class="uk-form-horizontal">
+  <div>
     <div class="uk-margin">
-      <label class="uk-form-label">Name</label>
-      <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>
+      <Input label="Name" error={nameError} bind:value={name} />
     </div>
 
     <div class="uk-margin">
-      <label class="uk-form-label">Route (URL)</label>
-      <div class="uk-form-controls">
-        <input
-          class="uk-input uk-form-small"
-          class:uk-form-danger={saveAttempted && (route.length === 0 || routeNameExists(route))}
-          bind:value={route}
-          on:change={routeChanged} />
-      </div>
+      <Input
+        label="Url"
+        error={routeError}
+        bind:value={route}
+        on:change={routeChanged} />
     </div>
 
     <div class="uk-margin">
-      <label class="uk-form-label">Layout Component</label>
-      <div class="uk-form-controls">
-        <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>
-      </div>
+      <label>Layout Component</label>
+      <Select bind:value={layoutComponent}>
+        {#each layoutComponents as { _component, name }}
+          <option value={_component}>{name}</option>
+        {/each}
+      </Select>
     </div>
   </div>
 
@@ -126,28 +130,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/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 type="text" class="budibase__input" bind:value={value[field]} />
+        <Input bind:value={value[field]} label={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>
-            <div class="form">
-              <input
-                type="text"
-                class="budibase_input"
-                bind:value={workflow.name} />
-            </div>
+            <Input label="Name" bind:value={workflow.name} thin />
           </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
-        type="password"
-        class="budibase_input"
-        bind:value={workflowBlock.args[parameter]} />
+      <Input type="password" thin bind:value={workflowBlock.args[parameter]} />
     {:else if type === 'number'}
-      <input
-        type="number"
-        class="budibase_input"
-        bind:value={workflowBlock.args[parameter]} />
+      <Input type="number" thin bind:value={workflowBlock.args[parameter]} />
     {:else if type === 'longText'}
-      <textarea
+      <TextArea
         type="text"
-        class="budibase_input"
-        bind:value={workflowBlock.args[parameter]} />
+        thin
+        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
-        type="text"
-        class="budibase_input"
-        bind:value={workflowBlock.args[parameter]} />
+      <Input type="text" thin 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 class="uk-input" type="text" bind:value={name} />
+  <Input bind:value={name} label="Name" />
 </div>
 <footer>
   <a href="https://docs.budibase.com">