@budibase/bbui 1.0.98 → 1.0.101

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.98",
+  "version": "1.0.101",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "^1.0.98",
+    "@budibase/string-templates": "^1.0.101",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -84,5 +84,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "c13a6db9c74b50786732c52d2827e018a3542047"
+  "gitHead": "3862854f5b44c63494d6e5fc060c16a5e1890d1a"
 }

package/src/Button/Button.svelte

@@ -13,6 +13,7 @@
   export let icon = undefined
   export let active = false
   export let tooltip = undefined
+  export let dataCy
 
   let showTooltip = false
 </script>
@@ -27,6 +28,7 @@
   class:active
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
+  data-cy={dataCy}
   on:click|preventDefault
   on:mouseover={() => (showTooltip = true)}
   on:focus={() => (showTooltip = true)}

package/src/Modal/ModalContent.svelte

@@ -5,6 +5,7 @@
   import Divider from "../Divider/Divider.svelte"
   import Icon from "../Icon/Icon.svelte"
   import Context from "../context"
+  import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
 
   export let title = undefined
   export let size = "S"
@@ -102,15 +103,22 @@
           <Button group secondary on:click={close}>{cancelText}</Button>
         {/if}
         {#if showConfirmButton}
-          <Button
-            group
-            cta
-            {...$$restProps}
-            disabled={confirmDisabled}
-            on:click={confirm}
-          >
-            {confirmText}
-          </Button>
+          <span class="confirm-wrap">
+            <Button
+              group
+              cta
+              {...$$restProps}
+              disabled={confirmDisabled}
+              on:click={confirm}
+            >
+              {#if loading}
+                <ProgressCircle overBackground={true} size="S" />
+              {/if}
+              {#if !loading}
+                {confirmText}
+              {/if}
+            </Button>
+          </span>
         {/if}
       </div>
     {/if}
@@ -169,4 +177,8 @@
   .spectrum-Dialog-buttonGroup {
     padding-left: 0;
   }
+
+  .confirm-wrap :global(.spectrum-Button-label) {
+    display: contents;
+  }
 </style>

package/src/Table/Table.svelte

@@ -56,6 +56,7 @@
   $: if (!loading) loaded = true
   $: fields = getFields(schema, showAutoColumns, autoSortColumns)
   $: rows = fields?.length ? data || [] : []
+  $: totalRowCount = rows?.length || 0
   $: visibleRowCount = getVisibleRowCount(
     loaded,
     height,
@@ -63,7 +64,12 @@
     rowCount,
     rowHeight
   )
-  $: contentStyle = getContentStyle(visibleRowCount, rowCount, rowHeight)
+  $: heightStyle = getHeightStyle(
+    visibleRowCount,
+    rowCount,
+    totalRowCount,
+    rowHeight
+  )
   $: sortedRows = sortRows(rows, sortColumn, sortOrder)
   $: gridStyle = getGridStyle(fields, schema, showEditColumn)
   $: showEditColumn = allowEditRows || allowSelectRows
@@ -107,11 +113,16 @@
     return Math.min(allRows, Math.ceil(height / rowHeight))
   }
 
-  const getContentStyle = (visibleRows, rowCount, rowHeight) => {
-    if (!rowCount || !visibleRows) {
+  const getHeightStyle = (
+    visibleRowCount,
+    rowCount,
+    totalRowCount,
+    rowHeight
+  ) => {
+    if (!rowCount || !visibleRowCount || totalRowCount <= rowCount) {
       return ""
     }
-    return `height: ${headerHeight + visibleRows * rowHeight}px;`
+    return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
   }
 
   const getGridStyle = (fields, schema, showEditColumn) => {
@@ -264,11 +275,11 @@
   style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
 >
   {#if !loaded}
-    <div class="loading" style={contentStyle}>
+    <div class="loading" style={heightStyle}>
       <ProgressCircle />
     </div>
   {:else}
-    <div class="spectrum-Table" style={`${contentStyle}${gridStyle}`}>
+    <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
       {#if fields.length}
         <div class="spectrum-Table-head">
           {#if showEditColumn}