@budibase/bbui 1.4.17 → 1.4.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.4.17",
+  "version": "1.4.18",
   "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.4.17",
+    "@budibase/string-templates": "^1.4.18",
     "@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": "3ff0089293ddb047d76c1027f6e5ccf2c63c313d"
+  "gitHead": "395b2a45e083fb38f6ee4d3ed2b4d71534d6f526"
 }

package/src/Form/Core/PickerDropdown.svelte

@@ -9,13 +9,13 @@
   import StatusLight from "../../StatusLight/StatusLight.svelte"
   import Detail from "../../Typography/Detail.svelte"
   import Search from "./Search.svelte"
+  import IconAvatar from "../../Icon/IconAvatar.svelte"
 
   export let primaryLabel = ""
   export let primaryValue = null
   export let id = null
   export let placeholder = "Choose an option or type"
   export let disabled = false
-  export let updateOnChange = true
   export let error = null
   export let secondaryOptions = []
   export let primaryOptions = []
@@ -204,19 +204,11 @@
                   })}
               >
                 {#if primaryOptions[title].getIcon(option)}
-                  <div
-                    style="background: {primaryOptions[title].getColour(
-                      option
-                    )};"
-                    class="circle"
-                  >
-                    <div>
-                      <Icon
-                        size="S"
-                        name={primaryOptions[title].getIcon(option)}
-                      />
-                    </div>
-                  </div>
+                  <IconAvatar
+                    size="S"
+                    icon={primaryOptions[title].getIcon(option)}
+                    background={primaryOptions[title].getColour(option)}
+                  />
                 {:else if getPrimaryOptionColour(option, idx)}
                   <span class="option-left">
                     <StatusLight
@@ -226,12 +218,13 @@
                   </span>
                 {/if}
                 <span class="spectrum-Menu-itemLabel">
-                  <span
+                  <div
+                    class="primary-text"
                     class:spacing-group={primaryOptions[title].getIcon(option)}
                   >
                     {primaryOptions[title].getLabel(option)}
                     <span />
-                  </span>
+                  </div>
                   <svg
                     class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
                     focusable="false"
@@ -335,6 +328,11 @@
 </div>
 
 <style>
+  .primary-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .spacing-group {
     margin-left: var(--spacing-m);
   }
@@ -367,25 +365,6 @@
     padding-left: 8px;
   }
 
-  .circle {
-    border-radius: 50%;
-    height: 28px;
-    color: white;
-    font-weight: bold;
-    line-height: 48px;
-    font-size: 1.2em;
-    width: 28px;
-    position: relative;
-  }
-
-  .circle > div {
-    position: absolute;
-    text-decoration: none;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-  }
-
   .iconPadding {
     position: absolute;
     top: 50%;

package/src/Form/PickerDropdown.svelte

@@ -14,7 +14,6 @@
   export let disabled = false
   export let readonly = false
   export let error = null
-  export let updateOnChange = true
   export let getSecondaryOptionLabel = option =>
     extractProperty(option, "label")
   export let getSecondaryOptionValue = option =>
@@ -100,7 +99,6 @@
     {searchTerm}
     {autocomplete}
     {dataCy}
-    {updateOnChange}
     {error}
     {disabled}
     {readonly}

package/src/Icon/IconAvatar.svelte

@@ -0,0 +1,58 @@
+<script>
+  import Icon from "./Icon.svelte"
+
+  export let icon
+  export let background
+  export let color
+  export let size = "M"
+</script>
+
+<div
+  class="icon size--{size}"
+  style="background: {background || `transparent`};"
+  class:filled={!!background}
+>
+  <Icon name={icon} color={background ? "white" : color} />
+</div>
+
+<style>
+  .icon {
+    width: 28px;
+    height: 28px;
+    display: grid;
+    place-items: center;
+    border-radius: 50%;
+  }
+  .icon :global(.spectrum-Icon) {
+    width: 22px;
+    height: 22px;
+  }
+  .icon.filled :global(.spectrum-Icon) {
+    width: 16px;
+    height: 16px;
+  }
+  .icon.size--S {
+    width: 22px;
+    height: 22px;
+  }
+  .icon.size--S :global(.spectrum-Icon) {
+    width: 16px;
+    height: 16px;
+  }
+  .icon.size--S.filled :global(.spectrum-Icon) {
+    width: 12px;
+    height: 12px;
+  }
+  .icon.size--L {
+    width: 40px;
+    height: 40px;
+  }
+  .icon.size--L :global(.spectrum-Icon) {
+    width: 28px;
+    height: 28px;
+  }
+  .icon.size--L.filled :global(.spectrum-Icon) {
+    width: 22px;
+    height: 22px;
+  }
+</style>

package/src/List/ListItem.svelte

@@ -1,11 +1,12 @@
 <script>
   import Body from "../Typography/Body.svelte"
-  import Icon from "../Icon/Icon.svelte"
+  import IconAvatar from "../Icon/IconAvatar.svelte"
   import Label from "../Label/Label.svelte"
   import Avatar from "../Avatar/Avatar.svelte"
 
   export let icon = null
   export let iconBackground = null
+  export let iconColor = null
   export let avatar = false
   export let title = null
   export let subtitle = null
@@ -17,9 +18,7 @@
 <div class="list-item" class:hoverable on:click>
   <div class="left">
     {#if icon}
-      <div class="icon" style="background: {iconBackground || `transparent`};">
-        <Icon name={icon} size="S" color={iconBackground ? "white" : null} />
-      </div>
+      <IconAvatar {icon} color={iconColor} background={iconBackground} />
     {/if}
     {#if avatar}
       <Avatar {initials} />
@@ -88,11 +87,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .icon {
-    width: var(--spectrum-alias-avatar-size-400);
-    height: var(--spectrum-alias-avatar-size-400);
-    display: grid;
-    place-items: center;
-    border-radius: 50%;
-  }
 </style>

package/src/Modal/ModalContent.svelte

@@ -79,7 +79,7 @@
         {/if}
       </h1>
       {#if showDivider}
-        <Divider size="M" />
+        <Divider />
       {/if}
     {/if}
 

package/src/Popover/Popover.svelte

@@ -65,6 +65,7 @@
 <style>
   .spectrum-Popover {
     min-width: var(--spectrum-global-dimension-size-2000);
+    border-color: var(--spectrum-global-color-gray-300);
   }
   .spectrum-Popover.is-open.spectrum-Popover--withTip {
     margin-top: var(--spacing-xs);

package/src/index.js

@@ -20,6 +20,7 @@ export { default as Button } from "./Button/Button.svelte"
 export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.svelte"
 export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
 export { default as Icon, directions } from "./Icon/Icon.svelte"
+export { default as IconAvatar } from "./Icon/IconAvatar.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as RadioGroup } from "./Form/RadioGroup.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"