@budibase/bbui 1.3.21 → 1.3.22-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.3.21",
+  "version": "1.3.22-alpha.0",
   "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",
+    "@budibase/string-templates": "1.3.22-alpha.0",
     "@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": "19ed43cb817a650c859e9d237c5053cd3ee54526"
+  "gitHead": "a3ecd6c8bd5acee4c08441dd61d5331115bc3c6e"
 }

package/src/Actions/position_dropdown.js

@@ -1,4 +1,4 @@
-export default function positionDropdown(element, { anchor, align }) {
+export default function positionDropdown(element, { anchor, align, maxWidth }) {
   let positionSide = "top"
   let maxHeight = 0
   let dimensions = getDimensions(anchor)
@@ -34,13 +34,24 @@ export default function positionDropdown(element, { anchor, align }) {
   }
 
   function calcLeftPosition() {
-    return align === "right"
-      ? dimensions.left + dimensions.width - dimensions.containerWidth
-      : dimensions.left
+    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
   }
 
   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}`
@@ -54,10 +65,8 @@ export default function positionDropdown(element, { anchor, align }) {
       element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
     })
   })
-
   resizeObserver.observe(anchor)
   resizeObserver.observe(element)
-
   return {
     destroy() {
       resizeObserver.disconnect()

package/src/Banner/BannerDisplay.svelte

@@ -4,22 +4,32 @@
   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">
-    {#if $banner.message}
+    {#each $banner.messages as message}
       <div transition:fly={{ y: -30 }}>
         <Banner
-          type={$banner.type}
-          extraButtonText={$banner.extraButtonText}
-          extraButtonAction={$banner.extraButtonAction}
-          on:change={$banner.onChange}
+          type={message.type}
+          extraButtonText={message.extraButtonText}
+          extraButtonAction={message.extraButtonAction}
+          on:change={() => {
+            if (message.onChange) {
+              message.onChange()
+            }
+          }}
+          showCloseButton={typeof message.showCloseButton === "boolean"
+            ? message.showCloseButton
+            : true}
         >
-          {$banner.message}
+          <TooltipWrapper tooltip={message.tooltip} disabled={false}>
+            {message.message}
+          </TooltipWrapper>
         </Banner>
       </div>
-    {/if}
+    {/each}
   </div>
 </Portal>
 

package/src/InlineAlert/InlineAlert.svelte

@@ -6,6 +6,7 @@
   export let header = ""
   export let message = ""
   export let onConfirm = undefined
+  export let buttonText = ""
 
   $: icon = selectIcon(type)
   // if newlines used, convert them to different elements
@@ -39,13 +40,16 @@
     <div class="spectrum-InLineAlert-content">{splitMsg}</div>
   {/each}
   {#if onConfirm}
-    <div class="spectrum-InLineAlert-footer">
-      <Button secondary on:click={onConfirm}>OK</Button>
+    <div class="spectrum-InLineAlert-footer button">
+      <Button secondary on:click={onConfirm}>{buttonText || "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,10 +4,15 @@
 
   export let size = "M"
   export let tooltip = ""
+  export let muted
 </script>
 
 <TooltipWrapper {tooltip} {size}>
-  <label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
+  <label
+    class:muted
+    for=""
+    class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}
+  >
     <slot />
   </label>
 </TooltipWrapper>
@@ -17,4 +22,8 @@
     padding: 0;
     white-space: nowrap;
   }
+
+  .muted {
+    opacity: 0.5;
+  }
 </style>

package/src/Modal/ModalContent.svelte

@@ -24,7 +24,6 @@
   export let secondaryAction = undefined
   export let secondaryButtonWarning = false
   export let dataCy = null
-
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
   $: confirmDisabled = disabled || loading
@@ -88,12 +87,11 @@
     <section class="spectrum-Dialog-content content-grid">
       <slot />
     </section>
-    {#if showCancelButton || showConfirmButton}
+    {#if showCancelButton || showConfirmButton || $$slots.footer}
       <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,6 +11,7 @@
   export let align = "right"
   export let portalTarget
   export let dataCy
+  export let maxWidth
 
   export let direction = "bottom"
   export let showTip = false
@@ -45,7 +46,7 @@
   <Portal target={portalTarget}>
     <div
       tabindex="0"
-      use:positionDropdown={{ anchor, align }}
+      use:positionDropdown={{ anchor, align, maxWidth }}
       use:clickOutside={hide}
       on:keydown={handleEscape}
       class={"spectrum-Popover is-open " + (tooltipClasses || "")}

package/src/ProgressBar/ProgressBar.svelte

@@ -8,6 +8,8 @@
   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"
 
@@ -37,7 +39,7 @@
       <slot />
     </div>
   {/if}
-  {#if value || value === 0}
+  {#if !hidePercentage && (value || value === 0)}
     <div
       class="spectrum-FieldLabel spectrum-ProgressBar-percentage spectrum-FieldLabel--size{size}"
     >
@@ -47,8 +49,19 @@
   <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,6 +1,7 @@
 <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 = ""
@@ -8,6 +9,7 @@
   export let selected = false
   export let disabled = false
   export let dataCy
+  export let badge = ""
 </script>
 
 <li
@@ -38,10 +40,22 @@
       </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,7 +1,14 @@
 import { writable } from "svelte/store"
 
+export const BANNER_TYPES = {
+  INFO: "info",
+  NEGATIVE: "negative",
+}
+
 export function createBannerStore() {
-  const DEFAULT_CONFIG = {}
+  const DEFAULT_CONFIG = {
+    messages: [],
+  }
 
   const banner = writable(DEFAULT_CONFIG)
 
@@ -20,17 +27,38 @@ export function createBannerStore() {
   const showStatus = async () => {
     const config = {
       message: "Some systems are experiencing issues",
-      type: "negative",
+      type: BANNER_TYPES.NEGATIVE,
       extraButtonText: "View Status",
       extraButtonAction: () => window.open("https://status.budibase.com/"),
     }
 
-    await show(config)
+    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,
+      }
+    })
   }
 
   return {
     subscribe: banner.subscribe,
     showStatus,
+    show,
+    queue,
   }
 }
 

package/src/Tooltip/TooltipWrapper.svelte

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

package/src/index.js

@@ -34,6 +34,7 @@ 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"
@@ -94,7 +95,7 @@ export { default as clickOutside } from "./Actions/click_outside"
 
 // Stores
 export { notifications, createNotificationStore } from "./Stores/notifications"
-export { banner } from "./Stores/banner"
+export { banner, BANNER_TYPES } from "./Stores/banner"
 
 // Helpers
 export * as Helpers from "./helpers"