@madgex/design-system 1.58.0 → 1.58.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "1.58.0",
+  "version": "1.58.2",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",
@@ -27,10 +27,10 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^2.6.1",
+    "@popperjs/core": "2.4.4",
     "css-loader": "^3.6.0",
     "document-register-element": "^1.14.3",
     "mini-css-extract-plugin": "^0.8.0",
-    "popper.js": "^1.16.0",
     "postcss": "^7.0.32",
     "postcss-cli": "^6.1.3",
     "postcss-loader": "^3.0.0",

package/src/components/button/button.scss

@@ -4,7 +4,7 @@
   vertical-align: middle;
   -webkit-appearance: none;
   width: auto;
-  border: $mds-size-border-width solid;
+  border: $mds-size-button-border-width solid;
   border-top-color: $mds-color-button-border-top;
   border-right-color: $mds-color-button-border-right;
   border-bottom-color: $mds-color-button-border-bottom;

package/src/components/popover/README.md

@@ -2,9 +2,9 @@
 
 - `id`: id of the trigger - **required**,
 - `text`: text you want on the trigger - **required**,
-- `classes`: add extra classes to the trigger - *optional*,
+- `classes`: add extra classes to the trigger - _optional_,
 - `content` : content of the popover - can be text, html or another component - **required**
-- `placement`: placement of the popover - *optional*
+- `placement`: placement of the popover - _optional_
 
 Values can be `auto`, `top`, `right`, `bottom`, `left`. You can also add `start` or `end` to each of those positions. For example: `top-end` will on top of the reference, right aligned, `right-start` will on the right of the reference, top aligned.
 Default is `top-end`.
@@ -18,4 +18,4 @@ If javascript is not enabled, the content of the popover just shows.
 
 ## Note
 
-We are using the Popper.js library (https://github.com/popperjs/popper.js) to help with the positioning.
+We are using the Popper.js library (https://github.com/popperjs/popper.js) to help with the positioning. More details here (https://popper.js.org/)

package/src/components/popover/_template.njk

@@ -12,7 +12,7 @@
 }) -}}
 
 <div id="{{ params.id }}-content" class="mds-popover"{% if params.placement %} data-placement="{{ params.placement }}"{% endif %}>
-  <div class="mds-popover__arrow" x-arrow></div>
+  <div class="mds-popover__arrow" data-popper-arrow></div>
   <div class="mds-tooltip__inner">
     {{- params.content | safe -}}
   </div>

package/src/components/popover/popover.js

@@ -1,6 +1,8 @@
 // import Tooltip from 'tooltip.js';
-import Popper from 'popper.js';
+import { createPopper } from '@popperjs/core';
+import { size } from '../../tokens/size.json';
 
+const baseSize = parseInt(size.baseline.value, 10);
 const triggerClassName = 'js-mds-popover-trigger';
 const popoverActiveClass = 'mds-popover--active';
 
@@ -14,8 +16,23 @@ const popovers = {
       const popover = document.getElementById(popoverId);
       // checking for existence of dataset eliminate bug in IE 10 as it doesn't support 'dataset'
       const placement = popover.dataset ? popover.dataset.placement : null;
-      const popoverInstance = new Popper(trigger, popover, {
+      const popoverInstance = createPopper(trigger, popover, {
         placement: placement || 'top-end',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, baseSize * 3],
+            },
+          },
+          {
+            // arrow will always be at least 5px away from the edge
+            name: 'arrow',
+            options: {
+              padding: 5,
+            },
+          },
+        ],
       });
 
       trigger.setAttribute('aria-expanded', 'false');
@@ -38,7 +55,7 @@ const popovers = {
   hide: (trigger, popover, popoverInstance, activeClass, element) => {
     if (
       !trigger.contains(element.target) &&
-      !popoverInstance.popper.contains(element.target) &&
+      !popoverInstance.state.elements.popper.contains(element.target) &&
       popover.classList.contains(activeClass)
     ) {
       popover.classList.remove(activeClass);

package/src/components/popover/popover.scss

@@ -16,27 +16,6 @@ $arrow-size: 10px;
   box-shadow: $mds-color-box-shadow-base;
   text-align: left;
   max-width: 250px;
-
-  &[x-placement="top"],
-  &[x-placement="top-start"],
-  &[x-placement="top-end"] {
-    margin-bottom: ($mds-size-baseline * 3);
-  }
-  &[x-placement="right"],
-  &[x-placement="right-start"],
-  &[x-placement="right-end"] {
-    margin-left: ($mds-size-baseline * 3);
-  }
-  &[x-placement="bottom"],
-  &[x-placement="bottom-start"],
-  &[x-placement="bottom-end"] {
-    margin-top: ($mds-size-baseline * 3);
-  }
-  &[x-placement="left"],
-  &[x-placement="left-start"],
-  &[x-placement="left-end"] {
-    margin-right: ($mds-size-baseline * 3);
-  }
 }
 
 .mds-popover__arrow {
@@ -59,9 +38,9 @@ $arrow-size: 10px;
     border-width: $arrow-size;
   }
 
-  .mds-popover[x-placement="top"] &,
-  .mds-popover[x-placement="top-start"] &,
-  .mds-popover[x-placement="top-end"] & {
+  .mds-popover[data-popper-placement='top'] &,
+  .mds-popover[data-popper-placement='top-start'] &,
+  .mds-popover[data-popper-placement='top-end'] & {
     bottom: $arrow-size * -1;
     border-top-color: $mds-color-border;
     border-bottom-width: 0;
@@ -73,9 +52,9 @@ $arrow-size: 10px;
       bottom: 1px;
     }
   }
-  .mds-popover[x-placement="right"] &,
-  .mds-popover[x-placement="right-start"] &,
-  .mds-popover[x-placement="right-end"] & {
+  .mds-popover[data-popper-placement='right'] &,
+  .mds-popover[data-popper-placement='right-start'] &,
+  .mds-popover[data-popper-placement='right-end'] & {
     left: $arrow-size * -1;
     border-right-color: $mds-color-border;
     border-left-width: 0;
@@ -87,9 +66,9 @@ $arrow-size: 10px;
       left: 1px;
     }
   }
-  .mds-popover[x-placement="bottom"] &,
-  .mds-popover[x-placement="bottom-start"] &,
-  .mds-popover[x-placement="bottom-end"] & {
+  .mds-popover[data-popper-placement='bottom'] &,
+  .mds-popover[data-popper-placement='bottom-start'] &,
+  .mds-popover[data-popper-placement='bottom-end'] & {
     top: $arrow-size * -1;
     border-bottom-color: $mds-color-border;
     border-top-width: 0;
@@ -101,9 +80,9 @@ $arrow-size: 10px;
       top: 1px;
     }
   }
-  .mds-popover[x-placement="left"] &,
-  .mds-popover[x-placement="left-start"] &,
-  .mds-popover[x-placement="left-end"] & {
+  .mds-popover[data-popper-placement='left'] &,
+  .mds-popover[data-popper-placement='left-start'] &,
+  .mds-popover[data-popper-placement='left-end'] & {
     right: $arrow-size * -1;
     border-left-color: $mds-color-border;
     border-right-width: 0;
@@ -115,4 +94,4 @@ $arrow-size: 10px;
       right: 1px;
     }
   }
-}
+}