@lion/overlays - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [0.3.1](https://github.com/ing-bank/lion/compare/@lion/overlays@0.3.0...@lion/overlays@0.3.1) (2019-07-01)
+
+
+### Bug Fixes
+
+* **overlays:** fix update popper config method ([910a1b5](https://github.com/ing-bank/lion/commit/910a1b5))
+
+
+
+
+
 # [0.3.0](https://github.com/ing-bank/lion/compare/@lion/overlays@0.2.7...@lion/overlays@0.3.0) (2019-06-28)
@@ -8,0 +19,0 @@

docs/LocalOverlayController.md

 # LocalOverlayController
 
-This is a base class for different local overlays (e.g. a [tooltip](../../tooltip/), see [Overlay System Implementation](https://github.com/ing-bank/lion/blob/master/packages/overlays/docs/OverlaySystemImplementation.md) - the ones positioned next to invokers they are related to.
+This is a base class for different local overlays (e.g. a [tooltip](../../tooltip/), see [Overlay System Implementation](./OverlaySystemImplementation.md) - the ones positioned next to invokers they are related to. For more information strictly about the positioning of the content element to the reference element (invoker), please refer to the [positioning documentation](https://github.com/ing-bank/lion/blob/master/packages/overlays/docs/LocalOverlayPositioning.md)
 You should not use this controller directly unless you want to create a unique type of local overlays which is not supported out of the box.
@@ -5,0 +5,0 @@

package.json

 {
   "name": "@lion/overlays",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Overlays System using lit-html for rendering",
@@ -44,3 +44,3 @@ "author": "ing-bank",
   },
-  "gitHead": "0b1cb9fe3470d12cc99d28fe349e0f7bb5f6a186"
+  "gitHead": "602d0407d8cc1b99fd2b33b44fb52365fea41561"
 }

src/LocalOverlayController.js

@@ -101,3 +101,3 @@ import { render, html } from '@lion/core';
     /**
-     * Popper is weird about properly positioning the popper element when its is recreated so
+     * Popper is weird about properly positioning the popper element when it is recreated so
      * we just recreate the popper instance to make it behave like it should.
@@ -132,2 +132,5 @@ * Probably related to this issue: https://github.com/FezVrasta/popper.js/issues/796
     await this.__createPopperInstance();
+    if (this.isShown) {
+      this._popper.update();
+    }
   }
@@ -134,0 +137,0 @@

test/LocalOverlayController.test.js

@@ -233,5 +233,5 @@ import { expect, fixture, html, aTimeout, defineCE, unsafeStatic } from '@open-wc/testing';
       await controller.show();
-      // 16px displacement due to default 16px viewport margin both horizontal and vertical
       expect(controller.content.firstElementChild.style.transform).to.equal(
         'translate3d(16px, 16px, 0px)',
+        '16px displacement is expected due to both horizontal and vertical viewport margin',
       );
@@ -402,3 +402,6 @@ });
       let contentChild = controller.content.firstElementChild;
-      expect(contentChild.style.transform).to.equal('translate3d(14px, -58px, 0px)');
+      expect(contentChild.style.transform).to.equal(
+        'translate3d(14px, -58px, 0px)',
+        'Popper positioning values',
+      );
 
@@ -408,3 +411,6 @@ controller.hide();
       contentChild = controller.content.firstElementChild;
-      expect(contentChild.style.transform).to.equal('translate3d(14px, -58px, 0px)');
+      expect(contentChild.style.transform).to.equal(
+        'translate3d(14px, -58px, 0px)',
+        'Popper positioning values should be identical after hiding and showing',
+      );
     });
@@ -435,3 +441,6 @@
       let contentChild = controller.content.firstElementChild;
-      expect(contentChild.style.transform).to.equal('translate3d(14px, -58px, 0px)');
+      expect(contentChild.style.transform).to.equal(
+        'translate3d(14px, -58px, 0px)',
+        'Popper positioning values',
+      );
 
@@ -450,4 +459,49 @@ controller.hide();
       expect(controller._popper.options.modifiers.offset.offset).to.equal('0, 32px');
-      expect(contentChild.style.transform).to.equal('translate3d(14px, -82px, 0px)');
+      expect(contentChild.style.transform).to.equal(
+        'translate3d(14px, -82px, 0px)',
+        'Popper positioning Y value should be 32 less than previous, due to the added 32px offset',
+      );
     });
+
+    it('updates positioning correctly during shown state when config gets updated', async () => {
+      const controller = new LocalOverlayController({
+        contentTemplate: () =>
+          html`
+            <p>Content</p>
+          `,
+        invokerTemplate: () => html`
+          <button style="padding: 16px;" @click=${() => controller.show()}>
+            Invoker
+          </button>
+        `,
+        popperConfig: {
+          placement: 'top',
+        },
+      });
+      await fixture(html`
+        <div style="position: absolute; top: 300px; left: 100px;">
+          ${controller.invoker} ${controller.content}
+        </div>
+      `);
+
+      await controller.show();
+      const contentChild = controller.content.firstElementChild;
+      expect(contentChild.style.transform).to.equal(
+        'translate3d(14px, -58px, 0px)',
+        'Popper positioning values',
+      );
+
+      await controller.updatePopperConfig({
+        modifiers: {
+          offset: {
+            enabled: true,
+            offset: '0, 32px',
+          },
+        },
+      });
+      expect(contentChild.style.transform).to.equal(
+        'translate3d(14px, -82px, 0px)',
+        'Popper positioning Y value should be 32 less than previous, due to the added 32px offset',
+      );
+    });
   });
@@ -454,0 +508,0 @@

No alert changes

Improved metrics

Total package byte prevSize

156647

increased by1.39%

Number of package files

69

increased by1.47%

Lines of code

3835

increased by1.43%

No dependency changes