@budibase/bbui 1.0.123-alpha.0 → 1.0.123

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.123-alpha.0",
+  "version": "1.0.123",
   "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.123-alpha.0",
+    "@budibase/string-templates": "^1.0.123",
     "@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": "94632aed5c844bb780b9a81238207b4965c40a54"
+  "gitHead": "db99c31b53d0dbbb788335126e45d1cc2f39fbf0"
 }

package/src/ActionButton/ActionButton.svelte

@@ -80,4 +80,8 @@
   .active svg {
     color: var(--spectrum-global-color-blue-600);
   }
+
+  .spectrum-ActionButton-label {
+    padding-bottom: 2px;
+  }
 </style>

package/src/ActionMenu/ActionMenu.svelte

@@ -6,7 +6,6 @@
   export let disabled = false
   export let align = "left"
   export let portalTarget
-  export let dataCy
 
   let anchor
   let dropdown
@@ -37,7 +36,7 @@
 <div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>
-<Popover bind:this={dropdown} {anchor} {align} {portalTarget} {dataCy}>
+<Popover bind:this={dropdown} {anchor} {align} {portalTarget}>
   <Menu>
     <slot />
   </Menu>

package/src/Form/Core/DatePicker.svelte

@@ -19,33 +19,18 @@
   const dispatch = createEventDispatcher()
   const flatpickrId = `${uuid()}-wrapper`
   let open = false
-  let flatpickr, flatpickrOptions
-
-  const resolveTimeStamp = timestamp => {
-    let maskedDate = new Date(`0-${timestamp}`)
-
-    if (maskedDate instanceof Date && !isNaN(maskedDate.getTime())) {
-      return maskedDate
-    } else {
-      return null
-    }
-  }
+  let flatpickr, flatpickrOptions, isTimeOnly
 
+  $: isTimeOnly = !timeOnly && value ? !isNaN(new Date(`0-${value}`)) : timeOnly
   $: flatpickrOptions = {
     element: `#${flatpickrId}`,
-    enableTime: timeOnly || enableTime || false,
-    noCalendar: timeOnly || false,
+    enableTime: isTimeOnly || enableTime || false,
+    noCalendar: isTimeOnly || false,
     altInput: true,
-    altFormat: timeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y",
+    altFormat: isTimeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y",
     wrap: true,
     appendTo,
     disableMobile: "true",
-    onReady: () => {
-      let timestamp = resolveTimeStamp(value)
-      if (timeOnly && timestamp) {
-        dispatch("change", timestamp.toISOString())
-      }
-    },
   }
 
   const handleChange = event => {
@@ -54,9 +39,10 @@
     if (newValue) {
       newValue = newValue.toISOString()
     }
-    // if time only set date component to 2000-01-01
+    // if time only set date component to today
     if (timeOnly) {
-      newValue = `2000-01-01T${newValue.split("T")[1]}`
+      const todayDate = new Date().toISOString().split("T")[0]
+      newValue = `${todayDate}T${newValue.split("T")[1]}`
     }
     dispatch("change", newValue)
   }
@@ -90,13 +76,10 @@
       return null
     }
     let date
-    let time
-
+    let time = new Date(`0-${val}`)
     // it is a string like 00:00:00, just time
-    let ts = resolveTimeStamp(val)
-
-    if (timeOnly && ts) {
-      date = ts
+    if (timeOnly || (typeof val === "string" && !isNaN(time))) {
+      date = time
     } else if (val instanceof Date) {
       // Use real date obj if already parsed
       date = val
@@ -118,7 +101,7 @@
   }
 </script>
 
-{#key timeOnly}
+{#key isTimeOnly}
   <Flatpickr
     bind:flatpickr
     value={parseDate(value)}

package/src/Icon/Icon.svelte

@@ -3,9 +3,6 @@
 </script>
 
 <script>
-  import Tooltip from "../Tooltip/Tooltip.svelte"
-  import { fade } from "svelte/transition"
-
   export let direction = "n"
   export let name = "Add"
   export let hidden = false
@@ -13,52 +10,30 @@
   export let hoverable = false
   export let disabled = false
   export let color
-  export let tooltip
 
   $: rotation = getRotation(direction)
 
-  let showTooltip = false
-
   const getRotation = direction => {
     return directions.indexOf(direction) * 45
   }
 </script>
 
-<div
-  class="icon"
-  on:mouseover={() => (showTooltip = true)}
-  on:focus={() => (showTooltip = true)}
-  on:mouseleave={() => (showTooltip = false)}
-  on:click={() => (showTooltip = false)}
+<svg
+  on:click
+  class:hoverable
+  class:disabled
+  class="spectrum-Icon spectrum-Icon--size{size}"
+  focusable="false"
+  aria-hidden={hidden}
+  aria-label={name}
+  style={`transform: rotate(${rotation}deg); ${
+    color ? `color: ${color};` : ""
+  }`}
 >
-  <svg
-    on:click
-    class:hoverable
-    class:disabled
-    class="spectrum-Icon spectrum-Icon--size{size}"
-    focusable="false"
-    aria-hidden={hidden}
-    aria-label={name}
-    style={`transform: rotate(${rotation}deg); ${
-      color ? `color: ${color};` : ""
-    }`}
-  >
-    <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-{name}" />
-  </svg>
-  {#if tooltip && showTooltip}
-    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
-      <Tooltip textWrapping direction={"bottom"} text={tooltip} />
-    </div>
-  {/if}
-</div>
+  <use xlink:href="#spectrum-icon-18-{name}" />
+</svg>
 
 <style>
-  .icon {
-    position: relative;
-    display: grid;
-    place-items: center;
-  }
-
   svg.hoverable {
     pointer-events: all;
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
@@ -72,15 +47,4 @@
     color: var(--spectrum-global-color-gray-500) !important;
     pointer-events: none !important;
   }
-
-  .tooltip {
-    position: absolute;
-    pointer-events: none;
-    left: 50%;
-    top: calc(100% + 4px);
-    width: 100vw;
-    max-width: 150px;
-    transform: translateX(-50%);
-    text-align: center;
-  }
 </style>

package/src/Layout/Layout.svelte

@@ -36,10 +36,6 @@
     padding-left: var(--spacing-l);
     padding-right: var(--spacing-l);
   }
-  .paddingX-XL {
-    padding-left: var(--spacing-xl);
-    padding-right: var(--spacing-xl);
-  }
   .paddingY-S {
     padding-top: var(--spacing-s);
     padding-bottom: var(--spacing-s);
@@ -52,10 +48,6 @@
     padding-top: var(--spacing-l);
     padding-bottom: var(--spacing-l);
   }
-  .paddingY-XL {
-    padding-top: var(--spacing-xl);
-    padding-bottom: var(--spacing-xl);
-  }
   .gap-XXS {
     grid-gap: var(--spacing-xs);
   }

package/src/Layout/Page.svelte

@@ -1,9 +1,8 @@
 <script>
   export let wide = false
-  export let maxWidth = "80ch"
 </script>
 
-<div style="--max-width: {maxWidth}" class:wide>
+<div class:wide>
   <slot />
 </div>
 
@@ -13,7 +12,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    max-width: var(--max-width);
+    max-width: 80ch;
     margin: 0 auto;
     padding: calc(var(--spacing-xl) * 2);
     min-height: calc(100% - var(--spacing-xl) * 4);

package/src/Modal/ModalContent.svelte

@@ -23,7 +23,6 @@
   export let secondaryButtonText = undefined
   export let secondaryAction = undefined
   export let secondaryButtonWarning = false
-  export let dataCy = null
 
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
@@ -64,26 +63,21 @@
   role="dialog"
   tabindex="-1"
   aria-modal="true"
-  data-cy={dataCy}
 >
   <div class="spectrum-Dialog-grid">
-    {#if title || $$slots.header}
+    {#if title}
       <h1
         class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
         class:noDivider={!showDivider}
         class:header-spacing={$$slots.header}
       >
-        {#if title}
-          {title}
-        {:else if $$slots.header}
-          <slot name="header" />
-        {/if}
+        {title}
+        <slot name="header" />
       </h1>
       {#if showDivider}
         <Divider size="M" />
       {/if}
     {/if}
-
     <!-- TODO: Remove content-grid class once Layout components are in bbui -->
     <section class="spectrum-Dialog-content content-grid">
       <slot />

package/src/Popover/Popover.svelte

@@ -10,17 +10,6 @@
   export let anchor
   export let align = "right"
   export let portalTarget
-  export let dataCy
-
-  export let direction = "bottom"
-  export let showTip = false
-
-  let tipSvg =
-    '<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" > <path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0" /> </svg>'
-
-  $: tooltipClasses = showTip
-    ? `spectrum-Popover--withTip spectrum-Popover--${direction}`
-    : ""
 
   export const show = () => {
     dispatch("open")
@@ -48,14 +37,9 @@
       use:positionDropdown={{ anchor, align }}
       use:clickOutside={hide}
       on:keydown={handleEscape}
-      class={"spectrum-Popover is-open " + (tooltipClasses || "")}
+      class="spectrum-Popover is-open"
       role="presentation"
-      data-cy={dataCy}
     >
-      {#if showTip}
-        {@html tipSvg}
-      {/if}
-
       <slot />
     </div>
   </Portal>
@@ -65,13 +49,4 @@
   .spectrum-Popover {
     min-width: var(--spectrum-global-dimension-size-2000) !important;
   }
-  .spectrum-Popover.is-open.spectrum-Popover--withTip {
-    margin-top: var(--spacing-xs);
-    margin-left: var(--spacing-xl);
-  }
-  :global(.spectrum-Popover--bottom .spectrum-Popover-tip),
-  :global(.spectrum-Popover--top .spectrum-Popover-tip) {
-    left: 90%;
-    margin-left: calc(var(--spectrum-global-dimension-size-150) * -1);
-  }
 </style>

package/src/ProgressBar/ProgressBar.svelte

@@ -16,11 +16,11 @@
     easing: easing,
   })
 
-  $: if (value || value === 0) $progress = value
+  $: if (value) $progress = value
 </script>
 
 <div
-  class:spectrum-ProgressBar--indeterminate={!value && value !== 0}
+  class:spectrum-ProgressBar--indeterminate={!value}
   class:spectrum-ProgressBar--sideLabel={sideLabel}
   class="spectrum-ProgressBar spectrum-ProgressBar--size{size}"
   value={$progress}
@@ -28,7 +28,7 @@
   aria-valuenow={$progress}
   aria-valuemin="0"
   aria-valuemax="100"
-  style={width ? `width: ${width};` : ""}
+  style={width ? `width: ${width}px;` : ""}
 >
   {#if $$slots}
     <div
@@ -37,7 +37,7 @@
       <slot />
     </div>
   {/if}
-  {#if value || value === 0}
+  {#if value}
     <div
       class="spectrum-FieldLabel spectrum-ProgressBar-percentage spectrum-FieldLabel--size{size}"
     >
@@ -47,7 +47,7 @@
   <div class="spectrum-ProgressBar-track">
     <div
       class="spectrum-ProgressBar-fill"
-      style={value || value === 0 ? `width: ${$progress}%` : ""}
+      style={value ? `width: ${$progress}%` : ""}
     />
   </div>
   <div class="spectrum-ProgressBar-label" hidden="" />

package/src/Table/InternalRenderer.svelte

@@ -1,21 +1,42 @@
 <script>
   import Icon from "../Icon/Icon.svelte"
-  import { copyToClipboard } from "../helpers"
   import { notifications } from "../Stores/notifications"
-
   export let value
 
-  const onClick = async e => {
+  const onClick = e => {
     e.stopPropagation()
-    try {
-      await copyToClipboard(value)
-      notifications.success("Copied to clipboard")
-    } catch (error) {
-      notifications.error(
-        "Failed to copy to clipboard. Check the dev console for the value."
-      )
-      console.warn("Failed to copy the value", value)
-    }
+    copyToClipboard(value)
+  }
+
+  const copyToClipboard = value => {
+    return new Promise(res => {
+      if (navigator.clipboard && window.isSecureContext) {
+        // Try using the clipboard API first
+        navigator.clipboard.writeText(value).then(res)
+      } else {
+        // Fall back to the textarea hack
+        let textArea = document.createElement("textarea")
+        textArea.value = value
+        textArea.style.position = "fixed"
+        textArea.style.left = "-9999px"
+        textArea.style.top = "-9999px"
+        document.body.appendChild(textArea)
+        textArea.focus()
+        textArea.select()
+        document.execCommand("copy")
+        textArea.remove()
+        res()
+      }
+    })
+      .then(() => {
+        notifications.success("Copied to clipboard")
+      })
+      .catch(() => {
+        notifications.error(
+          "Failed to copy to clipboard. Check the dev console for the value."
+        )
+        console.warn("Failed to copy the value", value)
+      })
   }
 </script>
 

package/src/Table/Table.svelte

@@ -36,7 +36,6 @@
   export let disableSorting = false
   export let autoSortColumns = true
   export let compact = false
-  export let customPlaceholder = false
 
   const dispatch = createEventDispatcher()
 
@@ -388,24 +387,13 @@
           </div>
         {/each}
       {:else}
-        <div
-          class="placeholder"
-          class:placeholder--custom={customPlaceholder}
-          class:placeholder--no-fields={!fields?.length}
-        >
-          {#if customPlaceholder}
-            <slot name="placeholder" />
-          {:else}
-            <div class="placeholder-content">
-              <svg
-                class="spectrum-Icon spectrum-Icon--sizeXXL"
-                focusable="false"
-              >
-                <use xlink:href="#spectrum-icon-18-Table" />
-              </svg>
-              <div>No rows found</div>
-            </div>
-          {/if}
+        <div class="placeholder" class:placeholder--no-fields={!fields?.length}>
+          <div class="placeholder-content">
+            <svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false">
+              <use xlink:href="#spectrum-icon-18-Table" />
+            </svg>
+            <div>No rows found</div>
+          </div>
         </div>
       {/if}
     </div>
@@ -470,13 +458,6 @@
     justify-content: flex-start;
     align-items: center;
     user-select: none;
-    border-top: var(--table-border);
-  }
-  .spectrum-Table-headCell:first-of-type {
-    border-left: var(--table-border);
-  }
-  .spectrum-Table-headCell:last-of-type {
-    border-right: var(--table-border);
   }
   .spectrum-Table-headCell--alignCenter {
     justify-content: center;
@@ -595,19 +576,16 @@
     border-top: none;
     grid-column: 1 / -1;
     background-color: var(--table-bg);
-    padding: 40px;
   }
   .placeholder--no-fields {
     border-top: var(--table-border);
   }
-  .placeholder--custom {
-    justify-content: flex-start;
-  }
   .wrapper--quiet .placeholder {
     border-left: none;
     border-right: none;
   }
   .placeholder-content {
+    padding: 40px;
     display: flex;
     flex-direction: column;
     justify-content: center;

package/src/Tabs/Tabs.svelte

@@ -108,7 +108,7 @@
     padding-left: var(--spacing-xl);
     padding-right: var(--spacing-xl);
     position: relative;
-    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+    border-bottom: var(--border-light);
   }
   .spectrum-Tabs-content {
     margin-top: var(--spectrum-global-dimension-static-size-150);

package/src/Typography/Body.svelte

@@ -5,14 +5,12 @@
   export let serif = false
   export let weight = null
   export let textAlign = null
-  export let color = null
 </script>
 
 <p
   style={`
     ${weight ? `font-weight:${weight};` : ""}
     ${textAlign ? `text-align:${textAlign};` : ""}
-    ${color ? `color:${color};` : ""}
   `}
   class="spectrum-Body spectrum-Body--size{size}"
   class:spectrum-Body--serif={serif}

package/src/Typography/Heading.svelte

@@ -5,13 +5,12 @@
   export let size = "M"
   export let textAlign
   export let noPadding = false
-  export let weight = "default" // light, heavy, default
 </script>
 
 <h1
   style={textAlign ? `text-align:${textAlign}` : ``}
   class:noPadding
-  class="spectrum-Heading spectrum-Heading--size{size} spectrum-Heading--{weight}"
+  class="spectrum-Heading spectrum-Heading--size{size}"
 >
   <slot />
 </h1>

package/src/helpers.js

@@ -106,29 +106,3 @@ export const deepSet = (obj, key, value) => {
 export const cloneDeep = obj => {
   return JSON.parse(JSON.stringify(obj))
 }
-
-/**
- * Copies a value to the clipboard
- * @param value the value to copy
- */
-export const copyToClipboard = value => {
-  return new Promise(res => {
-    if (navigator.clipboard && window.isSecureContext) {
-      // Try using the clipboard API first
-      navigator.clipboard.writeText(value).then(res)
-    } else {
-      // Fall back to the textarea hack
-      let textArea = document.createElement("textarea")
-      textArea.value = value
-      textArea.style.position = "fixed"
-      textArea.style.left = "-9999px"
-      textArea.style.top = "-9999px"
-      document.body.appendChild(textArea)
-      textArea.focus()
-      textArea.select()
-      document.execCommand("copy")
-      textArea.remove()
-      res()
-    }
-  })
-}