diff --git a/CHANGELOG.md b/CHANGELOG.md index eaca1223..6c7eb924 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/package.json b/package.json index a8e238ac..a9aaaf2f 100644 --- a/package.json +++ b/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'", diff --git a/source/components/Input.js b/source/components/Input.js index 212b232e..b29010af 100644 --- a/source/components/Input.js +++ b/source/components/Input.js @@ -22,6 +22,7 @@ export type InputProps = { error?: string | Element, inputRef?: RefObject, showErrorState?: boolean, + hasSearch?: boolean, hideErrorState?: boolean, id?: string, isShowingErrorOnFocus: boolean, diff --git a/source/skins/simple/InputSkin.js b/source/skins/simple/InputSkin.js index a0772705..fed3b612 100644 --- a/source/skins/simple/InputSkin.js +++ b/source/skins/simple/InputSkin.js @@ -18,20 +18,38 @@ type Props = InputProps & { }; export const InputSkin = (props: Props) => { - const renderInput = (setFormFieldRef) => ( - - ); + const renderInput = (setFormFieldRef) => { + const { + theme, + themeId, + disabled, + hasSearch, + showErrorState, + hideErrorState, + error, + } = props; + + const input = ( + + ); + + return hasSearch ? ( +
{input}
+ ) : ( + input + ); + }; const useSelectionRenderer = (setFormFieldRef, option) => (
diff --git a/source/themes/simple/SimpleInput.scss b/source/themes/simple/SimpleInput.scss index 48d0f099..ef637e4d 100644 --- a/source/themes/simple/SimpleInput.scss +++ b/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 ---------- // diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss index d5909e4f..e461ebb0 100644 --- a/source/themes/simple/SimpleOptions.scss +++ b/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']) & { diff --git a/source/themes/simple/_search-icon.scss b/source/themes/simple/_search-icon.scss new file mode 100644 index 00000000..18111eac --- /dev/null +++ b/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; \ No newline at end of file diff --git a/stories/Input.stories.js b/stories/Input.stories.js index 132ffc60..8b0c7158 100644 --- a/stories/Input.stories.js +++ b/stories/Input.stories.js @@ -217,4 +217,15 @@ storiesOf('Input', module) label="Click Me to Focus" /> )) + ) + .add( + 'with search', + withState({ value: '' }, (store) => ( + store.set({ value })} + label="Click Me to Focus" + hasSearch + /> + )) );