From 4703ca68d392f62ea710364c789f716c39e5965f Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Tue, 15 Mar 2022 12:15:41 +0000 Subject: [PATCH 1/4] [DDW-1023]: add search icon to Input component --- source/components/Input.js | 1 + source/skins/simple/InputSkin.js | 46 +++++++++++++++++-------- source/themes/simple/SimpleInput.scss | 34 ++++++++++++++++++ source/themes/simple/SimpleOptions.scss | 25 ++++++-------- source/themes/simple/_search-icon.scss | 8 +++++ stories/Input.stories.js | 11 ++++++ 6 files changed, 96 insertions(+), 29 deletions(-) create mode 100644 source/themes/simple/_search-icon.scss 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..ac5b602e 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 @@ -15,6 +16,7 @@ $input-font-size: var(--rp-input-font-size, 16px) !default; $input-line-height: var(--rp-input-line-height, normal) !default; $input-outline-focus: var(--rp-input-outline-focus, none) !default; $input-padding: var(--rp-input-padding, 14px 20px) !default; +$input-search-padding: var(--rp-input-padding-search, 43px) !default; $input-text-color: var(--rp-input-text-color, #5e6066) !default; $input-text-color-disabled: var(--rp-input-text-color-disabled, rgba(#5e6066, 0.5)) !default; $input-width: var(--rp-input-width, 100%) !default; @@ -77,6 +79,38 @@ $input-placeholder-font-family: var(--rp-input-placeholder-font-family, $theme-f } } +.search { + position: relative; + + .input { + padding-left: $input-search-padding; + } + + &: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 + /> + )) ); From bf4d32ab8be792f05a57eecdf4b28d6a218ab313 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Tue, 15 Mar 2022 12:23:04 +0000 Subject: [PATCH 2/4] 1.0.3-next.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6fa67b1a..f42ea195 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.3", + "version": "1.0.3-next.2", "scripts": { "build": "cross-env yarn clean && yarn sass && yarn js", "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'", From 6d1c0f6cddbc18fd4144a16f3460a3205401a898 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Thu, 24 Mar 2022 15:10:10 +0000 Subject: [PATCH 3/4] remove extra padding --- source/themes/simple/SimpleInput.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/source/themes/simple/SimpleInput.scss b/source/themes/simple/SimpleInput.scss index ac5b602e..ef637e4d 100644 --- a/source/themes/simple/SimpleInput.scss +++ b/source/themes/simple/SimpleInput.scss @@ -16,7 +16,6 @@ $input-font-size: var(--rp-input-font-size, 16px) !default; $input-line-height: var(--rp-input-line-height, normal) !default; $input-outline-focus: var(--rp-input-outline-focus, none) !default; $input-padding: var(--rp-input-padding, 14px 20px) !default; -$input-search-padding: var(--rp-input-padding-search, 43px) !default; $input-text-color: var(--rp-input-text-color, #5e6066) !default; $input-text-color-disabled: var(--rp-input-text-color-disabled, rgba(#5e6066, 0.5)) !default; $input-width: var(--rp-input-width, 100%) !default; @@ -82,10 +81,6 @@ $input-placeholder-font-family: var(--rp-input-placeholder-font-family, $theme-f .search { position: relative; - .input { - padding-left: $input-search-padding; - } - &:focus-within { &:before { opacity: $search-icon-opacity-focus; From 6ddfbb8cbdc5cd3128b0e3657b49d6ef8dd55f82 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Thu, 24 Mar 2022 18:07:11 +0000 Subject: [PATCH 4/4] Update CHANGELOG.md --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 63de921b..f4b7aacb 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.3 - Add disabled state to Select component ([PR 196](https://github.com/input-output-hk/react-polymorph/pull/196))