Merge pull request #565 from Budibase/removing-uikit-05

Removing uikit modal

packages/builder/cypress/support/commands.js

@@ -52,7 +52,7 @@ Cypress.Commands.add("createApp", name => {
         .type("test")
       cy.contains("Submit").click()
       cy.contains("Create New Table", {
-        timeout: 10000,
+        timeout: 20000,
       }).should("be.visible")
     })
 })
@@ -143,7 +143,7 @@ Cypress.Commands.add("createScreen", (screenName, route) => {
   if (route) {
     cy.get("[data-cy=new-screen-dialog] input:last").type(route)
   }
-  cy.get(".uk-modal-footer").within(() => {
+  cy.get("[data-cy=create-screen-footer]").within(() => {
     cy.contains("Create Screen").click()
   })
   cy.get(".nav-items-container").within(() => {

packages/builder/package.json

@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.29.1",
+    "@budibase/bbui": "^1.29.3",
     "@budibase/client": "^0.1.19",
     "@budibase/colorpicker": "^1.0.1",
     "@sentry/browser": "5.19.1",

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

@@ -1,8 +1,6 @@
 <script>
-  import Button from "./Button.svelte"
-  import ActionButton from "./ActionButton.svelte"
-  import ButtonGroup from "./ButtonGroup.svelte"
   import UIkit from "uikit"
+  import { Modal, Button, Heading, Spacer } from "@budibase/bbui"
 
   export let title = ""
   export let body = ""
@@ -12,16 +10,14 @@
   export let onCancel = () => {}
 
   export const show = () => {
-    uiKitModal.hide()
+    theModal.show()
-    uiKitModal.show()
   }
 
   export const hide = () => {
-    uiKitModal.hide()
+    theModal.hide()
   }
 
   let theModal
-  $: uiKitModal = theModal && UIkit.modal(theModal)
 
   const cancel = () => {
     hide()
@@ -36,31 +32,27 @@
   }
 </script>
 
-<div id={title} uk-modal bind:this={theModal}>
+<Modal id={title} bind:this={theModal}>
-  <div class="uk-modal-dialog">
+  <h2>{title}</h2>
-    <button class="uk-modal-close-default" type="button" uk-close />
+  <Spacer extraLarge />
-    <div class="uk-modal-header">
-      <h4 class="budibase__title--4">{title}</h4>
-    </div>
-    <div class="uk-modal-body">
   <slot class="rows">{body}</slot>
+  <Spacer extraLarge />
+  <div class="modal-footer">
+    <Button red wide on:click={ok}>{okText}</Button>
+    <Button secondary wide on:click={cancel}>{cancelText}</Button>
   </div>
-    <div class="uk-modal-footer">
+</Modal>
-      <ButtonGroup>
-        <ActionButton cancel on:click={cancel}>{cancelText}</ActionButton>
-        <ActionButton primary on:click={ok}>{okText}</ActionButton>
-      </ButtonGroup>
-    </div>
-  </div>
-</div>
 
 <style>
-  .uk-modal-footer {
+  h2 {
-    background: var(--grey-1);
+    font-size: var(--font-size-xl);
+    margin: 0;
+    font-family: var(--font-sans);
+    font-weight: 600;
   }
 
-  .uk-modal-dialog {
+  .modal-footer {
-    width: 400px;
+    display: grid;
-    border-radius: 5px;
+    grid-gap: var(--spacing-s);
   }
 </style>

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

@@ -2,11 +2,10 @@
   import flatpickr from "flatpickr"
   import "flatpickr/dist/flatpickr.css"
   import { onMount } from "svelte"
+  import { Label, Input } from "@budibase/bbui"
 
   export let value
   export let label
-  export let width = "medium"
-  export let size = "small"
 
   let input
   let fpInstance
@@ -25,8 +24,9 @@
 </script>
 
 <div class="bb-margin-m">
-  <label class="uk-form-label">{label}</label>
+  <Label small forAttr={'datepicker-label'}>{label}</Label>
-  <input
+  <Input thin bind:this={input} />
-    class="uk-input uk-form-width-{width} uk-form-{size}"
-    bind:this={input} />
 </div>
+
+<!-- TODO: Verify DatePicker Input works as expected when datetime property used again
+in CreateEditColumn -->

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

@@ -1,59 +0,0 @@
-<script>
-  import UIkit from "uikit"
-  import ActionButton from "../common/ActionButton.svelte"
-
-  export let isOpen = false
-  export let onClosed
-  export let id = ""
-  export let title
-
-  let ukModal
-  let listenerAdded = false
-
-  $: {
-    if (ukModal && !listenerAdded) {
-      listenerAdded = true
-      ukModal.addEventListener("hidden", onClosed)
-    }
-
-    if (ukModal) {
-      if (isOpen) {
-        UIkit.modal(ukModal).show()
-      } else {
-        UIkit.modal(ukModal).hide()
-      }
-    }
-  }
-</script>
-
-<div bind:this={ukModal} uk-modal {id}>
-  {#if isOpen}
-    <div class="uk-modal-dialog" uk-overflow-auto>
-      {#if title}
-        <div class="uk-modal-header">
-          <h4 class="budibase__title--4">{title}</h4>
-        </div>
-      {/if}
-      <div class="uk-modal-body">
-        {#if onClosed}
-          <button class="uk-modal-close-default" type="button" uk-close />
-        {/if}
-        <slot />
-      </div>
-      <div class="uk-modal-footer">
-        <slot name="footer" />
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .uk-modal-dialog {
-    border-radius: 0.3rem;
-    width: 520px;
-    height: 80vh;
-    display: flex;
-    flex-direction: column;
-    padding: 40px;
-  }
-</style>

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

@@ -45,7 +45,7 @@
 
 <div class="actions">
   <ErrorsBox {errors} />
-  <form on:submit|preventDefault class="uk-form-stacked">
+  <form on:submit|preventDefault>
     {#each modelSchema as [key, meta]}
       <div class="bb-margin-xl">
         {#if meta.type === 'link'}

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

@@ -1,7 +1,6 @@
 <script>
   import { store } from "builderStore"
   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"

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

@@ -67,7 +67,7 @@
 </button>
 
 <div class="root">
-  <form on:submit|preventDefault class="uk-form-stacked form-root">
+  <form on:submit|preventDefault class="form-root">
     {#each events as event, index}
       {#if event.handlers.length > 0}
         <div

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

@@ -1,14 +1,9 @@
 <script>
   import { store } from "builderStore"
-  import Button from "components/common/Button.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import ButtonGroup from "components/common/ButtonGroup.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { pipe } from "components/common/core"
-  import UIkit from "uikit"
   import { isRootComponent } from "./pagesParsing/searchComponents"
   import { splitName } from "./pagesParsing/splitRootComponentName.js"
-  import { Input, Select } from "@budibase/bbui"
+  import { Input, Select, Modal, Button, Spacer } from "@budibase/bbui"
 
   import { find, filter, some, map, includes } from "lodash/fp"
   import { assign } from "lodash"
@@ -72,12 +67,9 @@
   }
 </script>
 
-<ConfirmDialog
+<Modal bind:this={dialog} minWidth="500px">
-  bind:this={dialog}
+  <h2>New Screen</h2>
-  title="New Screen"
+  <Spacer extraLarge />
-  onCancel={cancel}
-  onOk={save}
-  okText="Create Screen">
 
   <div data-cy="new-screen-dialog">
     <div class="bb-margin-xl">
@@ -102,4 +94,24 @@
     </div>
   </div>
 
-</ConfirmDialog>
+  <Spacer extraLarge />
+
+  <div data-cy="create-screen-footer" class="modal-footer">
+    <Button secondary medium on:click={cancel}>Cancel</Button>
+    <Button blue medium on:click={save}>Create Screen</Button>
+  </div>
+</Modal>
+
+<style>
+  h2 {
+    font-size: var(--font-size-xl);
+    margin: 0;
+    font-family: var(--font-sans);
+    font-weight: 600;
+  }
+
+  .modal-footer {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>

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

@@ -1,6 +1,7 @@
 <script>
   import { store } from "builderStore"
   import deepmerge from "deepmerge"
+  import { Label } from "@budibase/bbui"
 
   export let value
 
@@ -24,16 +25,14 @@
 </script>
 
 <div class="bb-margin-xl block-field">
-  <label class="uk-form-label">Page</label>
+  <Label small forAttr={'page'}>Page</Label>
-
   <select class="budibase__input" bind:value={pageName}>
     {#each Object.keys(pages) as page}
       <option value={page}>{page}</option>
     {/each}
   </select>
-
   {#if components.length > 0}
-    <label class="uk-form-label">Component</label>
+    <Label small forAttr={'component'}>Component</Label>
     <select class="budibase__input" bind:value>
       {#each components as component}
         <option value={component._id}>{component._id}</option>

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

@@ -1,6 +1,6 @@
 <script>
   import { backendUiStore } from "builderStore"
-  import { Input } from "@budibase/bbui"
+  import { Input, Label } from "@budibase/bbui"
 
   export let value
 
@@ -25,7 +25,7 @@
 
 {#if value.model}
   <div class="bb-margin-xl block-field">
-    <label class="uk-form-label fields">Fields</label>
+    <Label small forAttr={'fields'}>Fields</Label>
     {#each Object.keys(value.model.schema) as field}
       <div class="bb-margin-xl">
         <Input
@@ -37,9 +37,3 @@
     {/each}
   </div>
 {/if}
-
-<style>
-  .fields {
-    font-weight: 500;
-  }
-</style>

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, Input } from "@budibase/bbui"
+  import { Button, Input, Label } from "@budibase/bbui"
 
   const { open, close } = getContext("simple-modal")
 
@@ -112,14 +112,13 @@
         <div class="panel-body">
           <div class="block-label">Workflow: {workflow.name}</div>
           <div class="config-item">
-            <label class="uk-form-label">User Access</label>
+            <Label small forAttr={'useraccess'}>User Access</Label>
             <div class="access-levels">
 
               {#each ACCESS_LEVELS as level}
                 <span class="access-level">
                   <label>{level.name}</label>
                   <input
-                    class="uk-checkbox"
                     type="checkbox"
                     disabled={!level.editable}
                     bind:checked={level.canExecute} />

packages/standard-components/.gitignore

@@ -2,4 +2,4 @@
 node_modules
 yarn.lock
 package-lock.json
-dist
+dist/

packages/standard-components/src/DataForm.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { fade } from "svelte/transition"
+  import { Label } from "@budibase/bbui"
 
   export let _bb
   export let model
@@ -167,7 +168,7 @@
   <div class="form-content">
     {#each fields as field}
       <div class="form-item">
-        <label class="form-label" for="form-stacked-text">{field}</label>
+        <Label small forAttr={'form-stacked-text'}>{field}</Label>
         {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
           <select on:blur={handleInput(field)} bind:this={inputElements[field]}>
             {#each schema[field].constraints.inclusion as opt}
@@ -223,11 +224,6 @@
     margin-bottom: 16px;
   }
 
-  .form-label {
-    font-weight: bold;
-    margin-bottom: 12px;
-  }
-
   hr {
     border: 1px solid var(--grey-1);
     margin: 20px 0px;

packages/standard-components/src/DataFormWide.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { fade } from "svelte/transition"
+  import { Label } from "@budibase/bbui"
 
   export let _bb
   export let model
@@ -167,7 +168,7 @@
   <div class="form-content">
     {#each fields as field}
       <div class="form-item">
-        <label class="form-label" for="form-stacked-text">{field}</label>
+        <Label small forAttr={'form-stacked-text'}>{field}</Label>
         {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
           <select on:blur={handleInput(field)} bind:this={inputElements[field]}>
             {#each schema[field].constraints.inclusion as opt}