@budibase/bbui 1.0.19-alpha.0 → 1.0.19-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.19-alpha.0",
+  "version": "1.0.19-alpha.1",
   "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": "78991939242ca4b1ac5209f2ddf5225f09d080fb"
+  "gitHead": "5623634c9caf89d0694e57e726b654fbf7ccb69a"
 }

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/Banner/Banner.svelte

@@ -0,0 +1,59 @@
+<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}

package/src/Form/Core/Switch.svelte

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

package/src/Form/Core/TextArea.svelte

@@ -7,6 +7,8 @@
   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,
@@ -22,6 +24,8 @@
 </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/RadioGroup.svelte

@@ -9,6 +9,7 @@
   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")
 
@@ -31,6 +32,7 @@
     {disabled}
     {value}
     {options}
+    {direction}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}

package/src/Form/TextArea.svelte

@@ -10,6 +10,8 @@
   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 => {
@@ -25,6 +27,8 @@
     {disabled}
     {value}
     {placeholder}
+    {height}
+    {minHeight}
     on:change={onChange}
   />
 </Field>

package/src/Icon/Icon.svelte

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

package/src/Label/Label.svelte

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

package/src/Tabs/Tab.svelte

@@ -5,7 +5,7 @@
   export let icon = ""
 
   const dispatch = createEventDispatcher()
-  const selected = getContext("tab")
+  let 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 ($selected.title === title) {
+      tabInfo = tab?.getBoundingClientRect()
+      if (tabInfo && $selected.title === title) {
         $selected.info = tabInfo
       }
     }, 0)

package/src/Tabs/Tabs.svelte

@@ -6,9 +6,13 @@
   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)
@@ -18,9 +22,19 @@
   const dispatch = createEventDispatcher()
 
   $: {
-    if ($tab.title !== selected) {
+    if (thisSelected !== selected) {
+      thisSelected = selected
+      dispatch("select", thisSelected)
+    } else if ($tab.title !== thisSelected) {
+      thisSelected = $tab.title
       selected = $tab.title
-      dispatch("select", selected)
+      dispatch("select", thisSelected)
+    }
+    if ($tab.title !== thisSelected) {
+      tab.update(state => {
+        state.title = thisSelected
+        return state
+      })
     }
   }
 
@@ -59,6 +73,7 @@
 <div
   bind:this={container}
   class:quiet
+  class:noHorizPadding
   class="selected-border spectrum-Tabs {quiet &&
     'spectrum-Tabs--quiet'} spectrum-Tabs--{vertical
     ? 'vertical'
@@ -99,6 +114,9 @@
   .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
     bottom: 0 !important;
   }
+  .noHorizPadding {
+    padding: 0;
+  }
   .noPadding {
     margin: 0;
   }

package/src/index.js

@@ -59,6 +59,7 @@ 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"