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

* feat(MenuInput): use SearchInput instead of TextInput

* fix cypress test

Author: tompsota

packages/react-core/src/components/Menu/examples/Menu.md

@@ -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

packages/react-core/src/components/Menu/examples/MenuFilteringWithTextInput.tsx renamed to packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx

@@ -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('');
 
@@ -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)}
         />

packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx

@@ -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';
@@ -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)} />
       </MenuInput>
       <Divider />
       <MenuContent>

packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx

@@ -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';
 
@@ -160,7 +160,7 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
     >
       <MenuInput>
         <InputGroup>
-          <TextInput
+          <SearchInput
             value={searchInputValue}
             type="search"
             placeholder="Search"

packages/react-integration/cypress/integration/menu.spec.ts

@@ -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()

packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx

@@ -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';
@@ -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')}
             />