update InputSearch to have the search Icon (#693)

* update InputSearch to have the search Icon

* update tests and other components affected by InputSearch

Author: laraharrow

CHANGELOG.md

@@ -17,10 +17,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Change
 
 - move path for InlineInputText now under Form/Inputs
+- update InputSearch to display search icon
 - `ArrowDropDown` and `ArrowDropUp` Icons renamed to `ArrowUp` and `ArrowDown`
 - `CacheRefesh` Icon update
 - `Confirm` no longer displays a `Close` `IconButton` in the header
 
+
 ## [0.7.24] - 2020-03-12
 
 ### Added

packages/components/src/Form/Inputs/Combobox/ComboboxInput.tsx

@@ -169,6 +169,7 @@ export const ComboboxInputInternal = forwardRef(
       <InputSearch
         {...rest}
         {...inputEvents}
+        hideSearchIcon
         ref={ref}
         value={inputValue}
         readOnly={readOnly}

packages/components/src/Form/Inputs/InputChips/InputChipsBase.tsx

@@ -94,6 +94,7 @@ export const InputChipsBaseInternal = forwardRef(
 
     return (
       <InputSearch
+        hideSearchIcon
         ref={ref}
         value={inputValue}
         onChange={handleInputChange}

packages/components/src/Form/Inputs/InputSearch/InputSearch.test.tsx

@@ -40,6 +40,10 @@ test('InputSearch default', () => {
   assertSnapshot(<InputSearch />)
 })
 
+test('InputSearch hideSearchIcon removes the icon', () => {
+  assertSnapshot(<InputSearch hideSearchIcon />)
+})
+
 test('InputSearch displays placeholder', () => {
   const wrapper = mountWithTheme(<InputSearch placeholder="Type your search" />)
   expect(wrapper.props().children.props.placeholder).toEqual('Type your search')

packages/components/src/Form/Inputs/InputSearch/InputSearch.tsx

@@ -50,6 +50,7 @@ import {
 } from '../InputText'
 import { useControlWarn, useForkedRef, useWrapEvent } from '../../../utils'
 import { Flex } from '../../../Layout'
+import { Icon } from '../../../Icon'
 import { InputSearchControls } from './InputSearchControls'
 
 const getHeight = (
@@ -71,6 +72,10 @@ export interface InputSearchProps extends InputTextProps {
    * hides clear button and summary text
    */
   hideControls?: boolean
+  /**
+   * hides search Icon
+   */
+  hideSearchIcon?: boolean
   /**
    * overrides the internal logic that shows the clear icon when there's a value
    */
@@ -95,6 +100,11 @@ export interface InputSearchProps extends InputTextProps {
   onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void
 }
 
+export const SearchIcon = styled(Icon)`
+  color: ${props => props.theme.colors.palette.charcoal400};
+  padding-left: ${props => props.theme.space.small};
+`
+
 const InputSearchComponent = forwardRef(
   (
     {
@@ -112,6 +122,7 @@ const InputSearchComponent = forwardRef(
       className,
       defaultValue,
       hideControls = false,
+      hideSearchIcon = false,
       showClear,
       summary,
       value: controlledValue = '',
@@ -197,6 +208,7 @@ const InputSearchComponent = forwardRef(
         {...omit(props, inputPropKeys)}
         {...mouseHandlers}
       >
+        {!hideSearchIcon && <SearchIcon name="Search" size={30} />}
         {children ? (
           <Flex alignItems="flex-start" flexWrap="wrap">
             {children}

packages/components/src/Form/Inputs/InputSearch/__snapshots__/InputSearch.test.tsx.snap

@@ -15,6 +15,145 @@ exports[`InputSearch default 1`] = `
   display: flex;
 }
 
+.c2 {
+  width: 30px;
+  height: 30px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c4 {
+  height: 36px;
+}
+
+.c4:hover {
+  border-color: #C1C6CC;
+}
+
+.c4:focus,
+.c4:focus-within {
+  border-color: #9785F2;
+  box-shadow: 0 0 0 2px #E8E5FF;
+  outline: none;
+}
+
+.c6 {
+  border-radius: 0.25rem;
+  border: solid 1px;
+  border-color: #DEE1E5;
+  height: 36px;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
+  font-size: 0.875rem;
+  color: #343C42;
+}
+
+.c6:focus {
+  outline: none;
+}
+
+.c3 {
+  color: #939BA5;
+  padding-left: 0.75rem;
+}
+
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #FFFFFF;
+}
+
+.c1:hover {
+  border-color: #C1C6CC;
+}
+
+.c1:focus-within {
+  border-color: #9785F2;
+  box-shadow: 0 0 0 2px #E8E5FF;
+  outline: none;
+}
+
+.c1 .c5 {
+  border: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  box-shadow: none;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  width: 100%;
+  height: calc(36px - 6px);
+}
+
+.c1 .c5::-webkit-search-decoration,
+.c1 .c5::-webkit-search-cancel-button,
+.c1 .c5::-webkit-search-results-button,
+.c1 .c5::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+<div
+  className="c0 c1"
+  fontSize="small"
+  onMouseDown={[Function]}
+>
+  <div
+    className="c2 c3"
+    size={30}
+  >
+    <svg
+      fill="currentColor"
+      height="100%"
+      viewBox="0 0 24 24"
+      width="100%"
+    >
+      <title>
+        Search
+      </title>
+      <path
+        d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+  <input
+    className="c4 c5 c6"
+    onChange={[Function]}
+    type="text"
+    value=""
+  />
+</div>
+`;
+
+exports[`InputSearch hideSearchIcon removes the icon 1`] = `
+.c0 {
+  border-radius: 0.25rem;
+  border: solid 1px;
+  border-color: #DEE1E5;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 0.25rem;
+  font-size: 0.875rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c2 {
   height: 36px;
 }

packages/components/src/Menu/MenuSearch/MenuSearch.tsx

@@ -48,6 +48,7 @@ export const MenuSearch: FC<MenuSearchProps> = ({ menuRef, ...props }) => {
     >
       <ObserveKeys except={[]} only={['down', 'up']}>
         <InputSearch
+          hideSearchIcon
           borderRadius={0}
           border="none"
           borderBottom={`1px solid ${palette.charcoal200}`}

packages/www/src/documentation/components/forms/input-search.mdx

@@ -5,13 +5,13 @@ propsOf: InputSearch
 figma: file/2MG6DoSjk4IaLnjjFCnKFf/Forms
 ---
 
-The `<InputSearch />` component renders a single search input element. You can add a placeholder, and a starter value, also a summary text and a closing button associated with it. To remove the button and summary use the hideControls option. If you are building a menu you probably want to use `<MenuSearch />`.
+The `<InputSearch />` component renders a single search input element. You can add a placeholder, and a starter value, also a summary text and a closing button associated with it. To remove the button and summary use the hideControls option. If you are building a menu you probably want to use `<MenuSearch />`. If you don't want to see the search `Icon` use the prop `hideSearchIcon`
 
 ```jsx
 <InputSearch placeholder="Type your search" />
 <Divider my="medium" />
 <InputSearch placeholder="Type your search" value="test search" />
-<Divider my="medium" />
+<Divider my="medium"/>
 <InputSearch
   width="50%"
   placeholder="Type your search"
@@ -24,6 +24,9 @@ The `<InputSearch />` component renders a single search input element. You can a
   value="test search 1"
   hideControls
 />
+<Divider my="medium"/>
+<InputSearch hideSearchIcon placeholder="No search icon here" />
+
 ```
 
 ## Controlled Example