From 7c3caf9d76271f86e3041725f9de8d74ff7e488c Mon Sep 17 00:00:00 2001 From: SchwJ Date: Fri, 26 Apr 2024 13:57:16 +0500 Subject: [PATCH 1/5] chore(Popup, Hint, Tooltip): unify positioning --- .../chrome.png | 4 +- .../chrome2022.png | 4 +- .../chrome2022Dark.png | 4 +- .../chrome8px.png | 4 +- .../chromeDark.png | 4 +- .../firefox.png | 4 +- .../firefox2022.png | 4 +- .../firefox2022Dark.png | 4 +- .../firefox8px.png | 4 +- .../firefoxDark.png | 4 +- .../Hint/hint near screen edge/chrome.png | 4 +- .../Hint/hint near screen edge/firefox.png | 4 +- .../chrome/doesn't cover children.png | 4 +- .../chrome2022/doesn't cover children.png | 4 +- .../chrome2022Dark/doesn't cover children.png | 4 +- .../chrome8px/doesn't cover children.png | 4 +- .../chromeDark/doesn't cover children.png | 4 +- .../firefox/doesn't cover children.png | 4 +- .../firefox2022/doesn't cover children.png | 4 +- .../doesn't cover children.png | 4 +- .../firefox8px/doesn't cover children.png | 4 +- .../firefoxDark/doesn't cover children.png | 4 +- .../pressed/chrome/pressed.png | 4 +- .../pressed/chrome2022/pressed.png | 4 +- .../pressed/chrome2022Dark/pressed.png | 4 +- .../pressed/chrome8px/pressed.png | 4 +- .../pressed/chromeDark/pressed.png | 4 +- .../pressed/chromeFlat8px/pressed.png | 4 +- .../pressed/firefox/pressed.png | 4 +- .../pressed/firefox2022/pressed.png | 4 +- .../pressed/firefox2022Dark/pressed.png | 4 +- .../pressed/firefox8px/pressed.png | 4 +- .../pressed/firefoxDark/pressed.png | 4 +- .../pressed/firefoxFlat8px/pressed.png | 4 +- .../firefox/hover by dynamic anchor.png | 4 +- .../firefox2022/hover by dynamic anchor.png | 4 +- .../hover by dynamic anchor.png | 4 +- .../firefox8px/hover by dynamic anchor.png | 4 +- .../firefoxDark/hover by dynamic anchor.png | 4 +- .../hover/chrome/hover.png | 4 +- .../hover/chrome2022/hover.png | 4 +- .../hover/chrome2022Dark/hover.png | 4 +- .../hover/chrome8px/hover.png | 4 +- .../hover/chromeDark/hover.png | 4 +- .../hover/firefox/hover.png | 4 +- .../hover/firefox2022/hover.png | 4 +- .../hover/firefox2022Dark/hover.png | 4 +- .../hover/firefoxDark/hover.png | 4 +- packages/react-ui/components/Hint/Hint.tsx | 117 ++++-------------- .../react-ui/components/Tooltip/Tooltip.tsx | 56 ++------- packages/react-ui/internal/Popup/Popup.tsx | 42 +++++-- 51 files changed, 163 insertions(+), 244 deletions(-) diff --git a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome.png b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome.png index b121fcd695..32e1b6fb8b 100644 --- a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome.png +++ b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:24f921033464780e365ba3791f4664ebd097217453c4ba40726e6ea901bae873 -size 20431 +oid sha256:4104c0e0ea8fb97687c08501953fd06b196c0fe6aba31e33d7d03a410fdc0ba2 +size 20492 diff --git a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome2022.png b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome2022.png index 3fdab9ee2f..a13e8b2b14 100644 --- a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome2022.png +++ b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome2022.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2a50391c6936292eb2fdc328a9821ee5407d77bb19a1d1bcc10be8020c011ac0 -size 21720 +oid sha256:056bf5a487ebb7a738bfd6a7612a736e2d2d2c4f1bb482b915b12cb5b81d88e8 +size 21723 diff --git a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome2022Dark.png b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome2022Dark.png index 75322fa639..699d1b6050 100644 --- a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome2022Dark.png +++ b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bb163ba6f842e9a7c560014a30917547b2cf72187b8d1f81ec5de53fe8247344 -size 21951 +oid sha256:d6674de20c9c93fec9c62da40629345cb1a8a2b671f914c8e3d4820166065ae9 +size 21979 diff --git a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome8px.png b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome8px.png index bf4c59f4a7..9fe90bd1f4 100644 --- a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome8px.png +++ b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chrome8px.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e5784b6b53412cea32ea5e7a47fb77cfc3bd091b3487209d715033adff802547 -size 20464 +oid sha256:ec176279159a2e2e99477e8a0c3d1f106c96255e1acd740d964c45d5b4744217 +size 20525 diff --git a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chromeDark.png b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chromeDark.png index 46bf0234eb..0473ce7796 100644 --- a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chromeDark.png +++ b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/chromeDark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bec8ad52a06cda1052ccc5cc366a71a434b917ba4f4876628310d37d998e0ca6 -size 20645 +oid sha256:119d83cf01a9c5e40be691003b477f8f8a93e01d93d56ff3d3c0373c6c435ba0 +size 20658 diff --git a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox.png b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox.png index 666d947806..c4b9dcd7cd 100644 --- a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox.png +++ b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:17517692ccefa0f65d5938e4d703460f890844ccf7f845f31f9a3b68018db2fb -size 27588 +oid sha256:de132c2b814558ec81496a896b62f965b40650f6813c3393e211331bb33a71a6 +size 27601 diff --git a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox2022.png b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox2022.png index 0e84159396..988efd9cfa 100644 --- a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox2022.png +++ b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox2022.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b07356075c24c69a0a92c99780f9fc0785ba63f916d7163d580a6767b67dbaf8 -size 27549 +oid sha256:d67c91f7e0b08e5ceaf338156d82732aa3b9b0b68a06336e9de81a5e549b180e +size 27610 diff --git a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox2022Dark.png b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox2022Dark.png index 3fb4e04256..ed0d216ef2 100644 --- a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox2022Dark.png +++ b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:47c2b0b2a445f179a22046ca18f2f45d6576ccbfa7eff17f01b2233b1ac393ed -size 27384 +oid sha256:c45a8cafc113b23a5234cd120d421d90fa65220308909c5d39d59f992619e98a +size 27405 diff --git a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox8px.png b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox8px.png index ba638340a3..5ff7103f18 100644 --- a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox8px.png +++ b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefox8px.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:59f0baf4d47d374774390d32eb748329ec021558c1dbbfb57110a66e33cf8971 -size 27633 +oid sha256:87af9cb496adc44b2e05380c1c8e5fc9e2f45e737a8a9e68ebf3a848d023e4a5 +size 27642 diff --git a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefoxDark.png b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefoxDark.png index f18fba3008..111ca9531a 100644 --- a/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefoxDark.png +++ b/packages/react-ui/.creevey/images/Hint/Hints without wrapper around inline-block with 50% width/firefoxDark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:07087efe36be665ffc1bc4f9ca0d52ad98362b05a6e3b156eab9e4dd021d12ca -size 27477 +oid sha256:b39b6930eb6cfa0677a3411ab95b23a653685376cced394bfaef655b19bd8987 +size 27564 diff --git a/packages/react-ui/.creevey/images/Hint/hint near screen edge/chrome.png b/packages/react-ui/.creevey/images/Hint/hint near screen edge/chrome.png index d2fc57aac2..a52eb418bf 100644 --- a/packages/react-ui/.creevey/images/Hint/hint near screen edge/chrome.png +++ b/packages/react-ui/.creevey/images/Hint/hint near screen edge/chrome.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:07690d5d58c77643eadc656ba295cd8d18a46370cbe655945e7f6a1f70f72267 -size 48031 +oid sha256:f24135c76ef02d176629d75d2f020dc62c901c9984994c0dab5956606d565ac8 +size 48048 diff --git a/packages/react-ui/.creevey/images/Hint/hint near screen edge/firefox.png b/packages/react-ui/.creevey/images/Hint/hint near screen edge/firefox.png index 4ed318cf1a..6348b23bfb 100644 --- a/packages/react-ui/.creevey/images/Hint/hint near screen edge/firefox.png +++ b/packages/react-ui/.creevey/images/Hint/hint near screen edge/firefox.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:467da11c3e3b44262434c0127569ee50302cf0fdd26d16781629669da0b21e1c -size 66689 +oid sha256:de477c840059660f6bc7d1d36af1ce6301a5be85b702ee1282cec0c0b3f25b5a +size 66319 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome/doesn't cover children.png index b7bad8f025..2bd265ff9e 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:09309f717ac69a582707b971410c5dd30b3e8739c22e8a8f3176508fbf98d45a -size 85284 +oid sha256:1ab1f8bb379614b0ab437b55edae9c32e3dd9bd3d0aa2e5a531418f407ce8560 +size 85561 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022/doesn't cover children.png index f7910ad70a..bd419369ae 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:38063fb85089a0eeb4e7b1e68813b70ad1d1dbc87f7ce14eb60b0c4a891abf1d -size 88318 +oid sha256:3d3b56cf34ff776c48283ab2d8ee9f87fb29c5d78e8552ad075f0480dc5abf31 +size 88549 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022Dark/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022Dark/doesn't cover children.png index b56a68ed95..3633e690f0 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022Dark/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022Dark/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2b9696015b54b0e5836185ab093550b6ffc8e85eb7a1045bd9fcbb051e3a6b39 -size 85890 +oid sha256:8b9e77647b8ca620e5eea12c6030bc831aafd5d0943a80431239c0ec3635aeca +size 85742 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome8px/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome8px/doesn't cover children.png index 59ea6c00cf..7bebc2a7a4 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome8px/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome8px/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bd2de18a15075bab9b01e266ba3cb1b6a73b8357cd808c3e3cfd4e059c4dd41d -size 85368 +oid sha256:54a609e4fe46fd45215e9ed6fe1ffa9bd3bfac04318e3c9524aa64b5b4daa81d +size 85629 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chromeDark/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chromeDark/doesn't cover children.png index af52a1a349..5ebf9a5854 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chromeDark/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chromeDark/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:31e97612fef2c1c6f07e6e35d993f107e6cb836f99a5fe073561d24510c1e3fe -size 84245 +oid sha256:6bac606858862971fbd7b65020348ee484ae7b98831d5b35d0ee0514ecd38566 +size 84292 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox/doesn't cover children.png index 8161186139..c969827fa8 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c221d9578d2a344fd9886aad10a88f6a7d15d0d02da5ce4b447c81698265a640 -size 76130 +oid sha256:a97124a74838741ecaa4642de16c8ee2e78bfd4d7af93a932d0722138eb657a4 +size 76700 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022/doesn't cover children.png index 6e7dbdc551..f693c6aa91 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0478cd1130875e727c4b9646246f2e758be33c8b24f4937c252484e0bb96332b -size 78903 +oid sha256:c88835e44c4c2f92688dc48d69c55b89781917afb9e86b9bc8a6fc242ca6b42f +size 79664 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022Dark/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022Dark/doesn't cover children.png index e6931bb90c..f55050a8a1 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022Dark/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022Dark/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b9b52b074b13a56e204541c553d9d25551302428bf354e93e464ef5727272312 -size 76260 +oid sha256:cf08c4b11c8baafa883fa4797ebe2f7a1506cf3a327adbc29326c25e7549a1db +size 76627 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox8px/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox8px/doesn't cover children.png index 79a960d761..5e1e48d721 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox8px/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox8px/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:74a2961cd911b355a90cd440d927cb52cc3203478c6e8b47c07fb00f6a650e30 -size 76393 +oid sha256:ef936e41c440a80d70a7071eeed60968524ce8ac82a9803065e57c785624c71b +size 76904 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefoxDark/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefoxDark/doesn't cover children.png index 27b0d4b1f3..c140388244 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefoxDark/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefoxDark/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:34b568e1e8ee6f800006d6999a451f5aa394bee5a0069d3d4c93501ccc13dcd7 -size 74620 +oid sha256:8bf151e2565e698e43f46af4c9d5d3cffc41dbadee38eb224eeee50f6bf54cec +size 74886 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome/pressed.png index ca7074c1b6..f28cc43532 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:77ea2d15df7bba002d4f7c42afa695f86c041a0670056d86f5710429c0746b3e -size 2638 +oid sha256:3fad6b5cfa80133220ac77ce4dec9c502706199b3b5d6a3deca403ffec3e66f8 +size 2658 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022/pressed.png index ca7e2ef3bd..061c937f3e 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2f929f8c02109ecfb266793fb67d448e0dcb8a6890595a2ef34214e23afe7318 -size 3172 +oid sha256:27e248c4874fdac513364726365fda4280b7b9f0c1e5793b64b1cdeb31952c14 +size 3117 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022Dark/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022Dark/pressed.png index e2c18bbaf3..bfaed71cab 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022Dark/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022Dark/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b4830981d5180bd2832a1f00f4f3bc72a51bc2a2e8b143467c1decb6f59e9ece -size 1902 +oid sha256:f0d6483233dd3d82a24102640afa4d209bd4971a74161c346b45bfb110839568 +size 1914 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome8px/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome8px/pressed.png index 3c8e4e0e4c..e065165de5 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome8px/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome8px/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0f1be61475db3dad953a292a97c41d8c1c4dfebe2740f0f70a7c833dffb18f37 -size 2668 +oid sha256:f661f4f67bcd1878a06056220ee92a61e620a01225925e0492f2be023c56cd13 +size 2675 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeDark/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeDark/pressed.png index 23bf617394..f1dd30eee7 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeDark/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeDark/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fa70c57cc07b7d3ad4a88067f4a2c74bd9a108723216765e7a554e389f9cf200 -size 2136 +oid sha256:28a000f54da51511b02509d2d5eb7a352fd2ff54073002cc590eb2011a549d11 +size 2137 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeFlat8px/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeFlat8px/pressed.png index 3c8e4e0e4c..e065165de5 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeFlat8px/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeFlat8px/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0f1be61475db3dad953a292a97c41d8c1c4dfebe2740f0f70a7c833dffb18f37 -size 2668 +oid sha256:f661f4f67bcd1878a06056220ee92a61e620a01225925e0492f2be023c56cd13 +size 2675 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox/pressed.png index 62c0c74cd6..b62c945059 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5b8c46d42fdafd2cc624707c1ab592bcded5354e861350e7bdd72f1ace9ba377 -size 2993 +oid sha256:24f9620cfce4265db6452c8b9261cb92b2af6a54f38bb93ad85ec3e1902b18f1 +size 3004 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022/pressed.png index 4db33c2e75..595ec103fe 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2b077e584d9f9ab522972492def077f80fbeedb4eb930fada24988e69eb276b0 -size 3494 +oid sha256:9be84f4d21543059f8dd0d849e93a3dcb353f18b6f1ce34beb54d26fa0ba3906 +size 3529 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022Dark/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022Dark/pressed.png index 8d514796fc..f5f7edd3a6 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022Dark/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022Dark/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8a7c0c80024653a9c3e3aff1f2a61fa7ea7510873c23df2953791bc613c1233f -size 2151 +oid sha256:9bd26cfd0f9c33b8c9655d310e38044491eaf0979e929952f5a599896bd8e839 +size 2171 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox8px/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox8px/pressed.png index f50e70afba..730446f450 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox8px/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox8px/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2ca27b1e70413718410f1fba524e471b2602e702b654cc024af919f0d38b6460 -size 2982 +oid sha256:67762ff27725d94bc373520bbdf2a2b142b60f97e11dae14d05c2cb1639944ec +size 3012 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxDark/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxDark/pressed.png index 6a053f44cf..7a9afddeac 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxDark/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxDark/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b0b073df5c93fa55cf33a67a6c493155b0e00f1a9cd8f8a1a97595c228a90810 -size 2327 +oid sha256:ff3888f645b8ae698113675082b76e8437f9378a17b9135523df2a6aa8fe014d +size 2330 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxFlat8px/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxFlat8px/pressed.png index f50e70afba..730446f450 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxFlat8px/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxFlat8px/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2ca27b1e70413718410f1fba524e471b2602e702b654cc024af919f0d38b6460 -size 2982 +oid sha256:67762ff27725d94bc373520bbdf2a2b142b60f97e11dae14d05c2cb1639944ec +size 3012 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox/hover by dynamic anchor.png b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox/hover by dynamic anchor.png index fb0416125c..fdad6a8cc3 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox/hover by dynamic anchor.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox/hover by dynamic anchor.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:79f24ae9ff4de03b82d3407253d56cfb3e20d399de3c9b62377c20ea669b4d6d -size 4740 +oid sha256:8de9dffd527ecc4494d8f50fb877e8b910259e99644e774b8afb0e62e08bc2bf +size 4856 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022/hover by dynamic anchor.png b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022/hover by dynamic anchor.png index e49bb80730..77fdba9f57 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022/hover by dynamic anchor.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022/hover by dynamic anchor.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b1f69775eff39d7050ad798a4a1e1cd2a6d8c64165755821b308323a8ffdd6a3 -size 6800 +oid sha256:649e574b5780383132376335c58a00b422261c97578e0d4263dacf721c96e07f +size 7274 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022Dark/hover by dynamic anchor.png b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022Dark/hover by dynamic anchor.png index 25191f1a82..2f50dd6883 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022Dark/hover by dynamic anchor.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022Dark/hover by dynamic anchor.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c0ad443e2ebfd9e407d620883bca796029019e837a7e4ee3bdb4de969a9ff674 -size 4104 +oid sha256:74b8bb385de4a5b129f8696dc7ec0daddeae02ff0d4094d51d3a8a29213f9ac1 +size 4262 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox8px/hover by dynamic anchor.png b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox8px/hover by dynamic anchor.png index 7be9ec1d59..417fda320c 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox8px/hover by dynamic anchor.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox8px/hover by dynamic anchor.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3407b50dcebb17e851918686945aae31c4565e647b8660dea4666153f1982b96 -size 4682 +oid sha256:3d2e5a47b48250d70b0eb57e24841082a3466ea52705c8593ccbd33329be21d1 +size 4831 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefoxDark/hover by dynamic anchor.png b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefoxDark/hover by dynamic anchor.png index b2c6368b65..ddde6a1e2a 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefoxDark/hover by dynamic anchor.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefoxDark/hover by dynamic anchor.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:df9e44f2f7d79b2f039e775a3aa0e3e2f578bbc930d77dff05cb184237d7f57b -size 3571 +oid sha256:797a362d9f9c996e5f4514ed771860875ef21291b52524d17767f16bcb02dec8 +size 3649 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome/hover.png b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome/hover.png index 0683996aad..f9a0dddfc8 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome/hover.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome/hover.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:453d727fe4ed0d088bc5a4d8427e30f9b66eb10b6c46d6022597e501cbff7dc8 -size 37524 +oid sha256:7c0357855a4ecfd94d4041b8525e207271b9c963309bbba063768256529cede9 +size 37923 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome2022/hover.png b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome2022/hover.png index 1a9b98fa47..6f1aa00b76 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome2022/hover.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome2022/hover.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1e29441d0b054682ec40858d2abe7bf3584d57eaa736ea9b410634a2fc679afd -size 59048 +oid sha256:aa8df23d6ac152a8fff39780a33ac3709ffecf79aed7d76279ed86206720832c +size 59390 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome2022Dark/hover.png b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome2022Dark/hover.png index 1dc1fc1a66..1e89fa5e8e 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome2022Dark/hover.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome2022Dark/hover.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3d077dc7ab5ca4e9a37044e20356d264b5d3cd87ce1a3e22a5ea6e5fa2c924de -size 34666 +oid sha256:96cfdeb8224d1676073b78ef1fa4ef4d1d84ae13a452f3877039f20d25920501 +size 34993 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome8px/hover.png b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome8px/hover.png index 9ef331f796..a83d08d568 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome8px/hover.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chrome8px/hover.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d1dd998616112d18e22eed13786a0b51eef79f1dfbe494efbe651de3108dd145 -size 37885 +oid sha256:36d8c792e536383cd1792bfdb4f84ec80d64778881fd75f2ce01780f2233abe1 +size 38273 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chromeDark/hover.png b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chromeDark/hover.png index c8104ad771..5f6693b3c0 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chromeDark/hover.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/chromeDark/hover.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:883229893837a920551e76650b10267d0f029b69ebe8e53856b2d8068799c2c6 -size 26948 +oid sha256:66a6f93557246950260d07b2d43cdc6b1daafb51661a4f2b05de793415b2e855 +size 27235 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefox/hover.png b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefox/hover.png index a147d2293a..f42deb5445 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefox/hover.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefox/hover.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:023bc8453289b41f83852ef1d8841f5b6406bfe1c7f700fc84c6886a2887476d -size 48694 +oid sha256:d06b4f490b9598ab1df34c63ea138e26801a18eb6f8f4dad695aa6f337869359 +size 49102 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefox2022/hover.png b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefox2022/hover.png index 6c17a09c25..c6cdae2abd 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefox2022/hover.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefox2022/hover.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a79f361d1d57c9284f226d3d24a3256ce4a87ebc6ae642a019e4fc2627c13e79 -size 73761 +oid sha256:b9ab02ffa1c39025e836270246b1215b2417ecf3b21f0dca95d3bc491520317e +size 74121 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefox2022Dark/hover.png b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefox2022Dark/hover.png index 98c2bdd1d5..b6a10e4a7c 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefox2022Dark/hover.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefox2022Dark/hover.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d2ad8b6e012a2cb6f0e404e495aee90dcccd20265d9629cf95074c5fa5819588 -size 47505 +oid sha256:00449e18f58d90ce047da5b98eabf62262a3d14eac71a333d5712b7e3a188992 +size 47705 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefoxDark/hover.png b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefoxDark/hover.png index a648d37e50..36fdb073e7 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefoxDark/hover.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltips without wrapper around inline-block with 50% width/hover/firefoxDark/hover.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:64cbd2b8eddd8fe9a1b48a9a80db1d7e39d11d8cb9afafeef36f6cf1d56d7aee -size 36707 +oid sha256:c81a5aac387f99547bf99e6d82223c59fce3d544c54fc8aa659e0a9717e9ddd0 +size 37109 diff --git a/packages/react-ui/components/Hint/Hint.tsx b/packages/react-ui/components/Hint/Hint.tsx index ad7f530823..280a5fdb79 100644 --- a/packages/react-ui/components/Hint/Hint.tsx +++ b/packages/react-ui/components/Hint/Hint.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { globalObject, SafeTimer } from '@skbkontur/global-object'; -import isEqual from 'lodash.isequal'; import { ReactUIFeatureFlags, @@ -10,7 +9,7 @@ import { import { ThemeContext } from '../../lib/theming/ThemeContext'; import { ThemeFactory } from '../../lib/theming/ThemeFactory'; import { Theme } from '../../lib/theming/Theme'; -import { DUMMY_LOCATION, Popup, PopupPositionsType } from '../../internal/Popup'; +import { DUMMY_LOCATION, Popup, PopupPositionsType, ShortPopupPositionsType } from '../../internal/Popup'; import { Nullable } from '../../typings/utility-types'; import { MouseEventType } from '../../typings/event-types'; import { isTestEnv } from '../../lib/currentEnvironment'; @@ -56,7 +55,7 @@ export interface HintProps extends CommonProps { * * **Допустимые значения**: `"top"`, `"right"`, `"bottom"`, `"left"`, `"top left"`, `"top center"`, `"top right"`, `"right top"`, `"right middle"`, `"right bottom"`, `"bottom left"`, `"bottom center"`, `"bottom right"`, `"left top"`, `"left middle"`, `"left bottom"`. */ - pos?: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType; + pos?: ShortPopupPositionsType | PopupPositionsType; /** * Текст подсказки. */ @@ -84,24 +83,7 @@ export interface HintState { position: PopupPositionsType; } -const Positions: PopupPositionsType[] = [ - 'top center', - 'top left', - 'top right', - 'bottom center', - 'bottom left', - 'bottom right', - 'left middle', - 'left top', - 'left bottom', - 'right middle', - 'right top', - 'right bottom', -]; - -type DefaultProps = Required< - Pick ->; +type DefaultProps = Required>; /** * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент.
Можно задать другие условия отображения. @@ -112,11 +94,9 @@ export class Hint extends React.PureComponent implements I public static displayName = 'Hint'; public static defaultProps: DefaultProps = { - pos: 'top', manual: false, opened: false, maxWidth: 200, - allowedPositions: Positions, disableAnimations: isTestEnv, useWrapper: false, }; @@ -132,12 +112,11 @@ export class Hint extends React.PureComponent implements I private theme!: Theme; private featureFlags!: ReactUIFeatureFlags; private setRootNode!: TSetRootNode; - private positions: Nullable = null; private popupRef = React.createRef(); public componentDidUpdate(prevProps: HintProps) { - const { opened, manual, pos, allowedPositions } = this.getProps(); + const { opened, manual } = this.getProps(); if (!manual) { return; } @@ -148,15 +127,6 @@ export class Hint extends React.PureComponent implements I if (opened !== prevProps.opened) { this.setState({ opened: !!opened }); } - - if (this.featureFlags.hintAddDynamicPositioning) { - const posChanged = prevProps.pos !== pos; - const allowedChanged = !isEqual(prevProps.allowedPositions, allowedPositions); - - if (posChanged || allowedChanged) { - this.positions = null; - } - } } public componentWillUnmount() { @@ -200,34 +170,29 @@ export class Hint extends React.PureComponent implements I public renderMain() { const { disableAnimations, useWrapper } = this.getProps(); + const hasPin = !this.featureFlags.kebabHintRemovePin || !isTheme2022(this.theme); return ( - - {(flags) => { - const hasPin = !getFullReactUIFlagsContext(flags).kebabHintRemovePin || !isTheme2022(this.theme); - return ( - - this.setState({ position })} - disableAnimations={disableAnimations} - onMouseEnter={this.handleMouseEnter} - onMouseLeave={this.handleMouseLeave} - useWrapper={useWrapper} - ref={this.popupRef} - withoutMobile - > - {this.renderContent()} - - - ); - }} - + + this.setState({ position })} + disableAnimations={disableAnimations} + onMouseEnter={this.handleMouseEnter} + onMouseLeave={this.handleMouseLeave} + useWrapper={useWrapper} + ref={this.popupRef} + withoutMobile + > + {this.renderContent()} + + ); } @@ -253,38 +218,6 @@ export class Hint extends React.PureComponent implements I ); } - private getPositions = (): PopupPositionsType[] => { - if (this.featureFlags.hintAddDynamicPositioning) { - if (!this.positions) { - const { allowedPositions, pos } = this.getProps(); - let priorityPosition: PopupPositionsType; - switch (pos) { - case 'top': - priorityPosition = 'top center'; - break; - case 'bottom': - priorityPosition = 'bottom center'; - break; - case 'left': - priorityPosition = 'left middle'; - break; - case 'right': - priorityPosition = 'right middle'; - break; - default: - priorityPosition = pos; - } - const index = allowedPositions.indexOf(priorityPosition); - if (index === -1) { - throw new Error('Unexpected position passed to Hint. Expected one of: ' + allowedPositions.join(', ')); - } - this.positions = [...allowedPositions.slice(index), ...allowedPositions.slice(0, index)]; - } - return this.positions; - } - return Positions.filter((x) => x.startsWith(this.getProps().pos)); - }; - private handleMouseEnter = (e: MouseEventType) => { if (!this.getProps().manual && !this.timer) { this.timer = globalObject.setTimeout(this.open, 400); diff --git a/packages/react-ui/components/Tooltip/Tooltip.tsx b/packages/react-ui/components/Tooltip/Tooltip.tsx index 9e5a24b08a..eb1382d053 100644 --- a/packages/react-ui/components/Tooltip/Tooltip.tsx +++ b/packages/react-ui/components/Tooltip/Tooltip.tsx @@ -1,11 +1,10 @@ import React from 'react'; import warning from 'warning'; -import isEqual from 'lodash.isequal'; import { globalObject, SafeTimer } from '@skbkontur/global-object'; import { isNullable } from '../../lib/utils'; import { ThemeFactory } from '../../lib/theming/ThemeFactory'; -import { DefaultPosition, Popup, PopupProps, PopupPositionsType } from '../../internal/Popup'; +import { Popup, PopupProps, PopupPositionsType, ShortPopupPositionsType } from '../../internal/Popup'; import { RenderLayer, RenderLayerProps } from '../../internal/RenderLayer'; import { CrossIcon } from '../../internal/icons/CrossIcon'; import { Nullable } from '../../typings/utility-types'; @@ -70,9 +69,11 @@ export interface TooltipProps extends CommonProps { render?: Nullable<() => React.ReactNode>; /** - * Значение по умолчанию: `"top left"`. + * Приоритетное расположение подсказки относительно текста. + * + * **Допустимые значения**: `"top"`, `"right"`, `"bottom"`, `"left"`, `"top left"`, `"top center"`, `"top right"`, `"right top"`, `"right middle"`, `"right bottom"`, `"bottom left"`, `"bottom center"`, `"bottom right"`, `"left top"`, `"left middle"`, `"left bottom"`. */ - pos?: PopupPositionsType; + pos?: ShortPopupPositionsType | PopupPositionsType; /** * Триггер открытия тултипа @@ -153,24 +154,7 @@ export const TooltipDataTids = { crossIcon: 'Tooltip__crossIcon', } as const; -const Positions: PopupPositionsType[] = [ - 'right bottom', - 'right middle', - 'right top', - 'top right', - 'top center', - 'top left', - 'left top', - 'left middle', - 'left bottom', - 'bottom left', - 'bottom center', - 'bottom right', -]; - -type DefaultProps = Required< - Pick ->; +type DefaultProps = Required>; @rootNode export class Tooltip extends React.PureComponent implements InstanceWithAnchorElement { @@ -192,9 +176,7 @@ export class Tooltip extends React.PureComponent imp }; public static defaultProps: DefaultProps = { - pos: DefaultPosition, trigger: 'hover', - allowedPositions: Positions, disableAnimations: isTestEnv, useWrapper: false, delayBeforeShow: DEFAULT_DELAY, @@ -209,22 +191,15 @@ export class Tooltip extends React.PureComponent imp private theme!: Theme; private hoverTimeout: SafeTimer; private contentElement: Nullable = null; - private positions: Nullable = null; private clickedOutside = true; private setRootNode!: TSetRootNode; private popupRef = React.createRef(); public componentDidUpdate(prevProps: TooltipProps) { - const { trigger, allowedPositions, pos } = this.getProps(); + const { trigger } = this.getProps(); if (trigger === 'closed' && this.state.opened) { this.close(); } - const posChanged = prevProps.pos !== pos; - const allowedChanged = !isEqual(prevProps.allowedPositions, allowedPositions); - - if (posChanged || allowedChanged) { - this.positions = null; - } } public componentWillUnmount() { @@ -371,7 +346,8 @@ export class Tooltip extends React.PureComponent imp maxWidth="none" opened={this.state.opened} disableAnimations={disableAnimations} - positions={this.getPositions()} + positions={this.props.allowedPositions} + pos={this.props.pos} ignoreHover={trigger === 'hoverAnchor'} onOpen={this.props.onOpen} onClose={this.props.onClose} @@ -390,20 +366,6 @@ export class Tooltip extends React.PureComponent imp this.contentElement = node; }; - private getPositions() { - if (!this.positions) { - const { allowedPositions, pos } = this.getProps(); - const index = allowedPositions.indexOf(pos); - if (index === -1) { - throw new Error('Unexpected position passed to Tooltip. Expected one of: ' + allowedPositions.join(', ')); - } - - this.positions = [...allowedPositions.slice(index), ...allowedPositions.slice(0, index)]; - } - - return this.positions; - } - private getPopupAndLayerProps(): { layerProps?: Partial; popupProps: Partial; diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx index 09dcfea984..9f945ed33e 100644 --- a/packages/react-ui/internal/Popup/Popup.tsx +++ b/packages/react-ui/internal/Popup/Popup.tsx @@ -34,22 +34,23 @@ const POPUP_BORDER_DEFAULT_COLOR = 'transparent'; const TRANSITION_TIMEOUT = { enter: 0, exit: 200 }; export const PopupPositions = [ - 'top left', 'top center', + 'top left', 'top right', - 'right top', - 'right middle', - 'right bottom', - 'bottom right', 'bottom center', 'bottom left', - 'left bottom', + 'bottom right', 'left middle', 'left top', + 'left bottom', + 'right middle', + 'right top', + 'right bottom', ] as const; export const DefaultPosition = PopupPositions[0]; export type PopupPositionsType = typeof PopupPositions[number]; +export type ShortPopupPositionsType = 'top' | 'bottom' | 'left' | 'right'; export const DUMMY_LOCATION: PopupLocation = { position: DefaultPosition, @@ -86,7 +87,8 @@ export interface PopupProps pinOffset?: number; pinSize?: number; popupOffset?: number; - positions: Readonly; + positions?: Readonly; + pos?: PopupPositionsType | ShortPopupPositionsType; /** * Явно указывает, что вложенные элементы должны быть обёрнуты в ``.
Используется для корректного позиционирования тултипа при двух и более вложенных элементах. * @@ -137,7 +139,7 @@ export const PopupIds = { type DefaultProps = Required< Pick< PopupProps, - 'popupOffset' | 'hasPin' | 'hasShadow' | 'disableAnimations' | 'useWrapper' | 'ignoreHover' | 'width' + 'popupOffset' | 'hasPin' | 'hasShadow' | 'disableAnimations' | 'useWrapper' | 'ignoreHover' | 'width' | 'positions' > >; @@ -203,6 +205,11 @@ export class Popup extends React.Component { */ positions: PropTypes.array, + /** + * Приоритетная позиция попапа + */ + pos: PropTypes.string, + /** * Игнорировать ли события hover/click */ @@ -210,6 +217,7 @@ export class Popup extends React.Component { }; public static defaultProps: DefaultProps = { + positions: PopupPositions, popupOffset: 0, hasPin: false, hasShadow: false, @@ -619,8 +627,24 @@ export class Popup extends React.Component { ); } + private processPosAndPositions() { + const { positions } = this.getProps(); + let pos_ = ''; + if (this.props.pos) { + pos_ = this.props.pos; + } else { + pos_ = positions[0]; + } + const index = positions.findIndex((position) => position.startsWith(pos_)); + if (index === -1) { + throw new Error('Unexpected position ' + pos_ + ' passed to Popup. Expected one of: ' + positions.join(', ')); + } + return [...positions.slice(index), ...positions.slice(0, index)]; + } + private getLocation(popupElement: Element, location?: Nullable) { - const { positions, tryPreserveFirstRenderedPosition } = this.props; + const { tryPreserveFirstRenderedPosition } = this.getProps(); + const positions = this.processPosAndPositions(); const anchorElement = this.anchorElement; warning( From bff490843d30b32d07955de9062180349d4cc72c Mon Sep 17 00:00:00 2001 From: SchwJ Date: Thu, 2 May 2024 15:44:09 +0500 Subject: [PATCH 2/5] chore(Popup): use warning instead error, rename function --- packages/react-ui/internal/Popup/Popup.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx index 9f945ed33e..e6d87931b6 100644 --- a/packages/react-ui/internal/Popup/Popup.tsx +++ b/packages/react-ui/internal/Popup/Popup.tsx @@ -627,7 +627,7 @@ export class Popup extends React.Component { ); } - private processPosAndPositions() { + private reorderPropsPositionsWithPriorityPos() { const { positions } = this.getProps(); let pos_ = ''; if (this.props.pos) { @@ -637,14 +637,15 @@ export class Popup extends React.Component { } const index = positions.findIndex((position) => position.startsWith(pos_)); if (index === -1) { - throw new Error('Unexpected position ' + pos_ + ' passed to Popup. Expected one of: ' + positions.join(', ')); + warning(false, 'Unexpected position ' + pos_ + ' passed to Popup. Expected one of: ' + positions.join(', ')); + return positions; } return [...positions.slice(index), ...positions.slice(0, index)]; } private getLocation(popupElement: Element, location?: Nullable) { const { tryPreserveFirstRenderedPosition } = this.getProps(); - const positions = this.processPosAndPositions(); + const positions = this.reorderPropsPositionsWithPriorityPos(); const anchorElement = this.anchorElement; warning( From ad6ee7c6d17dbec8dd16a32724717b7fcea309f2 Mon Sep 17 00:00:00 2001 From: SchwJ Date: Sat, 11 May 2024 16:51:13 +0500 Subject: [PATCH 3/5] chore(Popup, Hint, Tooltip): unify positioning under feature flag --- .../Hint/hint near screen edge/chrome.png | 4 +- .../Hint/hint near screen edge/firefox.png | 4 +- .../chrome/doesn't cover children.png | 4 +- .../chrome2022/doesn't cover children.png | 4 +- .../chrome2022Dark/doesn't cover children.png | 4 +- .../chrome8px/doesn't cover children.png | 4 +- .../chromeDark/doesn't cover children.png | 4 +- .../firefox/doesn't cover children.png | 4 +- .../firefox2022/doesn't cover children.png | 4 +- .../doesn't cover children.png | 4 +- .../firefox8px/doesn't cover children.png | 4 +- .../firefoxDark/doesn't cover children.png | 4 +- .../pressed/chrome/pressed.png | 4 +- .../pressed/chrome2022/pressed.png | 4 +- .../pressed/chrome2022Dark/pressed.png | 4 +- .../pressed/chrome8px/pressed.png | 4 +- .../pressed/chromeDark/pressed.png | 4 +- .../pressed/chromeFlat8px/pressed.png | 4 +- .../pressed/firefox/pressed.png | 4 +- .../pressed/firefox2022/pressed.png | 4 +- .../pressed/firefox2022Dark/pressed.png | 4 +- .../pressed/firefox8px/pressed.png | 4 +- .../pressed/firefoxDark/pressed.png | 4 +- .../pressed/firefoxFlat8px/pressed.png | 4 +- .../firefox/hover by dynamic anchor.png | 4 +- .../firefox2022/hover by dynamic anchor.png | 4 +- .../hover by dynamic anchor.png | 4 +- .../firefox8px/hover by dynamic anchor.png | 4 +- .../firefoxDark/hover by dynamic anchor.png | 4 +- packages/react-ui/components/Hint/Hint.tsx | 63 +++++++++- .../Hint/__stories__/Hint.stories.tsx | 4 +- .../react-ui/components/Tooltip/Tooltip.tsx | 115 ++++++++++++++---- packages/react-ui/internal/Popup/Popup.tsx | 56 +++++++-- .../FEATUREFLAGSCONTEXT.md | 24 ++++ .../ReactUIFeatureFlagsContext.tsx | 2 + 35 files changed, 286 insertions(+), 94 deletions(-) diff --git a/packages/react-ui/.creevey/images/Hint/hint near screen edge/chrome.png b/packages/react-ui/.creevey/images/Hint/hint near screen edge/chrome.png index a52eb418bf..1e5bdf3da2 100644 --- a/packages/react-ui/.creevey/images/Hint/hint near screen edge/chrome.png +++ b/packages/react-ui/.creevey/images/Hint/hint near screen edge/chrome.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f24135c76ef02d176629d75d2f020dc62c901c9984994c0dab5956606d565ac8 -size 48048 +oid sha256:eb928e3b4ff6927f016302d290f459fd1a30e7501e6bafbb6031903ec738f3fe +size 48513 diff --git a/packages/react-ui/.creevey/images/Hint/hint near screen edge/firefox.png b/packages/react-ui/.creevey/images/Hint/hint near screen edge/firefox.png index 6348b23bfb..fc163af7b0 100644 --- a/packages/react-ui/.creevey/images/Hint/hint near screen edge/firefox.png +++ b/packages/react-ui/.creevey/images/Hint/hint near screen edge/firefox.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:de477c840059660f6bc7d1d36af1ce6301a5be85b702ee1282cec0c0b3f25b5a -size 66319 +oid sha256:2946af467970d466c08e11598897310b71e0195937f952739b793121207b40f0 +size 66880 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome/doesn't cover children.png index 2bd265ff9e..b7bad8f025 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1ab1f8bb379614b0ab437b55edae9c32e3dd9bd3d0aa2e5a531418f407ce8560 -size 85561 +oid sha256:09309f717ac69a582707b971410c5dd30b3e8739c22e8a8f3176508fbf98d45a +size 85284 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022/doesn't cover children.png index bd419369ae..f7910ad70a 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3d3b56cf34ff776c48283ab2d8ee9f87fb29c5d78e8552ad075f0480dc5abf31 -size 88549 +oid sha256:38063fb85089a0eeb4e7b1e68813b70ad1d1dbc87f7ce14eb60b0c4a891abf1d +size 88318 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022Dark/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022Dark/doesn't cover children.png index 3633e690f0..b56a68ed95 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022Dark/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome2022Dark/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8b9e77647b8ca620e5eea12c6030bc831aafd5d0943a80431239c0ec3635aeca -size 85742 +oid sha256:2b9696015b54b0e5836185ab093550b6ffc8e85eb7a1045bd9fcbb051e3a6b39 +size 85890 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome8px/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome8px/doesn't cover children.png index 7bebc2a7a4..59ea6c00cf 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome8px/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chrome8px/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:54a609e4fe46fd45215e9ed6fe1ffa9bd3bfac04318e3c9524aa64b5b4daa81d -size 85629 +oid sha256:bd2de18a15075bab9b01e266ba3cb1b6a73b8357cd808c3e3cfd4e059c4dd41d +size 85368 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chromeDark/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chromeDark/doesn't cover children.png index 5ebf9a5854..af52a1a349 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chromeDark/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/chromeDark/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6bac606858862971fbd7b65020348ee484ae7b98831d5b35d0ee0514ecd38566 -size 84292 +oid sha256:31e97612fef2c1c6f07e6e35d993f107e6cb836f99a5fe073561d24510c1e3fe +size 84245 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox/doesn't cover children.png index c969827fa8..8161186139 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a97124a74838741ecaa4642de16c8ee2e78bfd4d7af93a932d0722138eb657a4 -size 76700 +oid sha256:c221d9578d2a344fd9886aad10a88f6a7d15d0d02da5ce4b447c81698265a640 +size 76130 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022/doesn't cover children.png index f693c6aa91..6e7dbdc551 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c88835e44c4c2f92688dc48d69c55b89781917afb9e86b9bc8a6fc242ca6b42f -size 79664 +oid sha256:0478cd1130875e727c4b9646246f2e758be33c8b24f4937c252484e0bb96332b +size 78903 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022Dark/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022Dark/doesn't cover children.png index f55050a8a1..e6931bb90c 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022Dark/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox2022Dark/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cf08c4b11c8baafa883fa4797ebe2f7a1506cf3a327adbc29326c25e7549a1db -size 76627 +oid sha256:b9b52b074b13a56e204541c553d9d25551302428bf354e93e464ef5727272312 +size 76260 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox8px/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox8px/doesn't cover children.png index 5e1e48d721..79a960d761 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox8px/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefox8px/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ef936e41c440a80d70a7071eeed60968524ce8ac82a9803065e57c785624c71b -size 76904 +oid sha256:74a2961cd911b355a90cd440d927cb52cc3203478c6e8b47c07fb00f6a650e30 +size 76393 diff --git a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefoxDark/doesn't cover children.png b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefoxDark/doesn't cover children.png index c140388244..27b0d4b1f3 100644 --- a/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefoxDark/doesn't cover children.png +++ b/packages/react-ui/.creevey/images/Loader/Inactive loader/doesn't cover children/firefoxDark/doesn't cover children.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8bf151e2565e698e43f46af4c9d5d3cffc41dbadee38eb224eeee50f6bf54cec -size 74886 +oid sha256:34b568e1e8ee6f800006d6999a451f5aa394bee5a0069d3d4c93501ccc13dcd7 +size 74620 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome/pressed.png index f28cc43532..ca7074c1b6 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3fad6b5cfa80133220ac77ce4dec9c502706199b3b5d6a3deca403ffec3e66f8 -size 2658 +oid sha256:77ea2d15df7bba002d4f7c42afa695f86c041a0670056d86f5710429c0746b3e +size 2638 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022/pressed.png index 061c937f3e..ca7e2ef3bd 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:27e248c4874fdac513364726365fda4280b7b9f0c1e5793b64b1cdeb31952c14 -size 3117 +oid sha256:2f929f8c02109ecfb266793fb67d448e0dcb8a6890595a2ef34214e23afe7318 +size 3172 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022Dark/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022Dark/pressed.png index bfaed71cab..e2c18bbaf3 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022Dark/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome2022Dark/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f0d6483233dd3d82a24102640afa4d209bd4971a74161c346b45bfb110839568 -size 1914 +oid sha256:b4830981d5180bd2832a1f00f4f3bc72a51bc2a2e8b143467c1decb6f59e9ece +size 1902 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome8px/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome8px/pressed.png index e065165de5..3c8e4e0e4c 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome8px/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chrome8px/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f661f4f67bcd1878a06056220ee92a61e620a01225925e0492f2be023c56cd13 -size 2675 +oid sha256:0f1be61475db3dad953a292a97c41d8c1c4dfebe2740f0f70a7c833dffb18f37 +size 2668 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeDark/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeDark/pressed.png index f1dd30eee7..23bf617394 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeDark/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeDark/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:28a000f54da51511b02509d2d5eb7a352fd2ff54073002cc590eb2011a549d11 -size 2137 +oid sha256:fa70c57cc07b7d3ad4a88067f4a2c74bd9a108723216765e7a554e389f9cf200 +size 2136 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeFlat8px/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeFlat8px/pressed.png index e065165de5..3c8e4e0e4c 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeFlat8px/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/chromeFlat8px/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f661f4f67bcd1878a06056220ee92a61e620a01225925e0492f2be023c56cd13 -size 2675 +oid sha256:0f1be61475db3dad953a292a97c41d8c1c4dfebe2740f0f70a7c833dffb18f37 +size 2668 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox/pressed.png index b62c945059..62c0c74cd6 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:24f9620cfce4265db6452c8b9261cb92b2af6a54f38bb93ad85ec3e1902b18f1 -size 3004 +oid sha256:5b8c46d42fdafd2cc624707c1ab592bcded5354e861350e7bdd72f1ace9ba377 +size 2993 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022/pressed.png index 595ec103fe..4db33c2e75 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9be84f4d21543059f8dd0d849e93a3dcb353f18b6f1ce34beb54d26fa0ba3906 -size 3529 +oid sha256:2b077e584d9f9ab522972492def077f80fbeedb4eb930fada24988e69eb276b0 +size 3494 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022Dark/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022Dark/pressed.png index f5f7edd3a6..8d514796fc 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022Dark/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox2022Dark/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9bd26cfd0f9c33b8c9655d310e38044491eaf0979e929952f5a599896bd8e839 -size 2171 +oid sha256:8a7c0c80024653a9c3e3aff1f2a61fa7ea7510873c23df2953791bc613c1233f +size 2151 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox8px/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox8px/pressed.png index 730446f450..f50e70afba 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox8px/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefox8px/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:67762ff27725d94bc373520bbdf2a2b142b60f97e11dae14d05c2cb1639944ec -size 3012 +oid sha256:2ca27b1e70413718410f1fba524e471b2602e702b654cc024af919f0d38b6460 +size 2982 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxDark/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxDark/pressed.png index 7a9afddeac..6a053f44cf 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxDark/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxDark/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ff3888f645b8ae698113675082b76e8437f9378a17b9135523df2a6aa8fe014d -size 2330 +oid sha256:b0b073df5c93fa55cf33a67a6c493155b0e00f1a9cd8f8a1a97595c228a90810 +size 2327 diff --git a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxFlat8px/pressed.png b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxFlat8px/pressed.png index 730446f450..f50e70afba 100644 --- a/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxFlat8px/pressed.png +++ b/packages/react-ui/.creevey/images/Toggle/disabled with Tooltip/pressed/firefoxFlat8px/pressed.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:67762ff27725d94bc373520bbdf2a2b142b60f97e11dae14d05c2cb1639944ec -size 3012 +oid sha256:2ca27b1e70413718410f1fba524e471b2602e702b654cc024af919f0d38b6460 +size 2982 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox/hover by dynamic anchor.png b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox/hover by dynamic anchor.png index fdad6a8cc3..fb0416125c 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox/hover by dynamic anchor.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox/hover by dynamic anchor.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8de9dffd527ecc4494d8f50fb877e8b910259e99644e774b8afb0e62e08bc2bf -size 4856 +oid sha256:79f24ae9ff4de03b82d3407253d56cfb3e20d399de3c9b62377c20ea669b4d6d +size 4740 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022/hover by dynamic anchor.png b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022/hover by dynamic anchor.png index 77fdba9f57..e49bb80730 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022/hover by dynamic anchor.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022/hover by dynamic anchor.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:649e574b5780383132376335c58a00b422261c97578e0d4263dacf721c96e07f -size 7274 +oid sha256:b1f69775eff39d7050ad798a4a1e1cd2a6d8c64165755821b308323a8ffdd6a3 +size 6800 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022Dark/hover by dynamic anchor.png b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022Dark/hover by dynamic anchor.png index 2f50dd6883..25191f1a82 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022Dark/hover by dynamic anchor.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox2022Dark/hover by dynamic anchor.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:74b8bb385de4a5b129f8696dc7ec0daddeae02ff0d4094d51d3a8a29213f9ac1 -size 4262 +oid sha256:c0ad443e2ebfd9e407d620883bca796029019e837a7e4ee3bdb4de969a9ff674 +size 4104 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox8px/hover by dynamic anchor.png b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox8px/hover by dynamic anchor.png index 417fda320c..7be9ec1d59 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox8px/hover by dynamic anchor.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefox8px/hover by dynamic anchor.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3d2e5a47b48250d70b0eb57e24841082a3466ea52705c8593ccbd33329be21d1 -size 4831 +oid sha256:3407b50dcebb17e851918686945aae31c4565e647b8660dea4666153f1982b96 +size 4682 diff --git a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefoxDark/hover by dynamic anchor.png b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefoxDark/hover by dynamic anchor.png index ddde6a1e2a..b2c6368b65 100644 --- a/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefoxDark/hover by dynamic anchor.png +++ b/packages/react-ui/.creevey/images/Tooltip/Tooltip with anchor/hover by dynamic anchor/firefoxDark/hover by dynamic anchor.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:797a362d9f9c996e5f4514ed771860875ef21291b52524d17767f16bcb02dec8 -size 3649 +oid sha256:df9e44f2f7d79b2f039e775a3aa0e3e2f578bbc930d77dff05cb184237d7f57b +size 3571 diff --git a/packages/react-ui/components/Hint/Hint.tsx b/packages/react-ui/components/Hint/Hint.tsx index 280a5fdb79..6ff6ecf26e 100644 --- a/packages/react-ui/components/Hint/Hint.tsx +++ b/packages/react-ui/components/Hint/Hint.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { globalObject, SafeTimer } from '@skbkontur/global-object'; +import isEqual from 'lodash.isequal'; import { ReactUIFeatureFlags, @@ -83,6 +84,21 @@ export interface HintState { position: PopupPositionsType; } +const OldPositions: PopupPositionsType[] = [ + 'top center', + 'top left', + 'top right', + 'bottom center', + 'bottom left', + 'bottom right', + 'left middle', + 'left top', + 'left bottom', + 'right middle', + 'right top', + 'right bottom', +]; + type DefaultProps = Required>; /** @@ -112,6 +128,7 @@ export class Hint extends React.PureComponent implements I private theme!: Theme; private featureFlags!: ReactUIFeatureFlags; private setRootNode!: TSetRootNode; + private positions: Nullable = null; private popupRef = React.createRef(); @@ -127,6 +144,17 @@ export class Hint extends React.PureComponent implements I if (opened !== prevProps.opened) { this.setState({ opened: !!opened }); } + + if (!this.featureFlags.popupUnifyPositioning) { + const pos = this.props.pos ? this.props.pos : 'top'; + const allowedPositions = this.props.allowedPositions ? this.props.allowedPositions : OldPositions; + const posChanged = prevProps.pos !== pos; + const allowedChanged = !isEqual(prevProps.allowedPositions, allowedPositions); + + if (posChanged || allowedChanged) { + this.positions = null; + } + } } public componentWillUnmount() { @@ -178,7 +206,7 @@ export class Hint extends React.PureComponent implements I hasPin={hasPin} opened={this.state.opened} anchorElement={this.props.children} - positions={this.props.allowedPositions} + positions={this.featureFlags.popupUnifyPositioning ? this.props.allowedPositions : this.getPositions()} pos={this.props.pos} backgroundColor={this.theme.hintBgColor} borderColor={HINT_BORDER_COLOR} @@ -218,6 +246,39 @@ export class Hint extends React.PureComponent implements I ); } + private getPositions = (): PopupPositionsType[] => { + const pos = this.props.pos ? this.props.pos : 'top'; + const allowedPositions = this.props.allowedPositions ? this.props.allowedPositions : OldPositions; + if (this.featureFlags.hintAddDynamicPositioning) { + if (!this.positions) { + let priorityPosition: PopupPositionsType; + switch (pos) { + case 'top': + priorityPosition = 'top center'; + break; + case 'bottom': + priorityPosition = 'bottom center'; + break; + case 'left': + priorityPosition = 'left middle'; + break; + case 'right': + priorityPosition = 'right middle'; + break; + default: + priorityPosition = pos; + } + const index = allowedPositions.indexOf(priorityPosition); + if (index === -1) { + throw new Error('Unexpected position passed to Hint. Expected one of: ' + allowedPositions.join(', ')); + } + this.positions = [...allowedPositions.slice(index), ...allowedPositions.slice(0, index)]; + } + return this.positions; + } + return OldPositions.filter((x) => x.startsWith(pos)); + }; + private handleMouseEnter = (e: MouseEventType) => { if (!this.getProps().manual && !this.timer) { this.timer = globalObject.setTimeout(this.open, 400); diff --git a/packages/react-ui/components/Hint/__stories__/Hint.stories.tsx b/packages/react-ui/components/Hint/__stories__/Hint.stories.tsx index 6d9acbec74..190792814a 100644 --- a/packages/react-ui/components/Hint/__stories__/Hint.stories.tsx +++ b/packages/react-ui/components/Hint/__stories__/Hint.stories.tsx @@ -343,7 +343,7 @@ export const HintNearScreenEdge = () => ( - +
-
Hey there!
} pos="bottom center" trigger="opened"> +
Hey there!
} pos="top center" trigger="opened"> diff --git a/packages/react-ui/components/Tooltip/Tooltip.tsx b/packages/react-ui/components/Tooltip/Tooltip.tsx index eb1382d053..0be1222c04 100644 --- a/packages/react-ui/components/Tooltip/Tooltip.tsx +++ b/packages/react-ui/components/Tooltip/Tooltip.tsx @@ -1,10 +1,18 @@ import React from 'react'; import warning from 'warning'; +import isEqual from 'lodash.isequal'; import { globalObject, SafeTimer } from '@skbkontur/global-object'; import { isNullable } from '../../lib/utils'; import { ThemeFactory } from '../../lib/theming/ThemeFactory'; -import { Popup, PopupProps, PopupPositionsType, ShortPopupPositionsType } from '../../internal/Popup'; +import { + DefaultPosition, + Popup, + PopupProps, + PopupPositionsType, + ShortPopupPositionsType, + OldDefaultPosition, +} from '../../internal/Popup'; import { RenderLayer, RenderLayerProps } from '../../internal/RenderLayer'; import { CrossIcon } from '../../internal/icons/CrossIcon'; import { Nullable } from '../../typings/utility-types'; @@ -20,6 +28,11 @@ import { createPropsGetter } from '../../lib/createPropsGetter'; import { isTheme2022 } from '../../lib/theming/ThemeHelpers'; import { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon'; import { isInstanceOf } from '../../lib/isInstanceOf'; +import { + getFullReactUIFlagsContext, + ReactUIFeatureFlags, + ReactUIFeatureFlagsContext, +} from '../../lib/featureFlagsContext'; import { styles } from './Tooltip.styles'; @@ -154,6 +167,21 @@ export const TooltipDataTids = { crossIcon: 'Tooltip__crossIcon', } as const; +const OldPositions: PopupPositionsType[] = [ + 'right bottom', + 'right middle', + 'right top', + 'top right', + 'top center', + 'top left', + 'left top', + 'left middle', + 'left bottom', + 'bottom left', + 'bottom center', + 'bottom right', +]; + type DefaultProps = Required>; @rootNode @@ -189,8 +217,10 @@ export class Tooltip extends React.PureComponent imp public state: TooltipState = { opened: false, focused: false }; private theme!: Theme; + public featureFlags!: ReactUIFeatureFlags; private hoverTimeout: SafeTimer; private contentElement: Nullable = null; + private positions: Nullable = null; private clickedOutside = true; private setRootNode!: TSetRootNode; @@ -200,6 +230,16 @@ export class Tooltip extends React.PureComponent imp if (trigger === 'closed' && this.state.opened) { this.close(); } + if (!this.featureFlags.popupUnifyPositioning) { + const pos = this.props.pos ? this.props.pos : OldDefaultPosition; + const allowedPositions = this.props.allowedPositions ? this.props.allowedPositions : OldPositions; + const posChanged = prevProps.pos !== pos; + const allowedChanged = !isEqual(prevProps.allowedPositions, allowedPositions); + + if (posChanged || allowedChanged) { + this.positions = null; + } + } } public componentWillUnmount() { @@ -208,30 +248,37 @@ export class Tooltip extends React.PureComponent imp public render() { return ( - - {(theme) => { - this.theme = theme; + + {(flags) => { + this.featureFlags = getFullReactUIFlagsContext(flags); return ( - - {this.renderMain()} - + + {(theme) => { + this.theme = theme; + return ( + + {this.renderMain()} + + ); + }} + ); }} - + ); } @@ -346,7 +393,7 @@ export class Tooltip extends React.PureComponent imp maxWidth="none" opened={this.state.opened} disableAnimations={disableAnimations} - positions={this.props.allowedPositions} + positions={this.featureFlags.popupUnifyPositioning ? this.props.allowedPositions : this.getPositions()} pos={this.props.pos} ignoreHover={trigger === 'hoverAnchor'} onOpen={this.props.onOpen} @@ -362,6 +409,28 @@ export class Tooltip extends React.PureComponent imp ); } + private getPositions() { + if (!this.positions) { + let pos; + if (this.props.pos) { + pos = this.props.pos; + } else if (this.featureFlags.popupUnifyPositioning) { + pos = DefaultPosition; + } else { + pos = OldDefaultPosition; + } + const allowedPositions = this.props.allowedPositions ? this.props.allowedPositions : OldPositions; + const index = allowedPositions.indexOf(pos as PopupPositionsType); + if (index === -1) { + throw new Error('Unexpected position passed to Tooltip. Expected one of: ' + allowedPositions.join(', ')); + } + + this.positions = [...allowedPositions.slice(index), ...allowedPositions.slice(0, index)]; + } + + return this.positions; + } + private refContent = (node: HTMLElement | null) => { this.contentElement = node; }; diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx index 9f945ed33e..705870d29b 100644 --- a/packages/react-ui/internal/Popup/Popup.tsx +++ b/packages/react-ui/internal/Popup/Popup.tsx @@ -25,6 +25,11 @@ import { callChildRef } from '../../lib/callChildRef/callChildRef'; import { isInstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement'; import { createPropsGetter } from '../../lib/createPropsGetter'; import { isInstanceOf } from '../../lib/isInstanceOf'; +import { + getFullReactUIFlagsContext, + ReactUIFeatureFlags, + ReactUIFeatureFlagsContext, +} from '../../lib/featureFlagsContext'; import { PopupPin } from './PopupPin'; import { Offset, PopupHelper, PositionObject, Rect } from './PopupHelper'; @@ -47,7 +52,24 @@ export const PopupPositions = [ 'right top', 'right bottom', ] as const; + +export const OldPopupPositions = [ + 'top left', + 'top center', + 'top right', + 'right top', + 'right middle', + 'right bottom', + 'bottom right', + 'bottom center', + 'bottom left', + 'left bottom', + 'left middle', + 'left top', +] as const; + export const DefaultPosition = PopupPositions[0]; +export const OldDefaultPosition = OldPopupPositions[0]; export type PopupPositionsType = typeof PopupPositions[number]; export type ShortPopupPositionsType = 'top' | 'bottom' | 'left' | 'right'; @@ -99,7 +121,7 @@ export interface PopupProps width?: React.CSSProperties['width']; /** * При очередном рендере пытаться сохранить первоначальную позицию попапа - * (в числе числе, когда он выходит за пределы экрана, но может быть проскролен в него). + * (в том числе, когда он выходит за пределы экрана, но может быть проскролен в него). * * Нужен только для Tooltip. В остальных случаях позиция перестраивается автоматически. * @see https://github.com/skbkontur/retail-ui/pull/1195 @@ -139,7 +161,7 @@ export const PopupIds = { type DefaultProps = Required< Pick< PopupProps, - 'popupOffset' | 'hasPin' | 'hasShadow' | 'disableAnimations' | 'useWrapper' | 'ignoreHover' | 'width' | 'positions' + 'popupOffset' | 'hasPin' | 'hasShadow' | 'disableAnimations' | 'useWrapper' | 'ignoreHover' | 'width' > >; @@ -217,7 +239,6 @@ export class Popup extends React.Component { }; public static defaultProps: DefaultProps = { - positions: PopupPositions, popupOffset: 0, hasPin: false, hasShadow: false, @@ -234,6 +255,7 @@ export class Popup extends React.Component { public state: PopupState = { location: this.props.opened ? DUMMY_LOCATION : null }; private theme!: Theme; + public featureFlags!: ReactUIFeatureFlags; private layoutEventsToken: Nullable>; private locationUpdateId: Nullable = null; private lastPopupContentElement: Nullable; @@ -304,12 +326,19 @@ export class Popup extends React.Component { public render() { return ( - - {(theme) => { - this.theme = theme; - return this.renderMain(); + + {(flags) => { + this.featureFlags = getFullReactUIFlagsContext(flags); + return ( + + {(theme) => { + this.theme = theme; + return this.renderMain(); + }} + + ); }} - + ); } @@ -628,7 +657,7 @@ export class Popup extends React.Component { } private processPosAndPositions() { - const { positions } = this.getProps(); + const positions = this.props.positions ? this.props.positions : PopupPositions; let pos_ = ''; if (this.props.pos) { pos_ = this.props.pos; @@ -644,7 +673,14 @@ export class Popup extends React.Component { private getLocation(popupElement: Element, location?: Nullable) { const { tryPreserveFirstRenderedPosition } = this.getProps(); - const positions = this.processPosAndPositions(); + let positions; + if (this.featureFlags.popupUnifyPositioning) { + positions = this.processPosAndPositions(); + } else if (this.props.positions) { + positions = this.props.positions; + } else { + positions = OldPopupPositions; + } const anchorElement = this.anchorElement; warning( diff --git a/packages/react-ui/lib/featureFlagsContext/FEATUREFLAGSCONTEXT.md b/packages/react-ui/lib/featureFlagsContext/FEATUREFLAGSCONTEXT.md index 6e7b86a5c0..ed83c19434 100644 --- a/packages/react-ui/lib/featureFlagsContext/FEATUREFLAGSCONTEXT.md +++ b/packages/react-ui/lib/featureFlagsContext/FEATUREFLAGSCONTEXT.md @@ -276,6 +276,30 @@ import { Hint, Button, ReactUIFeatureFlagsContext } from '@skbkontur/react-ui'; ``` + +### popupUnifyPositioning + +Этот флаг делает одинаковым порядок выбора позиции Hint'ом и Tooltip'ом. Таким образом при одинаковых условиях Hint и Tooltip будут отрисовываться с одинаковой стороны с одинаковым выравниванием. +Отличие Hint и Tooltip остается в том, что при изменении viewport открытый Tooltip остается на том месте, на котором он был отрисован, а Hint -- ищет более "выгодное" положение. + +```jsx harmony +import { Hint, Button, Tooltip, ReactUIFeatureFlagsContext } from '@skbkontur/react-ui'; + + + + + + + 'Example!'} trigger="opened"> + + + +``` + ## Объект со всеми флагами Чтобы получить объект со всеми флагами, необходимо применить вспомогательную функцию getFullValidationsFlagsContext к объекту заданных флагов: diff --git a/packages/react-ui/lib/featureFlagsContext/ReactUIFeatureFlagsContext.tsx b/packages/react-ui/lib/featureFlagsContext/ReactUIFeatureFlagsContext.tsx index 4e254ab4a8..5ee74d1661 100644 --- a/packages/react-ui/lib/featureFlagsContext/ReactUIFeatureFlagsContext.tsx +++ b/packages/react-ui/lib/featureFlagsContext/ReactUIFeatureFlagsContext.tsx @@ -10,6 +10,7 @@ export interface ReactUIFeatureFlags { linkFocusOutline?: boolean; comboBoxAllowValueChangeInEditingState?: boolean; hintAddDynamicPositioning?: boolean; + popupUnifyPositioning?: boolean; } export const reactUIFeatureFlagsDefault: ReactUIFeatureFlags = { @@ -22,6 +23,7 @@ export const reactUIFeatureFlagsDefault: ReactUIFeatureFlags = { linkFocusOutline: false, comboBoxAllowValueChangeInEditingState: false, hintAddDynamicPositioning: false, + popupUnifyPositioning: false, }; export const ReactUIFeatureFlagsContext = React.createContext(reactUIFeatureFlagsDefault); From 247b2bb2e34934b71ba2e5a2763d173d331385f2 Mon Sep 17 00:00:00 2001 From: SchwJ Date: Fri, 17 May 2024 09:59:18 +0500 Subject: [PATCH 4/5] chore(Hint, Tooltip): fix 1, 2 review comments --- packages/react-ui/components/Hint/Hint.tsx | 13 ++++++++++--- .../react-ui/components/Tooltip/Tooltip.tsx | 18 +++++++++++++----- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/packages/react-ui/components/Hint/Hint.tsx b/packages/react-ui/components/Hint/Hint.tsx index 6ff6ecf26e..fb557bc9b0 100644 --- a/packages/react-ui/components/Hint/Hint.tsx +++ b/packages/react-ui/components/Hint/Hint.tsx @@ -132,6 +132,10 @@ export class Hint extends React.PureComponent implements I private popupRef = React.createRef(); + public getAllowedPositions() { + return this.props.allowedPositions ? this.props.allowedPositions : OldPositions; + } + public componentDidUpdate(prevProps: HintProps) { const { opened, manual } = this.getProps(); if (!manual) { @@ -206,7 +210,7 @@ export class Hint extends React.PureComponent implements I hasPin={hasPin} opened={this.state.opened} anchorElement={this.props.children} - positions={this.featureFlags.popupUnifyPositioning ? this.props.allowedPositions : this.getPositions()} + positions={this.getPositions()} pos={this.props.pos} backgroundColor={this.theme.hintBgColor} borderColor={HINT_BORDER_COLOR} @@ -246,9 +250,12 @@ export class Hint extends React.PureComponent implements I ); } - private getPositions = (): PopupPositionsType[] => { + private getPositions = (): PopupPositionsType[] | undefined => { + if (this.featureFlags.popupUnifyPositioning) { + return this.props.allowedPositions; + } const pos = this.props.pos ? this.props.pos : 'top'; - const allowedPositions = this.props.allowedPositions ? this.props.allowedPositions : OldPositions; + const allowedPositions = this.getAllowedPositions(); if (this.featureFlags.hintAddDynamicPositioning) { if (!this.positions) { let priorityPosition: PopupPositionsType; diff --git a/packages/react-ui/components/Tooltip/Tooltip.tsx b/packages/react-ui/components/Tooltip/Tooltip.tsx index 0be1222c04..326fed7e06 100644 --- a/packages/react-ui/components/Tooltip/Tooltip.tsx +++ b/packages/react-ui/components/Tooltip/Tooltip.tsx @@ -225,6 +225,11 @@ export class Tooltip extends React.PureComponent imp private setRootNode!: TSetRootNode; private popupRef = React.createRef(); + + public getAllowedPositions() { + return this.props.allowedPositions ? this.props.allowedPositions : OldPositions; + } + public componentDidUpdate(prevProps: TooltipProps) { const { trigger } = this.getProps(); if (trigger === 'closed' && this.state.opened) { @@ -232,7 +237,7 @@ export class Tooltip extends React.PureComponent imp } if (!this.featureFlags.popupUnifyPositioning) { const pos = this.props.pos ? this.props.pos : OldDefaultPosition; - const allowedPositions = this.props.allowedPositions ? this.props.allowedPositions : OldPositions; + const allowedPositions = this.getAllowedPositions(); const posChanged = prevProps.pos !== pos; const allowedChanged = !isEqual(prevProps.allowedPositions, allowedPositions); @@ -393,7 +398,7 @@ export class Tooltip extends React.PureComponent imp maxWidth="none" opened={this.state.opened} disableAnimations={disableAnimations} - positions={this.featureFlags.popupUnifyPositioning ? this.props.allowedPositions : this.getPositions()} + positions={this.getPositions()} pos={this.props.pos} ignoreHover={trigger === 'hoverAnchor'} onOpen={this.props.onOpen} @@ -409,7 +414,10 @@ export class Tooltip extends React.PureComponent imp ); } - private getPositions() { + private getPositions = (): PopupPositionsType[] | undefined => { + if (this.featureFlags.popupUnifyPositioning) { + return this.props.allowedPositions; + } if (!this.positions) { let pos; if (this.props.pos) { @@ -419,7 +427,7 @@ export class Tooltip extends React.PureComponent imp } else { pos = OldDefaultPosition; } - const allowedPositions = this.props.allowedPositions ? this.props.allowedPositions : OldPositions; + const allowedPositions = this.getAllowedPositions(); const index = allowedPositions.indexOf(pos as PopupPositionsType); if (index === -1) { throw new Error('Unexpected position passed to Tooltip. Expected one of: ' + allowedPositions.join(', ')); @@ -429,7 +437,7 @@ export class Tooltip extends React.PureComponent imp } return this.positions; - } + }; private refContent = (node: HTMLElement | null) => { this.contentElement = node; From e334c50fed6d0541598714a6e43b4ce9b036021d Mon Sep 17 00:00:00 2001 From: SchwJ Date: Fri, 17 May 2024 10:30:18 +0500 Subject: [PATCH 5/5] chore(Hint, Tooltip): fix 3 review comment --- packages/react-ui/components/Hint/Hint.tsx | 2 +- packages/react-ui/components/Tooltip/Tooltip.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/components/Hint/Hint.tsx b/packages/react-ui/components/Hint/Hint.tsx index fb557bc9b0..304a465f5a 100644 --- a/packages/react-ui/components/Hint/Hint.tsx +++ b/packages/react-ui/components/Hint/Hint.tsx @@ -149,7 +149,7 @@ export class Hint extends React.PureComponent implements I this.setState({ opened: !!opened }); } - if (!this.featureFlags.popupUnifyPositioning) { + if (this.featureFlags.hintAddDynamicPositioning && !this.featureFlags.popupUnifyPositioning) { const pos = this.props.pos ? this.props.pos : 'top'; const allowedPositions = this.props.allowedPositions ? this.props.allowedPositions : OldPositions; const posChanged = prevProps.pos !== pos; diff --git a/packages/react-ui/components/Tooltip/Tooltip.tsx b/packages/react-ui/components/Tooltip/Tooltip.tsx index 326fed7e06..3113931bb4 100644 --- a/packages/react-ui/components/Tooltip/Tooltip.tsx +++ b/packages/react-ui/components/Tooltip/Tooltip.tsx @@ -235,7 +235,7 @@ export class Tooltip extends React.PureComponent imp if (trigger === 'closed' && this.state.opened) { this.close(); } - if (!this.featureFlags.popupUnifyPositioning) { + if (this.featureFlags.hintAddDynamicPositioning && !this.featureFlags.popupUnifyPositioning) { const pos = this.props.pos ? this.props.pos : OldDefaultPosition; const allowedPositions = this.getAllowedPositions(); const posChanged = prevProps.pos !== pos;