feat: rework overlays to use popper

Make our overlay positioning more robust using the popper library.
- refactor attributes for tooltip and popover (breaking change)
- change `delay` attribute to `delayed` and use warmup/cooldown (breaking change)
- fix animation for opening/closing overlays

.storybook/main.js

@@ -5,6 +5,9 @@ module.exports = {
     esDevServer: {
         nodeResolve: true,
         open: true,
+        babelConfig: {
+            plugins: ['transform-node-env-inline'],
+        },
     },
 
     // Rollup build output directory (build-storybook only)

__snapshots__/Action menu.md

@@ -40,7 +40,7 @@
         <slot id="slot"></slot>
     </div>
 </button>
-<sp-popover direction="bottom" id="popover">
+<sp-popover direction="bottom" id="popover" placement="none">
     <slot name="options">
         <sp-menu-item
             aria-disabled="true"
@@ -95,7 +95,7 @@
         <slot id="slot"></slot>
     </div>
 </button>
-<sp-popover direction="bottom" id="popover">
+<sp-popover direction="bottom" id="popover" placement="none">
     <slot name="options">
         <sp-menu-item
             aria-disabled="true"

__snapshots__/Actionbar.md

@@ -21,7 +21,7 @@
 ```
 
 ```html
-<sp-popover direction="none" id="popover" open="">
+<sp-popover id="popover" open="" placement="none">
     <slot></slot>
 </sp-popover>
 ```

__snapshots__/Dropdown.md

@@ -50,7 +50,7 @@ Select a Country with a very long label, too long in fact
         size="s"
     ></sp-icon>
 </button>
-<sp-popover direction="bottom" id="popover">
+<sp-popover direction="bottom" id="popover" placement="none">
     <slot name="options">
         <sp-menu-item
             aria-disabled="true"
@@ -116,7 +116,7 @@ Select a Country with a very long label, too long in fact
         size="s"
     ></sp-icon>
 </button>
-<sp-popover direction="bottom" id="popover">
+<sp-popover direction="bottom" id="popover" placement="none">
     <slot name="options">
         <sp-menu-item
             aria-disabled="true"

karma.conf.js

@@ -25,6 +25,9 @@ module.exports = (config) => {
             ],
             esm: {
                 nodeResolve: true,
+                babelConfig: {
+                    plugins: ['transform-node-env-inline'],
+                },
             },
             browsers: ['FirefoxHeadlessCustom'],
             customLaunchers: {

package.json

@@ -117,6 +117,7 @@
         "@webcomponents/webcomponentsjs": "^2.2.0",
         "babel-loader": "^8.0.5",
         "babel-plugin-bundled-import-meta": "^0.3.2",
+        "babel-plugin-transform-node-env-inline": "^0.4.3",
         "browser-sync": "^2.26.7",
         "chalk": "^3.0.0",
         "common-tags": "^1.8.0",

packages/overlay/README.md

@@ -45,8 +45,8 @@ yarn add @spectrum-web-components/overlay
             <sp-button>Press Me</sp-button>
         </div>
     </sp-popover>
-    <div slot="hover-content" class="tooltip" delay="100">
+    <sp-tooltip slot="hover-content" delayed open>
         Tooltip
-    </div>
+    </sp-tooltip>
 </overlay-trigger>
 ```

packages/overlay/package.json

@@ -38,6 +38,7 @@
         "lit-html": "^1.0.0"
     },
     "dependencies": {
+        "@popperjs/core": "^2.0.4",
         "@spectrum-web-components/theme": "^0.1.1",
         "tslib": "^1.10.0"
     }

packages/overlay/src/active-overlay.css

@@ -13,7 +13,7 @@ governing permissions and limitations under the License.
 @keyframes spOverlayFadeIn {
     from {
         opacity: 0;
-        transform: var(--animation-transform);
+        transform: var(--sp-overlay-from);
     }
 
     to {
@@ -30,48 +30,50 @@ governing permissions and limitations under the License.
 
     to {
         opacity: 0;
-        transform: var(--animation-transform);
+        transform: var(--sp-overlay-from);
     }
 }
 
 :host {
     z-index: 2;
     position: absolute;
-    display: none;
-    opacity: 0;
-    top: -999em;
-    left: -999em;
-    animation-duration: var(--spectrum-global-animation-duration-100);
-    animation-timing-function: ease-in-out;
+    display: inline-block;
+    pointer-events: none;
 }
 
-:host([state]) {
-    display: block;
-}
-
-:host([state='visible']) {
+#contents {
+    display: inline-block;
+    pointer-events: none;
+    animation-duration: var(--spectrum-global-animation-duration-200);
+    animation-timing-function: var(--spectrum-global-animation-ease-out);
     opacity: 1;
-    transform: translate(0, 0) !important;
     visibility: visible;
-    animation-name: spOverlayFadeIn;
 }
 
-:host([state='hiding']) {
-    animation-name: spOverlayFadeOut;
+:host([data-popper-placement*='top']) #contents {
+    --sp-overlay-from: translateY(var(--spectrum-global-dimension-size-75));
+}
+
+:host([data-popper-placement*='right']) #contents {
+    --sp-overlay-from: translateX(
+        calc(-1 * var(--spectrum-global-dimension-size-75))
+    );
 }
 
-:host([placement='top']) {
-    --animation-transform: translate(0, 6px);
+:host([data-popper-placement*='bottom']) #contents {
+    --sp-overlay-from: translateY(
+        calc(-1 * var(--spectrum-global-dimension-size-75))
+    );
 }
 
-:host([placement='right']) {
-    --animation-transform: translate(-6px, 0);
+:host([data-popper-placement*='left']) #contents {
+    --sp-overlay-from: translateX(var(--spectrum-global-dimension-size-75));
 }
 
-:host([placement='bottom']) {
-    --animation-transform: translate(0, -6px);
+::slotted(*) {
+    position: relative;
 }
 
-:host([placement='left']) {
-    --animation-transform: translate(6px, 0);
+:host([animating]) ::slotted(*) {
+    pointer-events: none;
 }