From 1415f65ccc586944f67d8626519e177e0d74856f Mon Sep 17 00:00:00 2001 From: emyarod Date: Fri, 25 Sep 2020 11:50:05 -0500 Subject: [PATCH 1/7] fix(Search): add `disabled` prop --- packages/react/src/components/Search/Search.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js index 1dd0ef081b1e..bec2f3ad985b 100644 --- a/packages/react/src/components/Search/Search.js +++ b/packages/react/src/components/Search/Search.js @@ -31,6 +31,11 @@ export default class Search extends Component { */ defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + /** + * Specify whether the `` should be disabled + */ + disabled: PropTypes.bool, + /** * Specify a custom `id` for the input */ @@ -145,6 +150,7 @@ export default class Search extends Component { small, size = !small ? 'xl' : 'sm', light, + disabled, ...other } = this.props; @@ -175,6 +181,7 @@ export default class Search extends Component { autoComplete="off" {...other} type={type} + disabled={disabled} className={`${prefix}--search-input`} id={id} placeholder={placeHolderText} From 1514972358ee3c6905a9eb4b73d26225d3a129ef Mon Sep 17 00:00:00 2001 From: emyarod Date: Fri, 25 Sep 2020 11:50:24 -0500 Subject: [PATCH 2/7] docs(Search): expose `disabled` knob in storybook --- packages/react/src/components/Search/Search-story.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/Search/Search-story.js b/packages/react/src/components/Search/Search-story.js index 7548dc741c66..c5e3430f5b56 100644 --- a/packages/react/src/components/Search/Search-story.js +++ b/packages/react/src/components/Search/Search-story.js @@ -27,6 +27,7 @@ const props = () => ({ className: 'some-class', size: select('Size (size)', sizes, 'xl'), light: boolean('Light variant (light)', false), + disabled: boolean('Disabled (disabled)', false), name: text('Form item name (name)', ''), defaultValue: text('Default value (defaultValue)', ''), labelText: text('Label text (labelText)', 'Search'), From eb60ac1e5686b148d2bf1387fbf5b350f3ad60ed Mon Sep 17 00:00:00 2001 From: emyarod Date: Fri, 25 Sep 2020 12:15:47 -0500 Subject: [PATCH 3/7] chore: update snapshots --- packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index b84d59d0442e..47b7521bd713 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -4370,6 +4370,9 @@ Map { ], "type": "oneOfType", }, + "disabled": Object { + "type": "bool", + }, "id": Object { "type": "string", }, From 1ae3ee8293393586066b909b03153bf7ddc4e7b0 Mon Sep 17 00:00:00 2001 From: emyarod Date: Fri, 25 Sep 2020 14:21:54 -0500 Subject: [PATCH 4/7] feat(Search): add disabled class --- packages/react/src/components/Search/Search.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js index bec2f3ad985b..a66ddff04150 100644 --- a/packages/react/src/components/Search/Search.js +++ b/packages/react/src/components/Search/Search.js @@ -160,6 +160,7 @@ export default class Search extends Component { [`${prefix}--search`]: true, [`${prefix}--search--${size}`]: size, [`${prefix}--search--light`]: light, + [`${prefix}--search--disabled`]: disabled, [className]: className, }); From 35525d681ccf982a5133e281d4ba69b76864c066 Mon Sep 17 00:00:00 2001 From: emyarod Date: Fri, 25 Sep 2020 14:22:25 -0500 Subject: [PATCH 5/7] fix(search): apply disabled style to magnifier icon --- packages/components/src/components/search/_search.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss index 1f92814802a6..5f6a453d74e4 100644 --- a/packages/components/src/components/search/_search.scss +++ b/packages/components/src/components/search/_search.scss @@ -73,7 +73,7 @@ } } - .#{$prefix}--search-input[disabled] ~ .#{$prefix}--search-magnifier { + .#{$prefix}--search--disabled .#{$prefix}--search-magnifier { fill: $disabled; } From bc25ba7a6543d0660394521585185ec32105e002 Mon Sep 17 00:00:00 2001 From: emyarod Date: Fri, 25 Sep 2020 14:29:24 -0500 Subject: [PATCH 6/7] fix(Search): apply disabled button styles to clear button --- .../src/components/search/_search.scss | 21 +++++++++++++++---- .../react/src/components/Search/Search.js | 1 + 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss index 5f6a453d74e4..0e733fd5512c 100644 --- a/packages/components/src/components/search/_search.scss +++ b/packages/components/src/components/search/_search.scss @@ -73,10 +73,6 @@ } } - .#{$prefix}--search--disabled .#{$prefix}--search-magnifier { - fill: $disabled; - } - .#{$prefix}--search--light .#{$prefix}--search-input { background: $field-02; } @@ -213,6 +209,23 @@ } } + .#{$prefix}--search--disabled .#{$prefix}--search-close { + cursor: not-allowed; + + &:hover { + background-color: transparent; + border-bottom-color: transparent; + } + + &:hover::before { + background-color: transparent; + } + } + + .#{$prefix}--search--disabled svg { + fill: $disabled; + } + .#{$prefix}--search-close:focus, .#{$prefix}--search-close:active { &::before { diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js index a66ddff04150..0a395f23904a 100644 --- a/packages/react/src/components/Search/Search.js +++ b/packages/react/src/components/Search/Search.js @@ -193,6 +193,7 @@ export default class Search extends Component { />