feat: add style and overlayClassName property to ellipsis to make it possible to pass z-index to floating container

Author: vladzabolotnyi

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "4.4.26-alpha2",
+  "version": "4.4.26-alpha3",
   "description": "Tyk UI - ui reusable components",
   "main": "src/index.js",
   "scripts": {

src/components/TextEllipsis/TextEllipsis.test.js

@@ -1,6 +1,7 @@
 import React from "react";
 import TextEllipsis from "./index";
 
+/* eslint-disable react/prop-types */
 function Component({ truncateFrom = "end" }) {
   return (
     <div

src/components/TextEllipsis/index.js

@@ -7,7 +7,15 @@ import Tooltip from "../Tooltip";
  * The entire text is displayed with the help of Tooltip component
  */
 
-function TextEllipsis({ className, text, limit, position, truncateFrom = "end" }) {
+function TextEllipsis({
+  style,
+  className,
+  overlayClassName,
+  text,
+  limit,
+  position,
+  truncateFrom = "end",
+}) {
   if (text.length <= limit) {
     return text;
   }
@@ -21,14 +29,22 @@ function TextEllipsis({ className, text, limit, position, truncateFrom = "end" }
   }
 
   return (
-    <Tooltip className={className} render={text} position={position}>
+    <Tooltip
+      style={style}
+      overlayClassName={overlayClassName}
+      className={className}
+      render={text}
+      position={position}
+    >
       {displayText}
     </Tooltip>
   );
 }
 
 TextEllipsis.propTypes = {
+  style: PropTypes.instanceOf(Object),
   className: PropTypes.string,
+  overlayClassName: PropTypes.string,
   /** Text to be shrinked by TextEllipsis */
   text: PropTypes.string,
   /** Number of characters that TextEllipsis would leave visible */

src/components/Tooltip/index.js

@@ -9,6 +9,7 @@ import Icon from '../Icon';
 function Tooltip({
   render,
   className,
+  overlayClassName,
   children,
   position = 'auto',
   style,
@@ -60,6 +61,7 @@ function Tooltip({
       {children}
       {isActive && (
         <FloatingContainer
+          className={overlayClassName}
           element={wrapperRef}
           forceDisplay={position}
           preferredPosition="top"
@@ -107,6 +109,7 @@ Tooltip.propTypes = {
   ]),
   /** additional tooltip classes */
   className: PropTypes.string,
+  overlayClassName: PropTypes.string,
   /** if `true` displays the "question mark" icon;
    * optionally you can pass a different icon
   */