From a7b06bc36a8b03813315b5d9107e4294ba984d0d Mon Sep 17 00:00:00 2001 From: Gbacc Date: Thu, 7 Dec 2023 09:10:07 +0100 Subject: [PATCH] chore(TDOPS-5724): remove react-bootstrap from faceted-search (#5042) * chore(TDOPS-5724): remove react-bootstrap from faceted-search * add changeset * some fixes around popover preventDefault * better styling and accessibility with button * fix snapshots --------- Co-authored-by: Sebastien LE MOUILLOUR <32456736+smouillour@users.noreply.github.com> --- .changeset/clean-files-shake.md | 5 ++ .changeset/fifty-teachers-add.md | 5 ++ .../src/components/Popover/Popover.cy.tsx | 60 +++++++++++-- .../src/components/Popover/Popover.tsx | 16 ++-- .../src/components/Popover/usePopover.tsx | 15 ++-- packages/faceted-search/package.json | 1 - .../AdvancedSearch.component.js | 7 +- .../AdvancedSearch.component.test.js | 12 +-- .../AdvancedSearch.component.test.js.snap | 5 +- .../BadgeCheckboxes.component.test.js | 22 +++-- .../BadgeDate/BadgeDate.component.test.js | 7 +- .../BadgeDate.component.test.js.snap | 42 ++++++---- .../BadgeFaceted/BadgeFaceted.component.js | 20 ++--- .../BadgeFaceted/BadgeFaceted.module.scss | 14 +--- .../BadgeFaceted.component.test.js.snap | 42 ++++++---- .../BadgeMenu/BadgeMenu.component.test.js | 10 ++- .../BadgeNumber.component.test.js.snap | 42 ++++++---- .../BadgeOperator/BadgeOperator.module.scss | 13 +-- .../BadgeOperatorOverlay.component.js | 7 +- .../BadgeOperatorPopover.component.js | 15 +--- ...adgeOperatorPopover.component.test.js.snap | 84 ++++++++----------- .../BadgeOverlay/BadgeOverlay.component.js | 55 ++++++------ .../BadgeOverlay.component.test.js | 10 +-- .../BadgeOverlay.component.test.js.snap | 16 +++- .../BadgeSlider.component.test.js.snap | 42 ++++++---- .../BadgeText.component.test.js.snap | 42 ++++++---- .../BasicSearch.component.test.js.snap | 42 ++++++---- 27 files changed, 387 insertions(+), 264 deletions(-) create mode 100644 .changeset/clean-files-shake.md create mode 100644 .changeset/fifty-teachers-add.md diff --git a/.changeset/clean-files-shake.md b/.changeset/clean-files-shake.md new file mode 100644 index 00000000000..87a682eac44 --- /dev/null +++ b/.changeset/clean-files-shake.md @@ -0,0 +1,5 @@ +--- +'@talend/design-system': patch +--- + +Fix DS Popover controlled state to allow disclosure props binding diff --git a/.changeset/fifty-teachers-add.md b/.changeset/fifty-teachers-add.md new file mode 100644 index 00000000000..2f337679942 --- /dev/null +++ b/.changeset/fifty-teachers-add.md @@ -0,0 +1,5 @@ +--- +'@talend/react-faceted-search': major +--- + +Remove @talend/react-bootstrap from Faceted Search package to use DS Popover with controlled state diff --git a/packages/design-system/src/components/Popover/Popover.cy.tsx b/packages/design-system/src/components/Popover/Popover.cy.tsx index 1fecf65c9b8..f6bce89fd01 100644 --- a/packages/design-system/src/components/Popover/Popover.cy.tsx +++ b/packages/design-system/src/components/Popover/Popover.cy.tsx @@ -1,7 +1,9 @@ /* eslint-disable testing-library/prefer-screen-queries */ /* eslint-disable testing-library/await-async-queries */ -import { Popover, ButtonPrimary, CollapsiblePanel } from '../../'; +import { useState } from 'react'; + +import { ButtonPrimary, CollapsiblePanel, Popover } from '../../'; context('', () => { describe('default', () => { @@ -11,7 +13,7 @@ context('', () => { data-testid="my.popover" disclosure={Open popover} > - Popover content +

Popover content

, ); @@ -21,19 +23,16 @@ context('', () => { cy.findByTestId('my.popover').should('be.visible'); }); - it('should prevent default', () => { + it('should prevent default without controlled state', () => { cy.mount( {}} data-testid="my.button"> - Open popover - - } + disclosure={Open popover} >

Popover content

, @@ -47,6 +46,51 @@ context('', () => { cy.findByTestId('panel.section').should('not.exist'); cy.findByTestId('my.button').click(); cy.findByTestId('panel.section').should('not.exist'); + cy.findByTestId('my.popover').should('be.visible'); + }); + + it('should prevent default with controlled state', () => { + const PopoverWithControlledState = () => { + const [open, setOpen] = useState(false); + return ( + { + event.preventDefault(); + event.stopPropagation(); + setOpen(!open); + }} + data-testid="my.button" + > + Open popover + + } + > +

Popover content

+ , + ]} + > + Some text + + ); + }; + + cy.mount(); + + // Disclosure onClick should stop propagation and not open the CollapsiblePanel container + cy.findByTestId('panel.section').should('not.exist'); + cy.findByTestId('my.button').click(); + cy.findByTestId('panel.section').should('not.exist'); + cy.findByTestId('my.popover').should('be.visible'); }); }); }); diff --git a/packages/design-system/src/components/Popover/Popover.tsx b/packages/design-system/src/components/Popover/Popover.tsx index 54c7fb9595c..e4dd215288f 100644 --- a/packages/design-system/src/components/Popover/Popover.tsx +++ b/packages/design-system/src/components/Popover/Popover.tsx @@ -1,12 +1,12 @@ -import { useRef, Fragment } from 'react'; -import type { ReactNode, MouseEvent } from 'react'; +import React, { Fragment, useRef } from 'react'; +import type { MouseEvent, ReactNode } from 'react'; -import { Placement, FloatingArrow, FloatingPortal } from '@floating-ui/react'; +import { FloatingArrow, FloatingPortal, Placement } from '@floating-ui/react'; import classNames from 'classnames'; import tokens from '@talend/design-tokens'; -import { renderOrClone, ChildOrGenerator } from '../../renderOrClone'; +import { renderOrClone } from '../../renderOrClone'; import { usePopover } from './usePopover'; import theme from './Popover.module.scss'; @@ -22,7 +22,7 @@ type PopoverOptions = { }; export type PopoverProps = { - disclosure: ChildOrGenerator; + disclosure: ReactNode; children: ReactNode | ((props: any) => ReactNode); } & PopoverOptions; @@ -48,7 +48,11 @@ export function Popover({ e.preventDefault(); e.stopPropagation(); }; - const childrenProps = popover.getReferenceProps({ onClick }); + + let childrenProps = popover.getReferenceProps({ onClick }); + if (disclosure && React.isValidElement(disclosure)) { + childrenProps = popover.getReferenceProps({ onClick, ...disclosure.props }); + } return ( <> diff --git a/packages/design-system/src/components/Popover/usePopover.tsx b/packages/design-system/src/components/Popover/usePopover.tsx index db596ea3cbf..068b2c51669 100644 --- a/packages/design-system/src/components/Popover/usePopover.tsx +++ b/packages/design-system/src/components/Popover/usePopover.tsx @@ -1,17 +1,18 @@ -import { useState, useMemo } from 'react'; +import { useMemo, useState } from 'react'; import type { MutableRefObject } from 'react'; + import { - useFloating, arrow, autoUpdate, - offset, flip, + offset, + Placement, shift, useClick, useDismiss, - useRole, + useFloating, useInteractions, - Placement, + useRole, } from '@floating-ui/react'; const ARROW_HEIGHT = 7; @@ -88,9 +89,7 @@ export function usePopover({ const context = data.context; - const click = useClick(context, { - enabled: controlledOpen == null, - }); + const click = useClick(context); const dismiss = useDismiss(context); const role = useRole(context); diff --git a/packages/faceted-search/package.json b/packages/faceted-search/package.json index db9cc735ac6..7486bdbcd90 100644 --- a/packages/faceted-search/package.json +++ b/packages/faceted-search/package.json @@ -36,7 +36,6 @@ "@talend/bootstrap-theme": "^8.3.1", "@talend/daikon-tql-client": "^1.3.1", "@talend/utils": "^2.8.0", - "@talend/react-bootstrap": "^2.2.1", "@talend/design-tokens": "^2.10.1", "classnames": "^2.3.2", "date-fns": "^1.30.1", diff --git a/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.js b/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.js index c1dac551b08..3b2837894cb 100644 --- a/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.js +++ b/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.js @@ -4,7 +4,6 @@ import { useState } from 'react'; import PropTypes from 'prop-types'; import { ButtonIcon, Icon } from '@talend/design-system'; -import { FormControl } from '@talend/react-bootstrap'; import { getTheme } from '@talend/react-components/lib/theme'; import { USAGE_TRACKING_TAGS } from '../../constants'; @@ -71,9 +70,9 @@ export function AdvancedSearch({ const advSearchId = `${id}-adv-search`; return (
-
+ - diff --git a/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.test.js b/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.test.js index c8388a3e120..1b397ba5ba2 100644 --- a/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.test.js +++ b/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.test.js @@ -28,7 +28,7 @@ describe('AdvancedSearch', () => { , ); // then - expect(screen.getByRole('search')).toHaveValue(initialQuery); + expect(screen.getByRole('searchbox')).toHaveValue(initialQuery); }); it('should update the query when input change', () => { // given @@ -39,9 +39,9 @@ describe('AdvancedSearch', () => { , ); - fireEvent.change(screen.getByRole('search'), { target: { value: query } }); + fireEvent.change(screen.getByRole('searchbox'), { target: { value: query } }); // then - expect(screen.getByRole('search')).toHaveValue(query); + expect(screen.getByRole('searchbox')).toHaveValue(query); }); it('should call the onChange props when input change', () => { // given @@ -53,7 +53,7 @@ describe('AdvancedSearch', () => { , ); - fireEvent.change(screen.getByRole('search'), { target: { value: query } }); + fireEvent.change(screen.getByRole('searchbox'), { target: { value: query } }); // then expect(onChange).toHaveBeenCalled(); expect(onChange.mock.calls.length).toBe(1); @@ -67,7 +67,7 @@ describe('AdvancedSearch', () => { , ); - fireEvent.keyDown(screen.getByRole('search'), { key: 'Enter' }); + fireEvent.keyDown(screen.getByRole('searchbox'), { key: 'Enter' }); // then expect(onSubmit).toHaveBeenCalled(); expect(onSubmit.mock.calls.length).toBe(1); @@ -81,7 +81,7 @@ describe('AdvancedSearch', () => { , ); - fireEvent.keyDown(screen.getByRole('search'), { key: 'Enter' }); + fireEvent.keyDown(screen.getByRole('searchbox'), { key: 'Enter' }); // then expect(onKeyDown).toHaveBeenCalled(); expect(onKeyDown.mock.calls.length).toBe(1); diff --git a/packages/faceted-search/src/components/AdvancedSearch/__snapshots__/AdvancedSearch.component.test.js.snap b/packages/faceted-search/src/components/AdvancedSearch/__snapshots__/AdvancedSearch.component.test.js.snap index e7d56f470c8..b4fb2ae5949 100644 --- a/packages/faceted-search/src/components/AdvancedSearch/__snapshots__/AdvancedSearch.component.test.js.snap +++ b/packages/faceted-search/src/components/AdvancedSearch/__snapshots__/AdvancedSearch.component.test.js.snap @@ -7,6 +7,7 @@ exports[`AdvancedSearch should render by default 1`] = ` > diff --git a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.test.js b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.test.js index 7aba43f09b4..e85affbd430 100644 --- a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.test.js +++ b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.test.js @@ -1,8 +1,8 @@ -import { render } from '@testing-library/react'; -import { BadgeFacetedProvider } from '../../context/badgeFaceted.context'; +import { render, within } from '@testing-library/react'; -import { BadgeCheckboxes } from './BadgeCheckboxes.component'; import getDefaultT from '../../../translate'; +import { BadgeFacetedProvider } from '../../context/badgeFaceted.context'; +import { BadgeCheckboxes } from './BadgeCheckboxes.component'; const t = getDefaultT(); @@ -37,7 +37,8 @@ describe('BadgeCheckboxes', () => { render(); // Then - expect(document.querySelectorAll('span')[2]).toHaveTextContent('All'); + const badge = document.querySelector('#tc-badge-select-myId-badge-checkboxes'); + expect(within(badge).getByText('All')).toBeVisible(); }); it('should return "All" when value is empty', () => { // Given @@ -52,7 +53,8 @@ describe('BadgeCheckboxes', () => { // When render(); // Then - expect(document.querySelectorAll('span')[2]).toHaveTextContent('All'); + const badge = document.querySelector('#tc-badge-select-myId-badge-checkboxes'); + expect(within(badge).getByText('All')).toBeVisible(); }); it('should return the amount of values when values are equal or greater than 4', () => { // Given @@ -73,7 +75,8 @@ describe('BadgeCheckboxes', () => { // When render(); // Then - expect(document.querySelectorAll('span')[2]).toHaveTextContent('5 value'); + const badge = document.querySelector('#tc-badge-select-myId-badge-checkboxes'); + expect(within(badge).getByText('5 values')).toBeVisible(); }); it('should return only the checked values', () => { // Given @@ -94,8 +97,9 @@ describe('BadgeCheckboxes', () => { // When render(); // Then - expect(document.querySelectorAll('span')[2]).toHaveTextContent('one'); - expect(document.querySelectorAll('span')[3]).toHaveTextContent('two'); - expect(document.querySelectorAll('span')[4]).toHaveTextContent('five'); + const badge = document.querySelector('#tc-badge-select-myId-badge-checkboxes'); + expect(within(badge).getByText('one')).toBeVisible(); + expect(within(badge).getByText('two')).toBeVisible(); + expect(within(badge).getByText('five')).toBeVisible(); }); }); diff --git a/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDate.component.test.js b/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDate.component.test.js index 2501c074975..6fd1e39fa30 100644 --- a/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDate.component.test.js +++ b/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDate.component.test.js @@ -1,7 +1,8 @@ import { render } from '@testing-library/react'; -import { BadgeDate } from './BadgeDate.component'; -import { BadgeFacetedProvider } from '../../context/badgeFaceted.context'; + import getDefaultT from '../../../translate'; +import { BadgeFacetedProvider } from '../../context/badgeFaceted.context'; +import { BadgeDate } from './BadgeDate.component'; const badgeFacetedContextValue = { onDeleteBadge: jest.fn(), @@ -26,7 +27,7 @@ describe('BadgeDate', () => { ); // Then expect(container.firstChild).toMatchSnapshot(); - expect(document.querySelector('button#myId-badge-date-action-overlay')).toHaveTextContent( + expect(document.querySelector('#myId-badge-date-action-overlay')).toHaveTextContent( '2011-10-01', ); }); diff --git a/packages/faceted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDate.component.test.js.snap b/packages/faceted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDate.component.test.js.snap index 3f44652a971..54a97361b55 100644 --- a/packages/faceted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDate.component.test.js.snap +++ b/packages/faceted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDate.component.test.js.snap @@ -22,20 +22,26 @@ exports[`BadgeDate should render a default badge 1`] = ` class="tc-badge-operator-button theme-tc-badge-operator-button" >
@@ -43,14 +49,22 @@ exports[`BadgeDate should render a default badge 1`] = ` class="tc-badge-faceted-overlay theme-tc-badge-faceted-overlay" > diff --git a/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.component.js b/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.component.js index 921ed28000d..05dcb8c28f7 100644 --- a/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.component.js @@ -1,21 +1,21 @@ import { useEffect, useState } from 'react'; + +import { isEqual } from 'lodash'; import PropTypes from 'prop-types'; + import Badge from '@talend/react-components/lib/Badge'; import { getTheme } from '@talend/react-components/lib/theme'; -import { isEqual } from 'lodash'; +import { USAGE_TRACKING_TAGS } from '../../../constants'; +import { OVERLAY_FLOW_ACTIONS, useBadgeOverlayFlow } from '../../../hooks/badgeOverlayFlow.hook'; +import { BADGES_ACTIONS } from '../../../hooks/facetedBadges.hook'; +import { useBadgeFacetedContext } from '../../context/badgeFaceted.context'; +import { operatorPropTypes, operatorsPropTypes } from '../../facetedSearch.propTypes'; import { BadgeOperatorOverlay } from '../BadgeOperator'; import { BadgeOverlay } from '../BadgeOverlay'; -import { useBadgeFacetedContext } from '../../context/badgeFaceted.context'; import cssModule from './BadgeFaceted.module.scss'; -import { useBadgeOverlayFlow, OVERLAY_FLOW_ACTIONS } from '../../../hooks/badgeOverlayFlow.hook'; -import { BADGES_ACTIONS } from '../../../hooks/facetedBadges.hook'; - -import { operatorPropTypes, operatorsPropTypes } from '../../facetedSearch.propTypes'; -import { USAGE_TRACKING_TAGS } from '../../../constants'; - const theme = getTheme(cssModule); const findOperatorByName = name => operator => name === operator.name; @@ -97,7 +97,7 @@ const BadgeFaceted = ({ }; const onHideOverlayOperator = () => { - overlayDispatch(OVERLAY_FLOW_ACTIONS.openValue); + overlayDispatch(OVERLAY_FLOW_ACTIONS.closeAll); dispatch(BADGES_ACTIONS.closeInitialOpened(badgeId)); }; @@ -122,7 +122,6 @@ const BadgeFaceted = ({ operators={operators} readOnly={readOnly} size={size} - t={t} /> )} @@ -135,7 +134,6 @@ const BadgeFaceted = ({ opened={overlayState.valueOpened} onChange={onChangeValueOverlay} readOnly={readOnly} - t={t} > {children({ onSubmitBadge, onChangeValue, badgeValue })} diff --git a/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.scss b/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.scss index 6ef388bf4d9..0b115c3645e 100644 --- a/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.scss +++ b/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.scss @@ -32,22 +32,16 @@ & > button { font-style: italic; - padding: 0; - text-transform: none; + height: tokens.$coral-sizing-xxs !important; - &:hover, - &:visited { - text-decoration: none; - } - - > span { - display: block; + > span > span { + white-space: nowrap; overflow: hidden; max-width: 10rem; text-overflow: ellipsis; } - > span:not(:first-child)::before { + > span > span:not(:first-child)::before { content: '|'; position: relative; top: -1px; diff --git a/packages/faceted-search/src/components/Badges/BadgeFaceted/__snapshots__/BadgeFaceted.component.test.js.snap b/packages/faceted-search/src/components/Badges/BadgeFaceted/__snapshots__/BadgeFaceted.component.test.js.snap index 56f6c53fa02..65338feb75f 100644 --- a/packages/faceted-search/src/components/Badges/BadgeFaceted/__snapshots__/BadgeFaceted.component.test.js.snap +++ b/packages/faceted-search/src/components/Badges/BadgeFaceted/__snapshots__/BadgeFaceted.component.test.js.snap @@ -22,20 +22,26 @@ exports[`BadgeFaceted should render the html output by default 1`] = ` class="tc-badge-operator-button theme-tc-badge-operator-button" > @@ -43,14 +49,22 @@ exports[`BadgeFaceted should render the html output by default 1`] = ` class="tc-badge-faceted-overlay theme-tc-badge-faceted-overlay" > diff --git a/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.component.test.js b/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.component.test.js index 00dfd3b1d62..22231861cf1 100644 --- a/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.component.test.js +++ b/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.component.test.js @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from '@testing-library/react'; +import { render, screen, waitFor, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import getDefaultT from '../../../translate'; @@ -38,7 +38,9 @@ describe('BadgeMenu', () => { // When render(); // Then - expect(document.querySelectorAll('span')[2]).toHaveTextContent('All'); + expect( + within(document.querySelector('#tc-badge-select-myId-badge-menu')).getByText('All'), + ).toBeVisible(); }); it('should return "All" when value is empty', () => { // Given @@ -53,7 +55,9 @@ describe('BadgeMenu', () => { // When render(); // Then - expect(document.querySelectorAll('span')[2]).toHaveTextContent('All'); + expect( + within(document.querySelector('#tc-badge-select-myId-badge-menu')).getByText('All'), + ).toBeVisible(); }); it('should mount a badge with object data from callback', async () => { // Given diff --git a/packages/faceted-search/src/components/Badges/BadgeNumber/__snapshots__/BadgeNumber.component.test.js.snap b/packages/faceted-search/src/components/Badges/BadgeNumber/__snapshots__/BadgeNumber.component.test.js.snap index 8978849d6df..b0d3436481c 100644 --- a/packages/faceted-search/src/components/Badges/BadgeNumber/__snapshots__/BadgeNumber.component.test.js.snap +++ b/packages/faceted-search/src/components/Badges/BadgeNumber/__snapshots__/BadgeNumber.component.test.js.snap @@ -22,20 +22,26 @@ exports[`BadgeNumber should mount a default badge 1`] = ` class="tc-badge-operator-button theme-tc-badge-operator-button" > @@ -43,14 +49,22 @@ exports[`BadgeNumber should mount a default badge 1`] = ` class="tc-badge-faceted-overlay theme-tc-badge-faceted-overlay" > diff --git a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss index 1b77f2a37c0..1260b5d7bb9 100644 --- a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss +++ b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss @@ -21,18 +21,10 @@ $circle-size-small: 1.8rem !default; } &-button { - padding: 0; - display: inline-flex; + display: flex; - > button:hover, > button { - padding: 0; - text-decoration: none; - text-transform: none; - - > span { - padding: 0 $padding-smaller; - } + height: tokens.$coral-sizing-xxs !important; } } @@ -56,7 +48,6 @@ $circle-size-small: 1.8rem !default; justify-content: flex-start; text-transform: none; width: 100%; - padding: 0 $padding-large 0 $padding-large; &:hover { background: $concrete; diff --git a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorOverlay.component.js b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorOverlay.component.js index ba4776595ca..6de4e2ca5d2 100644 --- a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorOverlay.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorOverlay.component.js @@ -1,12 +1,12 @@ import PropTypes from 'prop-types'; + import Badge from '@talend/react-components/lib/Badge'; import { getTheme } from '@talend/react-components/lib/theme'; +import { operatorsPropTypes } from '../../facetedSearch.propTypes'; import { BadgeOverlay } from '../BadgeOverlay'; import { BadgeOperatorPopover } from './BadgeOperatorPopover.component'; -import { operatorsPropTypes } from '../../facetedSearch.propTypes'; - import cssModule from './BadgeOperator.module.scss'; const theme = getTheme(cssModule); @@ -22,7 +22,6 @@ const BadgeOperatorOverlay = ({ operators, readOnly, size, - t, }) => { /** * Trigger the callback passed in props @@ -55,7 +54,6 @@ const BadgeOperatorOverlay = ({ onChange={onChangeOverlay} onHide={onHide} opened={opened} - t={t} readOnly={readOnly} > {setOverlayOpened => ( @@ -81,7 +79,6 @@ BadgeOperatorOverlay.propTypes = { operators: operatorsPropTypes.isRequired, readOnly: PropTypes.bool, size: PropTypes.oneOf(Object.values(Badge.SIZES)), - t: PropTypes.func.isRequired, }; // eslint-disable-next-line import/prefer-default-export diff --git a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorPopover.component.js b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorPopover.component.js index bd37e25720f..b9a2194fce1 100644 --- a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorPopover.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorPopover.component.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import { Rich } from '@talend/react-components'; + import { Action } from '@talend/react-components/lib/Actions'; import { getTheme } from '@talend/react-components/lib/theme'; @@ -49,16 +49,9 @@ BadgeOperatorRow.propTypes = { const BadgeOperatorPopover = ({ id, operators, onClick }) => { return (
- - {operators.map(operator => ( - - ))} - + {operators.map(operator => ( + + ))}
); }; diff --git a/packages/faceted-search/src/components/Badges/BadgeOperator/__snapshots__/BadgeOperatorPopover.component.test.js.snap b/packages/faceted-search/src/components/Badges/BadgeOperator/__snapshots__/BadgeOperatorPopover.component.test.js.snap index e4896235e3a..364357fcd64 100644 --- a/packages/faceted-search/src/components/Badges/BadgeOperator/__snapshots__/BadgeOperatorPopover.component.test.js.snap +++ b/packages/faceted-search/src/components/Badges/BadgeOperator/__snapshots__/BadgeOperatorPopover.component.test.js.snap @@ -4,53 +4,43 @@ exports[`BadgeOperatorPopover should render the html output 1`] = `
-
-
- - -
-
+ + + My icon operator equal + + +
`; diff --git a/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.js b/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.js index ae21fb2b26f..52c4af66c7a 100644 --- a/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.js @@ -1,7 +1,10 @@ import { useState } from 'react'; + import PropTypes from 'prop-types'; -import { Popover, Button, Overlay } from '@talend/react-bootstrap'; -import { Icon, TooltipTrigger, FormatValue, getTheme } from '@talend/react-components/lib/Icon'; + +import { ButtonTertiary, Popover } from '@talend/design-system'; +import { FormatValue, getTheme, Icon, TooltipTrigger } from '@talend/react-components/lib/Icon'; + import cssModule from './BadgeOverlay.module.scss'; const theme = getTheme(cssModule); @@ -21,10 +24,15 @@ const labelFormatter = (value, showSpecialChars) => ); const getLabel = (labels, showSpecialChars) => { - if (Array.isArray(labels)) { - return labels.map(label => labelFormatter(label, showSpecialChars)); - } - return labelFormatter(labels, showSpecialChars); + const formatedLabels = Array.isArray(labels) + ? labels.map(label => labelFormatter(label, showSpecialChars)) + : labelFormatter(labels, showSpecialChars); + + return ( + + {formatedLabels} + + ); }; /** @@ -47,10 +55,8 @@ const BadgeOverlay = ({ opened = false, readOnly, showSpecialChars = false, - t, }) => { const [overlayOpened, setOverlayOpened] = useState(initialOpened); - const [buttonRef, setButtonRef] = useState(null); const changeOpened = event => { if (onChange) { @@ -70,40 +76,38 @@ const BadgeOverlay = ({ const currentOpened = opened || overlayOpened; const button = ( - + ); return (
- - {button} - - - { + if (!open) { + onHideOverlay(open); + } + }} > - {getChildren(children, setOverlayOpened)} - + {currentOpened && getChildren(children, setOverlayOpened)} +
); }; @@ -123,7 +127,6 @@ BadgeOverlay.propTypes = { iconName: PropTypes.string, showSpecialChars: PropTypes.bool, dataFeature: PropTypes.string, - t: PropTypes.func.isRequired, onChange: PropTypes.func, onHide: PropTypes.func, }; 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 index e0c67207c45..9e1756d833c 100644 --- a/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.test.js +++ b/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.test.js @@ -1,8 +1,8 @@ // rewrite tests using react-testing-library -import { render, screen, fireEvent } from '@testing-library/react'; +import { fireEvent, render, screen } from '@testing-library/react'; -import { BadgeOverlay } from './BadgeOverlay.component'; import getDefaultT from '../../../translate'; +import { BadgeOverlay } from './BadgeOverlay.component'; describe('BadgeOverlay', () => { it('should render the html output in the default state', () => { @@ -29,8 +29,8 @@ describe('BadgeOverlay', () => { render({childrenAsFunc}); // eslint-disable-next-line jest-dom/prefer-in-document expect(screen.queryByTestId('my-children')).toBeNull(); - fireEvent.click(screen.getByRole('button')); - await screen.findByRole('tooltip'); + fireEvent.click(screen.getByText('my label')); + await screen.findByRole('dialog'); // Then expect(screen.getByTestId('my-children')).toHaveTextContent('hello world'); }); @@ -47,7 +47,7 @@ describe('BadgeOverlay', () => { // When render({childrenAsFunc}); - fireEvent.click(screen.getByRole('button')); + fireEvent.click(screen.getByText(props.label)); // Then expect(onChange.mock.calls.length).toBe(1); expect(onChange.mock.calls[0][1]).toBe(true); diff --git a/packages/faceted-search/src/components/Badges/BadgeOverlay/__snapshots__/BadgeOverlay.component.test.js.snap b/packages/faceted-search/src/components/Badges/BadgeOverlay/__snapshots__/BadgeOverlay.component.test.js.snap index 08dd599fa3b..ac69a34a3eb 100644 --- a/packages/faceted-search/src/components/Badges/BadgeOverlay/__snapshots__/BadgeOverlay.component.test.js.snap +++ b/packages/faceted-search/src/components/Badges/BadgeOverlay/__snapshots__/BadgeOverlay.component.test.js.snap @@ -3,14 +3,22 @@ exports[`BadgeOverlay should render the html output in the default state 1`] = `
diff --git a/packages/faceted-search/src/components/Badges/BadgeSlider/__snapshots__/BadgeSlider.component.test.js.snap b/packages/faceted-search/src/components/Badges/BadgeSlider/__snapshots__/BadgeSlider.component.test.js.snap index a05608b7e11..5930ada9acf 100644 --- a/packages/faceted-search/src/components/Badges/BadgeSlider/__snapshots__/BadgeSlider.component.test.js.snap +++ b/packages/faceted-search/src/components/Badges/BadgeSlider/__snapshots__/BadgeSlider.component.test.js.snap @@ -22,20 +22,26 @@ exports[`BadgeSlider should mount a default badge 1`] = ` class="tc-badge-operator-button theme-tc-badge-operator-button" > @@ -43,14 +49,22 @@ exports[`BadgeSlider should mount a default badge 1`] = ` class="tc-badge-faceted-overlay theme-tc-badge-faceted-overlay" > diff --git a/packages/faceted-search/src/components/Badges/BadgeText/__snapshots__/BadgeText.component.test.js.snap b/packages/faceted-search/src/components/Badges/BadgeText/__snapshots__/BadgeText.component.test.js.snap index 8a2cf9bbc2b..e18884d7fd1 100644 --- a/packages/faceted-search/src/components/Badges/BadgeText/__snapshots__/BadgeText.component.test.js.snap +++ b/packages/faceted-search/src/components/Badges/BadgeText/__snapshots__/BadgeText.component.test.js.snap @@ -22,20 +22,26 @@ exports[`BadgeText should mount a default badge 1`] = ` class="tc-badge-operator-button theme-tc-badge-operator-button" > @@ -43,14 +49,22 @@ exports[`BadgeText should mount a default badge 1`] = ` class="tc-badge-faceted-overlay theme-tc-badge-faceted-overlay" > diff --git a/packages/faceted-search/src/components/BasicSearch/__snapshots__/BasicSearch.component.test.js.snap b/packages/faceted-search/src/components/BasicSearch/__snapshots__/BasicSearch.component.test.js.snap index 947e342e9bd..325ff3d958f 100644 --- a/packages/faceted-search/src/components/BasicSearch/__snapshots__/BasicSearch.component.test.js.snap +++ b/packages/faceted-search/src/components/BasicSearch/__snapshots__/BasicSearch.component.test.js.snap @@ -71,20 +71,26 @@ exports[`BasicSearch should render the default html output with no badges 1`] = class="tc-badge-operator-button theme-tc-badge-operator-button" > @@ -92,14 +98,22 @@ exports[`BasicSearch should render the default html output with no badges 1`] = class="tc-badge-faceted-overlay theme-tc-badge-faceted-overlay" >