Merge 7254b1a into 90e7d7e

textkernel · Feb 7, 2020 · 433b42a · 433b42a
2 parents 90e7d7e + 7254b1a
commit 433b42a
Show file tree

Hide file tree

Showing 7 changed files with 745 additions and 586 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,12 +50,12 @@
     "sideEffects": false,
     "dependencies": {
         "@babel/polyfill": "7.0.0",
+        "@popperjs/core": "2.0.5",
         "@react-google-maps/api": "1.5.4",
         "@textkernel/bem": "0.2.4",
         "css-vars-ponyfill": "1.16.4",
         "downshift": "3.2.10",
         "fast-memoize": "2.5.1",
-        "popper.js": "1.15.0",
         "prop-types": "^15.7.2",
         "rc-slider": "8.6.13",
         "react-modal": "3.9.1"

diff --git a/src/__mocks__/popper.js.js b/src/__mocks__/popper.js.js
@@ -1,8 +1,8 @@
-import PopperJs from 'popper.js';
+import { placements } from '@popperjs/core';
 
 // eslint-disable-next-line import/no-default-export
 export default class Popper {
-    static placements = PopperJs.placements;
+    static placements = placements;
 
     constructor() {
         return {

diff --git a/src/components/Pill/__tests__/__snapshots__/Pill.spec.js.snap b/src/components/Pill/__tests__/__snapshots__/Pill.spec.js.snap
@@ -66,6 +66,7 @@ exports[`<Pill> component should open dropdown when button is clicked 1`] = `
           class="PillDropdown"
           data-popup="true"
           role="presentation"
+          style="position: absolute; left: 0px; top: 0px; margin: 0px;"
         >
           <div
             class="PillDropdown__dialog"

diff --git a/src/components/PopupBase/PopupBase.js b/src/components/PopupBase/PopupBase.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import PopperJS from 'popper.js';
+import { createPopper } from '@popperjs/core';
 import { POPUP_PLACEMENTS, ESCAPE_KEY } from '../../constants';
 
 export class PopupBase extends React.Component {
@@ -90,7 +90,7 @@ export class PopupBase extends React.Component {
         if (this.anchorRef.current && this.popupRef.current) {
             const { placement } = this.props;
             this.destroyPopperInstance();
-            this.popper = new PopperJS(this.anchorRef.current, this.popupRef.current, {
+            this.popper = createPopper(this.anchorRef.current, this.popupRef.current, {
                 placement,
             });
         }

diff --git a/src/components/PopupBase/__tests__/__snapshots__/PopupBase.spec.js.snap b/src/components/PopupBase/__tests__/__snapshots__/PopupBase.spec.js.snap
@@ -32,7 +32,7 @@ exports[`<PopupBase> that adds basic anchor/popup functionality to rendered comp
     containerInfo={
       <body>
         <div
-          style="background-color: rgb(255, 238, 221); padding: 10px; border-radius: 5px; border: 1px solid #ccc; box-shadow: 0 3px 6px 6px rgba(0, 0, 0, 0.05);"
+          style="background-color: rgb(255, 238, 221); padding: 10px; border-radius: 5px; border: 1px solid #ccc; box-shadow: 0 3px 6px 6px rgba(0, 0, 0, 0.05); position: absolute; left: 0px; top: 0px; margin: 0px;"
         >
           <p>
             I am the content of pop up.

diff --git a/src/components/Tooltip/Tooltip.scss b/src/components/Tooltip/Tooltip.scss
@@ -12,11 +12,11 @@
         position: absolute;
     }
 
-    [x-placement^="top"] & {
+    [data-popper-placement^="top"] & {
         margin-bottom: var(--spacing-5x);
         transform: translateY(-20px);
     }
-    [x-placement^="top"] &__arrow {
+    [data-popper-placement^="top"] &__arrow {
         border-top: 6px solid var(--color-neutral-90);
         border-left: 6px solid transparent;
         border-right: 6px solid transparent;
@@ -25,18 +25,18 @@
         margin-top: 0;
         margin-bottom: 0;
     }
-    [x-placement^="top-start"] &__arrow {
+    [data-popper-placement^="top-start"] &__arrow {
         left: var(--spacing-3x);
     }
-    [x-placement^="top-end"] &__arrow {
+    [data-popper-placement^="top-end"] &__arrow {
         left: auto;
         right: var(--spacing-3x);
     }
-    [x-placement^="bottom"] & {
+    [data-popper-placement^="bottom"] & {
         margin-top: var(--spacing-5x);
         transform: translateY(20px);
     }
-    [x-placement^="bottom"] &__arrow {
+    [data-popper-placement^="bottom"] &__arrow {
         border-bottom: 6px solid var(--color-neutral-90);
         border-left: 6px solid transparent;
         border-right: 6px solid transparent;
@@ -45,18 +45,18 @@
         margin-top: 0;
         margin-bottom: 0;
     }
-    [x-placement^="bottom-start"] &__arrow {
+    [data-popper-placement^="bottom-start"] &__arrow {
         left: var(--spacing-3x);
     }
-    [x-placement^="bottom-end"] &__arrow {
+    [data-popper-placement^="bottom-end"] &__arrow {
         left: auto;
         right: var(--spacing-3x);
     }
-    [x-placement^="right"] & {
+    [data-popper-placement^="right"] & {
         margin-left: var(--spacing-5x);
         transform: translateX(20px);
     }
-    [x-placement^="right"] &__arrow {
+    [data-popper-placement^="right"] &__arrow {
         border-top: 6px solid transparent;
         border-bottom: 6px solid transparent;
         border-right: 6px solid var(--color-neutral-90);
@@ -65,18 +65,18 @@
         margin-left: 0;
         margin-right: 0;
     }
-    [x-placement^="right-start"] &__arrow {
+    [data-popper-placement^="right-start"] &__arrow {
         top: var(--spacing-3x);
     }
-    [x-placement^="right-end"] &__arrow {
+    [data-popper-placement^="right-end"] &__arrow {
         top: auto;
         bottom: var(--spacing-3x);
     }
-    [x-placement^="left"] & {
+    [data-popper-placement^="left"] & {
         margin-right: var(--spacing-5x);
         transform: translateX(-20px);
     }
-    [x-placement^="left"] &__arrow {
+    [data-popper-placement^="left"] &__arrow {
         border-top: 6px solid transparent;
         border-bottom: 6px solid transparent;
         border-left: 6px solid var(--color-neutral-90);
@@ -85,10 +85,10 @@
         margin-left: 0;
         margin-right: 0;
     }
-    [x-placement^="left-start"] &__arrow {
+    [data-popper-placement^="left-start"] &__arrow {
         top: var(--spacing-3x);
     }
-    [x-placement^="left-end"] &__arrow {
+    [data-popper-placement^="left-end"] &__arrow {
         top: auto;
         bottom: var(--spacing-3x);
     }