Skip to content

feat(MenuInput): use SearchInput instead of TextInput #8329

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
tlabaj merged 2 commits into from
Nov 15, 2022
Merged

feat(MenuInput): use SearchInput instead of TextInput #8329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d822b5
feat(MenuInput): use SearchInput instead of TextInput
tompsota Nov 4, 2022
8e2173d
fix cypress test
tompsota Nov 7, 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
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Menu/examples/Menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
```ts file="./MenuWithCheckbox.tsx"
```

### Filtering with text input
### Filtering with search input

```ts file="MenuFilteringWithTextInput.tsx"
```ts file="MenuFilteringWithSearchInput.tsx"
```

### With links
Expand Down
7 changes: 3 additions & 4 deletions ...u/examples/MenuFilteringWithTextInput.tsx → ...examples/MenuFilteringWithSearchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Menu, MenuList, MenuItem, MenuContent, MenuInput, TextInput, Divider } from '@patternfly/react-core';
import { Menu, MenuList, MenuItem, MenuContent, MenuInput, Divider, SearchInput } from '@patternfly/react-core';

export const MenuFilteringWithTextInput: React.FunctionComponent = () => {
export const MenuFilteringWithSearchInput: React.FunctionComponent = () => {
const [activeItem, setActiveItem] = React.useState(0);
const [input, setInput] = React.useState('');

Expand Down Expand Up @@ -35,10 +35,9 @@ export const MenuFilteringWithTextInput: React.FunctionComponent = () => {
return (
<Menu onSelect={onSelect} activeItemId={activeItem}>
<MenuInput>
<TextInput
<SearchInput
value={input}
aria-label="Filter menu items"
iconVariant="search"
type="search"
onChange={value => handleTextInputChange(value)}
/>
Expand Down
9 changes: 2 additions & 7 deletions packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
Popper,
Tooltip,
Divider,
TextInput
SearchInput
} from '@patternfly/react-core';
import { Link } from '@reach/router';
import ThIcon from '@patternfly/react-icons/dist/js/icons/th-icon';
Expand Down Expand Up @@ -250,12 +250,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
// eslint-disable-next-line no-console
<Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
<MenuInput>
<TextInput
aria-label="Filter menu items"
iconVariant="search"
type="search"
onChange={value => onTextChange(value)}
/>
<SearchInput aria-label="Filter menu items" type="search" onChange={value => onTextChange(value)} />
Copy link
Contributor

@gitdallas gitdallas Nov 7, 2022

Choose a reason for hiding this comment

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

@tlabaj - any reason SearchInput type isn't defaulted to search?

Copy link
Contributor

@kmcfaul kmcfaul Nov 14, 2022

Choose a reason for hiding this comment

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

It looks like when I added it in that I matched the default type of TextInputGroupMain which was text. It probably could be defaulted to search instead though.

Copy link
Contributor

@tlabaj tlabaj Nov 15, 2022

Choose a reason for hiding this comment

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

The types is also set to "text" in core. When set to search it some browsers will add the "x" icon to clear the field. Our implementation has a clear button that can be added to the search input. I wonder if that is one of the reasons core has it set to "type". be default?
cc @mcoker @mattnolting

Copy link
Contributor

@thatblindgeye thatblindgeye Nov 15, 2022

Choose a reason for hiding this comment

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

@tlabaj I actually have the following PR open in Core that relates to the "x" icon for search input types
patternfly/patternfly#5211

</MenuInput>
<Divider />
<MenuContent>
Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import {
MenuInput,
Popper,
Divider,
TextInput,
InputGroup,
Button,
ButtonVariant
ButtonVariant,
SearchInput
} from '@patternfly/react-core';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

Expand Down Expand Up @@ -160,7 +160,7 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
>
<MenuInput>
<InputGroup>
<TextInput
<SearchInput
value={searchInputValue}
type="search"
placeholder="Search"
Expand Down
2 changes: 1 addition & 1 deletion packages/react-integration/cypress/integration/menu.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ describe('Menu Test', () => {
.first()
.should('have.class', 'pf-c-menu__search');

cy.get('.pf-c-form-control.pf-m-search').type('Action 1');
cy.get('.pf-c-text-input-group__text-input').type('Action 1');

cy.get('#filtered-items.pf-c-menu__list-item')
.last()
Expand Down
7 changes: 3 additions & 4 deletions packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ import {
MenuItemAction,
MenuContent,
MenuInput,
TextInput,
MenuFooter,
Button,
Spinner
Spinner,
SearchInput
} from '@patternfly/react-core';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
Expand Down Expand Up @@ -258,10 +258,9 @@ export class MenuDemo extends Component {
</Title>
<Menu onSelect={this.onSimpleSelect} activeItemId={activeItem} id="filterable-menu">
<MenuInput>
<TextInput
<SearchInput
value={input}
aria-label="filterable-example-with-text-input"
iconVariant="search"
type="search"
onChange={value => this.handleTextInputChange(value, 'input')}
/>
Expand Down