fix(faceted-search): fix tooltip display and use DS component (#5137)

Talend · Jan 25, 2024 · 7a0b233 · 7a0b233
1 parent 93436a8
commit 7a0b233
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 55 deletions.
diff --git a/.changeset/nasty-pears-divide.md b/.changeset/nasty-pears-divide.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': patch
+---
+
+Fix tooltip for faceted search badge to not throw an error
diff --git a/...ted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDate.component.test.js.snap b/...ted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDate.component.test.js.snap
@@ -50,8 +50,7 @@ exports[`BadgeDate should render a default badge 1`] = `
     >
       <button
         aria-busy="false"
-        aria-expanded="false"
-        aria-haspopup="dialog"
+        aria-describedby="id-42"
         aria-label="2011-10-01"
         class="theme-clickable theme-button theme-tertiary theme-size-S"
         id="myId-badge-date-action-overlay"
@@ -60,9 +59,7 @@ exports[`BadgeDate should render a default badge 1`] = `
         <span
           class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
         >
-          <span
-            aria-describedby="42"
-          >
+          <span>
             2011-10-01
           </span>
         </span>

diff --git a/...arch/src/components/Badges/BadgeFaceted/__snapshots__/BadgeFaceted.component.test.js.snap b/...arch/src/components/Badges/BadgeFaceted/__snapshots__/BadgeFaceted.component.test.js.snap
@@ -50,8 +50,7 @@ exports[`BadgeFaceted should render the html output by default 1`] = `
     >
       <button
         aria-busy="false"
-        aria-expanded="false"
-        aria-haspopup="dialog"
+        aria-describedby="id-42"
         aria-label="All"
         class="theme-clickable theme-button theme-tertiary theme-size-S"
         id="my-id-action-overlay"
@@ -60,9 +59,7 @@ exports[`BadgeFaceted should render the html output by default 1`] = `
         <span
           class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
         >
-          <span
-            aria-describedby="42"
-          >
+          <span>
             All
           </span>
         </span>

diff --git a/...search/src/components/Badges/BadgeNumber/__snapshots__/BadgeNumber.component.test.js.snap b/...search/src/components/Badges/BadgeNumber/__snapshots__/BadgeNumber.component.test.js.snap
@@ -50,8 +50,7 @@ exports[`BadgeNumber should mount a default badge 1`] = `
     >
       <button
         aria-busy="false"
-        aria-expanded="false"
-        aria-haspopup="dialog"
+        aria-describedby="id-42"
         aria-label="All"
         class="theme-clickable theme-button theme-tertiary theme-size-S"
         id="myId-badge-number-action-overlay"
@@ -60,9 +59,7 @@ exports[`BadgeNumber should mount a default badge 1`] = `
         <span
           class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
         >
-          <span
-            aria-describedby="42"
-          >
+          <span>
             All
           </span>
         </span>

diff --git a/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.js b/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.js
@@ -2,8 +2,8 @@ import { useState } from 'react';
 
 import PropTypes from 'prop-types';
 
-import { ButtonTertiary, Popover } from '@talend/design-system';
-import { FormatValue, Icon, TooltipTrigger } from '@talend/react-components';
+import { ButtonTertiary, Popover, Tooltip } from '@talend/design-system';
+import { FormatValue, Icon } from '@talend/react-components';
 
 import styles from './BadgeOverlay.module.scss';
 
@@ -26,11 +26,7 @@ const getLabel = (labels, showSpecialChars) => {
 		? labels.map(label => labelFormatter(label, showSpecialChars))
 		: labelFormatter(labels, showSpecialChars);
 
-	return (
-		<TooltipTrigger label={labels} tooltipPlacement="top">
-			{formatedLabels}
-		</TooltipTrigger>
-	);
+	return formatedLabels;
 };
 
 /**
@@ -72,8 +68,13 @@ const BadgeOverlay = ({
 		}
 	};
 	const currentOpened = opened || overlayOpened;
+	const buttonLabel = iconName ? (
+		<Icon name={`talend-${iconName}`} key="icon" />
+	) : (
+		getLabel(label, showSpecialChars)
+	);
 
-	const button = (
+	let button = (
 		<ButtonTertiary
 			id={`${id}-action-overlay`}
 			aria-label={label}
@@ -82,14 +83,14 @@ const BadgeOverlay = ({
 			data-feature={dataFeature}
 			size="S"
 		>
-			{iconName ? (
-				<Icon name={`talend-${iconName}`} key="icon" />
-			) : (
-				getLabel(label, showSpecialChars)
-			)}
+			{buttonLabel}
 		</ButtonTertiary>
 	);
 
+	if (!iconName) {
+		button = <Tooltip title={buttonLabel}>{button}</Tooltip>;
+	}
+
 	return (
 		<div className={className}>
 			<Popover

diff --git a/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.test.js b/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.test.js
@@ -29,7 +29,7 @@ describe('BadgeOverlay', () => {
 		render(<BadgeOverlay {...props}>{childrenAsFunc}</BadgeOverlay>);
 		// eslint-disable-next-line jest-dom/prefer-in-document
 		expect(screen.queryByTestId('my-children')).toBeNull();
-		fireEvent.click(screen.getByText('my label'));
+		fireEvent.click(screen.getByRole('button', { name: 'my label' }));
 		await screen.findByRole('dialog');
 		// Then
 		expect(screen.getByTestId('my-children')).toHaveTextContent('hello world');
@@ -47,7 +47,7 @@ describe('BadgeOverlay', () => {
 		// When
 		render(<BadgeOverlay {...props}>{childrenAsFunc}</BadgeOverlay>);
 
-		fireEvent.click(screen.getByText(props.label));
+		fireEvent.click(screen.getByRole('button', { name: props.label }));
 		// Then
 		expect(onChange.mock.calls.length).toBe(1);
 		expect(onChange.mock.calls[0][1]).toBe(true);

diff --git a/...arch/src/components/Badges/BadgeOverlay/__snapshots__/BadgeOverlay.component.test.js.snap b/...arch/src/components/Badges/BadgeOverlay/__snapshots__/BadgeOverlay.component.test.js.snap
@@ -4,8 +4,7 @@ exports[`BadgeOverlay should render the html output in the default state 1`] = `
 <div>
   <button
     aria-busy="false"
-    aria-expanded="false"
-    aria-haspopup="dialog"
+    aria-describedby="id-42"
     aria-label="my label"
     class="theme-clickable theme-button theme-tertiary theme-size-S"
     id="my-id-action-overlay"
@@ -14,9 +13,7 @@ exports[`BadgeOverlay should render the html output in the default state 1`] = `
     <span
       class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
     >
-      <span
-        aria-describedby="42"
-      >
+      <span>
         my label
       </span>
     </span>

diff --git a/...search/src/components/Badges/BadgeSlider/__snapshots__/BadgeSlider.component.test.js.snap b/...search/src/components/Badges/BadgeSlider/__snapshots__/BadgeSlider.component.test.js.snap
@@ -50,8 +50,7 @@ exports[`BadgeSlider should mount a default badge 1`] = `
     >
       <button
         aria-busy="false"
-        aria-expanded="false"
-        aria-haspopup="dialog"
+        aria-describedby="id-42"
         aria-label="0"
         class="theme-clickable theme-button theme-tertiary theme-size-S"
         id="myId-badge-slider-action-overlay"
@@ -60,9 +59,7 @@ exports[`BadgeSlider should mount a default badge 1`] = `
         <span
           class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
         >
-          <span
-            aria-describedby="42"
-          >
+          <span>
             0
           </span>
         </span>

diff --git a/...ted-search/src/components/Badges/BadgeText/__snapshots__/BadgeText.component.test.js.snap b/...ted-search/src/components/Badges/BadgeText/__snapshots__/BadgeText.component.test.js.snap
@@ -50,8 +50,7 @@ exports[`BadgeText should mount a default badge 1`] = `
     >
       <button
         aria-busy="false"
-        aria-expanded="false"
-        aria-haspopup="dialog"
+        aria-describedby="id-42"
         aria-label="All"
         class="theme-clickable theme-button theme-tertiary theme-size-S"
         id="myId-badge-text-action-overlay"
@@ -60,9 +59,7 @@ exports[`BadgeText should mount a default badge 1`] = `
         <span
           class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
         >
-          <span
-            aria-describedby="42"
-          >
+          <span>
             All
           </span>
         </span>

diff --git a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.test.js b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.test.js
@@ -1,9 +1,10 @@
-import set from 'lodash/set';
-import cloneDeep from 'lodash/cloneDeep';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { BasicSearch } from './BasicSearch.component';
-import { FacetedManager } from '../FacetedManager';
+import cloneDeep from 'lodash/cloneDeep';
+import set from 'lodash/set';
+
 import { USAGE_TRACKING_TAGS } from '../../constants';
+import { FacetedManager } from '../FacetedManager';
+import { BasicSearch } from './BasicSearch.component';
 
 jest.unmock('@talend/design-system');
 
@@ -104,7 +105,7 @@ describe('BasicSearch', () => {
 		);
 		// Then
 		expect(screen.getByLabelText('Name')).toBeInTheDocument();
-		expect(screen.getByText('hello')).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: 'hello' })).toBeInTheDocument();
 	});
 
 	it('should filter facets available in quick search', () => {

diff --git a/...aceted-search/src/components/BasicSearch/__snapshots__/BasicSearch.component.test.js.snap b/...aceted-search/src/components/BasicSearch/__snapshots__/BasicSearch.component.test.js.snap
@@ -109,8 +109,7 @@ exports[`BasicSearch should render the default html output with no badges 1`] =
         >
           <button
             aria-busy="false"
-            aria-expanded="false"
-            aria-haspopup="dialog"
+            aria-describedby="id-42"
             aria-label="hello"
             class="theme-clickable theme-button theme-tertiary theme-size-S"
             id="name-7bc9bd07-3b46-4b8c-a406-a08b6263de5b-badge-text-action-overlay"
@@ -119,9 +118,7 @@ exports[`BasicSearch should render the default html output with no badges 1`] =
             <span
               class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
             >
-              <span
-                aria-describedby="42"
-              >
+              <span>
                 hello
               </span>
             </span>