@budibase/bbui 1.3.21-alpha.1 → 1.3.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.3.21-alpha.1",
+  "version": "1.3.21",
   "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.3.21-alpha.1",
+    "@budibase/string-templates": "^1.3.21",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -85,5 +85,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "01d92902c4c6a0a63c22d02e3a948bfd80d4ec0b"
+  "gitHead": "19ed43cb817a650c859e9d237c5053cd3ee54526"
 }

package/src/Actions/position_dropdown.js

@@ -1,4 +1,4 @@
-export default function positionDropdown(element, { anchor, align, maxWidth }) {
+export default function positionDropdown(element, { anchor, align }) {
   let positionSide = "top"
   let maxHeight = 0
   let dimensions = getDimensions(anchor)
@@ -34,24 +34,13 @@ export default function positionDropdown(element, { anchor, align, maxWidth }) {
   }
 
   function calcLeftPosition() {
-    let left
-
-    if (align == "right") {
-      left = dimensions.left + dimensions.width - dimensions.containerWidth
-    } else if (align == "right-side") {
-      left = dimensions.left + dimensions.width
-    } else {
-      left = dimensions.left
-    }
-
-    return left
+    return align === "right"
+      ? dimensions.left + dimensions.width - dimensions.containerWidth
+      : dimensions.left
   }
 
   element.style.position = "absolute"
   element.style.zIndex = "9999"
-  if (maxWidth) {
-    element.style.maxWidth = `${maxWidth}px`
-  }
   element.style.minWidth = `${dimensions.width}px`
   element.style.maxHeight = `${maxHeight.toFixed(0)}px`
   element.style.transformOrigin = `center ${positionSide}`
@@ -65,8 +54,10 @@ export default function positionDropdown(element, { anchor, align, maxWidth }) {
       element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
     })
   })
+
   resizeObserver.observe(anchor)
   resizeObserver.observe(element)
+
   return {
     destroy() {
       resizeObserver.disconnect()

package/src/Banner/BannerDisplay.svelte

@@ -4,32 +4,22 @@
   import { banner } from "../Stores/banner"
   import Banner from "./Banner.svelte"
   import { fly } from "svelte/transition"
-  import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
 </script>
 
 <Portal target=".banner-container">
   <div class="banner">
-    {#each $banner.messages as message}
+    {#if $banner.message}
       <div transition:fly={{ y: -30 }}>
         <Banner
-          type={message.type}
-          extraButtonText={message.extraButtonText}
-          extraButtonAction={message.extraButtonAction}
-          on:change={() => {
-            if (message.onChange) {
-              message.onChange()
-            }
-          }}
-          showCloseButton={typeof message.showCloseButton === "boolean"
-            ? message.showCloseButton
-            : true}
+          type={$banner.type}
+          extraButtonText={$banner.extraButtonText}
+          extraButtonAction={$banner.extraButtonAction}
+          on:change={$banner.onChange}
         >
-          <TooltipWrapper tooltip={message.tooltip} disabled={false}>
-            {message.message}
-          </TooltipWrapper>
+          {$banner.message}
         </Banner>
       </div>
-    {/each}
+    {/if}
   </div>
 </Portal>
 

package/src/InlineAlert/InlineAlert.svelte

@@ -6,7 +6,6 @@
   export let header = ""
   export let message = ""
   export let onConfirm = undefined
-  export let buttonText = ""
 
   $: icon = selectIcon(type)
   // if newlines used, convert them to different elements
@@ -40,16 +39,13 @@
     <div class="spectrum-InLineAlert-content">{splitMsg}</div>
   {/each}
   {#if onConfirm}
-    <div class="spectrum-InLineAlert-footer button">
-      <Button secondary on:click={onConfirm}>{buttonText || "OK"}</Button>
+    <div class="spectrum-InLineAlert-footer">
+      <Button secondary on:click={onConfirm}>OK</Button>
     </div>
   {/if}
 </div>
 
 <style>
-  .button {
-    margin-top: 10px;
-  }
   .spectrum-InLineAlert {
     --spectrum-semantic-negative-border-color: #e34850;
     --spectrum-semantic-positive-border-color: #2d9d78;

package/src/Label/Label.svelte

@@ -4,15 +4,10 @@
 
   export let size = "M"
   export let tooltip = ""
-  export let muted
 </script>
 
 <TooltipWrapper {tooltip} {size}>
-  <label
-    class:muted
-    for=""
-    class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}
-  >
+  <label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
     <slot />
   </label>
 </TooltipWrapper>
@@ -22,8 +17,4 @@
     padding: 0;
     white-space: nowrap;
   }
-
-  .muted {
-    opacity: 0.5;
-  }
 </style>

package/src/Modal/ModalContent.svelte

@@ -24,6 +24,7 @@
   export let secondaryAction = undefined
   export let secondaryButtonWarning = false
   export let dataCy = null
+
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
   $: confirmDisabled = disabled || loading
@@ -87,11 +88,12 @@
     <section class="spectrum-Dialog-content content-grid">
       <slot />
     </section>
-    {#if showCancelButton || showConfirmButton || $$slots.footer}
+    {#if showCancelButton || showConfirmButton}
       <div
         class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter"
       >
         <slot name="footer" />
+
         {#if showSecondaryButton && secondaryButtonText && secondaryAction}
           <div class="secondary-action">
             <Button

package/src/Popover/Popover.svelte

@@ -11,7 +11,6 @@
   export let align = "right"
   export let portalTarget
   export let dataCy
-  export let maxWidth
 
   export let direction = "bottom"
   export let showTip = false
@@ -46,7 +45,7 @@
   <Portal target={portalTarget}>
     <div
       tabindex="0"
-      use:positionDropdown={{ anchor, align, maxWidth }}
+      use:positionDropdown={{ anchor, align }}
       use:clickOutside={hide}
       on:keydown={handleEscape}
       class={"spectrum-Popover is-open " + (tooltipClasses || "")}

package/src/ProgressBar/ProgressBar.svelte

@@ -8,8 +8,6 @@
   export let duration = 1000
   export let width = false
   export let sideLabel = false
-  export let hidePercentage = true
-  export let color // red, green, default = blue
 
   export let size = "M"
 
@@ -39,7 +37,7 @@
       <slot />
     </div>
   {/if}
-  {#if !hidePercentage && (value || value === 0)}
+  {#if value || value === 0}
     <div
       class="spectrum-FieldLabel spectrum-ProgressBar-percentage spectrum-FieldLabel--size{size}"
     >
@@ -49,19 +47,8 @@
   <div class="spectrum-ProgressBar-track">
     <div
       class="spectrum-ProgressBar-fill"
-      class:color-green={color === "green"}
-      class:color-red={color === "red"}
       style={value || value === 0 ? `width: ${$progress}%` : ""}
     />
   </div>
   <div class="spectrum-ProgressBar-label" hidden="" />
 </div>
-
-<style>
-  .color-green {
-    background: #009562;
-  }
-  .color-red {
-    background: #dd2019;
-  }
-</style>

package/src/SideNavigation/Item.svelte

@@ -1,7 +1,6 @@
 <script>
   import { getContext } from "svelte"
   const multilevel = getContext("sidenav-type")
-  import Badge from "../Badge/Badge.svelte"
   export let href = ""
   export let external = false
   export let heading = ""
@@ -9,7 +8,6 @@
   export let selected = false
   export let disabled = false
   export let dataCy
-  export let badge = ""
 </script>
 
 <li
@@ -40,22 +38,10 @@
       </svg>
     {/if}
     <slot />
-    {#if badge}
-      <div class="badge">
-        <Badge active size="S">{badge}</Badge>
-      </div>
-    {/if}
   </a>
-
   {#if multilevel && $$slots.subnav}
     <ul class="spectrum-SideNav">
       <slot name="subnav" />
     </ul>
   {/if}
 </li>
-
-<style>
-  .badge {
-    margin-left: 10px;
-  }
-</style>

package/src/Stores/banner.js

@@ -1,14 +1,7 @@
 import { writable } from "svelte/store"
 
-export const BANNER_TYPES = {
-  INFO: "info",
-  NEGATIVE: "negative",
-}
-
 export function createBannerStore() {
-  const DEFAULT_CONFIG = {
-    messages: [],
-  }
+  const DEFAULT_CONFIG = {}
 
   const banner = writable(DEFAULT_CONFIG)
 
@@ -27,38 +20,17 @@ export function createBannerStore() {
   const showStatus = async () => {
     const config = {
       message: "Some systems are experiencing issues",
-      type: BANNER_TYPES.NEGATIVE,
+      type: "negative",
       extraButtonText: "View Status",
       extraButtonAction: () => window.open("https://status.budibase.com/"),
     }
 
-    await queue([config])
-  }
-
-  const queue = async entries => {
-    const priority = {
-      [BANNER_TYPES.NEGATIVE]: 0,
-      [BANNER_TYPES.INFO]: 1,
-    }
-    banner.update(store => {
-      const sorted = [...store.messages, ...entries].sort((a, b) => {
-        if (priority[a.type] == priority[b.type]) {
-          return 0
-        }
-        return priority[a.type] < priority[b.type] ? -1 : 1
-      })
-      return {
-        ...store,
-        messages: sorted,
-      }
-    })
+    await show(config)
   }
 
   return {
     subscribe: banner.subscribe,
     showStatus,
-    show,
-    queue,
   }
 }
 

package/src/Tooltip/TooltipWrapper.svelte

@@ -4,7 +4,6 @@
 
   export let tooltip = ""
   export let size = "M"
-  export let disabled = true
 
   let showTooltip = false
 </script>
@@ -20,7 +19,7 @@
         on:mouseleave={() => (showTooltip = false)}
         on:focus
       >
-        <Icon name="InfoOutline" size="S" {disabled} />
+        <Icon name="InfoOutline" size="S" disabled={true} />
       </div>
       {#if showTooltip}
         <div class="tooltip">
@@ -55,6 +54,7 @@
     transform: scale(0.75);
   }
   .icon-small {
-    margin-bottom: -2px;
+    margin-top: -2px;
+    margin-bottom: -5px;
   }
 </style>

package/src/index.js

@@ -34,7 +34,6 @@ export { default as Layout } from "./Layout/Layout.svelte"
 export { default as Page } from "./Layout/Page.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
-export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
 export { default as MenuSeparator } from "./Menu/Separator.svelte"
@@ -95,7 +94,7 @@ export { default as clickOutside } from "./Actions/click_outside"
 
 // Stores
 export { notifications, createNotificationStore } from "./Stores/notifications"
-export { banner, BANNER_TYPES } from "./Stores/banner"
+export { banner } from "./Stores/banner"
 
 // Helpers
 export * as Helpers from "./helpers"