@hsds/tooltip - npm Package Compare versions

Comparing version 9.1.0 to 9.1.1-next.0

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+## [9.1.1-next.0](https://github.com/helpscout/hsds/compare/components-tooltip-9.1.0...components-tooltip-9.1.1-next.0) (2024-02-28)
+
 ## [9.1.0](https://github.com/helpscout/hsds/compare/components-tooltip-9.0.0...components-tooltip-9.1.0) (2024-02-07)
@@ -7,0 +9,0 @@

package.json

 {
   "name": "@hsds/tooltip",
-  "version": "9.1.0",
+  "version": "9.1.1-next.0",
   "peerDependencies": {
@@ -13,6 +13,6 @@ "prop-types": "~15.7.2",
   "dependencies": {
-    "@hsds/keyboard-badge": "9.1.0",
-    "@hsds/utils-color": "9.0.1",
-    "@hsds/utils-mixins": "9.0.1",
-    "@hsds/utils-react": "9.0.0",
+    "@hsds/keyboard-badge": "9.1.1-next.0",
+    "@hsds/utils-color": "9.0.2-next.0",
+    "@hsds/utils-mixins": "9.0.2-next.0",
+    "@hsds/utils-react": "9.0.1-next.0",
     "@tippyjs/react": "4.2.6",
@@ -19,0 +19,0 @@ "classnames": "2.3.1",

src/Tooltip.js

@@ -103,2 +103,4 @@ import React, {
   const renderTooltip = ({ className, ...props }) => {
+    const { maxWidth, minWidth, animationDuration, arrowSize, ...rest } = props
+
     return (
@@ -114,3 +116,14 @@ <div className="hsds-react hsds-beacon">
             )}
-            {...props}
+            style={{
+              '--hsds-tooltip-max-width':
+                maxWidth && maxWidth !== 300 && `${maxWidth}px`,
+              '--hsds-tooltip-min-width':
+                minWidth && minWidth !== 20 && `${minWidth}px`,
+              '--hsds-tooltip-animation-duration':
+                animationDuration !== 200 && `${animationDuration}ms`,
+              '--hsds-tooltip-placement-arrow-position':
+                arrowSize !== 12 && `${(arrowSize / 2) * -1}px`,
+              '--hsds-tooltip-arrow-size': arrowSize !== 12 && `${arrowSize}px`,
+            }}
+            {...rest}
           >
@@ -120,7 +133,3 @@ {renderContent ? renderContent() : titleContent}
             {withArrow && (
-              <ArrowUI
-                className="c-Tooltip_ArrowUI"
-                arrowSize={arrowSize}
-                data-popper-arrow
-              />
+              <ArrowUI className="c-Tooltip_ArrowUI" data-popper-arrow />
             )}
@@ -189,6 +198,8 @@ </TooltipUI>
         tabIndex="0"
-        display={display}
         data-cy={dataCy}
         className="TooltipTrigger"
         role="tooltip"
+        style={{
+          '--hsds-tooltip-display': display !== 'inline-block' && display,
+        }}
       >
@@ -209,3 +220,2 @@ {children}
   'data-cy': 'Tooltip',
-  display: null,
   isOpen: false,
@@ -212,0 +222,0 @@ placement: 'top',

src/Tooltip.styles.js

@@ -9,3 +9,4 @@ import styled from 'styled-components'
   --focusRingRadius: 3px;
-  display: ${({ display }) => (display ? display : 'inline-block')};
+  --hsds-tooltip-display: inline-block;
+  display: var(--hsds-tooltip-display);
 `
@@ -15,4 +16,4 @@
   position: absolute;
-  height: ${({ arrowSize }) => arrowSize}px;
-  width: ${({ arrowSize }) => arrowSize}px;
+  height: var(--hsds-tooltip-arrow-size);
+  width: var(--hsds-tooltip-arrow-size);
   pointer-events: none;
@@ -25,4 +26,4 @@
     transform: rotate(45deg);
-    height: calc(${({ arrowSize }) => arrowSize}px - 4px);
-    width: calc(${({ arrowSize }) => arrowSize}px - 4px);
+    height: calc(var(--hsds-tooltip-arrow-size) - 4px);
+    width: calc(var(--hsds-tooltip-arrow-size) - 4px);
     margin: 2px;
@@ -38,9 +39,13 @@ left: 0;
 export const TooltipUI = styled.div`
+  --hsds-tooltip-max-width: 300px;
+  --hsds-tooltip-min-width: 20px;
+  --hsds-tooltip-animation-duration: 200ms;
+  --hsds-tooltip-placement-arrow-position: -6px;
+  --hsds-tooltip-arrow-size: 12px;
   --TooltipBgColor: ${getColor('charcoal.1100')};
-  /* in case scoping is not working */
   box-sizing: border-box;
   display: block;
   width: max-content;
-  max-width: ${({ maxWidth }) => maxWidth || 300}px;
-  min-width: ${({ minWidth }) => minWidth || 20}px;
+  max-width: var(--hsds-tooltip-max-width);
+  min-width: var(--hsds-tooltip-min-width);
   padding: 6px 8px;
@@ -58,3 +63,3 @@ opacity: 0;
   word-wrap: break-word;
-  transition-duration: ${({ animationDuration }) => animationDuration}ms;
+  transition-duration: var(--hsds-tooltip-animation-duration);
   transition-property: visibility, transform, opacity;
@@ -97,4 +102,4 @@ transition-timing-function: ease-in-out;
   &[data-placement^='top'] {
-    ${ArrowUI} {
-      bottom: calc((${({ arrowSize }) => arrowSize}px / 2) * -1);
+    .c-Tooltip_ArrowUI {
+      bottom: var(--hsds-tooltip-placement-arrow-position);
     }
@@ -104,4 +109,4 @@ }
   &[data-placement^='bottom'] {
-    ${ArrowUI} {
-      top: calc((${({ arrowSize }) => arrowSize}px / 2) * -1);
+    .c-Tooltip_ArrowUI {
+      top: var(--hsds-tooltip-placement-arrow-position);
     }
@@ -111,4 +116,4 @@ }
   &[data-placement^='left'] {
-    ${ArrowUI} {
-      right: calc((${({ arrowSize }) => arrowSize}px / 2) * -1);
+    .c-Tooltip_ArrowUI {
+      right: var(--hsds-tooltip-placement-arrow-position);
     }
@@ -118,4 +123,4 @@ }
   &[data-placement^='right'] {
-    ${ArrowUI} {
-      left: calc((${({ arrowSize }) => arrowSize}px / 2) * -1);
+    .c-Tooltip_ArrowUI {
+      left: var(--hsds-tooltip-placement-arrow-position);
     }
@@ -122,0 +127,0 @@ }

Tooltip.js

@@ -90,2 +90,9 @@ "use strict";
   }) => {
+    const {
+      maxWidth,
+      minWidth,
+      animationDuration,
+      arrowSize,
+      ...rest
+    } = props;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -96,3 +103,10 @@ className: "hsds-react hsds-beacon",
           className: (0, _classnames.default)(className, hasKeyboardBadge && 'with-badge', typeof title === 'string' && 'with-plain-title', `placement-${placement}`),
-          ...props,
+          style: {
+            '--hsds-tooltip-max-width': maxWidth && maxWidth !== 300 && `${maxWidth}px`,
+            '--hsds-tooltip-min-width': minWidth && minWidth !== 20 && `${minWidth}px`,
+            '--hsds-tooltip-animation-duration': animationDuration !== 200 && `${animationDuration}ms`,
+            '--hsds-tooltip-placement-arrow-position': arrowSize !== 12 && `${arrowSize / 2 * -1}px`,
+            '--hsds-tooltip-arrow-size': arrowSize !== 12 && `${arrowSize}px`
+          },
+          ...rest,
           children: [renderContent ? renderContent() : titleContent, hasKeyboardBadge && /*#__PURE__*/(0, _jsxRuntime.jsx)(_keyboardBadge.default, {
@@ -102,3 +116,2 @@ value: badge
             className: "c-Tooltip_ArrowUI",
-            arrowSize: arrowSize,
             "data-popper-arrow": true
@@ -160,6 +173,8 @@ })]
       tabIndex: "0",
-      display: display,
       "data-cy": dataCy,
       className: "TooltipTrigger",
       role: "tooltip",
+      style: {
+        '--hsds-tooltip-display': display !== 'inline-block' && display
+      },
       children: children
@@ -179,3 +194,2 @@ });
   'data-cy': 'Tooltip',
-  display: null,
   isOpen: false,
@@ -182,0 +196,0 @@ placement: 'top',

Tooltip.styles.js

@@ -12,5 +12,3 @@ "use strict";
   componentId: "sc-1a5i2th-0"
-})(["", ";--focusRingRadius:3px;display:", ";"], _utilsMixins.focusRing, ({
-  display
-}) => display ? display : 'inline-block');
+})(["", ";--focusRingRadius:3px;--hsds-tooltip-display:inline-block;display:var(--hsds-tooltip-display);"], _utilsMixins.focusRing);
 exports.TooltipTriggerUI = TooltipTriggerUI;
@@ -20,11 +18,3 @@ const ArrowUI = _styledComponents.default.span.withConfig({
   componentId: "sc-1a5i2th-1"
-})(["position:absolute;height:", "px;width:", "px;pointer-events:none;&:before{content:'';background-color:var(--TooltipBgColor);position:absolute;transform:rotate(45deg);height:calc(", "px - 4px);width:calc(", "px - 4px);margin:2px;left:0;}&.is-hidden{visibility:hidden;}"], ({
-  arrowSize
-}) => arrowSize, ({
-  arrowSize
-}) => arrowSize, ({
-  arrowSize
-}) => arrowSize, ({
-  arrowSize
-}) => arrowSize);
+})(["position:absolute;height:var(--hsds-tooltip-arrow-size);width:var(--hsds-tooltip-arrow-size);pointer-events:none;&:before{content:'';background-color:var(--TooltipBgColor);position:absolute;transform:rotate(45deg);height:calc(var(--hsds-tooltip-arrow-size) - 4px);width:calc(var(--hsds-tooltip-arrow-size) - 4px);margin:2px;left:0;}&.is-hidden{visibility:hidden;}"]);
 exports.ArrowUI = ArrowUI;
@@ -34,17 +24,3 @@ const TooltipUI = _styledComponents.default.div.withConfig({
   componentId: "sc-1a5i2th-2"
-})(["--TooltipBgColor:", ";box-sizing:border-box;display:block;width:max-content;max-width:", "px;min-width:", "px;padding:6px 8px;opacity:0;background-color:var(--TooltipBgColor);border-radius:4px;color:white;font-family:var(--HSDSGlobalFontFamily);font-size:13px;line-height:1.3;word-break:break-word;white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;transition-duration:", "ms;transition-property:visibility,transform,opacity;transition-timing-function:ease-in-out;&.with-plain-title{padding:0;}&.placement-top,&.placement-top-end,&.placement-top-start{transform:translateY(12px);}&.placement-bottom,&.placement-bottom-end,&.placement-bottom-start{transform:translateY(-12px);}&.placement-left,&.placement-left-end,&.placement-left-start{transform:translateX(12px);}&.placement-right,&.placement-right-end,&.placement-right-start{transform:translateX(-12px);}.c-Tooltip__title{display:inline-block;padding:6px 8px;}&[data-placement^='top']{", "{bottom:calc((", "px / 2) * -1);}}&[data-placement^='bottom']{", "{top:calc((", "px / 2) * -1);}}&[data-placement^='left']{", "{right:calc((", "px / 2) * -1);}}&[data-placement^='right']{", "{left:calc((", "px / 2) * -1);}}&.with-badge{padding-left:10px;padding-right:6px;display:flex;align-items:center;text-align:left;.c-KeyboardBadge{margin-left:8px;flex:0 0 auto;}.c-KeyboardBadge__Key{background-color:", ";color:white;}}"], (0, _utilsColor.getColor)('charcoal.1100'), ({
-  maxWidth
-}) => maxWidth || 300, ({
-  minWidth
-}) => minWidth || 20, ({
-  animationDuration
-}) => animationDuration, ArrowUI, ({
-  arrowSize
-}) => arrowSize, ArrowUI, ({
-  arrowSize
-}) => arrowSize, ArrowUI, ({
-  arrowSize
-}) => arrowSize, ArrowUI, ({
-  arrowSize
-}) => arrowSize, (0, _utilsColor.getColor)('charcoal.800'));
+})(["--hsds-tooltip-max-width:300px;--hsds-tooltip-min-width:20px;--hsds-tooltip-animation-duration:200ms;--hsds-tooltip-placement-arrow-position:-6px;--hsds-tooltip-arrow-size:12px;--TooltipBgColor:", ";box-sizing:border-box;display:block;width:max-content;max-width:var(--hsds-tooltip-max-width);min-width:var(--hsds-tooltip-min-width);padding:6px 8px;opacity:0;background-color:var(--TooltipBgColor);border-radius:4px;color:white;font-family:var(--HSDSGlobalFontFamily);font-size:13px;line-height:1.3;word-break:break-word;white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;transition-duration:var(--hsds-tooltip-animation-duration);transition-property:visibility,transform,opacity;transition-timing-function:ease-in-out;&.with-plain-title{padding:0;}&.placement-top,&.placement-top-end,&.placement-top-start{transform:translateY(12px);}&.placement-bottom,&.placement-bottom-end,&.placement-bottom-start{transform:translateY(-12px);}&.placement-left,&.placement-left-end,&.placement-left-start{transform:translateX(12px);}&.placement-right,&.placement-right-end,&.placement-right-start{transform:translateX(-12px);}.c-Tooltip__title{display:inline-block;padding:6px 8px;}&[data-placement^='top']{.c-Tooltip_ArrowUI{bottom:var(--hsds-tooltip-placement-arrow-position);}}&[data-placement^='bottom']{.c-Tooltip_ArrowUI{top:var(--hsds-tooltip-placement-arrow-position);}}&[data-placement^='left']{.c-Tooltip_ArrowUI{right:var(--hsds-tooltip-placement-arrow-position);}}&[data-placement^='right']{.c-Tooltip_ArrowUI{left:var(--hsds-tooltip-placement-arrow-position);}}&.with-badge{padding-left:10px;padding-right:6px;display:flex;align-items:center;text-align:left;.c-KeyboardBadge{margin-left:8px;flex:0 0 auto;}.c-KeyboardBadge__Key{background-color:", ";color:white;}}"], (0, _utilsColor.getColor)('charcoal.1100'), (0, _utilsColor.getColor)('charcoal.800'));
 exports.TooltipUI = TooltipUI;
@@ -51,0 +27,0 @@ const TooltipAnimationUI = _styledComponents.default.div.withConfig({

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45168

increased by3.78%

Lines of code

820

increased by0.74%

Worsened metrics

Number of downloads

104

decreased by-16.8%

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• + Added@hsds/keyboard-badge@9.1.1-next.0(transitive)

• + Added@hsds/tokens@2.1.1-next.0(transitive)

• + Added@hsds/utils-color@9.0.2-next.0(transitive)

• + Added@hsds/utils-constants@9.0.1-next.0(transitive)

• + Added@hsds/utils-mixins@9.0.2-next.0(transitive)

• + Added@hsds/utils-react@9.0.1-next.0(transitive)

• + Added@hsds/utils-sass@9.0.1-next.0(transitive)

• - Removed@hsds/keyboard-badge@9.1.0(transitive)

• - Removed@hsds/tokens@2.1.0(transitive)

• - Removed@hsds/utils-color@9.0.1(transitive)

• - Removed@hsds/utils-constants@9.0.0(transitive)

• - Removed@hsds/utils-mixins@9.0.1(transitive)

• - Removed@hsds/utils-react@9.0.0(transitive)

• - Removed@hsds/utils-sass@9.0.0(transitive)

• Updated@hsds/keyboard-badge@9.1.1-next.0

• Updated@hsds/utils-color@9.0.2-next.0

• Updated@hsds/utils-mixins@9.0.2-next.0

• Updated@hsds/utils-react@9.0.1-next.0