@hsds/tooltip - npm Package Compare versions

Comparing version 8.1.4 to 8.2.0

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## [8.2.0](https://github.com/helpscout/hsds/compare/components-tooltip-8.1.4...components-tooltip-8.2.0) (2024-01-08)
+
+
+### Features
+
+* **components-tooltip:** add renderTitleAsHtml option to control how we render the tooltip title ([44e43ee](https://github.com/helpscout/hsds/commit/44e43ee4cff1987f862f38b7a19b30fac611cb6a))
+
 ## [8.1.4](https://github.com/helpscout/hsds/compare/components-tooltip-8.1.3...components-tooltip-8.1.4) (2024-01-03)
@@ -7,0 +14,0 @@

package.json

 {
   "name": "@hsds/tooltip",
-  "version": "8.1.4",
+  "version": "8.2.0",
   "peerDependencies": {
@@ -5,0 +5,0 @@ "prop-types": "~15.7.2",

src/Tooltip.js

@@ -48,2 +48,3 @@ import React, {
   render: renderProp,
+  renderTitleAsHtml,
   renderContent,
@@ -88,4 +89,6 @@ title,
 
-  const titleContent =
-    typeof title === 'string' ? (
+  let titleContent = title
+
+  if (typeof title === 'string') {
+    titleContent = renderTitleAsHtml ? (
       <span
@@ -96,4 +99,5 @@ className="c-Tooltip__title"
     ) : (
-      title
+      <span className="c-Tooltip__title">{title}</span>
     )
+  }
 
@@ -206,2 +210,3 @@ const renderTooltip = ({ className, ...props }) => {
   placement: 'top',
+  renderTitleAsHtml: true, // Match existing behavior, but aim to default to false in future
   triggerOn: 'mouseenter focus',
@@ -255,2 +260,4 @@ withTriggerWrapper: true,
   renderContent: PropTypes.func,
+  /** Should the provided `title` be rendered as HTML */
+  renderTitleAsHtml: PropTypes.bool,
   /** Where to place the Tooltip. */
@@ -257,0 +264,0 @@ placement: PropTypes.oneOf(placement),

Tooltip.js

@@ -38,2 +38,3 @@ "use strict";
   render: renderProp,
+  renderTitleAsHtml,
   renderContent,
@@ -73,8 +74,14 @@ title,
   };
-  const titleContent = typeof title === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    className: "c-Tooltip__title",
-    dangerouslySetInnerHTML: {
-      __html: title
-    }
-  }) : title;
+  let titleContent = title;
+  if (typeof title === 'string') {
+    titleContent = renderTitleAsHtml ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "c-Tooltip__title",
+      dangerouslySetInnerHTML: {
+        __html: title
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "c-Tooltip__title",
+      children: title
+    });
+  }
   const renderTooltip = ({
@@ -172,2 +179,4 @@ className,
   placement: 'top',
+  renderTitleAsHtml: true,
+  // Match existing behavior, but aim to default to false in future
   triggerOn: 'mouseenter focus',
@@ -203,2 +212,4 @@ withTriggerWrapper: true
   renderContent: _propTypes.default.func,
+  /** Should the provided `title` be rendered as HTML */
+  renderTitleAsHtml: _propTypes.default.bool,
   /** Where to place the Tooltip. */
@@ -205,0 +216,0 @@ placement: _propTypes.default.oneOf(placement),

No alert changes

Improved metrics

Total package byte prevSize

39949

increased by2.62%

Lines of code

807

increased by2.15%

No dependency changes