@budibase/bbui 1.0.23-alpha.2 → 1.0.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.23-alpha.2",
+  "version": "1.0.26",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -82,5 +82,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "b053be7d765d7641eafe09ea5110a8c6afb95734"
+  "gitHead": "6ebc345b6523efdd0ac77ea4c7e392918aff0757"
 }

package/src/ActionButton/ActionButton.svelte

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

package/src/Form/Core/Dropzone.svelte

@@ -6,8 +6,6 @@
   import { generateID } from "../../utils/helpers"
   import Icon from "../../Icon/Icon.svelte"
   import Link from "../../Link/Link.svelte"
-  import Tag from "../../Tags/Tag.svelte"
-  import Tags from "../../Tags/Tags.svelte"
 
   const BYTES_IN_KB = 1000
   const BYTES_IN_MB = 1000000
@@ -20,8 +18,6 @@
   export let handleFileTooLarge = null
   export let gallery = true
   export let error = null
-  export let fileTags = []
-  export let maximum = null
 
   const dispatch = createEventDispatcher()
   const imageExtensions = [
@@ -188,118 +184,103 @@
       {/each}
     {/if}
   {/if}
-  {#if !maximum || (maximum && value?.length < maximum)}
-    <div
-      class="spectrum-Dropzone"
-      class:is-invalid={!!error}
-      class:disabled
-      role="region"
-      tabindex="0"
-      on:dragover={handleDragOver}
-      on:dragleave={handleDragLeave}
-      on:dragenter={handleDragOver}
-      on:drop={handleDrop}
-      class:is-dragged={fileDragged}
-    >
-      <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
-        <input
-          id={fieldId}
-          {disabled}
-          type="file"
-          multiple
-          on:change={handleFile}
+  <div
+    class="spectrum-Dropzone"
+    class:is-invalid={!!error}
+    class:disabled
+    role="region"
+    tabindex="0"
+    on:dragover={handleDragOver}
+    on:dragleave={handleDragLeave}
+    on:dragenter={handleDragOver}
+    on:drop={handleDrop}
+    class:is-dragged={fileDragged}
+  >
+    <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
+      <input
+        id={fieldId}
+        {disabled}
+        type="file"
+        multiple
+        on:change={handleFile}
+      />
+      <svg
+        class="spectrum-IllustratedMessage-illustration"
+        width="125"
+        height="60"
+        viewBox="0 0 199 97.7"
+      >
+        <defs>
+          <style>
+            .cls-1,
+            .cls-2 {
+              fill: none;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+            }
+            .cls-1 {
+              stroke-width: 3px;
+            }
+            .cls-2 {
+              stroke-width: 2px;
+            }
+          </style>
+        </defs>
+        <path
+          class="cls-1"
+          d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
         />
-        <svg
-          class="spectrum-IllustratedMessage-illustration"
-          width="125"
-          height="60"
-          viewBox="0 0 199 97.7"
-        >
-          <defs>
-            <style>
-              .cls-1,
-              .cls-2 {
-                fill: none;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-              }
-              .cls-1 {
-                stroke-width: 3px;
-              }
-              .cls-2 {
-                stroke-width: 2px;
-              }
-            </style>
-          </defs>
-          <path
-            class="cls-1"
-            d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
-          />
-          <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
-          <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
-          <path
-            class="cls-1"
-            d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
-          />
-          <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
-          <path
-            class="cls-2"
-            d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
-          />
-          <path
-            class="cls-2"
-            d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
-          />
-          <path
-            class="cls-2"
-            d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
-          />
-          <path
-            class="cls-1"
-            d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
-          />
-          <rect
-            class="cls-1"
-            x="1.5"
-            y="34.5"
-            width="58"
-            height="39"
-            rx="2"
-            ry="2"
-          />
-        </svg>
-        <h2
-          class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
+        <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
+        <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
+        <path
+          class="cls-1"
+          d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
+        />
+        <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
+        <path
+          class="cls-2"
+          d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
+        />
+        <path
+          class="cls-2"
+          d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
+        />
+        <path
+          class="cls-2"
+          d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
+        />
+        <path
+          class="cls-1"
+          d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
+        />
+        <rect
+          class="cls-1"
+          x="1.5"
+          y="34.5"
+          width="58"
+          height="39"
+          rx="2"
+          ry="2"
+        />
+      </svg>
+      <h2
+        class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
+      >
+        Drag and drop your file
+      </h2>
+      {#if !disabled}
+        <p
+          class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
         >
-          Drag and drop your file
-        </h2>
-        {#if !disabled}
-          <p
-            class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
-          >
-            <label for={fieldId} class="spectrum-Link">
-              Select a file to upload
-            </label>
-            <br />
-            from your computer
-          </p>
-          {#if fileTags.length}
-            <Tags>
-              <div class="tags">
-                {#each fileTags as tag}
-                  <div class="tag">
-                    <Tag>
-                      {tag}
-                    </Tag>
-                  </div>
-                {/each}
-              </div>
-            </Tags>
-          {/if}
-        {/if}
-      </div>
+          <label for={fieldId} class="spectrum-Link">
+            Select a file to upload
+          </label>
+          <br />
+          from your computer
+        </p>
+      {/if}
     </div>
-  {/if}
+  </div>
 </div>
 
 <style>
@@ -409,15 +390,4 @@
   .disabled .spectrum-Heading--sizeL {
     color: var(--spectrum-alias-text-color-disabled);
   }
-
-  .tags {
-    margin-top: 20px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  .tag {
-    margin-top: 8px;
-  }
 </style>

package/src/Form/Core/Search.svelte

@@ -7,7 +7,7 @@
   export let disabled = false
   export let id = null
   export let updateOnChange = true
-  export let quiet = false
+
   const dispatch = createEventDispatcher()
   let focus = false
 
@@ -41,7 +41,6 @@
 <div class="spectrum-Search" class:is-disabled={disabled}>
   <div
     class="spectrum-Textfield"
-    class:spectrum-Textfield--quiet={quiet}
     class:is-focused={focus}
     class:is-disabled={disabled}
   >

package/src/Form/Core/Switch.svelte

@@ -25,9 +25,7 @@
     class="spectrum-Switch-input"
   />
   <span class="spectrum-Switch-switch" />
-  {#if text}
-    <label class="spectrum-Switch-label" for={id}>{text}</label>
-  {/if}
+  <label class="spectrum-Switch-label" for={id}>{text}</label>
 </div>
 
 <style>

package/src/Form/Core/TextArea.svelte

@@ -7,8 +7,6 @@
   export let disabled = false
   export let error = null
   export let id = null
-  export let height = null
-  export let minHeight = null
   export const getCaretPosition = () => ({
     start: textarea.selectionStart,
     end: textarea.selectionEnd,
@@ -24,8 +22,6 @@
 </script>
 
 <div
-  style={(height ? `height: ${height}px;` : "") +
-    (minHeight ? `min-height: ${minHeight}px` : "")}
   class="spectrum-Textfield spectrum-Textfield--multiline"
   class:is-invalid={!!error}
   class:is-disabled={disabled}

package/src/Form/Dropzone.svelte

@@ -12,8 +12,6 @@
   export let processFiles = undefined
   export let handleFileTooLarge = undefined
   export let gallery = true
-  export let fileTags = []
-  export let maximum = undefined
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -31,8 +29,6 @@
     {processFiles}
     {handleFileTooLarge}
     {gallery}
-    {fileTags}
-    {maximum}
     on:change={onChange}
   />
 </Field>

package/src/Form/RadioGroup.svelte

@@ -9,7 +9,6 @@
   export let labelPosition = "above"
   export let error = null
   export let options = []
-  export let direction = "vertical"
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
 
@@ -32,7 +31,6 @@
     {disabled}
     {value}
     {options}
-    {direction}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}

package/src/Form/Search.svelte

@@ -9,7 +9,6 @@
   export let placeholder = null
   export let disabled = false
   export let updateOnChange = true
-  export let quiet = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -24,7 +23,6 @@
     {disabled}
     {value}
     {placeholder}
-    {quiet}
     on:change={onChange}
     on:click
     on:input

package/src/Form/TextArea.svelte

@@ -10,8 +10,6 @@
   export let disabled = false
   export let error = null
   export let getCaretPosition = null
-  export let height = null
-  export let minHeight = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -27,8 +25,6 @@
     {disabled}
     {value}
     {placeholder}
-    {height}
-    {minHeight}
     on:change={onChange}
   />
 </Field>

package/src/Icon/Icon.svelte

@@ -9,7 +9,6 @@
   export let size = "M"
   export let hoverable = false
   export let disabled = false
-  export let color
 
   $: rotation = getRotation(direction)
 
@@ -26,9 +25,7 @@
   focusable="false"
   aria-hidden={hidden}
   aria-label={name}
-  style={`transform: rotate(${rotation}deg); ${
-    color ? `color: ${color};` : ""
-  }`}
+  style={`transform: rotate(${rotation}deg)`}
 >
   <use xlink:href="#spectrum-icon-18-{name}" />
 </svg>

package/src/Label/Label.svelte

@@ -19,7 +19,6 @@
     <div class="icon-container">
       <div
         class="icon"
-        class:icon-small={size === "M" || size === "S"}
         on:mouseover={() => (showTooltip = true)}
         on:mouseleave={() => (showTooltip = false)}
       >
@@ -45,7 +44,6 @@
   }
   .container {
     display: flex;
-    align-items: center;
   }
   .icon-container {
     position: relative;
@@ -66,8 +64,4 @@
   .icon {
     transform: scale(0.75);
   }
-  .icon-small {
-    margin-top: -2px;
-    margin-bottom: -5px;
-  }
 </style>

package/src/Layout/Layout.svelte

@@ -63,9 +63,6 @@
   .gap-L {
     grid-gap: var(--spectrum-alias-grid-gutter-medium);
   }
-  .gap-XL {
-    grid-gap: var(--spectrum-alias-grid-gutter-large);
-  }
   .horizontal.gap-S :global(*) + :global(*) {
     margin-left: var(--spectrum-alias-grid-gutter-xsmall);
   }

package/src/Modal/ModalContent.svelte

@@ -18,23 +18,10 @@
   export let disabled = false
   export let showDivider = true
 
-  export let showSecondaryButton = false
-  export let secondaryButtonText = undefined
-  export let secondaryAction = undefined
-  export let secondaryButtonWarning = false
-
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
   $: confirmDisabled = disabled || loading
 
-  async function secondary() {
-    loading = true
-    if (!secondaryAction || (await secondaryAction()) !== false) {
-      hide()
-    }
-    loading = false
-  }
-
   async function confirm() {
     loading = true
     if (!onConfirm || (await onConfirm()) !== false) {
@@ -86,18 +73,6 @@
         class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter"
       >
         <slot name="footer" />
-
-        {#if showSecondaryButton && secondaryButtonText && secondaryAction}
-          <div class="secondary-action">
-            <Button
-              group
-              secondary
-              warning={secondaryButtonWarning}
-              on:click={secondary}>{secondaryButtonText}</Button
-            >
-          </div>
-        {/if}
-
         {#if showCancelButton}
           <Button group secondary on:click={close}>{cancelText}</Button>
         {/if}
@@ -161,8 +136,4 @@
     display: flex;
     justify-content: space-between;
   }
-
-  .secondary-action {
-    margin-right: auto;
-  }
 </style>

package/src/Tabs/Tab.svelte

@@ -5,7 +5,7 @@
   export let icon = ""
 
   const dispatch = createEventDispatcher()
-  let selected = getContext("tab")
+  const selected = getContext("tab")
   let tab
   let tabInfo
 
@@ -16,8 +16,8 @@
     // We just need to get this off the main thread to fix this, by using
     // a 0ms timeout.
     setTimeout(() => {
-      tabInfo = tab?.getBoundingClientRect()
-      if (tabInfo && $selected.title === title) {
+      tabInfo = tab.getBoundingClientRect()
+      if ($selected.title === title) {
         $selected.info = tabInfo
       }
     }, 0)

package/src/Tabs/Tabs.svelte

@@ -6,13 +6,9 @@
   export let selected
   export let vertical = false
   export let noPadding = false
-  // added as a separate option as noPadding is used for vertical padding
-  export let noHorizPadding = false
   export let quiet = false
   export let emphasized = false
 
-  let thisSelected = undefined
-
   let _id = id()
   const tab = writable({ title: selected, id: _id, emphasized })
   setContext("tab", tab)
@@ -22,19 +18,9 @@
   const dispatch = createEventDispatcher()
 
   $: {
-    if (thisSelected !== selected) {
-      thisSelected = selected
-      dispatch("select", thisSelected)
-    } else if ($tab.title !== thisSelected) {
-      thisSelected = $tab.title
+    if ($tab.title !== selected) {
       selected = $tab.title
-      dispatch("select", thisSelected)
-    }
-    if ($tab.title !== thisSelected) {
-      tab.update(state => {
-        state.title = thisSelected
-        return state
-      })
+      dispatch("select", selected)
     }
   }
 
@@ -73,7 +59,6 @@
 <div
   bind:this={container}
   class:quiet
-  class:noHorizPadding
   class="selected-border spectrum-Tabs {quiet &&
     'spectrum-Tabs--quiet'} spectrum-Tabs--{vertical
     ? 'vertical'
@@ -114,9 +99,6 @@
   .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
     bottom: 0 !important;
   }
-  .noHorizPadding {
-    padding: 0;
-  }
   .noPadding {
     margin: 0;
   }

package/src/Typography/Detail.svelte

@@ -13,9 +13,3 @@
 >
   <slot />
 </p>
-
-<style>
-  p {
-    font-weight: 600;
-  }
-</style>

package/src/index.js

@@ -59,7 +59,6 @@ export { default as Badge } from "./Badge/Badge.svelte"
 export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
 export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
 export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
-export { default as Banner } from "./Banner/Banner.svelte"
 
 // Typography
 export { default as Body } from "./Typography/Body.svelte"

package/src/Banner/Banner.svelte

@@ -1,59 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-
-  let dispatch = createEventDispatcher()
-
-  export let type = "info"
-  export let icon = "Info"
-  export let size = "S"
-  export let extraButtonText
-  export let extraButtonAction
-
-  let show = true
-
-  function clear() {
-    show = false
-    dispatch("change")
-  }
-</script>
-
-{#if show}
-  <div class="spectrum-Toast spectrum-Toast--{type}">
-    <svg
-      class="spectrum-Icon spectrum-Icon--size{size} spectrum-Toast-typeIcon"
-      focusable="false"
-      aria-hidden="true"
-    >
-      <use xlink:href="#spectrum-icon-18-{icon}" />
-    </svg>
-    <div class="spectrum-Toast-body">
-      <div class="spectrum-Toast-content">
-        <slot />
-      </div>
-      {#if extraButtonText && extraButtonAction}
-        <button
-          class="spectrum-Button spectrum-Button--sizeM spectrum-Button--overBackground spectrum-Button--quiet"
-          on:click={extraButtonAction}
-        >
-          <span class="spectrum-Button-label">{extraButtonText}</span>
-        </button>
-      {/if}
-    </div>
-    <div class="spectrum-Toast-buttons">
-      <button
-        class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--size{size}"
-        on:click={clear}
-      >
-        <div class="spectrum-ClearButton-fill">
-          <svg
-            class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100"
-            focusable="false"
-            aria-hidden="true"
-          >
-            <use xlink:href="#spectrum-css-icon-Cross100" />
-          </svg>
-        </div>
-      </button>
-    </div>
-  </div>
-{/if}