Make all form components use fill width of container

packages/builder/package.json

@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.58.4",
+    "@budibase/bbui": "^1.58.5",
     "@budibase/client": "^0.7.6",
     "@budibase/colorpicker": "1.0.1",
     "@budibase/string-templates": "^0.7.6",

packages/builder/yarn.lock

@@ -842,11 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.58.4":
+"@budibase/bbui@^1.58.5":
-  version "1.58.4"
+  version "1.58.5"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.4.tgz#a74d66b3dd715b0a9861a0f86bc0b863fd8f1d44"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.5.tgz#c9ce712941760825c7774a1de77594e989db4561"
-  integrity sha512-1oEVt7zMREM594CAUIXqOtiuP4Sx4FbfgPBHTZ+t4RhFfbFqvU7yyakqPZM2LhTAmO5Rfa+c+dfFLh+y1++KaA==
+  integrity sha512-0j1I7BetJ2GzB1BXKyvvlkuFphLmADJh2U/Ihubwxx5qUDY8REoVzLgAB4c24zt0CGVTF9VMmOoMLd0zD0QwdQ==
-
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"

packages/standard-components/package.json

@@ -40,7 +40,7 @@
   "gitHead": "1a80b09fd093f2599a68f7db72ad639dd50922dd",
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.1.0",
-    "@budibase/bbui": "^1.58.4",
+    "@budibase/bbui": "^1.58.5",
     "@budibase/svelte-ag-grid": "^0.0.16",
     "@spectrum-css/actionbutton": "^1.0.0-beta.1",
     "@spectrum-css/button": "^3.0.0-beta.6",

packages/standard-components/src/Search.svelte

@@ -10,7 +10,7 @@
     Input,
   } from "@budibase/bbui"
 
-  const { API, styleable, DataProvider, builderStore } = getContext("sdk")
+  const { API, styleable, Provider, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let table = []
@@ -39,7 +39,7 @@
     if (!isEmpty(table)) {
       const tableDef = await API.fetchTableDefinition(table)
       schema = tableDef.schema
-      rows = await API.searchTable({
+      rows = await API.searchTableData({
         tableId: table,
         search: parsedSearch,
         pagination: {
@@ -107,18 +107,16 @@
   {#if loaded}
     {#if rows.length > 0}
       {#if $component.children === 0 && $builderStore.inBuilder}
-        <p>Add some components too</p>
+        <p><i class="ri-image-line" />Add some components to display</p>
       {:else}
         {#each rows as row}
-          <DataProvider {row}>
+          <Provider data={row}>
             <slot />
-          </DataProvider>
+          </Provider>
         {/each}
       {/if}
-    {:else if $builderStore.inBuilder}
+    {:else if noRowsMessage}
-      <p>Feed me some data</p>
+      <p><i class="ri-search-2-line" />{noRowsMessage}</p>
-    {:else}
-      <p>{noRowsMessage}</p>
     {/if}
   {/if}
   <div class="pagination">
@@ -133,11 +131,19 @@
 
 <style>
   p {
+    margin: 0 var(--spacing-m);
+    background-color: var(--grey-2);
+    color: var(--grey-6);
+    font-size: var(--font-size-s);
+    padding: var(--spacing-l);
+    border-radius: var(--border-radius-s);
     display: grid;
     place-items: center;
-    background: #f5f5f5;
+  }
-    border: #ccc 1px solid;
+  p i {
-    padding: var(--spacing-m);
+    margin-bottom: var(--spacing-m);
+    font-size: 1.5rem;
+    color: var(--grey-5);
   }
 
   .query-builder {

packages/standard-components/src/forms/BooleanField.svelte

@@ -49,3 +49,9 @@
     </div>
   {/if}
 </Field>
+
+<style>
+  .spectrum-Checkbox {
+    width: 100%;
+  }
+</style>

packages/standard-components/src/forms/DateTimeField.svelte

@@ -3,6 +3,7 @@
   import Field from "./Field.svelte"
   import "flatpickr/dist/flatpickr.css"
   import "@spectrum-css/inputgroup/dist/index-vars.css"
+  import { generateID } from "../helpers"
 
   export let field
   export let label
@@ -14,8 +15,9 @@
   let open = false
   let flatpickr
 
+  $: flatpickrId = `${$fieldState?.id}-${generateID()}-wrapper`
   $: flatpickrOptions = {
-    element: `#${$fieldState?.id}-wrapper`,
+    element: `#${flatpickrId}`,
     enableTime: enableTime || false,
     altInput: true,
     altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
@@ -46,9 +48,7 @@
     // duplicate input field.
     // We need to blur both because the focus styling does not get properly
     // applied.
-    const els = document.querySelectorAll(
+    const els = document.querySelectorAll(`#${flatpickrId} input`)
-      `#${$fieldState.fieldId}-wrapper input`
-    )
     els.forEach(el => el.blur())
   }
 </script>
@@ -62,9 +62,9 @@
       on:close={onClose}
       options={flatpickrOptions}
       on:change={handleChange}
-      element={`#${$fieldState.fieldId}-wrapper`}>
+      element={`#${flatpickrId}`}>
       <div
-        id={`${$fieldState.fieldId}-wrapper`}
+        id={flatpickrId}
         aria-disabled="false"
         aria-invalid={!$fieldState.valid}
         class:is-invalid={!$fieldState.valid}
@@ -124,14 +124,11 @@
     cursor: pointer;
   }
   .flatpickr {
-    width: var(
+    width: 100%;
-      --spectrum-alias-single-line-width,
-      var(--spectrum-global-dimension-size-2400)
-    );
     overflow: hidden;
   }
   .flatpickr .spectrum-Textfield {
-    width: auto;
+    width: 100%;
   }
   .overlay {
     position: fixed;

packages/standard-components/src/forms/Field.svelte

@@ -61,8 +61,13 @@
 </FieldGroupFallback>
 
 <style>
+  label {
+    white-space: nowrap;
+  }
+
   .spectrum-Form-itemField {
-    width: 360px;
+    position: relative;
+    width: 100%;
   }
 
   .error {
@@ -73,4 +78,9 @@
     font-size: var(--spectrum-global-dimension-font-size-75);
     margin-top: var(--spectrum-global-dimension-size-75);
   }
+
+  .spectrum-FieldLabel--right,
+  .spectrum-FieldLabel--left {
+    padding-right: var(--spectrum-global-dimension-size-200);
+  }
 </style>

packages/standard-components/src/forms/FieldGroup.svelte

@@ -8,10 +8,20 @@
   setContext("fieldGroup", { labelPosition })
 </script>
 
-<div use:styleable={$component.styles}>
+<div class="wrapper" use:styleable={$component.styles}>
   <div
     class="spectrum-Form"
     class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
     <slot />
   </div>
 </div>
+
+<style>
+  .wrapper {
+    width: 100%;
+    position: relative;
+  }
+  .spectrum-Form {
+    width: 100%;
+  }
+</style>

packages/standard-components/src/forms/Form.svelte

@@ -168,5 +168,6 @@
 <style>
   div {
     padding: 20px;
+    position: relative;
   }
 </style>

packages/standard-components/src/forms/LongFormField.svelte

@@ -65,4 +65,7 @@
   div :global(.ql-snow .ql-formats:after) {
     display: none;
   }
+  div :global(.ql-editor p) {
+    word-break: break-all;
+  }
 </style>

packages/standard-components/src/forms/Picker.svelte

@@ -100,7 +100,10 @@
   }
   .spectrum-Popover {
     max-height: 240px;
-    width: var(--spectrum-global-dimension-size-2400);
+    width: 100%;
     z-index: 999;
   }
+  .spectrum-Picker {
+    width: 100%;
+  }
 </style>

packages/standard-components/src/forms/StringField.svelte

@@ -58,3 +58,9 @@
     </div>
   {/if}
 </Field>
+
+<style>
+  .spectrum-Textfield {
+    width: 100%;
+  }
+</style>

packages/standard-components/yarn.lock

@@ -44,10 +44,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.58.4":
+"@budibase/bbui@^1.58.5":
-  version "1.58.4"
+  version "1.58.5"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.4.tgz#a74d66b3dd715b0a9861a0f86bc0b863fd8f1d44"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.5.tgz#c9ce712941760825c7774a1de77594e989db4561"
-  integrity sha512-1oEVt7zMREM594CAUIXqOtiuP4Sx4FbfgPBHTZ+t4RhFfbFqvU7yyakqPZM2LhTAmO5Rfa+c+dfFLh+y1++KaA==
+  integrity sha512-0j1I7BetJ2GzB1BXKyvvlkuFphLmADJh2U/Ihubwxx5qUDY8REoVzLgAB4c24zt0CGVTF9VMmOoMLd0zD0QwdQ==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"