fix: review comments

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.16-beta-7",
+    "version": "0.1.17",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -75,7 +75,7 @@ export default function ClipboardButton({
         >
             <button
                 type="button"
-                className={`dc__outline-none-imp p-0 flex dc__transparent--imp dc__no-border ${rootClassName}`}
+                className={`dc__outline-none-imp p-0 flex dc__transparent--unstyled dc__no-border ${rootClassName}`}
                 onMouseEnter={handleEnableTippy}
                 onMouseLeave={handleDisableTippy}
                 onClick={handleCopyContent}

src/Common/ClipboardButton/ClipboardButton.tsx

@@ -36,7 +36,7 @@ export const FieldRowWithLabel = ({
     >
         {showLabel && (
             <label className="cn-7 fs-13 lh-20 fw-4 flexbox mb-0" htmlFor={id}>
-                <Tooltip alwaysShowTippyOnHover={!!rawDescription}>
+                <Tooltip alwaysShowTippyOnHover={!!rawDescription} content={rawDescription}>
                     <span className={`dc__ellipsis-right ${rawDescription ? 'text-underline-dashed-300' : ''}`}>
                         {label || DEFAULT_FIELD_TITLE}
                     </span>

src/Common/RJSF/common/FieldRow.tsx

@@ -16,7 +16,7 @@
 
 import { IconButtonProps } from '@rjsf/utils'
 
-import Tooltip from '../../../Tooltip/Tooltip'
+import { Tooltip } from '@Common/Tooltip'
 import { ReactComponent as PlusIcon } from '../../../../Assets/Icon/ic-add.svg'
 
 export const AddButton = ({
@@ -31,23 +31,17 @@ export const AddButton = ({
 
     return (
         <div className="flexbox flex-justify-start">
-            <Tooltip
-                showOnTruncate
-                className="default-tt dc__word-break"
-                arrow={false}
-                placement="right"
-                content={content}
+            <button
+                {...props}
+                type="button"
+                className="dc__outline-none-imp p-0 dc__transparent flex dc__gap-4 cursor dc__mxw-250"
+                title="Add"
             >
-                <button
-                    {...props}
-                    type="button"
-                    className="dc__outline-none-imp p-0 dc__transparent flex dc__gap-4 cursor dc__mxw-250"
-                    title="Add"
-                >
-                    <PlusIcon className="icon-dim-16 fcb-5" />
+                <PlusIcon className="icon-dim-16 fcb-5" />
+                <Tooltip showOnTruncate placement="right" content={content}>
                     <span className="cb-5 fs-13 lh-34 dc__truncate">{content}</span>
-                </button>
-            </Tooltip>
+                </Tooltip>
+            </button>
         </div>
     )
 }

src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx

@@ -19,7 +19,7 @@ import { Tooltip } from '@Common/Tooltip'
 
 export const TitleField = ({ id, title, required, description }: TitleFieldProps & Partial<Record<'description', string>>) => (
     <legend className="fs-13 fw-6 cn-9 lh-20 dc__no-border py-9 mb-0" id={id}>
-        <Tooltip alwaysShowTippyOnHover={!!description}>
+        <Tooltip alwaysShowTippyOnHover={!!description} content={description}>
             <span className={`${description ? 'text-underline-dashed-300' : ''}`}>{title}</span>
         </Tooltip>
         {required && <span className="cr-5">&nbsp;*</span>}

src/Common/RJSF/templates/TitleField.tsx

@@ -3,15 +3,19 @@ import TippyJS from '@tippyjs/react'
 import { TooltipProps } from './types'
 
 const Tooltip = ({
-    showOnTruncate = false,
     alwaysShowTippyOnHover = false,
+    showOnTruncate = !alwaysShowTippyOnHover,
+    wordBreak = true,
     children: child,
     ...rest
 }: TooltipProps) => {
     const [isTextTruncated, setIsTextTruncated] = useState(false)
 
     const refCallback = useCallback((node: HTMLDivElement) => {
         if (node) {
+            // NOTE: for line-clamp we need to check scrollHeight against clientHeight since orientation
+            // is set to vertical through -webkit-box-orient prop that is needed for line-clamp to work
+            // see: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
             setIsTextTruncated(node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight)
         }
     }, [])
@@ -23,7 +27,7 @@ const Tooltip = ({
             arrow={false}
             placement="top"
             {...rest}
-            className={`default-tt dc__word-break-all dc__mxw-200 ${rest.className}`}
+            className={`default-tt ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200 ${rest.className}`}
         >
             {cloneElement(child, { ...child.props, ref: refCallback })}
         </TippyJS>

src/Common/Tooltip/Tooltip.tsx

@@ -1,14 +1,28 @@
 import { TippyProps } from '@tippyjs/react'
 
-export interface TooltipProps extends TippyProps {
-    /**
-     * If true, show tippy on truncate
-     * @default false
-     */
-    showOnTruncate?: boolean
-    /**
-     * If true, wrap with tippy irrespective of other options
-     * @default false
-     */
-    alwaysShowTippyOnHover?: boolean
-}
+type BaseTooltipProps =
+    | {
+          showOnTruncate?: boolean
+          alwaysShowTippyOnHover?: never
+      }
+    | {
+          /**
+           * If true, show tippy on truncate
+           * @default true
+           */
+          showOnTruncate?: never
+          /**
+           * If true, wrap with tippy irrespective of other options
+           * @default false
+           */
+          alwaysShowTippyOnHover?: boolean
+      }
+
+export type TooltipProps = BaseTooltipProps &
+    TippyProps & {
+        /**
+         * If true, apply dc__word-break-all
+         * @default true
+         */
+        wordBreak?: boolean
+    }