fix: remove tooltip from tagoverflow (carbon-design-system#6463)

* fix: remove tooltip from tagoverflow * chore: add test coverage --------- Co-authored-by: Afsal K <[email protected]>
makafsal · Dec 11, 2024 · c6f0ac0 · c6f0ac0
1 parent 5b5e681
commit c6f0ac0
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 20 deletions.
diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx b/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx
@@ -16,7 +16,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Tag, Tooltip, DismissibleTag } from '@carbon/react';
+import { Tag, DismissibleTag } from '@carbon/react';
 
 import PropTypes from 'prop-types';
 import { TYPES } from './constants';
@@ -279,25 +279,23 @@ export let TagOverflow = forwardRef(
               // If there is no template prop, then render items as Tags
               return (
                 <div ref={(node) => itemRefHandler(id, node)} key={id}>
-                  <Tooltip align={overflowAlign} label={label}>
-                    {typeof onClose === 'function' || filter ? (
-                      <DismissibleTag
-                        {...other}
-                        className={`${blockClass}__item--tag`}
-                        type={tagType}
-                        onClose={() => handleTagOnClose(onClose, index)}
-                        text={label}
-                      />
-                    ) : (
-                      <Tag
-                        {...other}
-                        className={`${blockClass}__item--tag`}
-                        type={tagType}
-                      >
-                        {label}
-                      </Tag>
-                    )}
-                  </Tooltip>
+                  {typeof onClose === 'function' || filter ? (
+                    <DismissibleTag
+                      {...other}
+                      className={`${blockClass}__item--tag`}
+                      type={tagType}
+                      onClose={() => handleTagOnClose(onClose, index)}
+                      text={label}
+                    />
+                  ) : (
+                    <Tag
+                      {...other}
+                      className={`${blockClass}__item--tag`}
+                      type={tagType}
+                    >
+                      {label}
+                    </Tag>
+                  )}
                 </div>
               );
             }

diff --git a/packages/ibm-products/src/components/TagSet/TagSet.test.js b/packages/ibm-products/src/components/TagSet/TagSet.test.js
@@ -78,6 +78,24 @@ describe(TagSet.displayName, () => {
     warn.mockRestore();
   });
 
+  it('Displays a DismissibleTag when passed an onClose or filter', async () => {
+    const handler1 = jest.fn();
+    const handler2 = jest.fn();
+    render(
+      <TagSet
+        tags={[
+          { id: '1', label: 'Tag 1', filter: true, onClose: handler1 },
+          { id: '2', label: 'Tag 2', onClose: handler2 },
+        ]}
+      />
+    );
+    const visible = screen.getAllByLabelText('Dismiss');
+    await act(() => userEvent.click(visible[2]));
+    expect(handler1).toHaveBeenCalled();
+    await act(() => userEvent.click(visible[3]));
+    expect(handler2).toHaveBeenCalled();
+  });
+
   it('Has the same tag types as Carbon Tag', async () => {
     // Same number of tags
     expect(TagSet.types.length).toEqual(Object.keys(tagTypes).length);