@spectrum-web-components/tooltip - 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/tooltip@0.7.0...@spectrum-web-components/tooltip@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/tooltip@0.5.4...@spectrum-web-components/tooltip@0.7.0) (2021-01-21)
@@ -8,0 +16,0 @@

custom-elements.json

@@ -9,2 +9,7 @@ {
         {
+          "name": "open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
           "name": "placement",
@@ -21,2 +26,8 @@ "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\"",
         {
+          "name": "open",
+          "attribute": "open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
           "name": "placement",
@@ -23,0 +34,0 @@ "attribute": "placement",

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.7.0",
+    "version": "0.7.1",
     "description": "",
@@ -54,10 +54,10 @@ "main": "./src/index.js",
         "@spectrum-css/tooltip": "^3.0.0-beta.5",
-        "@spectrum-web-components/icons-workflow": "^0.5.0"
+        "@spectrum-web-components/icons-workflow": "^0.5.1"
     },
     "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/tooltip.css.js

@@ -18,5 +18,5 @@ /*
 var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,
-var(--spectrum-global-dimension-size-125)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}::slotted([slot=icon]){width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;flex-shrink:0;margin-top:1px}#label{line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-alias-component-text-line-height))}:host{background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white))}#tip{border-top-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}#tip{border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent}:host([data-popper-placement]){margin:0}:host([data-popper-placement=left]) #tip,:host([data-popper-placement=right]) #tip{margin-top:0}:host([data-popper-placement*=bottom]) #tip,:host([data-popper-placement*=top]) #tip{margin-left:0}
+var(--spectrum-global-dimension-size-125)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}::slotted([slot=icon]){width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;flex-shrink:0;margin-top:1px}#label{line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-alias-component-text-line-height))}:host{background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white))}#tip{border-top-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}#tip{border:none}:host([placement*=bottom]) #tip,:host([placement*=left]) #tip,:host([placement*=right]) #tip{transform:none}#tip:after{content:"";position:absolute;left:0;width:0;height:0;border-top-color:transparent;border:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid transparent;border-top:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}:host([placement*=bottom]) #tip:after{bottom:100%;transform:scaleY(-1)}:host([placement*=left]) #tip:after{left:100%;transform:rotate(-90deg)}:host([placement*=right]) #tip:after{right:100%;left:auto;transform:rotate(90deg)}:host([variant=negative]) #tip:after{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=info]) #tip:after{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=positive]) #tip:after{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}
 `;
 export default styles;
 //# sourceMappingURL=tooltip.css.js.map

src/tooltip.css.ts

@@ -18,4 +18,4 @@ /*
 var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,
-var(--spectrum-global-dimension-size-125)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}::slotted([slot=icon]){width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;flex-shrink:0;margin-top:1px}#label{line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-alias-component-text-line-height))}:host{background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white))}#tip{border-top-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}#tip{border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent}:host([data-popper-placement]){margin:0}:host([data-popper-placement=left]) #tip,:host([data-popper-placement=right]) #tip{margin-top:0}:host([data-popper-placement*=bottom]) #tip,:host([data-popper-placement*=top]) #tip{margin-left:0}
+var(--spectrum-global-dimension-size-125)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}::slotted([slot=icon]){width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;flex-shrink:0;margin-top:1px}#label{line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-alias-component-text-line-height))}:host{background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white))}#tip{border-top-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}#tip{border:none}:host([placement*=bottom]) #tip,:host([placement*=left]) #tip,:host([placement*=right]) #tip{transform:none}#tip:after{content:"";position:absolute;left:0;width:0;height:0;border-top-color:transparent;border:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid transparent;border-top:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}:host([placement*=bottom]) #tip:after{bottom:100%;transform:scaleY(-1)}:host([placement*=left]) #tip:after{left:100%;transform:rotate(-90deg)}:host([placement*=right]) #tip:after{right:100%;left:auto;transform:rotate(90deg)}:host([variant=negative]) #tip:after{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=info]) #tip:after{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=positive]) #tip:after{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}
 `;
 export default styles;

src/Tooltip.d.ts

@@ -9,2 +9,3 @@ import { CSSResultArray, TemplateResult, SpectrumElement } from '@spectrum-web-components/base';
     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/Tooltip.js

@@ -22,2 +22,3 @@ /*
         super(...arguments);
+        this.open = false;
         /**
@@ -76,2 +77,5 @@ * @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"}
 __decorate([
+    property({ type: Boolean, reflect: true })
+], Tooltip.prototype, "open", void 0);
+__decorate([
     property({ reflect: true })
@@ -78,0 +82,0 @@ ], Tooltip.prototype, "placement", void 0);

src/Tooltip.ts

@@ -38,2 +38,5 @@ /*
 
+    @property({ type: Boolean, reflect: true })
+    public open = false;
+
     /**
@@ -40,0 +43,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"}

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

101972

increased by5.08%

Number of low license alerts

4

decreased by-20%

License quality

80

increased by33.33%

Lines of code

938

increased by7.57%

Worsened metrics

Published versions last two months

29

decreased by-3.33%

Dependency changes

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

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