feat(applauncher): replaced favorites input with search input (#8293)

* feat(applauncher): replace input with search input * fix bug in onToggle * remove search button for consistency
patternfly · Nov 7, 2022 · 775e43c · 775e43c
1 parent 3af0466
commit 775e43c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 9 deletions.
diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
-import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import { DropdownDirection, DropdownPosition, DropdownToggle, DropdownContext } from '../Dropdown';
 import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
@@ -10,6 +9,7 @@ import { ApplicationLauncherSeparator } from './ApplicationLauncherSeparator';
 import { ApplicationLauncherItem } from './ApplicationLauncherItem';
 import { ApplicationLauncherContext } from './ApplicationLauncherContext';
 import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites';
+import { SearchInput } from '../SearchInput';
 
 export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional element css classes */
@@ -93,13 +93,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
       <div key="search" className={css(styles.appLauncherMenuSearch)}>
         <ApplicationLauncherItem
           customChild={
-            <input
-              type="search"
-              className={css(formStyles.formControl)}
-              placeholder={searchPlaceholderText}
-              onChange={e => onSearch(e.target.value)}
-              {...searchProps}
-            ></input>
+            <SearchInput placeholder={searchPlaceholderText} onChange={value => onSearch(value)} {...searchProps} />
           }
         ></ApplicationLauncherItem>
       </div>

diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx
@@ -30,6 +30,7 @@ export interface ApplicationLauncherItemProps {
   ariaIsNotFavoriteLabel?: string;
   /** ID of the item. Required for tracking favorites. */
   id?: string;
+  /** Custom item rendering that receives the ApplicationLauncherContext */
   customChild?: React.ReactNode;
   /** Flag indicating if hitting enter triggers an arrow down key press. Automatically passed to favorites list items. */
   enterTriggersArrowDown?: boolean;

diff --git a/...ore/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx b/...ore/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx
@@ -40,7 +40,10 @@ export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = ()
   const [favorites, setFavorites] = React.useState<string[]>([]);
   const [filteredItems, setFilteredItems] = React.useState<React.ReactNode[]>(null);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+    setFilteredItems(null);
+  };
 
   const onFavorite = (itemId: string, isFavorite: boolean) => {
     let updatedFavorites: string[] = [...favorites, itemId];