@spectrum-web-components/popover - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [0.7.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/popover@0.7.0...@spectrum-web-components/popover@0.7.1) (2021-01-28)
+
+### Bug Fixes
+
+-   position tip shapes for bi-directional delivery ([35654de](https://github.com/adobe/spectrum-web-components/commit/35654decb855ffeef0c56c2958244dd240d3bbef))
+-   **tooltip:** correct arrow orientation, remove popper-arrow-rotate ([fcd6ea2](https://github.com/adobe/spectrum-web-components/commit/fcd6ea28ef5e4f06a07994ebd8f8b9be1a934eb2))
+-   allow ActiveOverlay to manage open state ([a7c4cff](https://github.com/adobe/spectrum-web-components/commit/a7c4cffec56a7efc86b6409e3bc692574713a6bc))
+
 # [0.7.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/popover@0.5.4...@spectrum-web-components/popover@0.7.0) (2021-01-21)
@@ -8,0 +16,0 @@

custom-elements.json

@@ -21,3 +21,4 @@ {
           "description": "The open state of the popover",
-          "type": "Boolean"
+          "type": "Boolean",
+          "default": "false"
         },
@@ -44,2 +45,9 @@ {
         {
+          "name": "open",
+          "attribute": "open",
+          "description": "The open state of the popover",
+          "type": "Boolean",
+          "default": "false"
+        },
+        {
           "name": "shadowRoot",
@@ -46,0 +54,0 @@ "type": "ShadowRoot"

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.7.0",
+    "version": "0.7.1",
     "description": "",
@@ -56,7 +56,7 @@ "main": "./src/index.js",
     "dependencies": {
-        "@spectrum-web-components/base": "^0.3.0",
-        "@spectrum-web-components/overlay": "^0.8.0",
+        "@spectrum-web-components/base": "^0.3.1",
+        "@spectrum-web-components/overlay": "^0.8.1",
         "tslib": "^2.0.0"
     },
-    "gitHead": "a5734426f36555951dc10c5740c9044bbd951315"
+    "gitHead": "7bac515d0291c21c9fc7482120904fe5c5c83200"
 }

src/popover.css.js

@@ -16,5 +16,5 @@ /*
 var(--spectrum-global-dimension-size-75)))}:host([placement*=top][open]){margin-top:var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75))}:host([placement*=left][open]),:host([placement*=right][open]){max-width:calc(100% - var(--spectrum-dropdown-flyout-menu-offset-y,
-var(--spectrum-global-dimension-size-75)))}:host([placement*=left][open]){margin-left:var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75))}.tip{display:flex}:host([placement*=bottom]) .tip,:host([placement*=top]) .tip{width:var(--sp-popover-tip-size);height:calc(var(--sp-popover-tip-size)/2)}:host([placement*=left]) .tip,:host([placement*=right]) .tip{height:var(--sp-popover-tip-size);width:calc(var(--sp-popover-tip-size)/2)}:host([placement*=bottom]) .triangle-left-right,:host([placement*=left]) .triangle-top-bottom,:host([placement*=right]) .triangle-top-bottom,:host([placement*=top]) .triangle-left-right{display:none}
+var(--spectrum-global-dimension-size-75)))}:host([placement*=left][open]){margin-left:var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75))}.tip{width:var(--sp-popover-tip-size);height:calc(var(--sp-popover-tip-size)/2);position:absolute;left:0}:host([placement*=bottom]) #tip,:host([placement*=right]) #tip{transform:none}:host([placement*=top]) .tip{top:100%}:host([placement*=bottom]) .tip{bottom:100%;transform:scaleY(-1)}:host([placement*=left]) .tip{transform-origin:100% 0;transform:rotate(-90deg) translateY(-200%)}:host([placement*=right]) .tip{transform-origin:0 0;transform:rotate(90deg)}
 `;
 export default styles;
 //# sourceMappingURL=popover.css.js.map

src/popover.css.ts

@@ -16,4 +16,4 @@ /*
 var(--spectrum-global-dimension-size-75)))}:host([placement*=top][open]){margin-top:var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75))}:host([placement*=left][open]),:host([placement*=right][open]){max-width:calc(100% - var(--spectrum-dropdown-flyout-menu-offset-y,
-var(--spectrum-global-dimension-size-75)))}:host([placement*=left][open]){margin-left:var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75))}.tip{display:flex}:host([placement*=bottom]) .tip,:host([placement*=top]) .tip{width:var(--sp-popover-tip-size);height:calc(var(--sp-popover-tip-size)/2)}:host([placement*=left]) .tip,:host([placement*=right]) .tip{height:var(--sp-popover-tip-size);width:calc(var(--sp-popover-tip-size)/2)}:host([placement*=bottom]) .triangle-left-right,:host([placement*=left]) .triangle-top-bottom,:host([placement*=right]) .triangle-top-bottom,:host([placement*=top]) .triangle-left-right{display:none}
+var(--spectrum-global-dimension-size-75)))}:host([placement*=left][open]){margin-left:var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75))}.tip{width:var(--sp-popover-tip-size);height:calc(var(--sp-popover-tip-size)/2);position:absolute;left:0}:host([placement*=bottom]) #tip,:host([placement*=right]) #tip{transform:none}:host([placement*=top]) .tip{top:100%}:host([placement*=bottom]) .tip{bottom:100%;transform:scaleY(-1)}:host([placement*=left]) .tip{transform-origin:100% 0;transform:rotate(-90deg) translateY(-200%)}:host([placement*=right]) .tip{transform-origin:0 0;transform:rotate(90deg)}
 `;
 export default styles;

src/Popover.d.ts

@@ -1,3 +0,3 @@
-import { SpectrumElement, CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
-import { Placement, OverlayDisplayQueryDetail } from '@spectrum-web-components/overlay';
+import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+import { OverlayDisplayQueryDetail, Placement } from '@spectrum-web-components/overlay';
 /**
@@ -9,2 +9,3 @@ * @attr {Boolean} open - The open state of the popover
     static get styles(): CSSResultArray;
+    open: boolean;
     /**
@@ -11,0 +12,0 @@ * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}

src/Popover.js

@@ -13,3 +13,3 @@ /*
 import { __decorate } from "tslib";
-import { html, SpectrumElement, property, nothing, } from '@spectrum-web-components/base';
+import { html, nothing, property, SpectrumElement, } from '@spectrum-web-components/base';
 import popoverStyles from './popover.css.js';
@@ -23,2 +23,3 @@ /**
         super(...arguments);
+        this.open = false;
         /**
@@ -39,3 +40,3 @@ * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
                     xmlns="http://www.w3.org/svg/2000"
-                    class="tip triangle-top-bottom"
+                    class="tip"
                     viewBox="0 0 24 12"
@@ -48,12 +49,2 @@ >
                 </svg>
-                <svg
-                    xmlns="http://www.w3.org/svg/2000"
-                    class="tip triangle-left-right"
-                    viewBox="0 0 12 24"
-                >
-                    <path
-                        class="triangle"
-                        d="M 0 0.7071067811865476 L 10.707106781186548 11.414213562373096 L 0 22.121320343559645"
-                    ></path>
-                </svg>
             </div>
@@ -91,2 +82,5 @@ `;
 __decorate([
+    property({ type: Boolean, reflect: true })
+], Popover.prototype, "open", void 0);
+__decorate([
     property({ reflect: true })
@@ -93,0 +87,0 @@ ], Popover.prototype, "placement", void 0);

src/Popover.ts

@@ -14,13 +14,12 @@ /*
 import {
+    CSSResultArray,
     html,
+    nothing,
+    property,
     SpectrumElement,
-    CSSResultArray,
     TemplateResult,
-    property,
-    nothing,
 } from '@spectrum-web-components/base';
-
 import {
+    OverlayDisplayQueryDetail,
     Placement,
-    OverlayDisplayQueryDetail,
 } from '@spectrum-web-components/overlay';
@@ -39,2 +38,5 @@ import popoverStyles from './popover.css.js';
 
+    @property({ type: Boolean, reflect: true })
+    public open = false;
+
     /**
@@ -55,3 +57,3 @@ * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
                     xmlns="http://www.w3.org/svg/2000"
-                    class="tip triangle-top-bottom"
+                    class="tip"
                     viewBox="0 0 24 12"
@@ -64,12 +66,2 @@ >
                 </svg>
-                <svg
-                    xmlns="http://www.w3.org/svg/2000"
-                    class="tip triangle-left-right"
-                    viewBox="0 0 12 24"
-                >
-                    <path
-                        class="triangle"
-                        d="M 0 0.7071067811865476 L 10.707106781186548 11.414213562373096 L 0 22.121320343559645"
-                    ></path>
-                </svg>
             </div>
@@ -76,0 +68,0 @@ `;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

750

increased by0.54%

Worsened metrics

Total package byte prevSize

84243

decreased by-0.02%

Dependency changes

• Updated@spectrum-web-components/base@^0.3.1

• Updated@spectrum-web-components/overlay@^0.8.1