[DDW-1023] Add Search Icon to Input Component

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 The history of all changes to react-polymorph.
 
+## vNext
+
+### Features
+
+- Add search icon functionality to Input component ([PR 207](https://github.com/input-output-hk/react-polymorph/pull/207))
+
 # 1.0.4
 
 ### Fixes
@@ -14,6 +20,7 @@ The history of all changes to react-polymorph.
 - Bumped the version of `create-react-context` ([PR 208](https://github.com/input-output-hk/react-polymorph/pull/208))
 - Replace node-sass with sass package ([PR 205](https://github.com/input-output-hk/react-polymorph/pull/205))
 
+
 # 1.0.3
 
 - Add disabled state to Select component ([PR 196](https://github.com/input-output-hk/react-polymorph/pull/196))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "1.0.4",
+  "version": "1.0.4-next.1",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

source/components/Input.js

@@ -22,6 +22,7 @@ export type InputProps = {
   error?: string | Element<any>,
   inputRef?: RefObject,
   showErrorState?: boolean,
+  hasSearch?: boolean,
   hideErrorState?: boolean,
   id?: string,
   isShowingErrorOnFocus: boolean,

source/skins/simple/InputSkin.js

@@ -18,20 +18,38 @@ type Props = InputProps & {
 };
 
 export const InputSkin = (props: Props) => {
-  const renderInput = (setFormFieldRef) => (
-    <input
-      ref={setFormFieldRef}
-      {...pickDOMProps(props)}
-      className={classnames([
-        props.theme[props.themeId].input,
-        props.disabled ? props.theme[props.themeId].disabled : null,
-        !props.hideErrorState && (props.error || props.showErrorState)
-          ? props.theme[props.themeId].errored
-          : null,
-      ])}
-      disabled={props.disabled}
-    />
-  );
+  const renderInput = (setFormFieldRef) => {
+    const {
+      theme,
+      themeId,
+      disabled,
+      hasSearch,
+      showErrorState,
+      hideErrorState,
+      error,
+    } = props;
+
+    const input = (
+      <input
+        ref={setFormFieldRef}
+        {...pickDOMProps(props)}
+        className={classnames([
+          theme[themeId].input,
+          disabled ? theme[themeId].disabled : null,
+          !hideErrorState && (error || showErrorState)
+            ? theme[themeId].errored
+            : null,
+        ])}
+        disabled={disabled}
+      />
+    );
+
+    return hasSearch ? (
+      <div className={classnames([theme[themeId].search])}>{input}</div>
+    ) : (
+      input
+    );
+  };
 
   const useSelectionRenderer = (setFormFieldRef, option) => (
     <div className={props.theme[props.themeId].customValueWrapper}>

source/themes/simple/SimpleInput.scss

@@ -1,4 +1,5 @@
 @import "theme";
+@import "search-icon";
 
 // OVERRIDABLE CONFIGURATION VARIABLES
 
@@ -77,6 +78,34 @@ $input-placeholder-font-family: var(--rp-input-placeholder-font-family, $theme-f
   }
 }
 
+.search {
+  position: relative;
+
+  &:focus-within {
+    &:before {
+      opacity: $search-icon-opacity-focus;
+    }
+  }
+
+  &:before {
+    -webkit-mask-image: $search-icon-url;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: $search-icon-size $search-icon-size;
+    background: $search-icon-color;
+    content: "";
+    height: $search-icon-size;
+    margin: $search-icon-top-margin $search-icon-side-margin 0 $search-icon-side-margin;
+    mask-image: $search-icon-url;
+    mask-repeat: no-repeat;
+    mask-size: $search-icon-size $search-icon-size;
+    opacity: $search-icon-opacity;
+    position: absolute;
+    vertical-align: middle;
+    width: $search-icon-size;
+    z-index: 1;
+  }
+}
+
 // END SPECIAL STATES ---------- //
 
 // BEGIN CUSTOM VALUE RENDERER ---------- //

source/themes/simple/SimpleOptions.scss

@@ -1,4 +1,5 @@
 @import "theme";
+@import "search-icon";
 @import "mixins/arrow";
 
 // OVERRIDABLE CONFIGURATION VARIABLES
@@ -29,12 +30,6 @@ $option-search-clear-icon-color: var(--rp-input-text-color, #5e6066) !default;
 $option-search-clear-icon-size: var(--rp-option-search-clear-icon-size, 10px) !default;
 $option-search-clear-icon-url: var(--rp-option-search-clear-icon-url, url("#{$theme-assets-path}/cross.svg")) !default;
 $option-search-highlight-background-color: var(--rp-option-search-highlight-background-color, #f2a218) !default;
-$option-search-icon-color: var(--rp-input-text-color, #5e6066) !default;
-$option-search-icon-opacity: var(--rp-option-search-icon-opacity, 0.65) !default;
-$option-search-icon-side-margin: var(--rp-option-search-icon-size, 18.5px) !default;
-$option-search-icon-size: var(--rp-option-search-icon-size, 15px) !default;
-$option-search-icon-top-margin: var(--rp-option-search-icon-size, 16.5px) !default;
-$option-search-icon-url: var(--rp-option-search-icon-url, url("#{$theme-assets-path}/search.svg")) !default;
 $option-search-input-background-color: var(--rp-select-input-bg-color, #fafbfc);
 $option-search-input-border-radius: var(--rp-option-search-input-border-radius, 1px);
 $option-search-input-border: var(--rp-option-search-input-border, none);
@@ -193,20 +188,20 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
     }
   }
   &:before {
-    -webkit-mask-image: $option-search-icon-url;
+    -webkit-mask-image: $search-icon-url;
     -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: $option-search-icon-size $option-search-icon-size;
-    background: $option-search-icon-color;
+    -webkit-mask-size: $search-icon-size $search-icon-size;
+    background: $search-icon-color;
     content: "";
-    height: $option-search-icon-size;
-    margin: $option-search-icon-top-margin $option-search-icon-side-margin 0 $option-search-icon-side-margin;
-    mask-image: $option-search-icon-url;
+    height: $search-icon-size;
+    margin: $search-icon-top-margin $search-icon-side-margin 0 $search-icon-side-margin;
+    mask-image: $search-icon-url;
     mask-repeat: no-repeat;
-    mask-size: $option-search-icon-size $option-search-icon-size;
-    opacity: $option-search-icon-opacity;
+    mask-size: $search-icon-size $search-icon-size;
+    opacity: $search-icon-opacity;
     position: absolute;
     vertical-align: middle;
-    width: $option-search-icon-size;
+    width: $search-icon-size;
     z-index: 1;
   }
   :not([dir='rtl']) & {

source/themes/simple/_search-icon.scss

@@ -0,0 +1,8 @@
+// search
+$search-icon-color: var(--rp-input-text-color, #5e6066) !default;
+$search-icon-opacity: var(--rp-search-icon-opacity, 0.65) !default;
+$search-icon-opacity-focus: var(--rp-search-icon-hover-focus, 1) !default; 
+$search-icon-side-margin: var(--rp-search-icon-size, 18.5px) !default;
+$search-icon-size: var(--rp-search-icon-size, 15px) !default;
+$search-icon-top-margin: var(--rp-search-icon-size, 16.5px) !default;
+$search-icon-url: var(--rp-search-icon-url, url("#{$theme-assets-path}/search.svg")) !default;

stories/Input.stories.js

@@ -217,4 +217,15 @@ storiesOf('Input', module)
         label="Click Me to Focus"
       />
     ))
+  )
+  .add(
+    'with search',
+    withState({ value: '' }, (store) => (
+      <Input
+        value={store.state.value}
+        onChange={(value) => store.set({ value })}
+        label="Click Me to Focus"
+        hasSearch
+      />
+    ))
   );