From 24474d83bc7e234027873a3cd43c824bc1576adb Mon Sep 17 00:00:00 2001 From: kmcfaul <45077788+kmcfaul@users.noreply.github.com> Date: Fri, 30 Sep 2022 11:39:14 -0400 Subject: [PATCH] feat(DualListSelector, SearchInput): use SearchInput in DLS, add type prop to SearchInput (#8040) * feat(DualListSelector,SearchInput): use SearchInput in DualListSelector, add type to SearchInput * update snapshot * update cypress references to search * fix other dls cypress files * add clear callback --- .../DualListSelector/DualListSelectorPane.tsx | 18 +++-- .../DualListSelector.test.tsx.snap | 80 ++++++++++++++++--- .../components/SearchInput/SearchInput.tsx | 15 ++++ .../integration/duallistselectorbasic.spec.ts | 6 +- .../integration/duallistselectortree.spec.ts | 12 +-- .../duallistselectorwithactions.spec.ts | 8 +- 6 files changed, 109 insertions(+), 30 deletions(-) diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx index 97bb8e1efd5..a633181e03f 100644 --- a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx +++ b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector'; import { css } from '@patternfly/react-styles'; -import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control'; import { DualListSelectorTree, DualListSelectorTreeItemData } from './DualListSelectorTree'; import { getUniqueId } from '../../helpers'; import { DualListSelectorListWrapper } from './DualListSelectorListWrapper'; import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext'; import { DualListSelectorList } from './DualListSelectorList'; +import { SearchInput } from '../SearchInput'; /** Acts as the container for a list of options that are either available or chosen, * depending on the pane type (available or chosen). A search input and other actions, @@ -57,6 +57,8 @@ export interface DualListSelectorPaneProps { onSearch?: (event: React.ChangeEvent) => void; /** @hide A callback for when the search input value for changes. To be used when isSearchable is true. */ onSearchInputChanged?: (value: string, event: React.FormEvent) => void; + /** @hide Callback for search input clear button */ + onSearchInputClear?: (event: React.SyntheticEvent) => void; /** @hide Filter function for custom filtering based on search string. To be used when isSearchable is true. */ filterOption?: (option: React.ReactNode, input: string) => boolean; /** @hide Accessible label for the search input. To be used when isSearchable is true. */ @@ -81,6 +83,7 @@ export const DualListSelectorPane: React.FunctionComponent) => { - const newValue = e.target.value; + const onChange = (newValue: string, e: React.FormEvent) => { let filtered: React.ReactNode[]; if (isTree) { filtered = options @@ -160,12 +162,14 @@ export const DualListSelectorPane: React.FunctionComponent onChange('', e as React.FormEvent) + } + isDisabled={isDisabled} aria-label={searchInputAriaLabel} - disabled={isDisabled} + type="search" /> )} diff --git a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap index a32c7e8d9a0..68f33aff432 100644 --- a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap +++ b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap @@ -1135,11 +1135,41 @@ exports[`DualListSelector with search inputs 1`] = `
- +
+
+ + + + + + +
+
- +
+
+ + + + + + +
+
, hasWordsAttrLabel?: React.ReactNode; /** A suggestion for autocompleting. */ hint?: string; + /** Type of the input */ + type?: + | 'text' + | 'date' + | 'datetime-local' + | 'email' + | 'month' + | 'number' + | 'password' + | 'search' + | 'tel' + | 'time' + | 'url'; /** @hide A reference object to attach to the input box. */ innerRef?: React.RefObject; /** A flag for controlling the open state of a custom advanced search implementation. */ @@ -147,6 +160,7 @@ const SearchInputBase: React.FunctionComponent = ({ isDisabled = false, appendTo, removeFindDomNode = false, + type = 'text', ...props }: SearchInputProps) => { const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false); @@ -263,6 +277,7 @@ const SearchInputBase: React.FunctionComponent = ({ aria-label={ariaLabel} onKeyDown={onEnter} onChange={onChangeHandler} + type={type} /> {renderUtilities && ( diff --git a/packages/react-integration/cypress/integration/duallistselectorbasic.spec.ts b/packages/react-integration/cypress/integration/duallistselectorbasic.spec.ts index d5ce4e0d789..7e42c36ae02 100644 --- a/packages/react-integration/cypress/integration/duallistselectorbasic.spec.ts +++ b/packages/react-integration/cypress/integration/duallistselectorbasic.spec.ts @@ -169,7 +169,7 @@ describe('Dual List Selector BasicDemo Test', () => { .eq(1) .find('li') .should('have.length', 4); - cy.get('.pf-c-dual-list-selector__tools-filter .pf-m-search') + cy.get('.pf-c-dual-list-selector__tools-filter input') .eq(1) .type('Option 1'); cy.get('.pf-c-dual-list-selector__list') @@ -179,7 +179,7 @@ describe('Dual List Selector BasicDemo Test', () => { }); it('Verify removing all options', () => { - cy.get('.pf-c-dual-list-selector__tools-filter .pf-m-search') + cy.get('.pf-c-dual-list-selector__tools-filter input') .eq(1) .type('{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}'); cy.get('.pf-c-dual-list-selector__controls-item') @@ -216,7 +216,7 @@ describe('Dual List Selector BasicDemo Test', () => { .eq(0) .find('li') .should('have.length', 4); - cy.get('.pf-c-dual-list-selector__tools-filter .pf-m-search') + cy.get('.pf-c-dual-list-selector__tools-filter input') .eq(0) .type('Option 3'); cy.get('.pf-c-dual-list-selector__list') diff --git a/packages/react-integration/cypress/integration/duallistselectortree.spec.ts b/packages/react-integration/cypress/integration/duallistselectortree.spec.ts index 584f7f8a05b..1fdfeffb34d 100644 --- a/packages/react-integration/cypress/integration/duallistselectortree.spec.ts +++ b/packages/react-integration/cypress/integration/duallistselectortree.spec.ts @@ -29,14 +29,14 @@ describe('Dual List Selector TreeDemo Test', () => { .eq(0) .find('li') .should('have.length', 4); - cy.get('.pf-c-dual-list-selector__tools-filter .pf-m-search') + cy.get('.pf-c-dual-list-selector__tools-filter input') .eq(0) .type('Option 2'); cy.get('.pf-c-dual-list-selector__list') .eq(0) .find('li') .should('have.length', 1); - cy.get('.pf-c-dual-list-selector__tools-filter .pf-m-search') + cy.get('.pf-c-dual-list-selector__tools-filter input') .eq(0) .type('{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}'); cy.get('.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__item-toggle') @@ -75,7 +75,7 @@ describe('Dual List Selector TreeDemo Test', () => { .eq(0) .find('li') .should('have.length', 3); - cy.get('.pf-c-dual-list-selector__tools-filter .pf-m-search') + cy.get('.pf-c-dual-list-selector__tools-filter input') .eq(0) .type('Option 1'); cy.get('.pf-c-dual-list-selector__list') @@ -89,7 +89,7 @@ describe('Dual List Selector TreeDemo Test', () => { .eq(1) .find('li') .should('have.length', 3); - cy.get('.pf-c-dual-list-selector__tools-filter .pf-m-search') + cy.get('.pf-c-dual-list-selector__tools-filter input') .eq(0) .type('{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}'); cy.get('.pf-c-dual-list-selector__list') @@ -103,7 +103,7 @@ describe('Dual List Selector TreeDemo Test', () => { .eq(1) .find('li') .should('have.length', 3); - cy.get('.pf-c-dual-list-selector__tools-filter .pf-m-search') + cy.get('.pf-c-dual-list-selector__tools-filter input') .eq(1) .type('Option 1'); cy.get('.pf-c-dual-list-selector__list') @@ -132,7 +132,7 @@ describe('Dual List Selector TreeDemo Test', () => { .eq(1) .find('li') .should('have.length', 0); - cy.get('.pf-c-dual-list-selector__tools-filter .pf-m-search') + cy.get('.pf-c-dual-list-selector__tools-filter input') .eq(1) .type('{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}'); cy.get('.pf-c-dual-list-selector__list') diff --git a/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts b/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts index a9cb73e7a18..06243179bd6 100644 --- a/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts +++ b/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts @@ -151,7 +151,7 @@ describe('Dual List Selector With Actions Demo Test', () => { .eq(1) .find('li') .should('have.length', 4); - cy.get('.pf-c-dual-list-selector__tools-filter .pf-m-search') + cy.get('.pf-c-dual-list-selector__tools-filter input') .eq(1) .type('Option 1'); cy.get('.pf-c-dual-list-selector__list') @@ -161,7 +161,7 @@ describe('Dual List Selector With Actions Demo Test', () => { }); it('Verify removing all options', () => { - cy.get('.pf-c-dual-list-selector__tools-filter .pf-m-search') + cy.get('.pf-c-dual-list-selector__tools-filter input') .eq(1) .type('{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}'); cy.get('.pf-c-dual-list-selector__controls-item') @@ -182,7 +182,7 @@ describe('Dual List Selector With Actions Demo Test', () => { .eq(0) .find('li') .should('have.length', 4); - cy.get('.pf-c-dual-list-selector__tools-filter .pf-m-search') + cy.get('.pf-c-dual-list-selector__tools-filter input') .eq(0) .type('Option 3'); cy.get('.pf-c-dual-list-selector__list') @@ -207,7 +207,7 @@ describe('Dual List Selector With Actions Demo Test', () => { .eq(1) .find('li') .should('have.length', 1); - cy.get('.pf-c-dual-list-selector__tools-filter .pf-m-search') + cy.get('.pf-c-dual-list-selector__tools-filter input') .eq(0) .type('{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}'); cy.get('.pf-c-dual-list-selector__list')