From 5bec323118cca5b79b6aefab2533eabb3505b902 Mon Sep 17 00:00:00 2001 From: ishmatova Date: Tue, 25 Jul 2023 09:52:46 +0600 Subject: [PATCH 1/2] chore(Input): fix double border --- packages/react-ui/components/Input/Input.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/components/Input/Input.styles.ts b/packages/react-ui/components/Input/Input.styles.ts index b8240f91cf7..026472a2f40 100644 --- a/packages/react-ui/components/Input/Input.styles.ts +++ b/packages/react-ui/components/Input/Input.styles.ts @@ -76,7 +76,7 @@ export const styles = memoizeStyle({ focus(t: Theme) { return css` background-color: ${t.inputFocusedBg}; - border-color: ${t.inputBorderColorFocus} !important; + border-color: ${t.inputBorderColorFocus}; box-shadow: ${t.inputFocusShadow}; outline: none; z-index: 2; From edacd907af90cf3632e163f480e710f5c9f88479 Mon Sep 17 00:00:00 2001 From: ishmatova Date: Tue, 25 Jul 2023 11:25:59 +0600 Subject: [PATCH 2/2] chore: add test --- .../{chrome.png => focused/chrome/0.png} | 0 .../DateInput/With Error/focused/chrome/1.png | 3 +++ .../chrome2022/0.png} | 0 .../With Error/focused/chrome2022/1.png | 3 +++ .../chrome2022Dark/0.png} | 0 .../With Error/focused/chrome2022Dark/1.png | 3 +++ .../chrome8px/0.png} | 0 .../With Error/focused/chrome8px/1.png | 3 +++ .../chromeDark/0.png} | 0 .../With Error/focused/chromeDark/1.png | 3 +++ .../{firefox.png => focused/firefox/0.png} | 0 .../With Error/focused/firefox/1.png | 3 +++ .../firefox2022/0.png} | 0 .../With Error/focused/firefox2022/1.png | 3 +++ .../firefox2022Dark/0.png} | 0 .../With Error/focused/firefox2022Dark/1.png | 3 +++ .../firefox8px/0.png} | 0 .../With Error/focused/firefox8px/1.png | 3 +++ .../firefoxDark/0.png} | 0 .../With Error/focused/firefoxDark/1.png | 3 +++ .../images/DateInput/With Error/ie11.png | 3 --- .../images/DateInput/With Error/ie112022.png | 3 --- .../DateInput/With Error/ie112022Dark.png | 3 --- .../images/DateInput/With Error/ie118px.png | 3 --- .../images/DateInput/With Error/ie11Dark.png | 3 --- .../__stories__/DateInput.stories.tsx | 19 ++++++++++++++++++- 26 files changed, 48 insertions(+), 16 deletions(-) rename packages/react-ui/.creevey/images/DateInput/With Error/{chrome.png => focused/chrome/0.png} (100%) create mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome/1.png rename packages/react-ui/.creevey/images/DateInput/With Error/{chrome2022.png => focused/chrome2022/0.png} (100%) create mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome2022/1.png rename packages/react-ui/.creevey/images/DateInput/With Error/{chrome2022Dark.png => focused/chrome2022Dark/0.png} (100%) create mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome2022Dark/1.png rename packages/react-ui/.creevey/images/DateInput/With Error/{chrome8px.png => focused/chrome8px/0.png} (100%) create mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome8px/1.png rename packages/react-ui/.creevey/images/DateInput/With Error/{chromeDark.png => focused/chromeDark/0.png} (100%) create mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/focused/chromeDark/1.png rename packages/react-ui/.creevey/images/DateInput/With Error/{firefox.png => focused/firefox/0.png} (100%) create mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox/1.png rename packages/react-ui/.creevey/images/DateInput/With Error/{firefox2022.png => focused/firefox2022/0.png} (100%) create mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox2022/1.png rename packages/react-ui/.creevey/images/DateInput/With Error/{firefox2022Dark.png => focused/firefox2022Dark/0.png} (100%) create mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox2022Dark/1.png rename packages/react-ui/.creevey/images/DateInput/With Error/{firefox8px.png => focused/firefox8px/0.png} (100%) create mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox8px/1.png rename packages/react-ui/.creevey/images/DateInput/With Error/{firefoxDark.png => focused/firefoxDark/0.png} (100%) create mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/focused/firefoxDark/1.png delete mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/ie11.png delete mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/ie112022.png delete mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/ie112022Dark.png delete mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/ie118px.png delete mode 100644 packages/react-ui/.creevey/images/DateInput/With Error/ie11Dark.png diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/chrome.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome/0.png similarity index 100% rename from packages/react-ui/.creevey/images/DateInput/With Error/chrome.png rename to packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome/0.png diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome/1.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome/1.png new file mode 100644 index 00000000000..4e133fedc88 --- /dev/null +++ b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome/1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:00196ba214be7142fe7273d4d89d3b5aea463c076bf18b43babf9649cd3c0606 +size 4867 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/chrome2022.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome2022/0.png similarity index 100% rename from packages/react-ui/.creevey/images/DateInput/With Error/chrome2022.png rename to packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome2022/0.png diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome2022/1.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome2022/1.png new file mode 100644 index 00000000000..08935d27812 --- /dev/null +++ b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome2022/1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b035672f80ffe2df86c7e4e2441936f1d4ed7d0ef164e9a97a76f0995b42878e +size 5091 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/chrome2022Dark.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome2022Dark/0.png similarity index 100% rename from packages/react-ui/.creevey/images/DateInput/With Error/chrome2022Dark.png rename to packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome2022Dark/0.png diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome2022Dark/1.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome2022Dark/1.png new file mode 100644 index 00000000000..9ce4513959f --- /dev/null +++ b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome2022Dark/1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7608a6776def3d91f218e36ce0951a843f234d43dc89a67f37777dbafb1934cf +size 5145 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/chrome8px.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome8px/0.png similarity index 100% rename from packages/react-ui/.creevey/images/DateInput/With Error/chrome8px.png rename to packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome8px/0.png diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome8px/1.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome8px/1.png new file mode 100644 index 00000000000..ac0ea7d2fa7 --- /dev/null +++ b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chrome8px/1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b307d3c5f2c4fa03354b7d8a488d0d708f7437c4992d9f8f499a0c84ae43e929 +size 4850 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/chromeDark.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chromeDark/0.png similarity index 100% rename from packages/react-ui/.creevey/images/DateInput/With Error/chromeDark.png rename to packages/react-ui/.creevey/images/DateInput/With Error/focused/chromeDark/0.png diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/focused/chromeDark/1.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chromeDark/1.png new file mode 100644 index 00000000000..d25d51337d0 --- /dev/null +++ b/packages/react-ui/.creevey/images/DateInput/With Error/focused/chromeDark/1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:067344f6c0292419d004df383834692598be93e8fcbd0daeb801864690480c29 +size 4885 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/firefox.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox/0.png similarity index 100% rename from packages/react-ui/.creevey/images/DateInput/With Error/firefox.png rename to packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox/0.png diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox/1.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox/1.png new file mode 100644 index 00000000000..8e2f1f86adc --- /dev/null +++ b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox/1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:462a79053f56ddd9e8c5d4ff458eeab45f3a15354e7911871f9c1e1fb24ccaec +size 5004 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/firefox2022.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox2022/0.png similarity index 100% rename from packages/react-ui/.creevey/images/DateInput/With Error/firefox2022.png rename to packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox2022/0.png diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox2022/1.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox2022/1.png new file mode 100644 index 00000000000..3de7f66b7dc --- /dev/null +++ b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox2022/1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ecbc0fc82ea62cb30d83d8a0b6f171a4bb32f0801d97b5db271568ea6c718dfb +size 5314 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/firefox2022Dark.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox2022Dark/0.png similarity index 100% rename from packages/react-ui/.creevey/images/DateInput/With Error/firefox2022Dark.png rename to packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox2022Dark/0.png diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox2022Dark/1.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox2022Dark/1.png new file mode 100644 index 00000000000..f6bd647a563 --- /dev/null +++ b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox2022Dark/1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4f9706969d3c90dbb5d5fb1fc26ef8dbbe8c86bfb31a5bf4118abb3459f23110 +size 5021 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/firefox8px.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox8px/0.png similarity index 100% rename from packages/react-ui/.creevey/images/DateInput/With Error/firefox8px.png rename to packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox8px/0.png diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox8px/1.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox8px/1.png new file mode 100644 index 00000000000..4ce51f8ba55 --- /dev/null +++ b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefox8px/1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:39e25437abda9e34db1d8f066db9577ab821ca047b56ae9203c0878e7bc2dfd5 +size 5000 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/firefoxDark.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefoxDark/0.png similarity index 100% rename from packages/react-ui/.creevey/images/DateInput/With Error/firefoxDark.png rename to packages/react-ui/.creevey/images/DateInput/With Error/focused/firefoxDark/0.png diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefoxDark/1.png b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefoxDark/1.png new file mode 100644 index 00000000000..e89488fc180 --- /dev/null +++ b/packages/react-ui/.creevey/images/DateInput/With Error/focused/firefoxDark/1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c5af3c3924036779c8cba7aea88caf57efb30530c2d0bd74e2f9af089533db7a +size 4935 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/ie11.png b/packages/react-ui/.creevey/images/DateInput/With Error/ie11.png deleted file mode 100644 index 7b9683930ec..00000000000 --- a/packages/react-ui/.creevey/images/DateInput/With Error/ie11.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:429edcfe0ef23ef3e4833ad19f25030c42f2d7963ddb22da822da216f25f7549 -size 3628 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/ie112022.png b/packages/react-ui/.creevey/images/DateInput/With Error/ie112022.png deleted file mode 100644 index 3c55fc15b1a..00000000000 --- a/packages/react-ui/.creevey/images/DateInput/With Error/ie112022.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:5ed182ae82c34cc3dc4db047a3dd540025d6bbd41895fb00711e228ce18402dc -size 3752 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/ie112022Dark.png b/packages/react-ui/.creevey/images/DateInput/With Error/ie112022Dark.png deleted file mode 100644 index 83dc37dbd7a..00000000000 --- a/packages/react-ui/.creevey/images/DateInput/With Error/ie112022Dark.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:77ffec6064143d2387e842e23e1b64ee43dc732cdeb9c706c22ee5a74a5fd81b -size 3767 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/ie118px.png b/packages/react-ui/.creevey/images/DateInput/With Error/ie118px.png deleted file mode 100644 index 0db6e5cf84c..00000000000 --- a/packages/react-ui/.creevey/images/DateInput/With Error/ie118px.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:5d02088f8c45482af08a1c902d0c7b271eec9b2552a723c081a2271e58ed472d -size 3633 diff --git a/packages/react-ui/.creevey/images/DateInput/With Error/ie11Dark.png b/packages/react-ui/.creevey/images/DateInput/With Error/ie11Dark.png deleted file mode 100644 index cef7797be42..00000000000 --- a/packages/react-ui/.creevey/images/DateInput/With Error/ie11Dark.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9f96d823416fcf64eb3f48c53b18a07283fe73f9239767920ec364807925ca25 -size 3647 diff --git a/packages/react-ui/components/DateInput/__stories__/DateInput.stories.tsx b/packages/react-ui/components/DateInput/__stories__/DateInput.stories.tsx index 94c370e08d6..34cc5d1cc39 100644 --- a/packages/react-ui/components/DateInput/__stories__/DateInput.stories.tsx +++ b/packages/react-ui/components/DateInput/__stories__/DateInput.stories.tsx @@ -434,7 +434,7 @@ WithNoValue.parameters = { }, }; -export const WithError = () => ( +export const WithError: Story = () => ( Error @@ -445,6 +445,23 @@ export const WithError = () => ( ); +WithError.parameters = { + creevey: { + tests: { + async focused() { + const plain = await this.takeScreenshot(); + const DateInputPlaceholder = this.browser.findElement({ css: '[data-tid~="DateFragmentsView__placeholder"]' }); + + await this.browser.actions({ bridge: true }).click(DateInputPlaceholder).perform(); + await delay(1000); + const focused = await this.takeScreenshot(); + + await this.expect([plain, focused]).to.matchImages(); + }, + }, + }, +}; + export const ShouldSetFocusOnPlaceholderClick: Story = () => { return ; };