From 51a61652aa8398dbc500cf500af480f883e97857 Mon Sep 17 00:00:00 2001 From: SchwJ <67754964+SchwJ@users.noreply.github.com> Date: Wed, 2 Aug 2023 17:32:06 +0500 Subject: [PATCH] feat: add animations for hover and active states (#3219) --- .../DateSelect months/ie11/DateSelect months.png | 4 ++-- .../DateSelect years/ie11/DateSelect years.png | 4 ++-- .../firefox2022/focused first element.png | 4 ++-- .../firefox2022Dark/focused first element.png | 4 ++-- .../DateSelect years/ie11/DateSelect years.png | 4 ++-- .../DateSelect year/ie112022/DateSelect year.png | 4 ++-- .../ie112022Dark/DateSelect year.png | 4 ++-- .../hideScroll/chrome/duringScroll.png | 4 ++-- .../MenuItem hover/ie112022/MenuItem hover.png | 4 ++-- .../Select/Simple/clicked/firefox2022/clicked.png | 4 ++-- .../Select/Simple/clicked/ie112022/clicked.png | 4 ++-- .../with search/search/firefox2022/emptySearch.png | 4 ++-- .../with search/search/firefox2022/plainSearch.png | 4 ++-- .../search/firefox2022/pressKeyDown.png | 4 ++-- .../with search/search/ie112022/emptySearch.png | 4 ++-- .../with search/search/ie112022/plainSearch.png | 4 ++-- .../with search/search/ie112022/pressKeyDown.png | 4 ++-- .../MenuItem hover/ie112022/MenuItem hover.png | 4 ++-- .../clicked/firefox2022/clicked.png | 4 ++-- .../clicked/ie112022/clicked.png | 4 ++-- .../Open Dropdown while Loader is inactive.png | 4 ++-- .../Open Dropdown while Loader is inactive.png | 4 ++-- .../Open Dropdown while Loader is inactive.png | 4 ++-- .../SidePage covers Select and Tooltip.png | 4 ++-- .../SidePage covers Select and Tooltip.png | 4 ++-- ... covers outside Popup and DropdownContainer.png | 4 ++-- ... covers outside Popup and DropdownContainer.png | 4 ++-- ... covers outside Popup and DropdownContainer.png | 4 ++-- .../firefox2022/Modal covers hint.png | 4 ++-- .../ie112022/Modal covers hint.png | 4 ++-- .../react-ui/components/Button/Button.styles.ts | 3 +++ .../components/Calendar/Calendar.styles.ts | 1 - .../components/Checkbox/Checkbox.styles.ts | 5 +++++ .../components/Dropdown/getDropdownTheme.ts | 2 ++ .../components/FileUploader/FileUploader.styles.ts | 3 ++- packages/react-ui/components/Input/Input.styles.ts | 1 + packages/react-ui/components/Radio/Radio.styles.ts | 4 ++++ packages/react-ui/components/Select/selectTheme.ts | 3 +++ packages/react-ui/components/Tabs/Tab.styles.ts | 2 +- .../components/Textarea/Textarea.styles.ts | 2 +- .../react-ui/components/Toast/ToastView.styles.ts | 2 +- .../components/TokenInput/TokenInput.styles.ts | 1 + .../CloseButtonIcon/CloseButtonIcon.styles.tsx | 1 + .../__stories__/ComboBoxView.stories.tsx | 4 +++- .../internal/DateSelect/DateSelect.styles.ts | 14 +++++++++++++- .../react-ui/internal/DateSelect/DateSelect.tsx | 4 ++-- .../internal/InputLikeText/InputLikeText.tsx | 1 + packages/react-ui/internal/themes/DefaultTheme.ts | 12 ++++++++++++ packages/react-ui/internal/themes/Theme2022.ts | 3 +++ packages/react-ui/internal/themes/Theme2022Dark.ts | 10 ---------- 50 files changed, 119 insertions(+), 79 deletions(-) diff --git a/packages/react-ui/.creevey/images/Calendar/Functional tests/Calendar with min max date/DateSelect months/ie11/DateSelect months.png b/packages/react-ui/.creevey/images/Calendar/Functional tests/Calendar with min max date/DateSelect months/ie11/DateSelect months.png index 7525278a7aa..0884df81a23 100644 --- a/packages/react-ui/.creevey/images/Calendar/Functional tests/Calendar with min max date/DateSelect months/ie11/DateSelect months.png +++ b/packages/react-ui/.creevey/images/Calendar/Functional tests/Calendar with min max date/DateSelect months/ie11/DateSelect months.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7a99d772b2a3e2f6062e0e1397971114c46c23ead0f65bd76c8b52fc1dcc6fb1 -size 16930 +oid sha256:3578a026fc6f244a8a1d0f63e23c1a60b4937a9e921594bd5c17ff0d84a2caff +size 16932 diff --git a/packages/react-ui/.creevey/images/Calendar/Functional tests/Calendar with min max date/DateSelect years/ie11/DateSelect years.png b/packages/react-ui/.creevey/images/Calendar/Functional tests/Calendar with min max date/DateSelect years/ie11/DateSelect years.png index 20550462ad4..d56829f7d39 100644 --- a/packages/react-ui/.creevey/images/Calendar/Functional tests/Calendar with min max date/DateSelect years/ie11/DateSelect years.png +++ b/packages/react-ui/.creevey/images/Calendar/Functional tests/Calendar with min max date/DateSelect years/ie11/DateSelect years.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ae12542cd0552d72a19b81efabda496c6bdf147db31601f7a11f18add8bf62ee -size 14871 +oid sha256:d28d51c2768ca09087b93568826224475e3cecc5b9fff3ac9a5fc97a13eb6a9c +size 14874 diff --git a/packages/react-ui/.creevey/images/ComboBoxView/input like text/focused first element/firefox2022/focused first element.png b/packages/react-ui/.creevey/images/ComboBoxView/input like text/focused first element/firefox2022/focused first element.png index d5fd5337a21..8a2fe60fa7b 100644 --- a/packages/react-ui/.creevey/images/ComboBoxView/input like text/focused first element/firefox2022/focused first element.png +++ b/packages/react-ui/.creevey/images/ComboBoxView/input like text/focused first element/firefox2022/focused first element.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:962b3524ea42d921294fccc58a424b244b1f93be2f1575bb87db453ee0d3e352 -size 28105 +oid sha256:76ff8a463a2017899ed29f299af467f00f68e995aecd7c2b9ab4b672de856110 +size 28243 diff --git a/packages/react-ui/.creevey/images/ComboBoxView/input like text/focused first element/firefox2022Dark/focused first element.png b/packages/react-ui/.creevey/images/ComboBoxView/input like text/focused first element/firefox2022Dark/focused first element.png index da546cc0fe3..4a82ce0722a 100644 --- a/packages/react-ui/.creevey/images/ComboBoxView/input like text/focused first element/firefox2022Dark/focused first element.png +++ b/packages/react-ui/.creevey/images/ComboBoxView/input like text/focused first element/firefox2022Dark/focused first element.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:db5a6c9443fa644bf47d4e8c35b4cc2e5ac4a9692f73eb715f8e9f0d3b93a6a6 -size 27964 +oid sha256:725ebdbbf6949a0d4c1dcf695a03c375cd2818863df1893f7b92c13601fb4c4b +size 28111 diff --git a/packages/react-ui/.creevey/images/DatePicker/DatePicker with min max date/DateSelect years/ie11/DateSelect years.png b/packages/react-ui/.creevey/images/DatePicker/DatePicker with min max date/DateSelect years/ie11/DateSelect years.png index 639ad7c6633..9d280529916 100644 --- a/packages/react-ui/.creevey/images/DatePicker/DatePicker with min max date/DateSelect years/ie11/DateSelect years.png +++ b/packages/react-ui/.creevey/images/DatePicker/DatePicker with min max date/DateSelect years/ie11/DateSelect years.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5c5184a8e6d1b523b76bfb9ec8157784ce018ae8b7867985aafc805949747562 -size 22562 +oid sha256:acdb956f99a9b03d197762a0dbc3a45aa7c10284e5a354faf377ea42bd8ee099 +size 22564 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/ie112022/DateSelect year.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/ie112022/DateSelect year.png index b4feddc6aee..be055b6ea1f 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/ie112022/DateSelect year.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/ie112022/DateSelect year.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:baa2460f4f07313aaaf2049115137f03f0501de4f60b39d05425a1ed89956f75 -size 18316 +oid sha256:a6bde15ed59e63eb1adc7e65d726167c014e45e992967a9cfcb99aceac68eae4 +size 18181 diff --git a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/ie112022Dark/DateSelect year.png b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/ie112022Dark/DateSelect year.png index 77e5b53c3a3..b6336a005a5 100644 --- a/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/ie112022Dark/DateSelect year.png +++ b/packages/react-ui/.creevey/images/DatePicker/with mouseevent handlers/DateSelect year/ie112022Dark/DateSelect year.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fa1ebc6e1d017ce8badabf8245a7b33831033ceafc45abb2b478cdc24980a3a8 -size 18552 +oid sha256:58d65479fcd66d83e8b314a7007ea293853736c793caac907ca64e32f7566076 +size 19908 diff --git a/packages/react-ui/.creevey/images/ScrollContainer/Hide Scroll Bar/hideScroll/chrome/duringScroll.png b/packages/react-ui/.creevey/images/ScrollContainer/Hide Scroll Bar/hideScroll/chrome/duringScroll.png index 70fad4f7ce3..e368da0a114 100644 --- a/packages/react-ui/.creevey/images/ScrollContainer/Hide Scroll Bar/hideScroll/chrome/duringScroll.png +++ b/packages/react-ui/.creevey/images/ScrollContainer/Hide Scroll Bar/hideScroll/chrome/duringScroll.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ae509686d8da717823b34ac6319115bc65ee62c749cd959dc62894f655c7466f -size 3811 +oid sha256:ab458ff5adc40fdb047886dc0c4845584b6e18d726169c1d7f60fc22433e372f +size 3790 diff --git a/packages/react-ui/.creevey/images/Select/Simple/MenuItem hover/ie112022/MenuItem hover.png b/packages/react-ui/.creevey/images/Select/Simple/MenuItem hover/ie112022/MenuItem hover.png index 0e1f2f4abfd..d070b46796d 100644 --- a/packages/react-ui/.creevey/images/Select/Simple/MenuItem hover/ie112022/MenuItem hover.png +++ b/packages/react-ui/.creevey/images/Select/Simple/MenuItem hover/ie112022/MenuItem hover.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:69180ccae19a5b816b2d89cc1e0f38a90a1bfbb379609d755956b33c679df0aa -size 3692 +oid sha256:0707e513c9fd88b452e2dd61df58298ff6919c10ec444260d57be900d2d731ec +size 3615 diff --git a/packages/react-ui/.creevey/images/Select/Simple/clicked/firefox2022/clicked.png b/packages/react-ui/.creevey/images/Select/Simple/clicked/firefox2022/clicked.png index b4bde78d34e..cca7be0abbc 100644 --- a/packages/react-ui/.creevey/images/Select/Simple/clicked/firefox2022/clicked.png +++ b/packages/react-ui/.creevey/images/Select/Simple/clicked/firefox2022/clicked.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:13b45dc500e14cec129fa220274d42c553b9afe1a07b297b8a77f4106844d054 -size 6343 +oid sha256:b66c514654abf6738ced1724f56105e4587ffc29150147ea9ee10d7ad10bf079 +size 6357 diff --git a/packages/react-ui/.creevey/images/Select/Simple/clicked/ie112022/clicked.png b/packages/react-ui/.creevey/images/Select/Simple/clicked/ie112022/clicked.png index 0e1f2f4abfd..d070b46796d 100644 --- a/packages/react-ui/.creevey/images/Select/Simple/clicked/ie112022/clicked.png +++ b/packages/react-ui/.creevey/images/Select/Simple/clicked/ie112022/clicked.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:69180ccae19a5b816b2d89cc1e0f38a90a1bfbb379609d755956b33c679df0aa -size 3692 +oid sha256:0707e513c9fd88b452e2dd61df58298ff6919c10ec444260d57be900d2d731ec +size 3615 diff --git a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png index 4016d0c0130..6bdf2ba81f1 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:39f983a0828bad4da5620a6cf95e49ec4324a5aebc95e87ec41891134118f0d3 -size 13194 +oid sha256:1a48fe66ef4320d4a4df78c3663a5bc6ab9980e1893321739e8d20860fea8b8a +size 13220 diff --git a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png index 4016d0c0130..6bdf2ba81f1 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:39f983a0828bad4da5620a6cf95e49ec4324a5aebc95e87ec41891134118f0d3 -size 13194 +oid sha256:1a48fe66ef4320d4a4df78c3663a5bc6ab9980e1893321739e8d20860fea8b8a +size 13220 diff --git a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png index d01e6b779d0..1714747ee67 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ffec7dde40f6def14a8f5271de9d5a4beb7012cc012e222d7417d9608a8223ae -size 13346 +oid sha256:2f7e668c6dd3acd153de2860813e75c6b4b87498ebf86ed917a4c40abacc3b1c +size 13373 diff --git a/packages/react-ui/.creevey/images/Select/with search/search/ie112022/emptySearch.png b/packages/react-ui/.creevey/images/Select/with search/search/ie112022/emptySearch.png index 250a9f2ecff..7c3b24e434a 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/ie112022/emptySearch.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/ie112022/emptySearch.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c0d32e0821e669fb72a4714ac908e9ae7ee92a257a671c2064289c7cf4366bdc -size 6938 +oid sha256:6ff10e51f6b545279f874f29837298672a2d9867af51dac26468e2a1f43cccd6 +size 6875 diff --git a/packages/react-ui/.creevey/images/Select/with search/search/ie112022/plainSearch.png b/packages/react-ui/.creevey/images/Select/with search/search/ie112022/plainSearch.png index 250a9f2ecff..7c3b24e434a 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/ie112022/plainSearch.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/ie112022/plainSearch.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c0d32e0821e669fb72a4714ac908e9ae7ee92a257a671c2064289c7cf4366bdc -size 6938 +oid sha256:6ff10e51f6b545279f874f29837298672a2d9867af51dac26468e2a1f43cccd6 +size 6875 diff --git a/packages/react-ui/.creevey/images/Select/with search/search/ie112022/pressKeyDown.png b/packages/react-ui/.creevey/images/Select/with search/search/ie112022/pressKeyDown.png index da41605ac88..32c1669ea28 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/ie112022/pressKeyDown.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/ie112022/pressKeyDown.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:dbca7f48cb09e12916cde9a372febe6ecef96da8ec5cd911b194f1430f1eb397 -size 7203 +oid sha256:f033f974b3dfed03c6d58d37160592c053bf67fdcb721a8f1697cd7a33c30bca +size 7126 diff --git a/packages/react-ui/.creevey/images/Select/with text overflow/MenuItem hover/ie112022/MenuItem hover.png b/packages/react-ui/.creevey/images/Select/with text overflow/MenuItem hover/ie112022/MenuItem hover.png index e847c92aa0b..5564ee400cd 100644 --- a/packages/react-ui/.creevey/images/Select/with text overflow/MenuItem hover/ie112022/MenuItem hover.png +++ b/packages/react-ui/.creevey/images/Select/with text overflow/MenuItem hover/ie112022/MenuItem hover.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1f10ca9c065a3af651b9ddbf33ee5640c54d3fbb0d5cca4f82ce9758cda953ee -size 3320 +oid sha256:76e01a3a1128be791d226ac63985bf3719022d756af1be86652a7f916aae2fae +size 3241 diff --git a/packages/react-ui/.creevey/images/Select/with text overflow/clicked/firefox2022/clicked.png b/packages/react-ui/.creevey/images/Select/with text overflow/clicked/firefox2022/clicked.png index fb68abaa58b..e906ba84b85 100644 --- a/packages/react-ui/.creevey/images/Select/with text overflow/clicked/firefox2022/clicked.png +++ b/packages/react-ui/.creevey/images/Select/with text overflow/clicked/firefox2022/clicked.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fa923776507600759e15f149521d3c0ed3ddefb978fe2d1391f1a2d8505d7ea9 -size 5767 +oid sha256:0f6bff45aaecf6e5b22a034a63a22f87ffa1762962c1b92cc28355b00123faa8 +size 5800 diff --git a/packages/react-ui/.creevey/images/Select/with text overflow/clicked/ie112022/clicked.png b/packages/react-ui/.creevey/images/Select/with text overflow/clicked/ie112022/clicked.png index e847c92aa0b..5564ee400cd 100644 --- a/packages/react-ui/.creevey/images/Select/with text overflow/clicked/ie112022/clicked.png +++ b/packages/react-ui/.creevey/images/Select/with text overflow/clicked/ie112022/clicked.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1f10ca9c065a3af651b9ddbf33ee5640c54d3fbb0d5cca4f82ce9758cda953ee -size 3320 +oid sha256:76e01a3a1128be791d226ac63985bf3719022d756af1be86652a7f916aae2fae +size 3241 diff --git a/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/chrome2022/Open Dropdown while Loader is inactive.png b/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/chrome2022/Open Dropdown while Loader is inactive.png index 1eaf31b30d4..95e3e89f362 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/chrome2022/Open Dropdown while Loader is inactive.png +++ b/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/chrome2022/Open Dropdown while Loader is inactive.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e72fea312e171a1730641ff8eeec7353489a6b756bffb0dd06edf70a38b07cc8 -size 19897 +oid sha256:b82e4637c352549eff7118c1b4870bd44ad89ebe4c5bd875decf54280569bd17 +size 19915 diff --git a/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/firefox2022/Open Dropdown while Loader is inactive.png b/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/firefox2022/Open Dropdown while Loader is inactive.png index 309aa509d66..5a4b9349257 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/firefox2022/Open Dropdown while Loader is inactive.png +++ b/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/firefox2022/Open Dropdown while Loader is inactive.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fdadf93d3e0cfc13fb1cf63fb519fa19067aff53765766ff1fd19c513c4d1044 -size 36281 +oid sha256:ee076a3d19f567f71cb8d59f1389504aba3582e36a241599ae1cd0b5c804893a +size 36360 diff --git a/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/ie112022/Open Dropdown while Loader is inactive.png b/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/ie112022/Open Dropdown while Loader is inactive.png index e610f229ee3..df7fbec41c0 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/ie112022/Open Dropdown while Loader is inactive.png +++ b/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/ie112022/Open Dropdown while Loader is inactive.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:67ce1dfa1d667317ca9af1f560d8659e9cc36b08b574a9eb2178363cdc99f215 -size 17611 +oid sha256:9bbc16809d8459321e325a2c7c0b62999034d2a9da187a61d616081886c2a92c +size 17233 diff --git a/packages/react-ui/.creevey/images/ZIndex/Sidepage and Select/SidePage covers Select and Tooltip/firefox2022/SidePage covers Select and Tooltip.png b/packages/react-ui/.creevey/images/ZIndex/Sidepage and Select/SidePage covers Select and Tooltip/firefox2022/SidePage covers Select and Tooltip.png index c5390e9b368..f1844ef4a36 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Sidepage and Select/SidePage covers Select and Tooltip/firefox2022/SidePage covers Select and Tooltip.png +++ b/packages/react-ui/.creevey/images/ZIndex/Sidepage and Select/SidePage covers Select and Tooltip/firefox2022/SidePage covers Select and Tooltip.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4de51af4b0f3f252891b395f92f2b39da01dc04b3b93dff363043f237fc228c8 -size 60132 +oid sha256:6ff8d7327bfe976c7500d6b45247e69526512e7010db4444369c4a15f20875f5 +size 60174 diff --git a/packages/react-ui/.creevey/images/ZIndex/Sidepage and Select/SidePage covers Select and Tooltip/ie112022/SidePage covers Select and Tooltip.png b/packages/react-ui/.creevey/images/ZIndex/Sidepage and Select/SidePage covers Select and Tooltip/ie112022/SidePage covers Select and Tooltip.png index 722e05facca..da0fc522cb2 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Sidepage and Select/SidePage covers Select and Tooltip/ie112022/SidePage covers Select and Tooltip.png +++ b/packages/react-ui/.creevey/images/ZIndex/Sidepage and Select/SidePage covers Select and Tooltip/ie112022/SidePage covers Select and Tooltip.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e5904a53dc57e48b556d9b436536064c603dba5403f2cb13c635a0a3edb5607b -size 50310 +oid sha256:3712667cb3cea85bf5519ef82cb38ace62e5cfe5916c4e57d9f341f5313bd2a4 +size 50006 diff --git a/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/chrome2022/Sticky covers outside Popup and DropdownContainer.png b/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/chrome2022/Sticky covers outside Popup and DropdownContainer.png index e0f4b1bdd5a..8170048ced3 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/chrome2022/Sticky covers outside Popup and DropdownContainer.png +++ b/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/chrome2022/Sticky covers outside Popup and DropdownContainer.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8beeb7b55f46ccb91b4a22ee6a6a5446b7eee2ff8b82677fe8b93b390cb73a84 -size 19554 +oid sha256:de84b73851b58827e064375052aa01a031a103c8a586e6e9f8f98c9c8782105a +size 19573 diff --git a/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/firefox2022/Sticky covers outside Popup and DropdownContainer.png b/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/firefox2022/Sticky covers outside Popup and DropdownContainer.png index 2aabe1842ec..8bcb81ffd72 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/firefox2022/Sticky covers outside Popup and DropdownContainer.png +++ b/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/firefox2022/Sticky covers outside Popup and DropdownContainer.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0e1700a344329de5d00eba29d57ce3c5f9b8763fd903a8a0eae83c2ffd0fe901 -size 32931 +oid sha256:c82bbfcfbea9956f3b03ccd836d703a500f66afd2c648c4141a1dc9235701842 +size 33000 diff --git a/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/ie112022/Sticky covers outside Popup and DropdownContainer.png b/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/ie112022/Sticky covers outside Popup and DropdownContainer.png index 3e1d93e7da5..c4c011165db 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/ie112022/Sticky covers outside Popup and DropdownContainer.png +++ b/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/ie112022/Sticky covers outside Popup and DropdownContainer.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bf45d41752488a5f8d0160b895f66b2cd626722528ddd02fe929bedb8411b763 -size 13616 +oid sha256:e0d9b0083e35f99263e4368271160267f13670b7cdfee7300d5313ba92997d6e +size 13434 diff --git a/packages/react-ui/.creevey/images/ZIndex/Tooltip and Select/Menu covers tooltip/firefox2022/Modal covers hint.png b/packages/react-ui/.creevey/images/ZIndex/Tooltip and Select/Menu covers tooltip/firefox2022/Modal covers hint.png index 5d51d08da5f..f6fb5561df8 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Tooltip and Select/Menu covers tooltip/firefox2022/Modal covers hint.png +++ b/packages/react-ui/.creevey/images/ZIndex/Tooltip and Select/Menu covers tooltip/firefox2022/Modal covers hint.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:002bb84f753e1bb2c9e827215087c63c45f5633fcbd9c595a72c4ebcb1850c45 -size 19921 +oid sha256:a26416f1b5dcf12b217c883f18c0c4aa0e5982600be8cbcde2f860c382c4c0cd +size 19918 diff --git a/packages/react-ui/.creevey/images/ZIndex/Tooltip and Select/Menu covers tooltip/ie112022/Modal covers hint.png b/packages/react-ui/.creevey/images/ZIndex/Tooltip and Select/Menu covers tooltip/ie112022/Modal covers hint.png index 6ae33c875f8..6a72e0bd736 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Tooltip and Select/Menu covers tooltip/ie112022/Modal covers hint.png +++ b/packages/react-ui/.creevey/images/ZIndex/Tooltip and Select/Menu covers tooltip/ie112022/Modal covers hint.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d4e7d818b901e9919b06286e5b380acbb1014e751d0081fb2755cd06f015b7fe -size 7405 +oid sha256:4085041ed58d4433aef8958db8b0114404ff267511ec2d554ad03c440935efe4 +size 7307 diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts index 2be14f41861..cb2b0385cde 100644 --- a/packages/react-ui/components/Button/Button.styles.ts +++ b/packages/react-ui/components/Button/Button.styles.ts @@ -29,6 +29,9 @@ export const styles = memoizeStyle({ ${resetButton()}; ${resetText()}; + transition: background-color ${t.transitionDuration} ${t.transitionTimingFunction} + ${t.btnBorderColorTransition ? `, ${t.btnBorderColorTransition}` : ''}; + background-clip: ${t.btnBackgroundClip}; background-position: center; background-repeat: no-repeat; diff --git a/packages/react-ui/components/Calendar/Calendar.styles.ts b/packages/react-ui/components/Calendar/Calendar.styles.ts index 1107d0901e1..cf49e9c2810 100644 --- a/packages/react-ui/components/Calendar/Calendar.styles.ts +++ b/packages/react-ui/components/Calendar/Calendar.styles.ts @@ -5,7 +5,6 @@ export const styles = memoizeStyle({ root(t: Theme) { const width = parseInt(t.calendarCellSize) * 7; return css` - display: inline-block; background: ${t.calendarBg}; box-sizing: content-box; border-radius: ${t.pickerBorderRadius}; diff --git a/packages/react-ui/components/Checkbox/Checkbox.styles.ts b/packages/react-ui/components/Checkbox/Checkbox.styles.ts index fb14cd3e850..0b61d14614b 100644 --- a/packages/react-ui/components/Checkbox/Checkbox.styles.ts +++ b/packages/react-ui/components/Checkbox/Checkbox.styles.ts @@ -18,6 +18,11 @@ export const styles = memoizeStyle({ font-size: ${t.checkboxFontSize}; padding: ${t.checkboxPaddingY} 0; + .${globalClasses.box} { + transition: background ${t.transitionDuration} ${t.transitionTimingFunction}, + box-shadow ${t.transitionDuration} ${t.transitionTimingFunction}; + } + &:hover .${globalClasses.box} { background: ${t.checkboxHoverBg}; box-shadow: ${t.checkboxShadowHover}; diff --git a/packages/react-ui/components/Dropdown/getDropdownTheme.ts b/packages/react-ui/components/Dropdown/getDropdownTheme.ts index f2d7f1fd844..0bd8ab28aad 100644 --- a/packages/react-ui/components/Dropdown/getDropdownTheme.ts +++ b/packages/react-ui/components/Dropdown/getDropdownTheme.ts @@ -6,6 +6,8 @@ export const getDropdownTheme = (theme: Theme): Theme => { { selectDefaultBg: theme.btnDefaultBg, selectMenuOffsetY: theme.dropdownMenuOffsetY, + selectBorderColorHover: theme.dropdownMenuHoverBorderColor, + selectBorderColorTransition: theme.dropdownMenuBorderColorTransition, }, theme, ); diff --git a/packages/react-ui/components/FileUploader/FileUploader.styles.ts b/packages/react-ui/components/FileUploader/FileUploader.styles.ts index e7da57276b0..30bf09907d2 100644 --- a/packages/react-ui/components/FileUploader/FileUploader.styles.ts +++ b/packages/react-ui/components/FileUploader/FileUploader.styles.ts @@ -65,7 +65,8 @@ const styles = { outline: none; cursor: pointer; padding: ${t.fileUploaderPaddingY} ${t.fileUploaderPaddingX}; - transition: box-shadow 0.3s ease; + transition: background-color ${t.transitionDuration} ${t.transitionTimingFunction}, + border-color ${t.transitionDuration} ${t.transitionTimingFunction}; background-color: ${t.fileUploaderUploadButtonBg}; `; }, diff --git a/packages/react-ui/components/Input/Input.styles.ts b/packages/react-ui/components/Input/Input.styles.ts index 026472a2f40..2c5fbaa921a 100644 --- a/packages/react-ui/components/Input/Input.styles.ts +++ b/packages/react-ui/components/Input/Input.styles.ts @@ -36,6 +36,7 @@ export const styles = memoizeStyle({ background-color: ${t.inputBg}; border: ${t.inputBorderWidth} solid ${t.inputBorderColor}; border-top-color: ${t.inputBorderTopColor}; + transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction}; box-shadow: ${t.inputShadow}; box-sizing: border-box; color: ${t.inputColor}; diff --git a/packages/react-ui/components/Radio/Radio.styles.ts b/packages/react-ui/components/Radio/Radio.styles.ts index 6e272bb0c9f..14a2d55a373 100644 --- a/packages/react-ui/components/Radio/Radio.styles.ts +++ b/packages/react-ui/components/Radio/Radio.styles.ts @@ -37,6 +37,10 @@ export const styles = memoizeStyle({ line-height: ${t.radioLineHeight}; font-size: ${t.radioFontSize}; + .${globalClasses.circle} { + transition: background ${t.transitionDuration} ${t.transitionTimingFunction}; + } + &:hover .${globalClasses.circle} { background: ${t.radioHoverBg}; box-shadow: ${t.radioHoverShadow}; diff --git a/packages/react-ui/components/Select/selectTheme.ts b/packages/react-ui/components/Select/selectTheme.ts index 2aab79a1637..f492256cba6 100644 --- a/packages/react-ui/components/Select/selectTheme.ts +++ b/packages/react-ui/components/Select/selectTheme.ts @@ -37,6 +37,9 @@ export const getSelectTheme = (theme: Theme, props: SelectProps): Them btnDisabledBg: theme.selectBgDisabled, btnDisabledBorderColor: theme.selectBorderColorDisabled, btnDisabledTextColor: theme.selectTextColorDisabled, + + btnDefaultHoverBorderColor: theme.selectBorderColorHover, + btnBorderColorTransition: theme.selectBorderColorTransition, }, theme, ); diff --git a/packages/react-ui/components/Tabs/Tab.styles.ts b/packages/react-ui/components/Tabs/Tab.styles.ts index 20d4acc6127..9b82c08a8a8 100644 --- a/packages/react-ui/components/Tabs/Tab.styles.ts +++ b/packages/react-ui/components/Tabs/Tab.styles.ts @@ -181,7 +181,7 @@ function tabRoot(t: Theme, size: TabSize) { padding-top: ${paddingY(t, size)}; position: relative; text-decoration: inherit; - transition: border-bottom 0.2s ease-out; + transition: border-bottom ${t.transitionDuration} ${t.transitionTimingFunction}; &:hover { outline: inherit; diff --git a/packages/react-ui/components/Textarea/Textarea.styles.ts b/packages/react-ui/components/Textarea/Textarea.styles.ts index 6c8ba240acd..48e3a13a8af 100644 --- a/packages/react-ui/components/Textarea/Textarea.styles.ts +++ b/packages/react-ui/components/Textarea/Textarea.styles.ts @@ -29,7 +29,7 @@ export const styles = memoizeStyle({ min-height: ${t.textareaMinHeight}; outline: none; padding: ${t.textareaPaddingY} ${t.textareaPaddingX}; - transition: height 0.2s ease-out; + transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction}, height 0.2s ease-out; vertical-align: middle; width: 100%; border-radius: ${t.textareaBorderRadius}; diff --git a/packages/react-ui/components/Toast/ToastView.styles.ts b/packages/react-ui/components/Toast/ToastView.styles.ts index 95e458eee2d..53c7fa5ecce 100644 --- a/packages/react-ui/components/Toast/ToastView.styles.ts +++ b/packages/react-ui/components/Toast/ToastView.styles.ts @@ -61,7 +61,7 @@ export const styles = memoizeStyle({ margin: -${paddingTop} ${marginRight} -${paddingBottom} ${t.toastPaddingX}; padding: ${padding}; - + transition: background ${t.transitionDuration} ${t.transitionTimingFunction}; &:hover { background: ${t.toastLinkBgHover}; text-decoration: ${t.toastLinkTextDecorationHover}; diff --git a/packages/react-ui/components/TokenInput/TokenInput.styles.ts b/packages/react-ui/components/TokenInput/TokenInput.styles.ts index 24efa5a8153..6dd2184ca8e 100644 --- a/packages/react-ui/components/TokenInput/TokenInput.styles.ts +++ b/packages/react-ui/components/TokenInput/TokenInput.styles.ts @@ -25,6 +25,7 @@ export const styles = memoizeStyle({ box-shadow: ${t.tokenInputShadow}; border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColor}; border-top-color: ${t.tokenInputBorderTopColor}; + transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction}; box-sizing: border-box; cursor: text; padding: ${t.tokenInputPaddingY} ${t.tokenInputPaddingX}; diff --git a/packages/react-ui/internal/CloseButtonIcon/CloseButtonIcon.styles.tsx b/packages/react-ui/internal/CloseButtonIcon/CloseButtonIcon.styles.tsx index 9ccb0bae359..34269847296 100644 --- a/packages/react-ui/internal/CloseButtonIcon/CloseButtonIcon.styles.tsx +++ b/packages/react-ui/internal/CloseButtonIcon/CloseButtonIcon.styles.tsx @@ -11,6 +11,7 @@ export const styles = memoizeStyle({ border-radius: ${t.closeBtnIconBorderRadius}; color: ${t.closeBtnIconColor}; cursor: pointer; + transition: color ${t.transitionDuration} ${t.transitionTimingFunction}; &:enabled:focus, &:enabled:hover { diff --git a/packages/react-ui/internal/CustomComboBox/__stories__/ComboBoxView.stories.tsx b/packages/react-ui/internal/CustomComboBox/__stories__/ComboBoxView.stories.tsx index b8e195c88f6..820006b42f6 100644 --- a/packages/react-ui/internal/CustomComboBox/__stories__/ComboBoxView.stories.tsx +++ b/packages/react-ui/internal/CustomComboBox/__stories__/ComboBoxView.stories.tsx @@ -51,12 +51,14 @@ export const InputLikeText: Story = () => ( ); InputLikeText.storyName = 'input like text'; +const FIREFOX_REGEXP = /.*firefox.*/i; + InputLikeText.parameters = { creevey: { skip: { // TODO @Khlutkova fix after update browsers 'story-skip-0': { - in: ['firefox8px', 'firefoxFlat8px', 'firefox', 'firefoxDark'], + in: FIREFOX_REGEXP, tests: ['focused first element'], }, }, diff --git a/packages/react-ui/internal/DateSelect/DateSelect.styles.ts b/packages/react-ui/internal/DateSelect/DateSelect.styles.ts index 0e95b03876b..37362b8bed1 100644 --- a/packages/react-ui/internal/DateSelect/DateSelect.styles.ts +++ b/packages/react-ui/internal/DateSelect/DateSelect.styles.ts @@ -1,6 +1,10 @@ -import { css, memoizeStyle } from '../../lib/theming/Emotion'; +import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion'; import { Theme } from '../../lib/theming/Theme'; +export const globalClasses = prefix('select')({ + arrow: 'arrow', +}); + export const styles = memoizeStyle({ root(t: Theme) { return css` @@ -18,6 +22,14 @@ export const styles = memoizeStyle({ &:hover { color: ${t.dateSelectLinkColor}; } + + & .${globalClasses.arrow} { + transition: fill ${t.transitionDuration} ${t.transitionTimingFunction}; + } + + &:hover .${globalClasses.arrow} { + fill: ${t.dateSelectTextColorDefault} !important; + } `; }, diff --git a/packages/react-ui/internal/DateSelect/DateSelect.tsx b/packages/react-ui/internal/DateSelect/DateSelect.tsx index dd9e56da81c..c42e6af03b6 100644 --- a/packages/react-ui/internal/DateSelect/DateSelect.tsx +++ b/packages/react-ui/internal/DateSelect/DateSelect.tsx @@ -21,7 +21,7 @@ import { ArrowCollapseCVOpenIcon16Regular } from '../icons2022/ArrowCollapseCVOp import { ArrowCUpIcon16Regular } from '../icons2022/ArrowCUpIcon/ArrowCUpIcon16Regular'; import { ArrowCDownIcon16Regular } from '../icons2022/ArrowCDownIcon/ArrowCDownIcon16Regular'; -import { styles } from './DateSelect.styles'; +import { globalClasses, styles } from './DateSelect.styles'; const itemHeight = 24; const visibleYearsCount = 11; @@ -234,7 +234,7 @@ export class DateSelect extends React.PureComponent {this.getItem(0)} - {!disabled && } + {!disabled && } {this.state.opened && this.renderMenu()} ); diff --git a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx index ea07e23adda..ce15968034b 100644 --- a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx +++ b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx @@ -198,6 +198,7 @@ export class InputLikeText extends React.Component