[DTRA] Maryia/DTRA-484/feat: hide uncontrolled popover tooltip when target icon is tapped again #11881

maryia-deriv · 2023-11-29T14:41:01Z

Before this change:

In responsive and when popover is uncontrolled (when is_open is not provided), an opened tooltip (bubble) hides when a user taps outside but it won't hide when they tap the target (e.g. 'info' icon) again.

Changes:

For responsive only:

to hide a tooltip when the target (e.g. 'info' icon) of an uncontrolled popover is tapped.
make controlled popovers in DTrader uncontrolled if they were implemented as controlled for the sole purpose of closing when target is tapped. This includes 'Strike' for Vanilla and 'Barriers' for Turbos.

After this change:

Opened tooltips of all uncontrolled popovers in responsive will hide both upon tapping outside and upon tapping the target (e.g. 'info' icon) again.
This behavior is natural, that's why it's applied to all uncontrolled popovers in responsive.

Screenshots:

…cused

vercel · 2023-11-29T14:41:09Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
deriv-app	✅ Ready (Inspect)	Visit Preview	Dec 19, 2023 8:01am

github-actions · 2023-11-29T14:58:00Z

A production App ID was automatically generated for this PR. (log)

PR: [DTRA] Maryia/DTRA-484/feat: hide uncontrolled popover tooltip when target icon is tapped again #11881
URLs:
- w/ App ID + Server: https://deriv-app-git-fork-maryia-deriv-maryia-dtra-484controlla-0b5def.binary.sx?qa_server=red.derivws.com&app_id=24068
- Original: https://deriv-app-git-fork-maryia-deriv-maryia-dtra-484controlla-0b5def.binary.sx
App ID: 24068

Click here to copy & paste above information.

- **PR**: [https://github.com/binary-com/deriv-app/pull/11881](https://github.com/binary-com/deriv-app/pull/11881)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-maryia-deriv-maryia-dtra-484controlla-0b5def.binary.sx?qa_server=red.derivws.com&app_id=24068
    - **Original**: https://deriv-app-git-fork-maryia-deriv-maryia-dtra-484controlla-0b5def.binary.sx
- **App ID**: `24068`

github-actions · 2023-11-29T14:58:27Z

🚨 Lighthouse report for the changes in this PR:

Category	Score
🔺 Performance	15
🟧 Accessibility	88
🟢 Best practices	92
🟢 SEO	92
🟧 PWA	80

Lighthouse ran with https://deriv-app-git-fork-maryia-deriv-maryia-dtra-484controlla-0b5def.binary.sx/

packages/components/src/components/popover/popover.tsx

maryia-deriv · 2023-11-29T15:23:39Z

packages/components/src/components/popover/popover.tsx

+    } = useStore();
    const [hover_ref, is_hovered] = useHover(null, true);
    const [bubble_hover_ref, is_bubble_hovered] = useHoverCallback();
+    const should_toggle_on_target_tap = React.useMemo(() => is_mobile && is_open === undefined, [is_mobile, is_open]);


For responsive only and for uncontrolled popovers only (when is_open is not provided).

maryia-deriv · 2023-11-29T15:25:22Z

packages/components/src/components/popover/popover.tsx

    relative_render = false,
    should_disable_pointer_events = false,
    should_show_cursor,
-    window_border,


unused prop

maryia-deriv · 2023-11-29T15:34:53Z

packages/components/stories/popover/README.md

-| zIndex                            | {number}                | null     | Z-index for popover container                                                                                                                 |
-| relative\_render                  | {boolean}               | null     | Set it true if you want to have popover dom next to the wrapped element                                                                       |
-| should\_disable\_pointer\_events  | {boolean}               | null     | Set it true if you want to disable all events of popover container                                                                            |
-| window\_border                    | {number}                | null     | Distance between popover on window sides                                                                                                      |


i only removed window_border in this file, pre-commit hooks changed the alignment :)

coveralls · 2023-11-30T10:23:19Z

coverage: 33.34% (+0.1%) from 33.222%
when pulling ac91cd4 on maryia-deriv:maryia/DTRA-484/controllable-tooltips
into a231b18 on binary-com:master.

packages/components/src/components/popover/popover.tsx

…DTRA-484/controllable-tooltips

github-actions · 2023-12-05T11:49:14Z

❌ Smoke test run (1) failed. See logs for details: Visit Action

…oltips

github-actions · 2023-12-19T07:43:48Z

❌ Smoke test run (1) failed. See logs for details: Visit Action

github-actions · 2023-12-19T07:43:49Z

❌ Smoke test run (2) failed. See logs for details: Visit Action

sonarqubecloud · 2023-12-19T07:47:50Z

Quality Gate passed

The SonarCloud Quality Gate passed, but some issues were introduced.

1 New issue
0 Security Hotspots
No data about Coverage
3.8% Duplication on New Code

See analysis details on SonarCloud

github-actions · 2023-12-19T08:01:10Z

❌ Smoke test run (1) failed. See logs for details: Visit Action

github-actions · 2023-12-19T08:01:58Z

❌ Smoke test run (1) failed. See logs for details: Visit Action

github-actions · 2023-12-19T08:02:04Z

❌ Smoke test run (2) failed. See logs for details: Visit Action

…arget icon is tapped again (deriv-com#11881) * feat: update popover functionality to toggle bubble when target is focused * chore: removed state control from outside for vanilla and turbos * docs: update readme * test: add test for popover * test: popover * feat: add useDevice hook to components * test: fix tests * revert: unnecessary setting of visibility from events in bubble Signed-off-by: lubega-deriv <lubega@deriv.com>

…arget icon is tapped again (deriv-com#11881) * feat: update popover functionality to toggle bubble when target is focused * chore: removed state control from outside for vanilla and turbos * docs: update readme * test: add test for popover * test: popover * feat: add useDevice hook to components * test: fix tests * revert: unnecessary setting of visibility from events in bubble Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com>

…#12424) * chore: ✨ unit tests for WalletListCardDetails component Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [TRAH] Hamza/2302/create password component (#12418) * chore: create password component * chore: create password component new files * chore: update the width * chore: added the description * chore: destructure the React Fc Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [TRAH] Aizad/TRAH-2305/Content Switcher (#12409) * chore: added Content Switcher Tab inside of Tradershub package * fix: updated TSDocs with examples * fix: split components into different files * chore: fix sonarcloud issues - wrapped ContentHeaderList with memo - wrapped activeIndex, setActiveIndex with memo - rename useTabIndex to useContentSwitch for global use * fix: resolve comments Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [DTRA] Maryia/DTRA-484/feat: hide uncontrolled popover tooltip when target icon is tapped again (#11881) * feat: update popover functionality to toggle bubble when target is focused * chore: removed state control from outside for vanilla and turbos * docs: update readme * test: add test for popover * test: popover * feat: add useDevice hook to components * test: fix tests * revert: unnecessary setting of visibility from events in bubble Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * chore: added jurisdiction footnote title (#12426) Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [FEQ] Ameerul / FEQ-1002 / P2P Order Create Hook (#12246) * feat: added p2p_order_create hook * chore: changed comments * fix: annotations * chore: added tsdoc for response Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * translations: 📚 sync translations with crowdin (#12432) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [WALL] Lubega /WALL-3053/ Chore: WalletTextField unit test (#12356) * chore: wallet textfield unit test * fix: applied comments Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [WALL?] [Fix] Rostislav / WALL-2260 / Fix legacy cashier crypto withdrawal page error message (#11983) * fix: the thing * refactor: padding * fix: line-height * refactor: increase gap a bit * refactor: `margin-inline` * fix: appearance * refactor: merge conflict * refactor: minor * refactor: minor * refactor: minor * refactor: minor * refactor: minor * fix: align padding w Figma * refactor: better css Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * Ako/ fix account status type (#12434) * ci: fix account status type * build: update package-lock Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * style: 💄 remove gaps between accounts (#12411) Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * style: 💄 fix left and right paddings around label (#12412) Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * chore: unused computed value removed payment_methods_list_values from store (#12388) Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * chore: ✨ unit test for TradingAccountCard component (#12358) Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * chore: ✨ unit tests for WalletListCardBadge component (#12389) Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [FEQ] Farhan/FEQ-993/P2P advertiser Adverts (#12262) * feat: ✨ createuseAdvertiserAdverts hook * chore: add test for fetchnextpage * chore: ✨ add doc for function Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * fix: fixed the theme of the df iframe to light mode (#12400) Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [TRAH] Hamza/TRAH-2315/added JurisdictionTncSection (#12433) * chore: added tnc section * chore: added Link component Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [WALL] Aum/WALL-3001/unit tests for wallet withdrawal-fiat module (#12361) * chore: added unit tests for WithdrawalFiat module * chore: changed the format for the data-testid * chore: added verification code in the tests Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [trah]thisyahlen/chore: add get a deriv account banner (#12430) * chore: add get a deriv account banner * fix: import * fix: added tsdoc * chore: komen Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [COJ]Amina/coj 407 success message after upgrade (#12338) * feat: migration success modal * chore: mobile view of success modal * fix: mobile * fix: testcases for migration success modal * fix: testcases for migration success modal * fix: testcases for migration success modal * fix: remove hardcoded values * fix: review comments * fix: rename varible * fix: review comments * fix: review comments * fix: loading * fix: merge master --------- Co-authored-by: Taysuisin <suisin@regentmarkets.com> Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [WALL] Farhan/WALL-2896/Unit test for WalletListCardBalance component (#12399) * chore: ✨ unit tests for WalletListCardBalance component * refactor: ⚙️ change description Co-authored-by: Nijil Nirmal <62882794+nijil-deriv@users.noreply.github.com> --------- Co-authored-by: Nijil Nirmal <62882794+nijil-deriv@users.noreply.github.com> * [WALL] george / WALL-2826 / transfer messages from wallet to wallet for unverified users (#12378) * feat: ✨ add wallet to wallet transfer messages for unverified users * feat: ✨ add transfer messages between wallets implement transfer messages between wallets for unverified users, setup localization * chore: 🚑 fix messages content * fix: 🚑 setup translations for transfer messages * fix: 🚑 apply comments * fix: 🚑 lifetime transfer messages content * refactor: 🎨 refactor translations, remove config * perf: 🎨 improve message structure Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [DTRA] Maryia/DTRA-674/fix: Vanilla profit & contract value in mobile (#12336) * fix: vanilla profit in mobile * test: the change * fix: vanilla mobile contract card * test: positions-modal-card.spec.tsx * refactor: component and tests Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * [BOT]Maryia/BOT-958/feat: adding matches/differs and over/under contract types on quick strategies (#11462) * feat: adding Matches/differs and over/under contract types on quick strategy * feat: add prediction tool tip * feat: validate last digit prediction from 0-9 as text to prevent the user from entering a dot * feat: add last_digit_prediction to Martingale, D'Alembert, Oscar Grind, and other strategies * feat: prediction field * chore: remove minor things * chore: nitpick change * fix: cognitive complexity * fix: value to check existence of a valid variable * fix: bug when user switches to digits after multipliers trade type category * refactor: take the function addDinamicallyBlockToDOM() to utils * fix: change the order and grouping of fields PREDICTION * fix: minimisation of code, purity * refactor: add regex prop in the prediction field config * fix: type script issues in some files * fix: bug loading saved values into the quick strategies form * fix: type script issues in some files * fix: remove unnecessary hidden category * fix: test case of contract_type component * fix: sonarcloud code smells * fix: remove unnecessary changes of bot skeleton * chore: remove comment * chore: temporary remove improvement * refactor: improvement implementation * fix: save values from the form the first time the browser is used * test: update trade type test case * fix: remove unnecessary code, add logic for the field text * refactor: remove formik mock * Revert "refactor: remove formik mock" This reverts commit 00a25a1. * refactor: validation of prediction block * refactor: validation of prediction block(2) * fix: validation of btn minus for prediction block * fix: validation of btn minus for prediction block(2) * fix: min/max values * chore: rename function Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * refactor: ✨ change login id Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * fix: import --------- Signed-off-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> Co-authored-by: Muhammad Hamza <120543468+hamza-deriv@users.noreply.github.com> Co-authored-by: Aizad Ridzo <103104395+aizad-deriv@users.noreply.github.com> Co-authored-by: Maryia <103177211+maryia-deriv@users.noreply.github.com> Co-authored-by: ameerul-deriv <103412909+ameerul-deriv@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Co-authored-by: lubega-deriv <142860499+lubega-deriv@users.noreply.github.com> Co-authored-by: Rostik Kayko <119863957+rostislav-deriv@users.noreply.github.com> Co-authored-by: Ali(Ako) Hosseini <ali.hosseini@deriv.com> Co-authored-by: George Usynin <103181646+heorhi-deriv@users.noreply.github.com> Co-authored-by: Aum Bhatt <125039206+aum-deriv@users.noreply.github.com> Co-authored-by: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Co-authored-by: Taysuisin <suisin@regentmarkets.com> Co-authored-by: Nijil Nirmal <62882794+nijil-deriv@users.noreply.github.com> Co-authored-by: maryia-matskevich-deriv <103181650+maryia-matskevich-deriv@users.noreply.github.com>

maryia-deriv added 2 commits November 29, 2023 16:57

feat: update popover functionality to toggle bubble when target is fo…

fbe415c

…cused

chore: removed state control from outside for vanilla and turbos

c698a88

boring-cyborg bot added Components Docs Trader labels Nov 29, 2023

maryia-deriv temporarily deployed to Preview November 29, 2023 14:41 — with GitHub Actions Inactive

maryia-deriv commented Nov 29, 2023

View reviewed changes

packages/components/src/components/popover/popover.tsx Outdated Show resolved Hide resolved

maryia-deriv commented Nov 29, 2023

View reviewed changes

docs: update readme

fe307f2

maryia-deriv temporarily deployed to Preview November 29, 2023 15:29 — with GitHub Actions Inactive

maryia-deriv commented Nov 29, 2023

View reviewed changes

test: add test for popover

b3c2a0e

maryia-deriv temporarily deployed to Preview November 29, 2023 16:48 — with GitHub Actions Inactive

test: popover

d9b1950

maryia-deriv temporarily deployed to Preview November 29, 2023 22:50 — with GitHub Actions Inactive

maryia-deriv marked this pull request as ready for review November 29, 2023 22:50

maryia-deriv requested review from ali-hosseini-deriv and matin-deriv as code owners November 29, 2023 22:50

maryia-deriv changed the title ~~Maryia/DTRA-484/feat: close uncontrolled popover tooltip when target is tapped~~ Maryia/DTRA-484/feat: hide tooltip of an uncontrolled popover when target icon is tapped again Nov 29, 2023

maryia-deriv changed the title ~~Maryia/DTRA-484/feat: hide tooltip of an uncontrolled popover when target icon is tapped again~~ Maryia/DTRA-484/feat: hide uncontrolled popover tooltip when target icon is tapped again Nov 29, 2023

feat: add useDevice hook to components

9aaff25

maryia-deriv requested a review from balakrishna-deriv as a code owner November 30, 2023 08:49

balakrishna-deriv reviewed Dec 1, 2023

View reviewed changes

packages/components/src/components/popover/popover.tsx Outdated Show resolved Hide resolved

balakrishna-deriv reviewed Dec 1, 2023

View reviewed changes

packages/components/src/components/popover/popover.tsx Outdated Show resolved Hide resolved

Merge branch 'master' of github.com:binary-com/deriv-app into maryia/…

c09a4d3

…DTRA-484/controllable-tooltips

maryia-deriv temporarily deployed to Preview December 1, 2023 16:47 — with GitHub Actions Inactive

maryia-deriv added 2 commits December 4, 2023 12:04

Merge branch 'master' of github.com:binary-com/deriv-app into maryia/…

dd3d252

…DTRA-484/controllable-tooltips

revert: unnecessary setting of visibility from events in bubble

e1e14e3

maryia-deriv temporarily deployed to Preview December 4, 2023 09:54 — with GitHub Actions Inactive

sandeep-deriv approved these changes Dec 4, 2023

View reviewed changes

kate-deriv approved these changes Dec 4, 2023

View reviewed changes

henry-deriv approved these changes Dec 5, 2023

View reviewed changes

maryia-deriv changed the title ~~Maryia/DTRA-484/feat: hide uncontrolled popover tooltip when target icon is tapped again~~ [DTRA] Maryia/DTRA-484/feat: hide uncontrolled popover tooltip when target icon is tapped again Dec 5, 2023

Merge branch 'binary-com:master' into maryia/DTRA-484/controllable-to…

ac91cd4

…oltips

maryia-deriv temporarily deployed to Preview December 19, 2023 07:43 — with GitHub Actions Inactive

balakrishna-deriv approved these changes Dec 21, 2023

View reviewed changes

balakrishna-deriv merged commit 7ca0c99 into deriv-com:master Dec 21, 2023

[DTRA] Maryia/DTRA-484/feat: hide uncontrolled popover tooltip when target icon is tapped again #11881

[DTRA] Maryia/DTRA-484/feat: hide uncontrolled popover tooltip when target icon is tapped again #11881

Uh oh!

Conversation

maryia-deriv commented Nov 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before this change:

Changes:

After this change:

Screenshots:

Uh oh!

vercel bot commented Nov 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

maryia-deriv Nov 29, 2023

Choose a reason for hiding this comment

Uh oh!

maryia-deriv Nov 29, 2023

Choose a reason for hiding this comment

Uh oh!

maryia-deriv Nov 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coveralls commented Nov 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Dec 5, 2023

Uh oh!

github-actions bot commented Dec 19, 2023

Uh oh!

github-actions bot commented Dec 19, 2023

Uh oh!

sonarqubecloud bot commented Dec 19, 2023

Quality Gate passed

Uh oh!

github-actions bot commented Dec 19, 2023

Uh oh!

github-actions bot commented Dec 19, 2023

Uh oh!

github-actions bot commented Dec 19, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

maryia-deriv commented Nov 29, 2023 •

edited

Loading

vercel bot commented Nov 29, 2023 •

edited

Loading

github-actions bot commented Nov 29, 2023 •

edited

Loading

github-actions bot commented Nov 29, 2023 •

edited

Loading

maryia-deriv Nov 29, 2023 •

edited

Loading

coveralls commented Nov 30, 2023 •

edited

Loading