fix: tooltip custom class (react) (#2012)

* fix: add custom class prop

* docs: add custom class example

* fix: hello linter my old friend

packages/sage-react/lib/Tooltip/Tooltip.jsx

@@ -2,14 +2,13 @@ import React, { Children, useState, cloneElement } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { TooltipElement } from './TooltipElement';
-import {
-  TOOLTIP_POSITIONS
-} from './configs';
+import { TOOLTIP_POSITIONS } from './configs';
 
 export const Tooltip = ({
   children,
   content,
   position,
+  tooltipCustomClass,
   ...rest
 }) => {
   const [active, setActive] = useState(false);
@@ -38,6 +37,7 @@ export const Tooltip = ({
           content={content}
           parentDomRect={parentDomRect}
           position={position}
+          tooltipCustomClass={tooltipCustomClass}
         />,
         document.body
       )}
@@ -50,10 +50,12 @@ Tooltip.POSITIONS = TOOLTIP_POSITIONS;
 
 Tooltip.defaultProps = {
   position: TOOLTIP_POSITIONS.DEFAULT,
+  tooltipCustomClass: '',
 };
 
 Tooltip.propTypes = {
   children: PropTypes.node.isRequired,
   content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
   position: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
+  tooltipCustomClass: PropTypes.string,
 };

packages/sage-react/lib/Tooltip/Tooltip.story.jsx

@@ -37,3 +37,29 @@ export const Default = Template.bind({});
 export const Static = () => (
   <Tooltip.Element content="Testing static tooltip" />
 );
+
+export const CustomClass = Template.bind({});
+CustomClass.args = {
+  children: <Button>Button</Button>,
+  content: 'This content and sizing is styled with the applied custom class. Use at your own risk',
+  position: Tooltip.POSITIONS.DEFAULT,
+  tooltipCustomClass: 'custom-tooltip-class',
+};
+
+CustomClass.decorators = [
+  (Story) => (
+    <>
+      <style>
+        {`
+          .custom-tooltip-class {
+            color: #ff3e15;
+            height: 200px;
+            max-width: 800px;
+            width: 400px;
+          }
+        `}
+      </style>
+      <Story />
+    </>
+  ),
+];

packages/sage-react/lib/Tooltip/TooltipElement.jsx

@@ -1,9 +1,7 @@
 import React, { useState, useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import {
-  TOOLTIP_POSITIONS
-} from './configs';
+import { TOOLTIP_POSITIONS } from './configs';
 
 /* eslint-disable react-hooks/exhaustive-deps */
 
@@ -13,12 +11,14 @@ export const TooltipElement = ({
   content,
   parentDomRect,
   position,
+  tooltipCustomClass,
 }) => {
   const tooltipRef = useRef(null);
   const [coordinates, setCoordinates] = useState({ top: null, left: null });
 
   const classNames = classnames(
     'sage-tooltip',
+    tooltipCustomClass,
     {
       'sage-tooltip--static': !parentDomRect,
       [`sage-tooltip--${position}`]: position,
@@ -86,6 +86,7 @@ TooltipElement.POSITIONS = TOOLTIP_POSITIONS;
 TooltipElement.defaultProps = {
   parentDomRect: null,
   position: TOOLTIP_POSITIONS.DEFAULT,
+  tooltipCustomClass: '',
 };
 
 TooltipElement.propTypes = {
@@ -98,4 +99,5 @@ TooltipElement.propTypes = {
     width: PropTypes.number,
   }),
   position: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
+  tooltipCustomClass: PropTypes.string,
 };