From 0eb904062cfa3db052cce51c17797b12efe0e17f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 9 Apr 2021 11:22:49 +0200
Subject: [PATCH] converts popover to spectrum

---
 packages/bbui/package.json                    |  1 +
 .../bbui/src/DropdownMenu/DropdownMenu.svelte | 31 ++-----------------
 packages/bbui/src/Popover/Popover.svelte      |  2 +-
 packages/bbui/yarn.lock                       |  5 +++
 4 files changed, 9 insertions(+), 30 deletions(-)

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index c29f766923..334fbf24de 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -48,6 +48,7 @@
     "@spectrum-css/dialog": "^3.0.1",
     "@spectrum-css/divider": "^1.0.1",
     "@spectrum-css/modal": "^3.0.1",
+    "@spectrum-css/popover": "^3.0.1",
     "@spectrum-css/underlay": "^2.0.9",
     "markdown-it": "^12.0.4",
     "quill": "^1.3.7",
diff --git a/packages/bbui/src/DropdownMenu/DropdownMenu.svelte b/packages/bbui/src/DropdownMenu/DropdownMenu.svelte
index decc5bb4e2..d297e5e947 100644
--- a/packages/bbui/src/DropdownMenu/DropdownMenu.svelte
+++ b/packages/bbui/src/DropdownMenu/DropdownMenu.svelte
@@ -1,4 +1,5 @@
 <script>
+  import "@spectrum-css/popover/dist/index-vars.css"
   import Portal from "svelte-portal"
   import { createEventDispatcher } from "svelte"
   import buildStyle from "../utils/buildStyle"
@@ -38,40 +39,12 @@
   <Portal>
     <div
       tabindex="0"
-      class:open
       use:positionDropdown={{ anchor, align }}
       use:clickOutside={hide}
       style={menuStyle}
       on:keydown={handleEscape}
-      class="menu-container">
+      class="spectrum-Popover is-open" role="presentation">
       <slot />
     </div>
   </Portal>
 {/if}
-
-<style>
-  .menu-container {
-    position: fixed;
-    margin-top: var(--spacing-xs);
-    outline: none;
-    box-sizing: border-box;
-    opacity: 0;
-    min-width: 200px;
-    z-index: 2;
-    color: var(--ink);
-    font-weight: 400;
-    height: fit-content !important;
-    border: var(--border-dark);
-    border-radius: var(--border-radius-m);
-    transform: scale(0);
-    transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
-    overflow-y: auto;
-    background: var(--background);
-    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  .open {
-    transform: scale(1);
-    opacity: 1;
-  }
-</style>
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 8a075242cd..d650a6a1f4 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -34,7 +34,7 @@
       use:positionDropdown={{ anchor, align }}
       use:clickOutside={hide}
       on:keydown={handleEscape}
-      class="menu-container">
+      class="spectrum-Popover is-open">
       <slot />
     </div>
   </Portal>
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index ce044b9c63..90aa8d3ef3 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -437,6 +437,11 @@
   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/popover@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.1.tgz#5863c1efc53f98f9aba2de9186666780041303fc"
+  integrity sha512-LmOSj/yCwQQ9iGmCYnHiJsJR/HfPiGqI1Jl7pkKxBOCxYBMS/5+ans9vfCN2Qnd0eK7WSbfPg72S6mjye7db2Q==
+
 "@spectrum-css/underlay@^2.0.9":
   version "2.0.9"
   resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.9.tgz#fc10f971d1325cc844b727e6260f7217844060e8"