@wireapp/react-ui-kit - npm Package Compare versions

Comparing version 9.15.3 to 9.15.4

lib/Form/Tooltip.js

@@ -37,5 +37,5 @@ "use strict";
 const util_1 = require("../util");
-const paddingTop = 6;
+const paddingDistance = 8;
 const tooltipStyle = theme => ({
-    position: 'absolute',
+    position: 'fixed',
     zIndex: '99999',
@@ -45,9 +45,24 @@ maxWidth: '300px',
     borderRadius: '4px',
+    "&[data-position='top']": {
+        paddingBottom: `${paddingDistance}px`,
+        '.tooltip-arrow': {
+            borderTop: `10px solid ${theme.Tooltip.backgroundColor}`,
+            bottom: 0,
+        },
+    },
+    "&[data-position='bottom']": {
+        paddingTop: `${paddingDistance}px`,
+        '.tooltip-arrow': {
+            borderBottom: `10px solid ${theme.Tooltip.backgroundColor}`,
+            top: 0,
+        },
+    },
     '.tooltip-content': {
         color: theme.Tooltip.color,
         backgroundColor: theme.Tooltip.backgroundColor,
+        borderRadius: '4px',
         fontSize: '12px',
         lineHeight: '14px',
         fontWeight: 400,
-        padding: `${paddingTop}px 8px`,
+        padding: `${paddingDistance}px 8px`,
         textAlign: 'center',
@@ -58,13 +73,5 @@ },
         height: 0,
-        borderLeft: '6px solid transparent',
-        borderRight: '6px solid transparent',
+        borderLeft: '8px solid transparent',
+        borderRight: '8px solid transparent',
         position: 'absolute',
-        "&[data-position='top']": {
-            borderTop: `10px solid ${theme.Tooltip.backgroundColor}`,
-            bottom: '-6px',
-        },
-        "&[data-position='bottom']": {
-            borderBottom: `10px solid ${theme.Tooltip.backgroundColor}`,
-            top: '-6px',
-        },
     },
@@ -82,3 +89,3 @@ });
         }
-        const isTouchingTopEdge = bounding.y <= element.clientHeight + paddingTop * 2;
+        const isTouchingTopEdge = bounding.y <= element.clientHeight + paddingDistance * 2;
         setIsTouchingTop(isTouchingTopEdge);
@@ -88,6 +95,6 @@ const elementWidth = (element.scrollWidth - bounding.width) / 2;
         if (isTouchingTopEdge) {
-            element.style.top = `${bounding.y + bounding.height + paddingTop}px`;
+            element.style.top = `${bounding.y + bounding.height}px`;
         }
         else {
-            element.style.top = `${bounding.y - element.clientHeight - paddingTop}px`;
+            element.style.top = `${bounding.y - element.clientHeight}px`;
         }
@@ -104,5 +111,5 @@ };
         const parentElementRect = parentElement.getBoundingClientRect();
-        element.style.left = `${parentElementRect.width / 2 - paddingTop}px`;
+        element.style.left = `${parentElementRect.width / 2 - paddingDistance}px`;
     };
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: tooltipRef, className: "tooltip", css: (theme) => tooltipStyle(theme), children: [(0, jsx_runtime_1.jsx)("div", { ref: tooltipArrowRef, className: "tooltip-arrow", "data-position": isTouchingTop ? 'bottom' : 'top' }), (0, jsx_runtime_1.jsx)("div", { className: "tooltip-content", "data-testid": "tooltip-content", children: children })] }), targetElement);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: tooltipRef, className: "tooltip", css: (theme) => tooltipStyle(theme), "data-position": isTouchingTop ? 'bottom' : 'top', children: [(0, jsx_runtime_1.jsx)("div", { ref: tooltipArrowRef, className: "tooltip-arrow" }), (0, jsx_runtime_1.jsx)("div", { className: "tooltip-content", "data-testid": "tooltip-content", children: children })] }), targetElement);
 };
@@ -117,3 +124,3 @@ const filterTooltipProps = (props) => (0, util_1.filterProps)(props, ['body']);
     const onElementEnter = (event) => {
-        const boundingRect = event.target.getBoundingClientRect();
+        const boundingRect = event.currentTarget.getBoundingClientRect();
         setIsHovered(true);
@@ -120,0 +127,0 @@ boundingRectRef.current = boundingRect;

package.json

@@ -73,4 +73,4 @@ {
   },
-  "version": "9.15.3",
-  "gitHead": "d8eb493df0f85a485719486b44bcb8a79eac5962"
+  "version": "9.15.4",
+  "gitHead": "6d6565a9ca1963c15568e9c557bcb8d95755fce7"
 }

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

Total package byte prevSize

705180

increased by0.02%

Lines of code

9983

increased by0.07%

No dependency changes