fix(datagrid): tooltip missing in Customize Columns modal (#6036)

* fix(datagrid): tooltip missing in Customize columns modal * fix(datagrid): update tooltip align value * fix(datagrid): description not active element added title instead * fix(datagrid): remove html tags from description for title * fix(datagrid): move striptags function inside the component
carbon-design-system · Sep 25, 2024 · 15ec2a5 · 15ec2a5
1 parent 6dd626a
commit 15ec2a5
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
@@ -15,6 +15,7 @@ import React, {
   ForwardedRef,
   MutableRefObject,
   RefObject,
+  useCallback,
 } from 'react';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
 
@@ -201,6 +202,7 @@ type stackTypes = {
   }>;
   sizes: Array<string>;
 };
+
 const stack: stackTypes = { open: [], all: [], sizes: [] };
 
 // these props are only applicable when size='wide'
@@ -270,6 +272,13 @@ export const TearsheetShell = React.forwardRef(
     );
     const modalRefValue = modalRef.current;
 
+    // Function to strip html tags out of a string.
+    const stripTags = useCallback(
+      (input) => input.replace(/<\/?[^>]+(>|$)/g, ''),
+      []
+    );
+
+    const titleText = stripTags(String(description));
     const wide = size === 'wide';
 
     // Keep track of the stack depth and our position in it (1-based, 0=closed)
@@ -292,7 +301,6 @@ export const TearsheetShell = React.forwardRef(
       setDepth(newDepth);
       setPosition(newPosition);
     }
-
     handleStackChange.checkFocus = function () {
       // if we are now the topmost tearsheet, ensure we have focus
       if (
@@ -519,7 +527,10 @@ export const TearsheetShell = React.forwardRef(
                     >
                       {title}
                     </Wrap>
-                    <Wrap className={`${bc}__header-description`}>
+                    <Wrap
+                      className={`${bc}__header-description`}
+                      title={titleText}
+                    >
                       {description}
                     </Wrap>
                   </Wrap>

diff --git a/packages/ibm-products/src/global/js/utils/Wrap.tsx b/packages/ibm-products/src/global/js/utils/Wrap.tsx
@@ -59,6 +59,11 @@ interface WrapProps extends PropsWithChildren {
    * Tab index for the wrapper div
    */
   tabIndex?: number;
+
+  /**
+   * The title attribute the content.
+   */
+  title?: string;
 }
 
 /**
@@ -81,14 +86,15 @@ export const Wrap = React.forwardRef(
       element: Wrapper = 'div',
       neverRender,
       className,
+      title,
 
       // Collect any other property values passed in.
       ...rest
     }: WrapProps,
     ref: ForwardedRef<HTMLElement>
   ) =>
     (neverRender || isEmpty(children)) && !alwaysRender ? null : (
-      <Wrapper className={className} {...rest} ref={ref}>
+      <Wrapper className={className} {...rest} ref={ref} title={title}>
         {children}
       </Wrapper>
     )
@@ -127,4 +133,8 @@ Wrap.propTypes = {
    * content will be rendered.
    */
   neverRender: PropTypes.bool,
+  /**
+   * The title attribute the content.
+   */
+  title: PropTypes.string,
 };