fix: tooltip: fixes default clone element class names (#699)

EightfoldAI · Aug 28, 2023 · 3404bb1 · 3404bb1
1 parent e00f618
commit 3404bb1
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 36 deletions.
diff --git a/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`Breadcrumb Crumb should support string \`0\` and number \`0\` 1`] = `
         >
           <a
             aria-disabled="false"
-            class="link-style full-width primary breadcrumb-link my-breadcrumb-links-class"
+            class="link-style full-width primary tooltip-reference breadcrumb-link my-breadcrumb-links-class"
             data-reference-id="tooltip--reference"
             id="tooltip--reference"
             role="link"
@@ -59,7 +59,7 @@ exports[`Breadcrumb Crumb should support string \`0\` and number \`0\` 1`] = `
         >
           <a
             aria-disabled="false"
-            class="link-style full-width primary breadcrumb-link my-breadcrumb-links-class"
+            class="link-style full-width primary tooltip-reference breadcrumb-link my-breadcrumb-links-class"
             data-reference-id="tooltip--reference"
             id="tooltip--reference"
             role="link"
@@ -211,7 +211,7 @@ exports[`Breadcrumb Renders without crashing 1`] = `
           >
             <a
               aria-disabled="false"
-              class="link-style full-width primary breadcrumb-link my-breadcrumb-links-class"
+              class="link-style full-width primary tooltip-reference breadcrumb-link my-breadcrumb-links-class"
               data-reference-id="tooltip--reference"
               id="tooltip--reference"
               role="link"
@@ -250,7 +250,7 @@ exports[`Breadcrumb Renders without crashing 1`] = `
           >
             <a
               aria-disabled="false"
-              class="link-style full-width primary breadcrumb-link my-breadcrumb-links-class"
+              class="link-style full-width primary tooltip-reference breadcrumb-link my-breadcrumb-links-class"
               data-reference-id="tooltip--reference"
               id="tooltip--reference"
               role="link"
@@ -289,7 +289,7 @@ exports[`Breadcrumb Renders without crashing 1`] = `
           >
             <a
               aria-disabled="false"
-              class="link-style full-width primary breadcrumb-link my-breadcrumb-links-class"
+              class="link-style full-width primary tooltip-reference breadcrumb-link my-breadcrumb-links-class"
               data-reference-id="tooltip--reference"
               id="tooltip--reference"
               role="link"
@@ -328,7 +328,7 @@ exports[`Breadcrumb Renders without crashing 1`] = `
           >
             <a
               aria-disabled="false"
-              class="link-style full-width primary breadcrumb-link my-breadcrumb-links-class"
+              class="link-style full-width primary tooltip-reference breadcrumb-link my-breadcrumb-links-class"
               data-reference-id="tooltip--reference"
               id="tooltip--reference"
               role="link"
@@ -367,7 +367,7 @@ exports[`Breadcrumb Renders without crashing 1`] = `
           >
             <a
               aria-disabled="false"
-              class="link-style full-width primary breadcrumb-link my-breadcrumb-links-class"
+              class="link-style full-width primary tooltip-reference breadcrumb-link my-breadcrumb-links-class"
               data-reference-id="tooltip--reference"
               id="tooltip--reference"
               role="link"
@@ -406,7 +406,7 @@ exports[`Breadcrumb Renders without crashing 1`] = `
           >
             <a
               aria-disabled="false"
-              class="link-style full-width primary breadcrumb-link my-breadcrumb-links-class"
+              class="link-style full-width primary tooltip-reference breadcrumb-link my-breadcrumb-links-class"
               data-reference-id="tooltip--reference"
               id="tooltip--reference"
               role="link"
@@ -445,7 +445,7 @@ exports[`Breadcrumb Renders without crashing 1`] = `
           >
             <a
               aria-disabled="false"
-              class="link-style full-width primary breadcrumb-link my-breadcrumb-links-class"
+              class="link-style full-width primary tooltip-reference breadcrumb-link my-breadcrumb-links-class"
               data-reference-id="tooltip--reference"
               id="tooltip--reference"
               role="link"
@@ -499,7 +499,7 @@ exports[`Breadcrumb should support custom attribute 1`] = `
         >
           <a
             aria-disabled="false"
-            class="link-style full-width primary breadcrumb-link my-breadcrumb-links-class"
+            class="link-style full-width primary tooltip-reference breadcrumb-link my-breadcrumb-links-class"
             data-custom="custom-item"
             data-reference-id="tooltip--reference"
             id="tooltip--reference"
@@ -538,7 +538,7 @@ exports[`Breadcrumb should support custom attribute 1`] = `
         >
           <a
             aria-disabled="false"
-            class="link-style full-width primary breadcrumb-link my-breadcrumb-links-class"
+            class="link-style full-width primary tooltip-reference breadcrumb-link my-breadcrumb-links-class"
             data-reference-id="tooltip--reference"
             id="tooltip--reference"
             role="link"

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -341,32 +341,30 @@ export const Tooltip: FC<TooltipProps> = React.memo(
 
           // Need this to handle disabled elements of default Tooltip.
           if (type === TooltipType.Default) {
-            if (node.props?.disabled) {
-              return cloneElement(child, {
-                className: `${mergeClasses([
-                  'tooltip-reference',
-                  styles.disabled,
-                  node.props?.className,
-                ])}`,
-                id: node.props?.id
-                  ? node.props?.id
-                  : tooltipReferenceId?.current,
-                key: node.props?.key ? node.props?.key : tooltipId?.current,
-                'data-reference-id': tooltipReferenceId?.current,
-              });
-            } else {
-              return cloneElement(child, {
-                className: `${mergeClasses([
-                  'tooltip-reference',
-                  node.props?.className,
-                ])}`,
-                id: node.props?.id
-                  ? node.props?.id
-                  : tooltipReferenceId?.current,
-                key: node.props?.key ? node.props?.key : tooltipId?.current,
-                'data-reference-id': tooltipReferenceId?.current,
-              });
+            const defaultReferenceClassNames: string = mergeClasses([
+              'tooltip-reference',
+              { [node.props.className]: !!node.props.className },
+              { [node.props.classNames]: !!node.props.classNames },
+            ]);
+
+            const clonedElementProps: RenderProps = {
+              id: node.props?.id ? node.props?.id : tooltipReferenceId?.current,
+              key: node.props?.key ? node.props?.key : tooltipId?.current,
+              'data-reference-id': tooltipReferenceId?.current,
+            };
+
+            const defaultMergedClasses: string = node.props?.disabled
+              ? mergeClasses([defaultReferenceClassNames, styles.disabled])
+              : defaultReferenceClassNames;
+
+            // Compares for octuple react prop vs native react html classes.
+            if (node.props?.className) {
+              clonedElementProps['className'] = defaultMergedClasses;
+            } else if (child.props.classNames) {
+              clonedElementProps['classNames'] = defaultMergedClasses;
             }
+
+            return cloneElement(child, clonedElementProps);
           }
         }
         return node;