@budibase/bbui 2.2.12-alpha.57 → 2.2.12-alpha.59

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.2.12-alpha.57",
+  "version": "2.2.12-alpha.59",
   "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": "2.2.12-alpha.57",
+    "@budibase/string-templates": "2.2.12-alpha.59",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -89,5 +89,5 @@
   "resolutions": {
     "loader-utils": "1.4.1"
   },
-  "gitHead": "8545cc3943a9a8f59a7587d84cd67bf8038d5219"
+  "gitHead": "7f14375222390ee3a60561cd5027c01fa56715f8"
 }

package/src/ActionButton/ActionButton.svelte

@@ -9,7 +9,6 @@
   export let longPressable = false
   export let disabled = false
   export let icon = ""
-  export let dataCy = null
   export let size = "M"
   export let active = false
   export let fullWidth = false
@@ -37,7 +36,6 @@
 </script>
 
 <button
-  data-cy={dataCy}
   use:longPress
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}

package/src/ActionMenu/ActionMenu.svelte

@@ -6,7 +6,6 @@
   export let disabled = false
   export let align = "left"
   export let portalTarget
-  export let dataCy
 
   let anchor
   let dropdown
@@ -37,7 +36,7 @@
 <div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>
-<Popover bind:this={dropdown} {anchor} {align} {portalTarget} {dataCy}>
+<Popover bind:this={dropdown} {anchor} {align} {portalTarget}>
   <Menu>
     <slot />
   </Menu>

package/src/Actions/position_dropdown.js

@@ -1,6 +1,6 @@
 export default function positionDropdown(
   element,
-  { anchor, align, maxWidth, useAnchorWidth }
+  { anchor, align, maxWidth, useAnchorWidth, offset = 5 }
 ) {
   const update = () => {
     if (!anchor) {
@@ -20,9 +20,9 @@ export default function positionDropdown(
     if (align === "right-outside") {
       styles.top = anchorBounds.top
     } else if (window.innerHeight - anchorBounds.bottom < 100) {
-      styles.top = anchorBounds.top - elementBounds.height - 5
+      styles.top = anchorBounds.top - elementBounds.height - offset
     } else {
-      styles.top = anchorBounds.bottom + 5
+      styles.top = anchorBounds.bottom + offset
       styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
     }
 
@@ -36,7 +36,7 @@ export default function positionDropdown(
     if (align === "right") {
       styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
     } else if (align === "right-outside") {
-      styles.left = anchorBounds.right + 10
+      styles.left = anchorBounds.right + offset
     } else {
       styles.left = anchorBounds.left
     }

package/src/Button/Button.svelte

@@ -13,7 +13,6 @@
   export let icon = undefined
   export let active = false
   export let tooltip = undefined
-  export let dataCy
   export let newStyles = true
   export let id
 
@@ -33,7 +32,6 @@
   class:disabled
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
-  data-cy={dataCy}
   on:click|preventDefault
   on:mouseover={() => (showTooltip = true)}
   on:focus={() => (showTooltip = true)}

package/src/Form/Core/EnvDropdown.svelte

@@ -11,7 +11,6 @@
   export let id = null
   export let readonly = false
   export let updateOnChange = true
-  export let dataCy
   export let align
   export let autofocus = false
   export let variables
@@ -123,7 +122,6 @@
       disabled={hbsValue.length || disabled}
       {readonly}
       {id}
-      data-cy={dataCy}
       value={hbsValue.length ? `{{ ${hbsValue[0]} }}` : value}
       placeholder={placeholder || ""}
       on:click

package/src/Form/Core/Switch.svelte

@@ -6,7 +6,6 @@
   export let id = null
   export let text = null
   export let disabled = false
-  export let dataCy = null
 
   const dispatch = createEventDispatcher()
   const onChange = event => {
@@ -16,7 +15,6 @@
 
 <div class="spectrum-Switch spectrum-Switch--emphasized">
   <input
-    data-cy={dataCy}
     checked={value}
     {disabled}
     on:change={onChange}

package/src/Form/Core/TextField.svelte

@@ -11,7 +11,6 @@
   export let readonly = false
   export let updateOnChange = true
   export let quiet = false
-  export let dataCy
   export let align
   export let autofocus = false
 
@@ -89,7 +88,6 @@
     {disabled}
     {readonly}
     {id}
-    data-cy={dataCy}
     value={value || ""}
     placeholder={placeholder || ""}
     on:click

package/src/Form/EnvDropdown.svelte

@@ -13,7 +13,6 @@
   export let error = null
   export let updateOnChange = true
   export let quiet = false
-  export let dataCy
   export let autofocus
   export let variables
   export let showModal
@@ -28,7 +27,6 @@
 
 <Field {label} {labelPosition} {error}>
   <EnvDropdown
-    {dataCy}
     {updateOnChange}
     {error}
     {disabled}

package/src/Form/Input.svelte

@@ -13,7 +13,6 @@
   export let error = null
   export let updateOnChange = true
   export let quiet = false
-  export let dataCy
   export let autofocus
 
   const dispatch = createEventDispatcher()
@@ -25,7 +24,6 @@
 
 <Field {label} {labelPosition} {error}>
   <TextField
-    {dataCy}
     {updateOnChange}
     {error}
     {disabled}

package/src/Form/InputDropdown.svelte

@@ -14,7 +14,6 @@
   export let error = null
   export let updateOnChange = true
   export let quiet = false
-  export let dataCy
   export let autofocus
   export let options = []
 
@@ -32,7 +31,6 @@
 
 <Field {label} {labelPosition} {error}>
   <InputDropdown
-    {dataCy}
     {updateOnChange}
     {error}
     {disabled}

package/src/Form/PickerDropdown.svelte

@@ -21,7 +21,6 @@
   export let getSecondaryOptionColour = () => {}
   export let getSecondaryOptionIcon = () => {}
   export let quiet = false
-  export let dataCy
   export let autofocus
   export let primaryOptions = []
   export let secondaryOptions = []
@@ -98,7 +97,6 @@
   <PickerDropdown
     {searchTerm}
     {autocomplete}
-    {dataCy}
     {error}
     {disabled}
     {readonly}

package/src/Form/Toggle.svelte

@@ -9,7 +9,6 @@
   export let text = null
   export let disabled = false
   export let error = null
-  export let dataCy = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -19,5 +18,5 @@
 </script>
 
 <Field {label} {labelPosition} {error}>
-  <Switch {dataCy} {error} {disabled} {text} {value} on:change={onChange} />
+  <Switch {error} {disabled} {text} {value} on:change={onChange} />
 </Field>

package/src/Menu/Item.svelte

@@ -5,7 +5,6 @@
   const dispatch = createEventDispatcher()
   const actionMenu = getContext("actionMenu")
 
-  export let dataCy
   export let icon = undefined
   export let disabled = undefined
   export let noClose = false
@@ -35,7 +34,6 @@
 </script>
 
 <li
-  data-cy={dataCy}
   on:click|preventDefault={disabled ? null : onClick}
   class="spectrum-Menu-item"
   class:is-disabled={disabled}

package/src/Modal/ModalContent.svelte

@@ -23,7 +23,7 @@
   export let secondaryButtonText = undefined
   export let secondaryAction = undefined
   export let secondaryButtonWarning = false
-  export let dataCy = null
+
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
   $: confirmDisabled = disabled || loading
@@ -63,7 +63,6 @@
   role="dialog"
   tabindex="-1"
   aria-modal="true"
-  data-cy={dataCy}
 >
   <div class="spectrum-Dialog-grid">
     {#if title || $$slots.header}

package/src/Popover/Popover.svelte

@@ -13,11 +13,11 @@
   export let anchor
   export let align = "right"
   export let portalTarget
-  export let dataCy
   export let maxWidth
   export let open = false
   export let useAnchorWidth = false
   export let dismissible = true
+  export let offset = 5
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
@@ -66,7 +66,7 @@
           align,
           maxWidth,
           useAnchorWidth,
-          showTip: false,
+          offset,
         }}
         use:clickOutside={{
           callback: dismissible ? handleOutsideClick : () => {},
@@ -75,7 +75,6 @@
         on:keydown={handleEscape}
         class="spectrum-Popover is-open"
         role="presentation"
-        data-cy={dataCy}
         transition:fly|local={{ y: -20, duration: 200 }}
       >
         <slot />

package/src/SideNavigation/Item.svelte

@@ -8,7 +8,6 @@
   export let icon = ""
   export let selected = false
   export let disabled = false
-  export let dataCy
   export let badge = ""
 </script>
 
@@ -17,7 +16,6 @@
   class:is-selected={selected}
   class:is-disabled={disabled}
   on:click
-  data-cy={dataCy}
 >
   {#if heading}
     <h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">