@budibase/bbui 1.58.13 → 2.0.0

package/src/Menu/Item.svelte

@@ -0,0 +1,96 @@
+<script>
+  import { createEventDispatcher, getContext } from "svelte"
+  import Icon from "../Icon/Icon.svelte"
+
+  const dispatch = createEventDispatcher()
+  const actionMenu = getContext("actionMenu")
+
+  export let dataCy
+  export let icon = undefined
+  export let disabled = undefined
+  export let noClose = false
+  export let keyBind = undefined
+
+  $: keys = getKeys(keyBind)
+
+  const getKeys = keyBind => {
+    let keys = keyBind?.split("+") || []
+    for (let i = 0; i < keys.length; i++) {
+      if (
+        keys[i].toLowerCase() === "ctrl" &&
+        navigator.platform.startsWith("Mac")
+      ) {
+        keys[i] = "⌘"
+      }
+    }
+    return keys
+  }
+
+  const onClick = () => {
+    if (actionMenu && !noClose) {
+      actionMenu.hide()
+    }
+    dispatch("click")
+  }
+</script>
+
+<li
+  data-cy={dataCy}
+  on:click|preventDefault={disabled ? null : onClick}
+  class="spectrum-Menu-item"
+  class:is-disabled={disabled}
+  role="menuitem"
+  tabindex="0"
+>
+  {#if icon}
+    <div class="icon">
+      <Icon name={icon} size="S" />
+    </div>
+  {/if}
+  <span class="spectrum-Menu-itemLabel"><slot /></span>
+  {#if keys?.length}
+    <div class="keys">
+      {#each keys as key}
+        <div class="key">
+          {#if key.startsWith("!")}
+            <Icon size="XS" name={key.split("!")[1]} />
+          {:else}
+            {key}
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</li>
+
+<style>
+  .icon {
+    align-self: center;
+    margin-right: var(--spacing-s);
+  }
+  .keys {
+    margin-left: 30px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 4px;
+  }
+  .key {
+    color: var(--spectrum-global-color-gray-900);
+    padding: 2px 4px;
+    font-size: 12px;
+    font-weight: 600;
+    background-color: var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    min-width: 12px;
+    height: 16px;
+    text-align: center;
+    margin: -1px 0;
+    display: grid;
+    place-items: center;
+  }
+  .is-disabled .key {
+    color: var(--spectrum-global-color-gray-600);
+  }
+</style>

package/src/Menu/Menu.svelte

@@ -0,0 +1,7 @@
+<script>
+  import "@spectrum-css/menu/dist/index-vars.css"
+</script>
+
+<ul class="spectrum-Menu" role="menu">
+  <slot />
+</ul>

package/src/Menu/Menu.svench

@@ -0,0 +1,19 @@
+<script>
+    import Menu from './Menu.svelte'
+    import Separator from './Separator.svelte'
+    import Section from './Section.svelte'
+    import Item from './Item.svelte'
+</script>
+
+<Menu>
+    <Section heading="Section heading">
+        <Item>Some Item 1</Item>
+        <Item>Some Item 2</Item>
+        <Item>Some Item 3</Item>
+    </Section>
+    <Separator />
+    <Section heading="Section heading">
+        <Item icon="SaveFloppy">Save</Item>
+        <Item disabled icon="DataDownload">Download</Item>
+    </Section>
+</Menu>

package/src/Menu/Section.svelte

@@ -0,0 +1,10 @@
+<script>
+  export let heading
+</script>
+
+<li role="presentation">
+  <span class="spectrum-Menu-sectionHeading">{heading}</span>
+  <ul class="spectrum-Menu" role="group">
+    <slot />
+  </ul>
+</li>

package/src/Menu/Separator.svelte

@@ -0,0 +1 @@
+<li class="spectrum-Menu-divider" role="separator" />

package/src/Modal/Content.svelte

@@ -3,15 +3,4 @@
   let value = ""
 </script>
 
-<style>
-	p {
-		font-size: var(--font-size-m);
-		margin: 0;
-		font-family: var(--font-sans);
-		font-weight: 400;
-		line-height: 1.5;
-		color: var(--grey-7);
-	}
-</style>
-
 <Input label="Your Name" bind:value />

package/src/Modal/CustomContent.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { getContext } from "svelte";
-  import Context from "../context";
+  import { getContext } from "svelte"
+  import Context from "../context"
 
   const { hide } = getContext(Context.Modal)
 
@@ -14,6 +14,13 @@
   }
 </script>
 
+<div on:click={increment}>
+  Click me
+  {remaining}
+  more time{remaining === 1 ? "" : "s"}
+  to close this modal!
+</div>
+
 <style>
   div {
     padding: 40px;
@@ -29,7 +36,3 @@
     cursor: pointer;
   }
 </style>
-
-<div on:click={increment}>
-  Click me {remaining} more time{remaining === 1 ? "" : "s"} to close this modal!
-</div>

package/src/Modal/Modal.svelte

@@ -1,15 +1,18 @@
 <script>
-  import { createEventDispatcher, setContext } from "svelte"
+  import "@spectrum-css/modal/dist/index-vars.css"
+  import "@spectrum-css/underlay/dist/index-vars.css"
+  import { createEventDispatcher, setContext, tick } from "svelte"
   import { fade, fly } from "svelte/transition"
   import Portal from "svelte-portal"
-  import Context from "../context";
-  const dispatch = createEventDispatcher()
+  import Context from "../context"
+
+  export let fixed = false
+  export let inline = false
 
-  export let padding = true
-  export let width = undefined
-  export let border = true
+  const dispatch = createEventDispatcher()
+  let visible = fixed || inline
+  let modal
 
-  let visible = false
   $: dispatch(visible ? "show" : "hide")
 
   export function show() {
@@ -20,93 +23,143 @@
   }
 
   export function hide() {
-    if (!visible) {
+    if (!visible || fixed || inline) {
       return
     }
     visible = false
   }
 
+  export function cancel() {
+    if (!visible) {
+      return
+    }
+    dispatch("cancel")
+    hide()
+  }
+
   function handleKey(e) {
     if (visible && e.key === "Escape") {
-      hide()
+      cancel()
+    }
+  }
+
+  async function focusModal(node) {
+    await tick()
+
+    // Try to focus first input
+    const inputs = node.querySelectorAll("input")
+    if (inputs?.length) {
+      inputs[0].focus()
+    }
+
+    // Otherwise try to focus confirmation button
+    else if (modal) {
+      const confirm = modal.querySelector(".confirm-wrap .spectrum-Button")
+      if (confirm) {
+        confirm.focus()
+      }
     }
   }
 
-  setContext(Context.Modal, { show, hide })
+  setContext(Context.Modal, { show, hide, cancel })
 </script>
 
 <svelte:window on:keydown={handleKey} />
 
-{#if visible}
-  <Portal target="body">
-    <div
-      class="overlay"
-      on:click|self={hide}
-      transition:fade={{ duration: 200 }}>
-      <div
-        class="scroll-wrapper"
-        on:click|self={hide}
-        transition:fly={{ y: 30, duration: 200 }}>
-        <div class="content-wrapper" on:click|self={hide}>
-          <div class="modal" class:padding class:border style={width ? `flex: 0 0 ${width}` : ""}>
-            <slot/>
+{#if inline}
+  {#if visible}
+    <div use:focusModal bind:this={modal} class="spectrum-Modal inline is-open">
+      <slot />
+    </div>
+  {/if}
+{:else}
+  <!--
+    We cannot conditionally render the portal as this leads to a missing
+    insertion point when using nested modals. Therefore we just conditionally
+    render the content of the portal.
+    It still breaks the modal animation, but its better than soft bricking the
+    screen.
+  -->
+  <Portal target=".modal-container">
+    {#if visible}
+      <div class="spectrum-Underlay is-open" on:mousedown|self={cancel}>
+        <div
+          class="background"
+          in:fade={{ duration: 200 }}
+          out:fade|local={{ duration: 200 }}
+        />
+        <div class="modal-wrapper" on:mousedown|self={cancel}>
+          <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
+            <slot name="outside" />
+            <div
+              use:focusModal
+              bind:this={modal}
+              class="spectrum-Modal is-open"
+              in:fly={{ y: 30, duration: 200 }}
+              out:fly|local={{ y: 30, duration: 200 }}
+            >
+              <slot />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    {/if}
   </Portal>
 {/if}
 
 <style>
-  .overlay {
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
+  .spectrum-Underlay {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    background-color: rgba(0, 0, 0, 0.25);
     z-index: 999;
+    overflow: auto;
+    overflow-x: hidden;
+    background: transparent;
+  }
+  .background {
+    background: var(--modal-background, rgba(0, 0, 0, 0.75));
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    opacity: 0.65;
+    pointer-events: none;
   }
 
-  .scroll-wrapper {
+  .modal-wrapper {
     flex: 1 1 auto;
     display: flex;
     flex-direction: row;
+    -moz-box-pack: center;
     justify-content: center;
     align-items: flex-start;
     max-height: 100%;
   }
-
-  .content-wrapper {
+  .modal-inner-wrapper {
     flex: 1 1 auto;
     display: flex;
     flex-direction: row;
+    -moz-box-pack: center;
     justify-content: center;
     align-items: flex-start;
     width: 0;
-  }
-
-  .modal {
-    background-color: var(--background);
-    display: grid;
-    align-items: stretch;
-    box-shadow: 0 0 4rem 1.5rem rgba(0, 0, 0, 0.15);
     position: relative;
-    flex: 0 0 400px;
-    margin: 2rem 0;
-    border-radius: var(--border-radius-m);
-    gap: var(--spacing-xl);
   }
-  .modal.padding {
-    padding: var(--spacing-xl);
+
+  .spectrum-Modal {
+    overflow: visible;
+    max-height: none;
+    margin: 40px 0;
+    transform: none;
+    --spectrum-dialog-confirm-border-radius: var(
+      --spectrum-global-dimension-size-100
+    );
+    max-width: 100%;
   }
-  .modal.border {
-    border: var(--border-dark);
+  :global(.spectrum--lightest .spectrum-Modal.inline) {
+    border: var(--border-light);
   }
 </style>

package/src/Modal/ModalContent.svelte

@@ -1,23 +1,41 @@
 <script>
-  import { createEventDispatcher, getContext } from "svelte"
+  import "@spectrum-css/dialog/dist/index-vars.css"
+  import { getContext } from "svelte"
   import Button from "../Button/Button.svelte"
-  import Icon from "../Icons/Icon.svelte";
-  import Context from "../context";
-  const dispatch = createEventDispatcher()
+  import Divider from "../Divider/Divider.svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import Context from "../context"
+  import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
 
   export let title = undefined
+  export let size = "S"
   export let cancelText = "Cancel"
   export let confirmText = "Confirm"
   export let showCancelButton = true
   export let showConfirmButton = true
   export let showCloseIcon = true
   export let onConfirm = undefined
+  export let onCancel = undefined
   export let disabled = false
+  export let showDivider = true
 
-  const { hide } = getContext(Context.Modal)
+  export let showSecondaryButton = false
+  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
 
+  async function secondary() {
+    loading = true
+    if (!secondaryAction || (await secondaryAction()) !== false) {
+      hide()
+    }
+    loading = false
+  }
+
   async function confirm() {
     loading = true
     if (!onConfirm || (await onConfirm()) !== false) {
@@ -25,108 +43,148 @@
     }
     loading = false
   }
+
+  async function close() {
+    loading = true
+    if (!onCancel || (await onCancel()) !== false) {
+      cancel()
+    }
+    loading = false
+  }
 </script>
 
-<div class="modal-content">
-  {#if title}
-    <header>
-      <h5>{title}</h5>
-      <div class="header-content">
-        <slot name="header" />
-      </div>
-    </header>
-  {/if}
-  <slot />
-  {#if showCancelButton || showConfirmButton}
-    <footer>
-      <div class="footer-content">
+<div
+  class="spectrum-Dialog"
+  class:spectrum-Dialog--small={size === "S"}
+  class:spectrum-Dialog--medium={size === "M"}
+  class:spectrum-Dialog--large={size === "L"}
+  class:spectrum-Dialog--extraLarge={size === "XL"}
+  style="position: relative;"
+  role="dialog"
+  tabindex="-1"
+  aria-modal="true"
+  data-cy={dataCy}
+>
+  <div class="spectrum-Dialog-grid">
+    {#if title || $$slots.header}
+      <h1
+        class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
+        class:noDivider={!showDivider}
+        class:header-spacing={$$slots.header}
+      >
+        {#if title}
+          {title}
+        {:else if $$slots.header}
+          <slot name="header" />
+        {/if}
+      </h1>
+      {#if showDivider}
+        <Divider />
+      {/if}
+    {/if}
+
+    <!-- TODO: Remove content-grid class once Layout components are in bbui -->
+    <section class="spectrum-Dialog-content content-grid">
+      <slot />
+    </section>
+    {#if showCancelButton || showConfirmButton || $$slots.footer}
+      <div
+        class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter"
+      >
         <slot name="footer" />
-      </div>
-      <div class="buttons">
+        {#if showSecondaryButton && secondaryButtonText && secondaryAction}
+          <div class="secondary-action">
+            <Button
+              group
+              secondary
+              warning={secondaryButtonWarning}
+              on:click={secondary}>{secondaryButtonText}</Button
+            >
+          </div>
+        {/if}
+
         {#if showCancelButton}
-          <Button secondary on:click={hide}>{cancelText}</Button>
+          <Button group secondary newStyles on:click={close}>
+            {cancelText}
+          </Button>
         {/if}
         {#if showConfirmButton}
-          <Button
-            primary
-            {...$$restProps}
-            disabled={confirmDisabled}
-            on:click={confirm}>
-            {confirmText}
-          </Button>
+          <span class="confirm-wrap">
+            <Button
+              group
+              cta
+              {...$$restProps}
+              disabled={confirmDisabled}
+              on:click={confirm}
+            >
+              {#if loading}
+                <ProgressCircle overBackground={true} size="S" />
+              {/if}
+              {#if !loading}
+                {confirmText}
+              {/if}
+            </Button>
+          </span>
         {/if}
       </div>
-    </footer>
-  {/if}
-  {#if showCloseIcon}
-    <div class="close-icon" on:click={hide}>
-      <Icon name="closeline" />
-    </div>
-  {/if}
+    {/if}
+    {#if showCloseIcon}
+      <div class="close-icon">
+        <Icon hoverable name="Close" on:click={cancel} />
+      </div>
+    {/if}
+  </div>
 </div>
 
 <style>
-  .modal-content {
+  .spectrum-Dialog--extraLarge {
+    width: 1000px;
+  }
+
+  .content-grid {
     display: grid;
     position: relative;
     gap: var(--spacing-xl);
-    color: var(--ink);
   }
 
-  header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-right: 40px;
+  .spectrum-Dialog-content {
+    overflow: visible;
   }
-  header h5 {
-    margin: 0;
-    font-weight: 500;
+  .spectrum-Dialog-heading {
+    font-family: var(--font-sans);
+  }
+  .spectrum-Dialog-heading.noDivider {
+    margin-bottom: 12px;
   }
 
-  .header-content {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
+  .spectrum-Dialog-buttonGroup {
+    gap: var(--spectrum-global-dimension-static-size-200);
   }
 
   .close-icon {
     position: absolute;
-    top: 0;
-    right: 0;
-    color: var(--ink);
+    top: 15px;
+    right: 15px;
     font-size: var(--font-size-m);
   }
-  .close-icon:hover {
-    color: var(--grey-6);
-    cursor: pointer;
-  }
   .close-icon :global(svg) {
     margin-right: 0;
   }
 
-  footer {
+  .header-spacing {
     display: flex;
-    flex-direction: row;
     justify-content: space-between;
-    align-items: center;
-    gap: var(--spacing-m);
   }
 
-  .footer-content {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
+  .secondary-action {
+    margin-right: auto;
   }
 
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: var(--spacing-m);
+  .spectrum-Dialog-buttonGroup {
+    padding-left: 0;
+  }
+
+  .confirm-wrap :global(.spectrum-Button-label) {
+    display: contents;
   }
 </style>