From 3990a426831c138c0722326e34f52b100aba4846 Mon Sep 17 00:00:00 2001 From: pranav agarwal Date: Wed, 15 Jul 2020 13:37:42 +0530 Subject: [PATCH 1/7] updated to use native input --- .../terra-search-field/src/SearchField.jsx | 8 +- .../src/SearchField.module.scss | 93 +++++++++++++++---- .../SearchField.module.scss | 42 ++++++++- .../SearchField.module.scss | 39 ++++++++ 4 files changed, 161 insertions(+), 21 deletions(-) diff --git a/packages/terra-search-field/src/SearchField.jsx b/packages/terra-search-field/src/SearchField.jsx index e306de43361..06db9292625 100644 --- a/packages/terra-search-field/src/SearchField.jsx +++ b/packages/terra-search-field/src/SearchField.jsx @@ -6,7 +6,7 @@ import ThemeContext from 'terra-theme-context'; import Button from 'terra-button'; import * as KeyCode from 'keycode-js'; import IconSearch from 'terra-icon/lib/icon/IconSearch'; -import Input from 'terra-form-input'; +// import Input from 'terra-form-input'; import { injectIntl, intlShape } from 'react-intl'; import styles from './SearchField.module.scss'; @@ -273,17 +273,17 @@ class SearchField extends React.Component { return (
- {clearButton} diff --git a/packages/terra-search-field/src/SearchField.module.scss b/packages/terra-search-field/src/SearchField.module.scss index 0df58a1183d..c5eebbba312 100644 --- a/packages/terra-search-field/src/SearchField.module.scss +++ b/packages/terra-search-field/src/SearchField.module.scss @@ -18,22 +18,6 @@ position: relative; } - .input { - appearance: none; - border-bottom-left-radius: var(--terra-search-field-input-border-bottom-left-radius, 3px); - border-bottom-right-radius: 0; - border-top-left-radius: var(--terra-search-field-input-border-top-left-radius, 3px); - border-top-right-radius: 0; - flex: 1 1 auto; - margin-bottom: var(--terra-search-field-input-margin-bottom, 0); - margin-left: var(--terra-search-field-input-margin-left, 0); - margin-right: var(--terra-search-field-input-margin-right, 0); - margin-top: var(--terra-search-field-input-margin-top, 0); - min-width: 0; - outline-offset: -0.143em; // Adjust the outline offset for search input in Safari. - padding-right: var(--terra-search-field-input-padding-right, 2.28571rem); // Match the padding to width of the clear button - } - .input::-ms-clear, .input::-ms-reveal { display: none; @@ -103,6 +87,83 @@ display: flex; width: 100%; } + } + + .input { + appearance: none; + background-color: var(--terra-search-field-input-background-color, #fff); + background-image: var(--terra-search-field-input-background-image); + background-position: 0 100%; + background-repeat: no-repeat; + background-size: var(--terra-search-field-input-background-size); + border: var(--terra-search-field-input-border, 1px solid #dedfe0); + border-bottom-left-radius: var(--terra-search-field-input-border-bottom-left-radius, 3px); + border-bottom-right-radius: 0; + border-top-left-radius: var(--terra-search-field-input-border-top-left-radius, 3px); + border-top-right-radius: 0; + box-shadow: var(--terra-search-field-input-box-shadow); + color: var(--terra-search-field-input-color, #1c1f21); + flex: 1 1 auto; + font-family: inherit; + font-size: var(--terra-search-field-input-font-size, 1.142857rem); + height: var(--terra-search-field-input-height, 2.142857rem); + line-height: var(--terra-search-field-input-line-height, 1.25); + margin-bottom: var(--terra-search-field-input-margin-bottom, 0); + margin-left: var(--terra-search-field-input-margin-left, 0); + margin-right: var(--terra-search-field-input-margin-right, 0); + margin-top: var(--terra-search-field-input-margin-top, 0); + min-width: 0; + outline-offset: -0.143em; // Adjust the outline offset for search input in Safari. + padding-bottom: var(--terra-search-field-input-padding-bottom, 0.28571rem); + padding-left: var(--terra-search-field-input-padding-left, 0.28571rem); + padding-right: var(--terra-search-field-input-padding-right, 2.28571rem); // Match the padding to width of the clear button + padding-top: var(--terra-search-field-input-padding-top, 0.28571rem); + transition-duration: var(--terra-search-field-input-transition-duration, 0s); + transition-property: background-size; + transition-timing-function: var(--terra-search-field-input-transition-timing-function, ease); + width: 100%; + + &::placeholder { + color: var(--terra-search-field-input-placeholder-color, rgba(25, 32, 35, 0.53)); + font-style: var(--terra-search-field-input-placeholder-font-style); + opacity: 1; + } + + &:hover { + background-color: var(--terra-search-field-input-hover-background-color, #fff); + border: var(--terra-search-field-input-hover-border, 1px solid #dedfe0); + color: var(--terra-search-field-input-hover-color); + } + + &[disabled] { + background-color: var(--terra-search-field-input-disabled-background-color, rgba(111, 116, 119, 0.2)); + border: var(--terra-search-field-input-disabled-border, 1px solid #868a8c); + color: var(--terra-search-field-input-disabled-color, #1c1f21); + cursor: default; + opacity: var(--terra-search-field-input-disabled-opacity, 0.25); + pointer-events: none; + } + + &[disabled]::placeholder { + color: var(--terra-search-field-input-placeholder-disabled-color, rgba(25, 32, 35, 0.53)); + font-style: var(--terra-search-field-input-placeholder-disabled-font-style); + } + &:focus { + background-color: var(--terra-search-field-input-focus-background-color, #fff); + background-size: var(--terra-search-field-input-focus-background-size); + border: var(--terra-search-field-input-focus-border, 1px solid #4cb2e9); + box-shadow: var(--terra-search-field-input-focus-box-shadow); + color: var(--terra-search-field-input-focus-color); + outline: none; + + [dir=ltr] & { + box-shadow: var(--terra-search-field-input-focus-ltr-box-shadow); + } + + [dir=rtl] & { + box-shadow: var(--terra-search-field-input-focus-rtl-box-shadow); + } + } } } diff --git a/packages/terra-search-field/src/clinical-lowlight-theme/SearchField.module.scss b/packages/terra-search-field/src/clinical-lowlight-theme/SearchField.module.scss index f4eb10a368e..fb87c03cbe8 100644 --- a/packages/terra-search-field/src/clinical-lowlight-theme/SearchField.module.scss +++ b/packages/terra-search-field/src/clinical-lowlight-theme/SearchField.module.scss @@ -25,7 +25,47 @@ --terra-search-field-button-margin-right: 0; --terra-search-field-button-margin-top: 0; --terra-search-field-button-focus-box-shadow: #004c76; - + + --terra-search-field-input-background-color: #222a2e; + --terra-search-field-input-background-image: none; + --terra-search-field-input-background-size: auto; + --terra-search-field-input-border: 1px solid #181b1d; + --terra-search-field-input-box-shadow: none; + --terra-search-field-input-color: #b2b5b6; + --terra-search-field-input-font-size: 1.14285714rem; + --terra-search-field-input-height: 2.14285714rem; + --terra-search-field-input-line-height: 1.25; + --terra-search-field-input-padding-bottom: 0.28571rem; + --terra-search-field-input-padding-left: 0.28571rem; + --terra-search-field-input-padding-top: 0.28571rem; + --terra-search-field-input-transition-duration: 0s; + --terra-search-field-input-transition-timing-function: ease; + + --terra-search-field-input-hover-background-color: #222a2e; + --terra-search-field-input-hover-color: #b2b5b6; + --terra-search-field-input-hover-border: 1px solid #181b1d; + + --terra-search-field-input-placeholder-color: #6f7477; + --terra-search-field-input-placeholder-font-style: normal; + + --terra-search-field-input-disabled-background-color: #1d2529; + --terra-search-field-input-disabled-border: 1px solid #242b2b; + --terra-search-field-input-disabled-color: #404344; + --terra-search-field-input-disabled-opacity: 0.25; + + --terra-search-field-input-placeholder-disabled-color: #6f7477; + --terra-search-field-input-placeholder-disabled-font-style: normal; + + --terra-search-field-input-focus-background-color: #222a2e; + --terra-search-field-input-focus-border: 1px solid #004c76; + --terra-search-field-input-focus-box-shadow: 0 0 1px 3px #004c76, 0 0 7px 4px #004c76; + --terra-search-field-input-focus-color: #b2b5b6; + --terra-search-field-input-focus-background-size: auto; + + + --terra-search-field-input-focus-ltr-box-shadow: none; + --terra-search-field-input-focus-rtl-box-shadow: none; + @include terra-inline-svg-var('--terra-search-field-clear-icon-background-image', ''); } } diff --git a/packages/terra-search-field/src/orion-fusion-theme/SearchField.module.scss b/packages/terra-search-field/src/orion-fusion-theme/SearchField.module.scss index b4e31c8eead..0cef36eac6e 100644 --- a/packages/terra-search-field/src/orion-fusion-theme/SearchField.module.scss +++ b/packages/terra-search-field/src/orion-fusion-theme/SearchField.module.scss @@ -26,6 +26,45 @@ --terra-search-field-button-margin-top: 0; --terra-search-field-button-focus-box-shadow: inset 0 3rem 1.5rem -2rem #f4f4f4, 0 0 1px 1px rgba(255, 255, 255, 0.65), 0 0 2px 3px rgba(76, 178, 233, 0.5), 0 0 6px 4px rgba(76, 178, 233, 0.3); + --terra-search-field-input-background-color: #fff; + --terra-search-field-input-background-image: none; + --terra-search-field-input-background-size: auto; + --terra-search-field-input-border: 1px solid #dedfe0; + --terra-search-field-input-box-shadow: none; + --terra-search-field-input-color: #1c1f21; + --terra-search-field-input-font-size: 1rem; + --terra-search-field-input-height: 2.16667rem; + --terra-search-field-input-line-height: 1.25; + --terra-search-field-input-padding-bottom: 0.25rem; + --terra-search-field-input-padding-left: 0.25rem; + --terra-search-field-input-padding-top: 0.25rem; + --terra-search-field-input-transition-duration: 0s; + --terra-search-field-input-transition-timing-function: ease; + + --terra-search-field-input-hover-background-color: #fff; + --terra-search-field-input-hover-border: 1px solid #dedfe0; + --terra-search-field-input-hover-color: #1c1f21; + + --terra-search-field-input-placeholder-color: #767676; + --terra-search-field-input-placeholder-font-style: normal; + + --terra-search-field-input-disabled-background-color: #f4f4f4; + --terra-search-field-input-disabled-border: 1px solid #b2b5b6; + --terra-search-field-input-disabled-color: #9b9fa1; + --terra-search-field-input-disabled-opacity: 1; + + --terra-search-field-input-placeholder-disabled-color: #c4c6c7; + --terra-search-field-input-placeholder-disabled-font-style: normal; + + --terra-search-field-input-focus-background-color: #fff; + --terra-search-field-input-focus-border: 1px solid #4cb2e9; + --terra-search-field-input-focus-box-shadow: 0 0 8px #a6d9f4; + --terra-search-field-input-focus-color: #1c1f21; + --terra-search-field-input-focus-background-size: auto; + + --terra-search-field-input-focus-ltr-box-shadow: 0 0 8px #a6d9f4; + --terra-search-field-input-focus-rtl-box-shadow: 0 0 8px #a6d9f4; + @include terra-inline-svg-var('--terra-search-field-clear-icon-background-image', ''); } } From fca32de052ffe8736a785c2131db508c76f7fc48 Mon Sep 17 00:00:00 2001 From: pranav agarwal Date: Wed, 15 Jul 2020 13:38:19 +0530 Subject: [PATCH 2/7] update jest snapshots and changelog --- packages/terra-search-field/CHANGELOG.md | 5 + .../__snapshots__/SearchField.test.jsx.snap | 123 ++++-------------- 2 files changed, 28 insertions(+), 100 deletions(-) diff --git a/packages/terra-search-field/CHANGELOG.md b/packages/terra-search-field/CHANGELOG.md index c70bbc13ab7..f7f931367e0 100644 --- a/packages/terra-search-field/CHANGELOG.md +++ b/packages/terra-search-field/CHANGELOG.md @@ -3,6 +3,11 @@ ChangeLog Unreleased ---------- +### Removed +* Removed `terra-form-input` from dependencies. + +### Changed +* Updated `terra-form-input` to `native input`. 3.53.0 - (July 7, 2020) ------------------ diff --git a/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap b/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap index 6b7317aef4b..28955ca7192 100644 --- a/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap +++ b/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap @@ -77,36 +77,17 @@ exports[`Snapshots correctly applies the theme context className 1`] = `
- - - + />
@@ -419,20 +377,15 @@ exports[`Snapshots renders a disabled search field with a value 1`] = `
-
@@ -465,20 +418,15 @@ exports[`Snapshots renders a search field that displays as a block to fill its c
-
@@ -638,20 +576,15 @@ exports[`Snapshots renders a search field with a value 1`] = `
- @@ -702,21 +635,15 @@ exports[`Snapshots renders a search field with an aria-label 1`] = `
-
@@ -749,20 +676,16 @@ exports[`Snapshots renders a search field with an aria-label using prop 1`] = `
-
From 978b0772853b84e533b64882f8961e1ef4baf8cc Mon Sep 17 00:00:00 2001 From: pranav agarwal Date: Wed, 15 Jul 2020 13:41:30 +0530 Subject: [PATCH 3/7] removed terra-form-input from dependencies --- packages/terra-search-field/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/terra-search-field/package.json b/packages/terra-search-field/package.json index da874b3f35c..efc6596ce02 100644 --- a/packages/terra-search-field/package.json +++ b/packages/terra-search-field/package.json @@ -31,7 +31,6 @@ "keycode-js": "^2.0.1", "prop-types": "^15.5.8", "terra-button": "^3.43.0", - "terra-form-input": "^3.7.0", "terra-icon": "^3.33.0", "terra-mixins": "^1.36.0", "terra-theme-context": "^1.0.0" From e87bc5c5b9760c13bda762afd10b3f163229b3f5 Mon Sep 17 00:00:00 2001 From: pranav agarwal Date: Fri, 17 Jul 2020 10:27:01 +0530 Subject: [PATCH 4/7] minor changes --- packages/terra-search-field/src/SearchField.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/terra-search-field/src/SearchField.jsx b/packages/terra-search-field/src/SearchField.jsx index 06db9292625..f9dec981a48 100644 --- a/packages/terra-search-field/src/SearchField.jsx +++ b/packages/terra-search-field/src/SearchField.jsx @@ -6,7 +6,6 @@ import ThemeContext from 'terra-theme-context'; import Button from 'terra-button'; import * as KeyCode from 'keycode-js'; import IconSearch from 'terra-icon/lib/icon/IconSearch'; -// import Input from 'terra-form-input'; import { injectIntl, intlShape } from 'react-intl'; import styles from './SearchField.module.scss'; From 7c7364dc819baa811c938fa9d5d90b6a204f0d02 Mon Sep 17 00:00:00 2001 From: pranav agarwal Date: Tue, 21 Jul 2020 13:30:34 +0530 Subject: [PATCH 5/7] updated color for placeholder --- .../src/SearchField.module.scss | 12 ++++++------ .../SearchField.module.scss | 2 +- .../SearchField.module.scss | 2 +- .../doc/example/SearchFieldPlaceholder.jsx | 2 +- .../PlaceholderSearchField.test.jsx | 2 +- .../SearchFieldWithPlaceholder.test.jsx | 2 +- ...earchFieldWithPlaceholderDisabled.test.jsx | 4 ++++ .../With_Placeholder[placeholder].png | Bin 2494 -> 2608 bytes ...With_Placeholder_Disabled[placeholder].png | Bin 0 -> 2139 bytes .../With_Placeholder[placeholder].png | Bin 2677 -> 3008 bytes ...With_Placeholder_Disabled[placeholder].png | Bin 0 -> 2378 bytes .../With_Placeholder[placeholder].png | Bin 2067 -> 2210 bytes ...With_Placeholder_Disabled[placeholder].png | Bin 0 -> 1774 bytes .../tests/wdio/search-field-spec.js | 9 +++++++-- 14 files changed, 22 insertions(+), 13 deletions(-) create mode 100644 packages/terra-search-field/src/terra-dev-site/test/search-field/SearchFieldWithPlaceholderDisabled.test.jsx create mode 100644 packages/terra-search-field/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/search-field-spec/With_Placeholder_Disabled[placeholder].png create mode 100644 packages/terra-search-field/tests/wdio/__snapshots__/reference/en/chrome_medium/search-field-spec/With_Placeholder_Disabled[placeholder].png create mode 100644 packages/terra-search-field/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/search-field-spec/With_Placeholder_Disabled[placeholder].png diff --git a/packages/terra-search-field/src/SearchField.module.scss b/packages/terra-search-field/src/SearchField.module.scss index c5eebbba312..3fdd78b173f 100644 --- a/packages/terra-search-field/src/SearchField.module.scss +++ b/packages/terra-search-field/src/SearchField.module.scss @@ -92,10 +92,10 @@ .input { appearance: none; background-color: var(--terra-search-field-input-background-color, #fff); - background-image: var(--terra-search-field-input-background-image); + background-image: none; background-position: 0 100%; background-repeat: no-repeat; - background-size: var(--terra-search-field-input-background-size); + background-size: auto; border: var(--terra-search-field-input-border, 1px solid #dedfe0); border-bottom-left-radius: var(--terra-search-field-input-border-bottom-left-radius, 3px); border-bottom-right-radius: 0; @@ -124,8 +124,8 @@ width: 100%; &::placeholder { - color: var(--terra-search-field-input-placeholder-color, rgba(25, 32, 35, 0.53)); - font-style: var(--terra-search-field-input-placeholder-font-style); + color: var(--terra-search-field-input-placeholder-color, rgba(21, 33, 41, 0.62)); + font-style: var(--terra-search-field-input-placeholder-font-style, italic); opacity: 1; } @@ -145,8 +145,8 @@ } &[disabled]::placeholder { - color: var(--terra-search-field-input-placeholder-disabled-color, rgba(25, 32, 35, 0.53)); - font-style: var(--terra-search-field-input-placeholder-disabled-font-style); + color: var(--terra-search-field-input-placeholder-disabled-color, rgba(21, 33, 41, 0.62)); + font-style: var(--terra-search-field-input-placeholder-disabled-font-style, italic); } &:focus { diff --git a/packages/terra-search-field/src/clinical-lowlight-theme/SearchField.module.scss b/packages/terra-search-field/src/clinical-lowlight-theme/SearchField.module.scss index fb87c03cbe8..bc0540ae7e7 100644 --- a/packages/terra-search-field/src/clinical-lowlight-theme/SearchField.module.scss +++ b/packages/terra-search-field/src/clinical-lowlight-theme/SearchField.module.scss @@ -54,7 +54,7 @@ --terra-search-field-input-disabled-opacity: 0.25; --terra-search-field-input-placeholder-disabled-color: #6f7477; - --terra-search-field-input-placeholder-disabled-font-style: normal; + --terra-search-field-input-placeholder-disabled-font-style: italic; --terra-search-field-input-focus-background-color: #222a2e; --terra-search-field-input-focus-border: 1px solid #004c76; diff --git a/packages/terra-search-field/src/orion-fusion-theme/SearchField.module.scss b/packages/terra-search-field/src/orion-fusion-theme/SearchField.module.scss index 0cef36eac6e..507829271ec 100644 --- a/packages/terra-search-field/src/orion-fusion-theme/SearchField.module.scss +++ b/packages/terra-search-field/src/orion-fusion-theme/SearchField.module.scss @@ -45,7 +45,7 @@ --terra-search-field-input-hover-border: 1px solid #dedfe0; --terra-search-field-input-hover-color: #1c1f21; - --terra-search-field-input-placeholder-color: #767676; + --terra-search-field-input-placeholder-color: #707070; --terra-search-field-input-placeholder-font-style: normal; --terra-search-field-input-disabled-background-color: #f4f4f4; diff --git a/packages/terra-search-field/src/terra-dev-site/doc/example/SearchFieldPlaceholder.jsx b/packages/terra-search-field/src/terra-dev-site/doc/example/SearchFieldPlaceholder.jsx index 4833e0ded28..786d8c39e26 100644 --- a/packages/terra-search-field/src/terra-dev-site/doc/example/SearchFieldPlaceholder.jsx +++ b/packages/terra-search-field/src/terra-dev-site/doc/example/SearchFieldPlaceholder.jsx @@ -11,7 +11,7 @@ const SearchFieldPlaceholder = () => { return (

{message}

- +
); }; diff --git a/packages/terra-search-field/src/terra-dev-site/test/search-field/PlaceholderSearchField.test.jsx b/packages/terra-search-field/src/terra-dev-site/test/search-field/PlaceholderSearchField.test.jsx index 80def4a92fb..3886fa032dc 100644 --- a/packages/terra-search-field/src/terra-dev-site/test/search-field/PlaceholderSearchField.test.jsx +++ b/packages/terra-search-field/src/terra-dev-site/test/search-field/PlaceholderSearchField.test.jsx @@ -1,4 +1,4 @@ import React from 'react'; import SearchField from '../../../SearchField'; -export default () => ; +export default () => ; diff --git a/packages/terra-search-field/src/terra-dev-site/test/search-field/SearchFieldWithPlaceholder.test.jsx b/packages/terra-search-field/src/terra-dev-site/test/search-field/SearchFieldWithPlaceholder.test.jsx index 80def4a92fb..3886fa032dc 100644 --- a/packages/terra-search-field/src/terra-dev-site/test/search-field/SearchFieldWithPlaceholder.test.jsx +++ b/packages/terra-search-field/src/terra-dev-site/test/search-field/SearchFieldWithPlaceholder.test.jsx @@ -1,4 +1,4 @@ import React from 'react'; import SearchField from '../../../SearchField'; -export default () => ; +export default () => ; diff --git a/packages/terra-search-field/src/terra-dev-site/test/search-field/SearchFieldWithPlaceholderDisabled.test.jsx b/packages/terra-search-field/src/terra-dev-site/test/search-field/SearchFieldWithPlaceholderDisabled.test.jsx new file mode 100644 index 00000000000..0ec4549db65 --- /dev/null +++ b/packages/terra-search-field/src/terra-dev-site/test/search-field/SearchFieldWithPlaceholderDisabled.test.jsx @@ -0,0 +1,4 @@ +import React from 'react'; +import SearchField from '../../../SearchField'; + +export default () => ; diff --git a/packages/terra-search-field/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/search-field-spec/With_Placeholder[placeholder].png b/packages/terra-search-field/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/search-field-spec/With_Placeholder[placeholder].png index 1e75d8f5961d6ddbff6efc9985e76e56a99b326e..40c69984b5827035225b3aa8ec6ad5d34a2d40b4 100644 GIT binary patch delta 2585 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 diff --git a/packages/terra-search-field/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/search-field-spec/With_Placeholder_Disabled[placeholder].png b/packages/terra-search-field/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/search-field-spec/With_Placeholder_Disabled[placeholder].png new file mode 100644 index 0000000000000000000000000000000000000000..b5eaabea84799f0a26ae5d5e369dbe6370bb3b42 GIT binary patch literal 2139 zcmYM0dmz($8^GO8XE~G^`XzB}BWh$;E;TwaigFt(ljY9QkdjP}l-P#FvBPRwDv8t2 zay?XDrR+jk^S;gHEr+?)PD(R7Z_9BzKkxg;`^WEld%l=o0ezOR4Ny6fyio;JI(~$MVKnVe<`-XUX~9g^dvnh}lu~>+m;SYzj+0+L zXMSAU@%C(z-FbiRR-{uxNDpKtZc;8-*k}u%#lXCw^~~c@~Mp4YE~lB z_{}NBem<6#FS+588k|>jW0pKm=+UwDu?r2y@Y8yVg^l2+&`f{>9-d8rr?=)57 z0#UuwMWWbaX5S1{k2Q~_U^jTNK54!^zvO}JSu0dzHJ@yB^E2jV*T-^qt%k$v?Io$&CRX8Noe|kw}9i(Q10M>H`QCH$^?2QH*rYzyF7l zX+Qa-KGl46b#7#Nxu5!FNw@6X;$f-#EI4&;AC`sMVsC>^n(Y)v9FcMl{E}78FJ{h% zBlDR~IC1pV1QxdrE$Q%g^o8r2S z-)2$z?dPohUIu(uDz9C_YX{NHO2x1(QJ2F-M^P zA^J-K>v0XHK%A3!f`_8_sc2JPgyvxtFrE`;3ZJY=J;87PU9RkN$L+s4@cS`S64{xB zvfmgA8_c}QY>s%~b~8u_aLI~bQY;JONdf((+|A`YtoSzg6H}or1`N7GejsHZW((6E z-nGM%$RWpUMqkmBtK2NgB(osW4_WZ69h0xA=3?ocpk2Q))uG#&PL^`H8cR|F&(;wH zk@pDxMI}5OLr@M4UWoxVK=yxOJr9h#6a6C_8j6$kXLyf;NoS?uibsDeRo@u!6zuPH zD`ia!3pJ(aA`Mm?{q?F2_;M=wj5Ow|b;E+EbYECy?|j!4EM4*NVI&iF`m=KJX8?h< zJt~)V7^cdIg+lig04u@bv=7XlZACE2vA74} zHDL{1SLJo%EyEG~b~M~lkTYPS0|C!(AI$WjkRoy7+wK|G$oN+P^}|v%bv&Esj~4<0 z$N?M)1+E$mrkWFD@g~LP)0Z5})`$mxFfR8l;G-YPGwy(0CD;vA2V~D)QUc)nwoXLu zl>puc3|P~BqhXabc6L8KUrqnM;8|hDCck{pSv?LZQ?-}Ft7OoWaClhdcMx?I##XTp zL=h#mLWsUMDjM>haP+J+GG&;G-Z-A~vNgWSHc<@lGN3(|APpSDDn&B2dUw;}Z2xXI zjR)3u{QVO}Q(pG-u?C30ciY1%0Tk9ZmQ`CpyEb%6biVC5AQrRM-tyBjbe6nZ%p%4=^{J$rl;f?QjEyL+^ZF8JX@Orl5Ffvj-eivlItfqKz9Ks`r zvrrO24}Oqv{T(lal-STHaPOU@#q(_6)=l=1OR#iwkN5x25664t%GC!BtdyMYUacDF zfMETfze2Ijm8PJn7QbU*@pJ{sK=4ERSnF5{ATHxXRk~1)< zfwV^<@pMfow^ryQ~VFiNbrMc z$2s7X+uf501)}tj#;D!&$$`vUyc3@Eq=MdKy2J`RB?r zO;#3O*cy&m4bE!1ICIVuRh4Zu5Zm%qu)fdc7HGwe7m&Cb-5=XRV`EB0Q+};>fB@?F woA4L5#f3wOw}7n@1Hl&))}=vpkP#ML7Z^z%r$W0oLazlaKc7HCqgQnP-xGcy)&Kwi literal 0 HcmV?d00001 diff --git a/packages/terra-search-field/tests/wdio/__snapshots__/reference/en/chrome_medium/search-field-spec/With_Placeholder[placeholder].png b/packages/terra-search-field/tests/wdio/__snapshots__/reference/en/chrome_medium/search-field-spec/With_Placeholder[placeholder].png index 827065638e234bc86c108ed6a562958b6d7c07d9..36bfe5bdd4cae51cc5c7fd6166568a9727960590 100644 GIT binary patch literal 3008 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 delta 2655 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 literal 0 HcmV?d00001 diff --git a/packages/terra-search-field/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/search-field-spec/With_Placeholder[placeholder].png b/packages/terra-search-field/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/search-field-spec/With_Placeholder[placeholder].png index e772669d3160f311dbfeb4a11e7b8561b2c8cc1f..31db3bc968074606fd95aa73e390bbd67945d669 100644 GIT binary patch delta 2185 zcmV;42zK|A5TX%~F@FeKNkl($+WqA5TI;0(p6PJpJ_3WM^md%QVoqMdvO}OiWN+UCnpjeaH0l zG;wip6c!dzR8++M_T`sfa{2OQN=i!jCA)X;Mk$3sM9?%1!;&RS*tKgHcjMy4i=?Ea z;B-1M%?~2N&nYi2XTydKy!z^^MBKP>gZ=yWvvK1_ynkLVbJGAJLgy~k)YLFDGecQf z88(}Zt5>h`?z``jl9Iwh4?VZzwFE-psbb$&_!4TM{C?$Xt(S6RJ!H8z_K!{Wt@ z*|~Ek@qh907_MKxPE}PE!^6Yqy3W?ETS-q($8hG%8BU%&iBbxe%SA~^2~MYzQ>RXG z?bPJvn|=HCv1iX7d_Et&y}cN^y1IDs$tO8*-~h?V$(%lYnmg6m z*~!_nXW6-PC*|ek1Ofq?nwm&YPiMu76*M$75C{bL>Z`BVvSkZTJn;m{$;p(Il;C!| zG0hL61W|%0L6jg$5G6!KMIlNMC5RG434fvlQGzI8Sw;r`zH|vuf+#_hAW9Gsln6=$ z5rskLF0Ea=mZYR4+S=MUapDBg(b240wTgA?)-g0R#K6D+1qB5d($mv%I-PWPcaxQs z#leFIv0AMdva+&hX=x#1$&w{3TC@nmg$ozR%ge)RwPLke*}HcyHk*z9{(dquGk-}< zO~sIrkwJfdKXE-sFUP$)!f zY%CFWyPXKT-A;t2X^04SDijKF>eMNko0~BxrASCfzz`iBO>S;3UwrWeFTC&q|Buh- zqqepdgV*b&sHh0j??aR@m&J=0Gc-6vVqzk5Id|?n+qZ8+lyHj%faCx0{@tq@$yQM;>_uP1DdcjpfUi^XQ|G;`jT>&(FthxAWR-uQA)V-+oI+ zM+ZB0?7(if)7sifYilbJnx+vE7Z*n`7$jnNco>__#&6|tIPiEptXZ>$*#dz8?d|QX zT)C3k+FCYk+Qcs@C@3H|H-8s{-EPP9`%xmy<@MM1^Tr!*u>ZgTG)?1n7cX|v+S)={ zc{xf1gC_ihXo4Y%S!^~N4u=DW!-36a<952PQ&(5Vi4!N7oSeikI51eeQ&-EJoo3encqMmQX1F4@`Hw12g=F)=a0`1m+) zzx_4?0|We4IXOABwY3orhcPraH}mz^Ut>6a{5ZwM#cbZZnQy-NhAUUDV6a#$ghC-^ zv)ODo91a`~2R54x)9*(_A)*jbh$uu9B8r?9IXqkPEPHnE;{EsEqoJXmk3X*B(4m9; z+2&B z2;g?RnalY2I89AWcsw2qDJdz8jg9fqM<3zy`3MGsJpTCOba!{t+1bf6&pd;!>%_;$ z^Vw&g@z`UJ5ex?T{$5eR^UrVNZxt12+(zRjjdSNOpkp#EFe1XQ_2P?vWoCMYrluxD1mV9lZW2Hf z3_2#$0wW^)7B7{S@=|FjB7#8!gqt)#Gz>Z>(}E-1OMimKEy7KLLC0iTU_`jbgxPdV zrUgg1cQodrTdh{6rlzo3t(Z&;fe81IaJz6gOiYZOC`Up9H-?9qoSejD`ZEiM!we1$ zk+yUxy2Fuxj0gii3^Fw}g~>FZi4rbey2SkuW4Du*wv^?W%lHq#DwS)u*mtY|0000< LMNUMnLIPldrXMQD delta 2040 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 { describe('With Placeholder', () => { before(() => browser.url('/#/raw/tests/terra-search-field/search-field/search-field-with-placeholder')); - // TODO: remove disabled color-contrast rule: https://github.com/cerner/terra-core/issues/2992 - Terra.it.validatesElement('placeholder', { rules: { 'color-contrast': { enabled: false } } }); + Terra.it.validatesElement('placeholder'); it('should enter a search term', () => { browser.setValue('input', 'Lorem'); @@ -58,6 +57,12 @@ Terra.describeViewports('Search Field', ['medium'], () => { Terra.it.validatesElement('with text'); }); + describe('With Placeholder Disabled', () => { + before(() => browser.url('/#/raw/tests/terra-search-field/search-field/search-field-with-placeholder-disabled')); + + Terra.it.validatesElement('placeholder'); + }); + describe('With Default Value', () => { before(() => browser.url('/#/raw/tests/terra-search-field/search-field/search-field-default-value')); From 468041b768518c627c8a09c4899fac523f83382b Mon Sep 17 00:00:00 2001 From: pranav agarwal Date: Tue, 21 Jul 2020 15:01:30 +0530 Subject: [PATCH 6/7] removed some unnecessary variables --- .../terra-search-field/src/SearchField.module.scss | 10 +++++----- .../clinical-lowlight-theme/SearchField.module.scss | 8 -------- .../src/orion-fusion-theme/SearchField.module.scss | 7 ------- 3 files changed, 5 insertions(+), 20 deletions(-) diff --git a/packages/terra-search-field/src/SearchField.module.scss b/packages/terra-search-field/src/SearchField.module.scss index 3fdd78b173f..076943a7e29 100644 --- a/packages/terra-search-field/src/SearchField.module.scss +++ b/packages/terra-search-field/src/SearchField.module.scss @@ -101,13 +101,13 @@ border-bottom-right-radius: 0; border-top-left-radius: var(--terra-search-field-input-border-top-left-radius, 3px); border-top-right-radius: 0; - box-shadow: var(--terra-search-field-input-box-shadow); + box-shadow: none; color: var(--terra-search-field-input-color, #1c1f21); flex: 1 1 auto; font-family: inherit; font-size: var(--terra-search-field-input-font-size, 1.142857rem); height: var(--terra-search-field-input-height, 2.142857rem); - line-height: var(--terra-search-field-input-line-height, 1.25); + line-height: 1.25; margin-bottom: var(--terra-search-field-input-margin-bottom, 0); margin-left: var(--terra-search-field-input-margin-left, 0); margin-right: var(--terra-search-field-input-margin-right, 0); @@ -118,9 +118,9 @@ padding-left: var(--terra-search-field-input-padding-left, 0.28571rem); padding-right: var(--terra-search-field-input-padding-right, 2.28571rem); // Match the padding to width of the clear button padding-top: var(--terra-search-field-input-padding-top, 0.28571rem); - transition-duration: var(--terra-search-field-input-transition-duration, 0s); + transition-duration: 0s; transition-property: background-size; - transition-timing-function: var(--terra-search-field-input-transition-timing-function, ease); + transition-timing-function: ease; width: 100%; &::placeholder { @@ -151,7 +151,7 @@ &:focus { background-color: var(--terra-search-field-input-focus-background-color, #fff); - background-size: var(--terra-search-field-input-focus-background-size); + background-size: auto; border: var(--terra-search-field-input-focus-border, 1px solid #4cb2e9); box-shadow: var(--terra-search-field-input-focus-box-shadow); color: var(--terra-search-field-input-focus-color); diff --git a/packages/terra-search-field/src/clinical-lowlight-theme/SearchField.module.scss b/packages/terra-search-field/src/clinical-lowlight-theme/SearchField.module.scss index bc0540ae7e7..e5a63a7e3a6 100644 --- a/packages/terra-search-field/src/clinical-lowlight-theme/SearchField.module.scss +++ b/packages/terra-search-field/src/clinical-lowlight-theme/SearchField.module.scss @@ -27,19 +27,13 @@ --terra-search-field-button-focus-box-shadow: #004c76; --terra-search-field-input-background-color: #222a2e; - --terra-search-field-input-background-image: none; - --terra-search-field-input-background-size: auto; --terra-search-field-input-border: 1px solid #181b1d; - --terra-search-field-input-box-shadow: none; --terra-search-field-input-color: #b2b5b6; --terra-search-field-input-font-size: 1.14285714rem; --terra-search-field-input-height: 2.14285714rem; - --terra-search-field-input-line-height: 1.25; --terra-search-field-input-padding-bottom: 0.28571rem; --terra-search-field-input-padding-left: 0.28571rem; --terra-search-field-input-padding-top: 0.28571rem; - --terra-search-field-input-transition-duration: 0s; - --terra-search-field-input-transition-timing-function: ease; --terra-search-field-input-hover-background-color: #222a2e; --terra-search-field-input-hover-color: #b2b5b6; @@ -60,8 +54,6 @@ --terra-search-field-input-focus-border: 1px solid #004c76; --terra-search-field-input-focus-box-shadow: 0 0 1px 3px #004c76, 0 0 7px 4px #004c76; --terra-search-field-input-focus-color: #b2b5b6; - --terra-search-field-input-focus-background-size: auto; - --terra-search-field-input-focus-ltr-box-shadow: none; --terra-search-field-input-focus-rtl-box-shadow: none; diff --git a/packages/terra-search-field/src/orion-fusion-theme/SearchField.module.scss b/packages/terra-search-field/src/orion-fusion-theme/SearchField.module.scss index 507829271ec..4718bb20cb4 100644 --- a/packages/terra-search-field/src/orion-fusion-theme/SearchField.module.scss +++ b/packages/terra-search-field/src/orion-fusion-theme/SearchField.module.scss @@ -27,19 +27,13 @@ --terra-search-field-button-focus-box-shadow: inset 0 3rem 1.5rem -2rem #f4f4f4, 0 0 1px 1px rgba(255, 255, 255, 0.65), 0 0 2px 3px rgba(76, 178, 233, 0.5), 0 0 6px 4px rgba(76, 178, 233, 0.3); --terra-search-field-input-background-color: #fff; - --terra-search-field-input-background-image: none; - --terra-search-field-input-background-size: auto; --terra-search-field-input-border: 1px solid #dedfe0; - --terra-search-field-input-box-shadow: none; --terra-search-field-input-color: #1c1f21; --terra-search-field-input-font-size: 1rem; --terra-search-field-input-height: 2.16667rem; - --terra-search-field-input-line-height: 1.25; --terra-search-field-input-padding-bottom: 0.25rem; --terra-search-field-input-padding-left: 0.25rem; --terra-search-field-input-padding-top: 0.25rem; - --terra-search-field-input-transition-duration: 0s; - --terra-search-field-input-transition-timing-function: ease; --terra-search-field-input-hover-background-color: #fff; --terra-search-field-input-hover-border: 1px solid #dedfe0; @@ -60,7 +54,6 @@ --terra-search-field-input-focus-border: 1px solid #4cb2e9; --terra-search-field-input-focus-box-shadow: 0 0 8px #a6d9f4; --terra-search-field-input-focus-color: #1c1f21; - --terra-search-field-input-focus-background-size: auto; --terra-search-field-input-focus-ltr-box-shadow: 0 0 8px #a6d9f4; --terra-search-field-input-focus-rtl-box-shadow: 0 0 8px #a6d9f4; From 2ee19f26d4d88edfbd14bda22497c848695689f8 Mon Sep 17 00:00:00 2001 From: pranav agarwal Date: Wed, 22 Jul 2020 01:49:58 +0530 Subject: [PATCH 7/7] updated changelog --- packages/terra-search-field/CHANGELOG.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/terra-search-field/CHANGELOG.md b/packages/terra-search-field/CHANGELOG.md index f7f931367e0..d96d03f2453 100644 --- a/packages/terra-search-field/CHANGELOG.md +++ b/packages/terra-search-field/CHANGELOG.md @@ -7,7 +7,12 @@ Unreleased * Removed `terra-form-input` from dependencies. ### Changed -* Updated `terra-form-input` to `native input`. +* Removed the terra-form-input and replaced it with a native input +* Updated wdio snapshots + +### Added +* Added new theme variables +* Added test for disabled search-field with placeholder 3.53.0 - (July 7, 2020) ------------------