@lion/overlays - npm Package Compare versions

Comparing version 0.3.4 to 0.3.5

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [0.3.5](https://github.com/ing-bank/lion/compare/@lion/overlays@0.3.4...@lion/overlays@0.3.5) (2019-07-18)
+
+**Note:** Version bump only for package @lion/overlays
+
+
+
+
+
 ## [0.3.4](https://github.com/ing-bank/lion/compare/@lion/overlays@0.3.3...@lion/overlays@0.3.4) (2019-07-17)
@@ -8,0 +16,0 @@

package.json

 {
   "name": "@lion/overlays",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Overlays System using lit-html for rendering",
@@ -44,3 +44,3 @@ "author": "ing-bank",
   },
-  "gitHead": "b58579299a05757c38ccc5d0bfaae5e4dc0fe45a"
+  "gitHead": "09d47944601e362d90806af829af47f900bdeced"
 }

test/LocalOverlayController.test.js

@@ -201,10 +201,8 @@ import { expect, fixture, html, aTimeout, defineCE, unsafeStatic } from '@open-wc/testing';
       const controller = new LocalOverlayController({
-        contentTemplate: () =>
-          html`
-            <p>Content</p>
-          `,
-        invokerTemplate: () =>
-          html`
-            <button>Invoker</button>
-          `,
+        contentTemplate: () => html`
+          <p style="width: 80px; height: 20px;"></p>
+        `,
+        invokerTemplate: () => html`
+          <button style="width: 100px; height: 20px;"></button>
+        `,
       });
@@ -224,10 +222,8 @@ await controller.show();
       const controller = new LocalOverlayController({
-        contentTemplate: () =>
-          html`
-            <p>Content</p>
-          `,
-        invokerTemplate: () =>
-          html`
-            <button>Invoker</button>
-          `,
+        contentTemplate: () => html`
+          <p style="width: 80px; height: 20px;"></p>
+        `,
+        invokerTemplate: () => html`
+          <button style="width: 100px; height: 20px;"></button>
+        `,
       });
@@ -244,10 +240,7 @@
       const controller = new LocalOverlayController({
-        contentTemplate: () =>
-          html`
-            <p>Content</p>
-          `,
+        contentTemplate: () => html`
+          <p style="width: 80px; height: 20px;"></p>
+        `,
         invokerTemplate: () => html`
-          <button style="padding: 16px;" @click=${() => controller.show()}>
-            Invoker
-          </button>
+          <button style="width: 100px; height: 20px;" @click=${() => controller.show()}></button>
         `,
@@ -267,11 +260,8 @@ });
       const controller = new LocalOverlayController({
+        contentTemplate: () => html`
+          <p style="width: 80px; height: 20px;"></p>
+        `,
         invokerTemplate: () => html`
-          <button style="padding: 16px;" @click=${() => controller.show()}>
-            Invoker
-          </button>
+          <button style="width: 100px; height: 20px;" @click=${() => controller.show()}></button>
         `,
-        contentTemplate: () =>
-          html`
-            <p>Content</p>
-          `,
         popperConfig: {
@@ -294,10 +284,7 @@ placement: 'left-start',
       const controller = new LocalOverlayController({
-        contentTemplate: () =>
-          html`
-            <p>Content</p>
-          `,
+        contentTemplate: () => html`
+          <p style="width: 80px; height: 20px;"></p>
+        `,
         invokerTemplate: () => html`
-          <button style="padding: 16px;" @click=${() => controller.show()}>
-            Invoker
-          </button>
+          <button style="width: 100px; height: 20px;" @click=${() => controller.show()}></button>
         `,
@@ -321,2 +308,8 @@ popperConfig: {
       const controller = new LocalOverlayController({
+        contentTemplate: () => html`
+          <p style="width: 80px; height: 20px;"></p>
+        `,
+        invokerTemplate: () => html`
+          <button style="width: 100px; height: 20px;" @click=${() => controller.show()}></button>
+        `,
         popperConfig: {
@@ -333,9 +326,2 @@ modifiers: {
         },
-        contentTemplate: () =>
-          html`
-            <p>Content</p>
-          `,
-        invokerTemplate: () => html`
-          <button style="padding: 16px;" @click=${() => controller.show()}>Invoker</button>
-        `,
       });
@@ -358,10 +344,10 @@ await fixture(html`
       const controller = new LocalOverlayController({
-        contentTemplate: () =>
-          html`
-            <p>Content</p>
-          `,
+        contentTemplate: () => html`
+          <p style="width: 80px; height: 20px;"></p>
+        `,
         invokerTemplate: () => html`
-          <button style="padding: 16px; margin: 200px;" @click=${() => controller.show()}>
-            Invoker
-          </button>
+          <button
+            style="width: 100px; height: 20px; margin: 200px;"
+            @click=${() => controller.show()}
+          ></button>
         `,
@@ -389,10 +375,7 @@ popperConfig: {
       const controller = new LocalOverlayController({
-        contentTemplate: () =>
-          html`
-            <p>Content</p>
-          `,
+        contentTemplate: () => html`
+          <p style="width: 80px; height: 20px;"></p>
+        `,
         invokerTemplate: () => html`
-          <button style="padding: 16px;" @click=${() => controller.show()}>
-            Invoker
-          </button>
+          <button style="width: 100px; height: 20px;" @click=${() => controller.show()}></button>
         `,
@@ -412,3 +395,3 @@ popperConfig: {
       expect(contentChild.style.transform).to.equal(
-        'translate3d(14px, -58px, 0px)',
+        'translate3d(10px, -60px, 0px)',
         'Popper positioning values',
@@ -421,3 +404,3 @@ );
       expect(contentChild.style.transform).to.equal(
-        'translate3d(14px, -58px, 0px)',
+        'translate3d(10px, -60px, 0px)',
         'Popper positioning values should be identical after hiding and showing',
@@ -429,13 +412,16 @@ );
       const controller = new LocalOverlayController({
-        contentTemplate: () =>
-          html`
-            <p>Content</p>
-          `,
+        contentTemplate: () => html`
+          <p style="width: 80px; height: 20px;"></p>
+        `,
         invokerTemplate: () => html`
-          <button style="padding: 16px;" @click=${() => controller.show()}>
-            Invoker
-          </button>
+          <button style="width: 100px; height: 20px;" @click=${() => controller.show()}></button>
         `,
         popperConfig: {
           placement: 'top',
+          modifiers: {
+            offset: {
+              enabled: true,
+              offset: '0, 10px',
+            },
+          },
         },
@@ -452,3 +438,3 @@ });
       expect(contentChild.style.transform).to.equal(
-        'translate3d(14px, -58px, 0px)',
+        'translate3d(10px, -62px, 0px)',
         'Popper positioning values',
@@ -462,3 +448,3 @@ );
             enabled: true,
-            offset: '0, 32px',
+            offset: '0, 20px',
           },
@@ -469,6 +455,6 @@ },
       contentChild = controller.content.firstElementChild;
-      expect(controller._popper.options.modifiers.offset.offset).to.equal('0, 32px');
+      expect(controller._popper.options.modifiers.offset.offset).to.equal('0, 20px');
       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',
+        'translate3d(10px, -72px, 0px)',
+        'Popper positioning Y value should be 10 less than previous, due to the added extra 10px offset',
       );
@@ -479,8 +465,7 @@ });
       const controller = new LocalOverlayController({
-        contentTemplate: () =>
-          html`
-            <p>Content</p>
-          `,
+        contentTemplate: () => html`
+          <p style="width: 80px; height: 20px;"></p>
+        `,
         invokerTemplate: () => html`
-          <button style="padding: 16px;" @click=${() => controller.show()}>
+          <button style="width: 100px; height: 20px;" @click=${() => controller.show()}>
             Invoker
@@ -491,2 +476,8 @@ </button>
           placement: 'top',
+          modifiers: {
+            offset: {
+              enabled: true,
+              offset: '0, 10px',
+            },
+          },
         },
@@ -503,3 +494,3 @@ });
       expect(contentChild.style.transform).to.equal(
-        'translate3d(14px, -58px, 0px)',
+        'translate3d(10px, -62px, 0px)',
         'Popper positioning values',
@@ -512,3 +503,3 @@ );
             enabled: true,
-            offset: '0, 32px',
+            offset: '0, 20px',
           },
@@ -518,4 +509,4 @@ },
       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',
+        'translate3d(10px, -72px, 0px)',
+        'Popper positioning Y value should be 10 less than previous, due to the added extra 10px offset',
       );
@@ -522,0 +513,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

164237

increased by0.35%

Worsened metrics

Lines of code

3899

decreased by-0.23%

No dependency changes