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

* feat(context selector): replaced input group with search input * chore(context selector): update snapshots * chore: update label Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> * Updated per comments * Updated snapshots Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> Co-authored-by: Eric Olkowski <thatblindgeye@gmail.com>
patternfly · Dec 8, 2022 · c8ae8b5 · c8ae8b5
1 parent 3130169
commit c8ae8b5
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 57 deletions.
diff --git a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx
@@ -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 */
@@ -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,
@@ -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, _) => {
+                  onSearchButtonClick(event);
+                }}
+                value={searchInputValue}
+              />
             </div>
             <ContextSelectorContext.Provider value={{ onSelect }}>
               <ContextSelectorMenuList isOpen={isOpen}>{children}</ContextSelectorMenuList>

diff --git a/...core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap b/...core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap
@@ -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>
@@ -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>

diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx
@@ -361,7 +361,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
           variant={ButtonVariant.control}
           aria-label={submitSearchButtonLabel}
           onClick={onSearchHandler}
-          isDisabled={isDisabled || !searchValue}
+          isDisabled={isDisabled}
         >
           <ArrowRightIcon />
         </Button>