add underlay component and fix modal

packages/bbui/package.json

@@ -43,6 +43,10 @@
     "dist"
   ],
   "dependencies": {
+    "@spectrum-css/button": "^3.0.1",
+    "@spectrum-css/dialog": "^3.0.1",
+    "@spectrum-css/modal": "^3.0.1",
+    "@spectrum-css/underlay": "^2.0.9",
     "markdown-it": "^12.0.4",
     "quill": "^1.3.7",
     "sirv-cli": "^0.4.6",

packages/bbui/src/Modal/Modal.svelte

@@ -1,4 +1,7 @@
 <script>
+  import "@spectrum-css/dialog/dist/index-vars.css"
+  import "@spectrum-css/modal/dist/index-vars.css"
+  import "@spectrum-css/underlay/dist/index-vars.css"
   import { createEventDispatcher, setContext } from "svelte"
   import { fade, fly } from "svelte/transition"
   import Portal from "svelte-portal"
@@ -6,8 +9,9 @@
   const dispatch = createEventDispatcher()
 
   export let padding = true
-  export let width = undefined
+  export let width = ''
   export let border = true
+  export let dismissable = true
 
   let visible = false
   $: dispatch(visible ? "show" : "hide")
@@ -39,73 +43,12 @@
 
 {#if visible}
   <Portal target="modal-container">
-    <div class="overlay spectrum-Modal" transition:fade={{ duration: 200 }} on:click|self={hide}>
+    <div class="spectrum-Underlay is-open" transition:fade={{ duration: 200 }} on:click|self={hide}>
-      <section
+      <div class="spectrum-Modal-wrapper">
-        class="spectrum-Dialog spectrum-Dialog--large spectrum-Dialog--dismissable" role="dialog" tabindex="-1" aria-modal="true">
+        <div class="spectrum-Modal is-open" transition:fly={{ y: 30, duration: 200 }}>
-        <div
+          <slot />
-          class="scroll-wrapper"
-          on:click|self={hide}
-          transition:fly={{ y: 30, duration: 200 }}>
-          <div class="content-wrapper" on:click|self={hide}>
-            <div
-              class="modal {width ? width : ''}"
-              class:padding
-              class:border>
-              <slot />
-            </div>
-          </div>
         </div>
-      </section>
+      </div>
     </div>
   </Portal>
 {/if}
-
-<style>
-  .overlay {
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(0, 0, 0, 0.25);
-    z-index: 999;
-  }
-
-  .scroll-wrapper {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
-    max-height: 100%;
-  }
-
-  .content-wrapper {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
-    width: 0;
-  }
-
-  .modal {
-    background-color: var(--spectrum-global-color-gray-900);
-    display: grid;
-    align-items: stretch;
-    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);
-  }
-</style>

packages/bbui/yarn.lock

@@ -410,6 +410,26 @@
     lodash "^4.17.4"
     read-pkg-up "^7.0.0"
 
+"@spectrum-css/button@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.1.tgz#6db8c3e851baecd0f1c2d88fef37d49d01c6e643"
+  integrity sha512-YXrBtjIYisk4Vaxnp0RiE4gdElQX04P2mc4Pi2GlQ27dJKlHmufYcF+kAqGdtiyK5yjdN/vKRcC8y13aA4rusA==
+
+"@spectrum-css/dialog@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.1.tgz#33aae036282159f6aa998848b8c0828640a9620a"
+  integrity sha512-hUFbRR6RGT63MNuP7wP+k9KU+uRuICsduMihskh700e+jiQ+Gsv53fBFDlB843FoZYlIXzFQXgtjMUC5a4Qibw==
+
+"@spectrum-css/modal@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.1.tgz#613a6b83d0330a4d38db41a98090800751c56d8d"
+  integrity sha512-F7D99F3cjDGT9DM9sogx/p49jrNYT7a1J6TUoqV73wUf+0gP+dTsskBOo9jB8VbUE+POQPjiDLB+SWLp6iBB+w==
+
+"@spectrum-css/underlay@^2.0.9":
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.9.tgz#fc10f971d1325cc844b727e6260f7217844060e8"
+  integrity sha512-X86xd0PG4QobmUyXA90BFGnyygaI8kW64dA4ysf4z0cOvUWjNbAAl3a/DB/WRyrnp63Zqv83T/cgNbetagTbWg==
+
 "@sveltejs/vite-plugin-svelte@^1.0.0-next.5":
   version "1.0.0-next.5"
   resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.5.tgz#8cf608f7a3c33dfa5b648397aae1ba90e6a4883f"