Skip to content

feat(context selector): replaced input group with search input #8045

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Dec 8, 2022
Merged

feat(context selector): replaced input group with search input #8045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
51dec32
feat(context selector): replaced input group with search input
gefgu Sep 22, 2022
9020877
chore(context selector): update snapshots
gefgu Oct 7, 2022
d9f6ba2
chore: update label
gefgu Oct 18, 2022
f4e415e
Updated per comments
Dec 2, 2022
0053d87
Updated snapshots
Dec 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 11 additions & 28 deletions packages/react-core/src/components/ContextSelector/ContextSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
import * as React from 'react';
import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
import { css } from '@patternfly/react-styles';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import { ContextSelectorToggle } from './ContextSelectorToggle';
import { ContextSelectorMenuList } from './ContextSelectorMenuList';
import { ContextSelectorContext } from './contextSelectorConstants';
import { Button, ButtonVariant } from '../Button';
import { TextInput } from '../TextInput';
import { InputGroup } from '../InputGroup';
import { KeyTypes } from '../../helpers/constants';
import { FocusTrap, getUniqueId } from '../../helpers';
import { Popper } from '../../helpers/Popper/Popper';
import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
import { SearchInput } from '../SearchInput';

export interface ContextSelectorProps extends OUIAProps {
/** content rendered inside the Context Selector */
Expand Down Expand Up @@ -104,12 +100,6 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
parentRef: React.RefObject<HTMLDivElement> = React.createRef();
popperRef: React.RefObject<HTMLDivElement> = React.createRef();

onEnterPressed = (event: any) => {
if (event.key === KeyTypes.Enter) {
this.props.onSearchButtonClick();
}
};

render() {
const {
children,
Expand Down Expand Up @@ -150,23 +140,16 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
focusTrapOptions={{ clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } }}
>
<div className={css(styles.contextSelectorMenuSearch)}>
<InputGroup>
<TextInput
value={searchInputValue}
type="search"
placeholder={searchInputPlaceholder}
onChange={onSearchInputChange}
onKeyPress={this.onEnterPressed}
aria-label={searchButtonAriaLabel}
/>
<Button
variant={ButtonVariant.control}
aria-label={searchButtonAriaLabel}
onClick={onSearchButtonClick}
>
<SearchIcon aria-hidden="true" />
</Button>
</InputGroup>
<SearchInput
type="search"
submitSearchButtonLabel={searchButtonAriaLabel}
placeholder={searchInputPlaceholder}
onChange={onSearchInputChange}
onSearch={(value, event, _) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FWIW we don't have the search button in the core examples, should we? Feels a little cramped with the icon and search button. cc @mmenestr

onSearchButtonClick(event);
}}
value={searchInputValue}
/>
</div>
<ContextSelectorContext.Provider value={{ onSelect }}>
<ContextSelectorMenuList isOpen={isOpen}>{children}</ContextSelectorMenuList>
Expand Down
106 changes: 78 additions & 28 deletions ...core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,37 +87,62 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
<div
class="pf-c-input-group"
>
<input
aria-invalid="false"
aria-label="Search menu items"
class="pf-c-form-control"
data-ouia-component-id="OUIA-Generated-TextInputBase-1"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
placeholder="Search"
type="search"
value=""
/>
<div
class="pf-c-text-input-group"
>
<div
class="pf-c-text-input-group__main pf-m-icon"
>
<span
class="pf-c-text-input-group__text"
>
<span
class="pf-c-text-input-group__icon"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
/>
</svg>
</span>
<input
aria-label="Search input"
class="pf-c-text-input-group__text-input"
placeholder="Search"
type="search"
value=""
/>
</span>
</div>
</div>
<button
aria-disabled="false"
aria-label="Search menu items"
class="pf-c-button pf-m-control"
data-ouia-component-id="OUIA-Generated-Button-control-1"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
type="submit"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
viewBox="0 0 448 512"
width="1em"
>
<path
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
</button>
Expand Down Expand Up @@ -231,37 +256,62 @@ exports[`ContextSelector Renders in strict mode 1`] = `
<div
class="pf-c-input-group"
>
<input
aria-invalid="false"
aria-label="Search menu items"
class="pf-c-form-control"
data-ouia-component-id="OUIA-Generated-TextInputBase-3"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
placeholder="Search"
type="search"
value=""
/>
<div
class="pf-c-text-input-group"
>
<div
class="pf-c-text-input-group__main pf-m-icon"
>
<span
class="pf-c-text-input-group__text"
>
<span
class="pf-c-text-input-group__icon"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
/>
</svg>
</span>
<input
aria-label="Search input"
class="pf-c-text-input-group__text-input"
placeholder="Search"
type="search"
value=""
/>
</span>
</div>
</div>
<button
aria-disabled="false"
aria-label="Search menu items"
class="pf-c-button pf-m-control"
data-ouia-component-id="OUIA-Generated-Button-control-3"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
type="submit"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
viewBox="0 0 448 512"
width="1em"
>
<path
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
</button>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/SearchInput/SearchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,7 +361,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
variant={ButtonVariant.control}
aria-label={submitSearchButtonLabel}
onClick={onSearchHandler}
isDisabled={isDisabled || !searchValue}
isDisabled={isDisabled}
>
<ArrowRightIcon />
</Button>
Expand Down