Merge pull request #530 from catho/QTM-511

feat(QTM-511): Prop text of the Tooltip component is now of type node instead of string
catho · Nov 27, 2023 · b5618f6 · b5618f6
2 parents bde73c4 + 6e44393
commit b5618f6
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 3 deletions.
diff --git a/components/Tooltip/Tooltip.jsx b/components/Tooltip/Tooltip.jsx
@@ -105,8 +105,8 @@ class Tooltip extends Component {
 Tip.displayName = 'Tip';
 
 Tooltip.propTypes = {
-  /** Text that tooltip will show */
-  text: PropTypes.string.isRequired,
+  /** Content the tooltip will show */
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
   /** Define tooltip positioning */
   placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
   visible: PropTypes.bool,

diff --git a/components/Tooltip/Tooltip.unit.test.jsx b/components/Tooltip/Tooltip.unit.test.jsx
@@ -8,6 +8,14 @@ const MULTILINE_TOOLTIP_TEXT = `Lorem ipsum dolor sit amet,
 consectetur adipiscing elit. 
 Aenean bibendum facilisis sem viverra fringilla. 
 Suspendisse finibus libero nec justo semper.`;
+const TOOLTIP_NODE_TEXT = (
+  <p>
+    <i>Lorem ipsum dolor sit amet </i>
+    <a href="/" style={{ color: '#0CC0EA' }}>
+      consectetur
+    </a>
+  </p>
+);
 
 describe('Tooltip component ', () => {
   it('Should match the snapshot when place is top', () => {
@@ -69,6 +77,16 @@ describe('Tooltip component ', () => {
     ).toMatchSnapshot();
   });
 
+  it('Should match the snapshot when text is html elements', () => {
+    expect(
+      render(
+        <Tooltip visible text={TOOLTIP_NODE_TEXT}>
+          {TOOLTIP_TRIGGER}
+        </Tooltip>,
+      ).asFragment(),
+    ).toMatchSnapshot();
+  });
+
   it('should toggle visibility when mouse enter and mouse leave', () => {
     render(<Tooltip text={TOOLTIP_TEXT}>{TOOLTIP_TRIGGER}</Tooltip>);
 

diff --git a/components/Tooltip/__snapshots__/Tooltip.unit.test.jsx.snap b/components/Tooltip/__snapshots__/Tooltip.unit.test.jsx.snap
@@ -445,3 +445,86 @@ exports[`Tooltip component  Should match the snapshot when place is top 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Tooltip component  Should match the snapshot when text is html elements 1`] = `
+<DocumentFragment>
+  .c1 {
+  border-radius: 4px;
+  font-weight: bold;
+  opacity: 1;
+  visibility: visible;
+  position: absolute;
+  line-height: 0;
+  text-align: center;
+  -webkit-transition: opacity 0.2s ease-in-out,visibility 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out,visibility 0.2s ease-in-out;
+  z-index: 100;
+  background-color: #424242;
+  border-color: #424242;
+  color: #f2f2f2;
+  font-size: 16px;
+  padding: 8px;
+  left: 50%;
+  bottom: calc(100% + 12px);
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+.c1:before {
+  content: '';
+  position: absolute;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  border-top: 6px solid;
+  border-top-color: inherit;
+  bottom: -5px;
+}
+
+.c2 {
+  display: inline-block;
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 20px;
+  text-align: unset;
+}
+
+.c0 {
+  position: relative;
+  float: left;
+  clear: left;
+  width: unset;
+}
+
+<div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <span
+        class="c2"
+      >
+        <p>
+          <i>
+            Lorem ipsum dolor sit amet 
+          </i>
+          <a
+            href="/"
+            style="color: rgb(12, 192, 234);"
+          >
+            consectetur
+          </a>
+        </p>
+      </span>
+    </div>
+    Hover me
+  </div>
+</DocumentFragment>
+`;
diff --git a/components/Tooltip/index.d.ts b/components/Tooltip/index.d.ts
@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 
 export interface TooltipProps {
-    text: string;
+    text: string | JSX.Element;
     placement?: 'top' | 'right' | 'bottom' | 'left';
     visible?: boolean;
     multiline?: boolean;

diff --git a/stories/Tooltip/Tooltip.mdx b/stories/Tooltip/Tooltip.mdx
@@ -5,6 +5,7 @@ import {
   Default,
   Multiline,
   WithPlacement,
+  WithFormattedText,
   Visible,
 } from './Tooltip.stories.jsx';
 import { Header } from '../shared';
@@ -45,6 +46,12 @@ import Tooltip from '@catho/quantum/Tooltip';
   <Story of={Multiline} />
 </Canvas>
 
+### With Formatted Text
+
+<Canvas>
+  <Story of={WithFormattedText} />
+</Canvas>
+
 ### With placement
 
 <Canvas>

diff --git a/stories/Tooltip/Tooltip.stories.jsx b/stories/Tooltip/Tooltip.stories.jsx
@@ -23,6 +23,18 @@ Multiline.args = {
   multiline: true,
 };
 
+export const WithFormattedText = Template.bind({});
+WithFormattedText.args = {
+  text: (
+    <p>
+      <i>Lorem </i>
+      <a href="#examples" style={{ color: '#0CC0EA' }}>
+        ipsum
+      </a>
+    </p>
+  ),
+};
+
 export const WithPlacement = Template.bind({});
 WithPlacement.args = {
   placement: 'right',