chore: fixed sidepanle title re rendering issue

carbon-design-system · Nov 26, 2024 · 7498add · 7498add
1 parent 35bf4f5
commit 7498add
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 21 deletions.
diff --git a/packages/react/src/components/SidePanel/SidePanel.jsx b/packages/react/src/components/SidePanel/SidePanel.jsx
@@ -1,10 +1,10 @@
 import React, { useRef, useMemo, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Tooltip } from '@carbon/react';
 import { debounce } from 'lodash-es';
 import { Close, ChevronLeft as OpenLeft, ChevronRight as OpenRight } from '@carbon/react/icons';
 
+import { ToggleTip } from '../ToggleTip';
 import { settings } from '../../constants/Settings';
 import useHasTextOverflow from '../../hooks/useHasTextOverflow';
 import Button from '../Button';
@@ -183,6 +183,13 @@ const SidePanel = ({
     delayedScrollCheck();
   }, [delayedScrollCheck, isScrolling]);
 
+  const truncateString = (str, length) => {
+    if (str.length <= length) {
+      return str;
+    }
+    return `${str.substring(0, length)}...`;
+  };
+
   return (
     <div
       key={`sidePanel--${subtitle}`}
@@ -212,15 +219,21 @@ const SidePanel = ({
       ) : null}
       <header className={`${baseClass}__header`} aria-hidden={!isOpen}>
         {title && truncatesTitle ? (
-          <Tooltip
+          <ToggleTip
             data-testid={`${testId}-title`}
             ref={titleRef}
+            showIcon={false}
             className={`${baseClass}__title`}
             tabIndex={isOpen ? 0 : -1}
-            label={title}
-          >
-            <>{title}</>
-          </Tooltip>
+            content={<>{title}</>}
+            triggerText={
+              isCondensed || isScrolled ? (
+                <>{truncateString(title, 25)}</>
+              ) : (
+                <>{truncateString(title, 50)}</>
+              )
+            }
+          />
         ) : title ? (
           <h2 data-testid={`${testId}-title`} ref={titleRef} className={`${baseClass}__title`}>
             {title}

diff --git a/packages/react/src/components/SidePanel/_side-panel.scss b/packages/react/src/components/SidePanel/_side-panel.scss
@@ -62,6 +62,24 @@ $border-width: 1px;
   }
 }
 
+.#{$iot-prefix}--sidepanel__title .#{$prefix}--toggletip-label {
+  color: $text-primary;
+  @include type-style('heading-03');
+
+  &.#{$iot-prefix}--side-panel-title__condensed {
+    @include type-style('heading-compact-02');
+  }
+
+  &.#{$iot-prefix}--side-panel-title__with-close {
+    padding-right: $spacing-03;
+    margin-right: $spacing-09;
+  }
+}
+
+.#{$prefix}--toggletip.#{$iot-prefix}--sidepanel__title {
+  overflow: inherit;
+}
+
 .#{$iot-prefix}--side-panel-footer {
   min-width: 15.4rem;
   display: flex;

diff --git a/packages/react/src/hooks/useHasTextOverflow.jsx b/packages/react/src/hooks/useHasTextOverflow.jsx
@@ -4,21 +4,25 @@ const useHasTextOverflow = (elementRef, text = '') => {
   const [isOverflowed, setIsOverflowed] = useState(false);
 
   useEffect(() => {
-    const overFlowing = !!(
-      elementRef.current &&
-      (elementRef?.current?.scrollHeight > elementRef?.current?.clientHeight ||
-        elementRef?.current?.scrollWidth > elementRef?.current?.clientWidth)
-    );
-    setIsOverflowed(overFlowing);
-    /* disabling to not put the ref in dep array */
-    /* eslint-disable react-hooks/exhaustive-deps */
-  }, [
-    elementRef?.current?.clientHeight,
-    elementRef?.current?.clientWidth,
-    elementRef?.current?.scrollHeight,
-    elementRef?.current?.scrollWidth,
-    text,
-  ]);
+    const checkOverflow = () => {
+      if (elementRef.current) {
+        setIsOverflowed(
+          elementRef.current.scrollHeight > elementRef.current.clientHeight ||
+            elementRef.current.scrollWidth > elementRef.current.clientWidth
+        );
+      }
+    };
+
+    checkOverflow();
+
+    // Optionally add a resize listener
+    const handleResize = () => checkOverflow();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [elementRef, text]);
 
   return isOverflowed;
 };