Added tooltips to all Icon buttons #4661

mananjadhav · 2021-08-14T10:01:37Z

@iwiznia Can you please review this?

Details

Wrapped all TouchableOpacity + Icon components with Tooltip.

Fixed Issues

$ #4499

Tests

Verified tooltips for IOUModal, Search, ReportActionCompose, AttachmentView, VideoChat.
Verified Tooltips for Web and Desktop
Tested for no impact on Mobile Web, iOS and Android

QA Steps

Need to verify if all the icon buttons are covered. (exclude Green FAB)
Need to verify if any tooltip has any alignment issue.
Added tooltips for icon buttons in IOUModal, Search, ReportActionCompose, AttachmentView, VideoChat.

Tested On

Screenshots

Web

Mobile Web

NA

Desktop

iOS

NA

Android

NA

… comp

mananjadhav · 2021-08-14T10:18:45Z

@iwiznia PR raised.

Need help:

to confirm coverage. I'd search all Icon across the codebase and updated all relevant pressable icon
Translations in Spanish.
I haven't added Tooltips to the following buttons:
a. Main Send button in the Chat Input Box
b. Green FAB on the LHN
c. + button that opens up "Add attachment" option

Let me know if you feel tooltips are required for those too.

iwiznia · 2021-08-16T11:22:17Z

src/languages/es.js

@@ -36,6 +36,10 @@ export default {
        contacts: 'Contactos',
        recents: 'Recientes',
        close: 'Cerrar',
+        download: 'Descargar',
+        pin: 'Alfiler',


Suggested change

pin: 'Alfiler',

pin: 'Anclar',

iwiznia · 2021-08-16T11:23:28Z

src/languages/es.js

+        download: 'Descargar',
+        pin: 'Alfiler',
+        unPin: 'Desprender',
+        back: 'De vuelta',


Suggested change

back: 'De vuelta',

back: 'Volver',

iwiznia · 2021-08-16T11:23:42Z

src/languages/es.js

@@ -36,6 +36,10 @@ export default {
        contacts: 'Contactos',
        recents: 'Recientes',
        close: 'Cerrar',
+        download: 'Descargar',
+        pin: 'Alfiler',
+        unPin: 'Desprender',


Suggested change

unPin: 'Desprender',

unPin: 'Desanclar',

iwiznia · 2021-08-16T11:24:03Z

src/languages/es.js

@@ -101,6 +105,7 @@ export default {
        nameEmailOrPhoneNumber: 'Nombre, email o número de teléfono',
    },
    videoChatButtonAndMenu: {
+        tooltip: 'Chat de video',


Suggested change

tooltip: 'Chat de video',

tooltip: 'Videollamada',

iwiznia · 2021-08-16T11:25:50Z

I haven't added Tooltips to the following buttons:

Why not?

iwiznia · 2021-08-16T11:28:05Z

Oh, also can you make sure to test in the other platforms? Even if it is to check there are no regressions and buttons look/work properly

mananjadhav · 2021-08-16T11:58:44Z

I'll update the translation changes.

Why not?
One of them was a primary action. Other is a menu. I can add. Can you help with the translations for these two buttons ?

Oh, also can you make sure to test in the other platforms? Even if it is to check there are no regressions and buttons look/work properly
I've checked the other platforms - Mobile Web, iOS, and Android.

iwiznia · 2021-08-16T12:09:09Z

One of them was a primary action. Other is a menu. I can add. Can you help with the translations for these two buttons ?

Sure. Let me tag the @Expensify/marketing team so they can check the copy (all new copy is in this file, they are the green lines) and give us copy for the tooltips of these buttons:
a. Main Send button in the Chat Input Box
b. Green FAB on the LHN
c. + button that opens up "Add attachment" option

I can then translate the new ones for you.

… to send

mananjadhav · 2021-08-16T12:39:44Z

@iwiznia One quick question, what are your thoughts on opening the FAB menu and the + icon menu on hover? rather than adding Tooltip?

iwiznia · 2021-08-16T12:46:09Z

I am personally not quite fond of things that open on hover. In any case that's just one opinion, you can propose and discuss changes like that one in the slack channel.

mananjadhav · 2021-08-16T13:07:19Z

PR Updated with suggested translations and tooltip for send button.

iwiznia · 2021-08-16T13:10:23Z

b. Green FAB on the LHN
c. + button that opens up "Add attachment" option

We are still waiting for those, right?

mananjadhav · 2021-08-16T14:02:24Z

Yes waiting.

marklouisdeshaun · 2021-08-16T14:41:55Z

src/languages/es.js

@@ -36,6 +36,10 @@ export default {
        contacts: 'Contactos',
        recents: 'Recientes',
        close: 'Cerrar',
+        download: 'Descargar',
+        pin: 'Anclar',


I would suggest using Fijar. This is the terminology used in popular apps like WhatsApp and Twitter.

marklouisdeshaun · 2021-08-16T14:42:31Z

src/languages/es.js

@@ -36,6 +36,10 @@ export default {
        contacts: 'Contactos',
        recents: 'Recientes',
        close: 'Cerrar',
+        download: 'Descargar',
+        pin: 'Anclar',
+        unPin: 'Desanclar',


I would suggest using Desfijar. This is the terminology used in popular apps like WhatsApp and Twitter.

mananjadhav · 2021-08-16T15:04:50Z

@marklouisdeshaun Thanks, Mark. Will update. Can you help with the copy of the other two buttons? Floating Action Button in the sidebar and + button to open Add Attachments in the chat?

aldo-expensify

I tested this locally and seemed to work fine.
I agree with the proposed changes on the spanish translations.

This reverts commit 78fbef9.

mananjadhav · 2021-08-17T12:45:56Z

@iwiznia @marklouisdeshaun Left with the copy & translation for the + action on ReportActionCompose. Can you help with that to close it at the earliest?

mananjadhav · 2021-08-17T12:57:41Z

I've set the labels as Actions and Acción right now.

mananjadhav · 2021-08-19T10:41:24Z

@iwiznia @marklouisdeshaun Left with the copy & translation for the + action on ReportActionCompose. Can you help with that to close it at the earliest?

@marklouisdeshaun Can you help me with the copy of this button? So that this can be moved to closure?

…ooltip-icon-button # Conflicts: # src/components/HeaderWithCloseButton.js # src/components/VideoChatButtonAndMenu.js

OSBotify · 2021-08-24T14:22:26Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

isagoico · 2021-08-26T02:26:29Z

Hello @mananjadhav, any QA tests needed for this PR?

mananjadhav · 2021-08-26T03:18:33Z

@isagoico We've added tooltips to all icon buttons. While I've added checking all the codebase. Let me know if I've missed any. In addition to this, we might have to test the alignment. While I've added content to QA steps, I am not sure the best way to describe step for each icon button.

OSBotify · 2021-08-30T17:37:51Z

🚀 Deployed to production by @roryabraham in version: 1.0.88-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

botify · 2021-09-01T01:26:15Z

This has been deployed to production and is now subject to a 7-day regression period.
If no regressions arise, payment will be issued on 2021-09-08. 🎊

eVoloshchak · 2023-01-23T17:05:59Z

Leaving a note here that the PR has caused a regression: #14043
The 'close' and 'download' tooltips are slightly misaligned

mananjadhav added 4 commits August 14, 2021 02:16

feat(tooltip-icon-button): Added tooltips to buttons

acfe0da

feat(tooltip-icon-button): Added tooltips to buttons

36eef4b

refactor(tooltip-icon-button): Moved tooltip to pressable from parent…

45e21bd

… comp

fix(tooltip-icon-button): change tooltip label based on condition

a01af10

mananjadhav requested a review from a team as a code owner August 14, 2021 10:01

MelvinBot requested review from aldo-expensify and removed request for a team August 14, 2021 10:01

fix(tooltip-icon-button): Added tooltip to AvatarImagePicker

a2aac38

iwiznia requested changes Aug 16, 2021

View reviewed changes

iwiznia added the Waiting for copy User facing verbiage needs polishing label Aug 16, 2021

refactor(tooltip-icon-button): Updated translations and added tooltip…

2961517

… to send

marklouisdeshaun reviewed Aug 16, 2021

View reviewed changes

mananjadhav added 3 commits August 16, 2021 21:11

fix(tooltip-icon-button): Added tooltip for add + button

16fbade

refactor(tooltip-icon-button): Updated es translations

5e01516

fix(tooltip-icon-button): Added tooltip prop for FAB

78fbef9

aldo-expensify reviewed Aug 17, 2021

View reviewed changes

Revert "fix(tooltip-icon-button): Added tooltip prop for FAB"

3ca36e5

This reverts commit 78fbef9.

iwiznia previously approved these changes Aug 17, 2021

View reviewed changes

refactor(tooltip-icon-button): Changed translation for Actions

a841dac

mananjadhav dismissed iwiznia’s stale review via a841dac August 17, 2021 12:55

iwiznia previously approved these changes Aug 17, 2021

View reviewed changes

Merge branch 'main' of https://github.com/mananjadhav/App into feat/t…

011bf1b

…ooltip-icon-button # Conflicts: # src/components/HeaderWithCloseButton.js # src/components/VideoChatButtonAndMenu.js

mananjadhav dismissed iwiznia’s stale review via 011bf1b August 19, 2021 12:47

aldo-expensify added Waiting for copy User facing verbiage needs polishing and removed Waiting for copy User facing verbiage needs polishing labels Aug 19, 2021

aldo-expensify mentioned this pull request Aug 19, 2021

Add Tooltips to all non-text actions/buttons in New Expensify #4499

Closed

iwiznia approved these changes Aug 24, 2021

View reviewed changes

iwiznia merged commit ab18ee8 into Expensify:main Aug 24, 2021

This was referenced Aug 24, 2021

Deploy Checklist: New Expensify 2021-08-17 #4701

Closed

Deploy Checklist: New Expensify 2021-08-25 #4828

Closed

kavimuru mentioned this pull request Aug 27, 2021

Chat - No tool tip for download icon for docx file #4870

Closed

mananjadhav mentioned this pull request Sep 1, 2021

Cap Software - External Contributors August 2021 #4850

Closed

9 tasks

aimane-chnaif mentioned this pull request Jan 4, 2023

[HOLD for regression test] [$1000] Tooltip not shown for emoji picker button on hover the outer part, it only shown for hovering the icon #13455

Closed

eVoloshchak mentioned this pull request Jan 23, 2023

[HOLD for payment 2023-01-19] [$1000] Tooltip is not centered when hovering the < (back icon) on modals #14043

Closed

6 tasks

trjExpensify mentioned this pull request Feb 1, 2023

[Hold for payment 01-02-2023] [$1000] Tooltip is not in the center while hovering on a profile pic #13940

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added tooltips to all Icon buttons #4661

Added tooltips to all Icon buttons #4661

mananjadhav commented Aug 14, 2021 •

edited

Loading

mananjadhav commented Aug 14, 2021

iwiznia Aug 16, 2021

iwiznia Aug 16, 2021

iwiznia Aug 16, 2021

iwiznia Aug 16, 2021

iwiznia commented Aug 16, 2021

iwiznia commented Aug 16, 2021

mananjadhav commented Aug 16, 2021

iwiznia commented Aug 16, 2021

mananjadhav commented Aug 16, 2021

iwiznia commented Aug 16, 2021

mananjadhav commented Aug 16, 2021

iwiznia commented Aug 16, 2021

mananjadhav commented Aug 16, 2021

marklouisdeshaun Aug 16, 2021

marklouisdeshaun Aug 16, 2021

mananjadhav commented Aug 16, 2021

aldo-expensify left a comment

mananjadhav commented Aug 17, 2021

mananjadhav commented Aug 17, 2021

mananjadhav commented Aug 19, 2021

OSBotify commented Aug 24, 2021

isagoico commented Aug 26, 2021

mananjadhav commented Aug 26, 2021

OSBotify commented Aug 30, 2021

botify commented Sep 1, 2021

eVoloshchak commented Jan 23, 2023

Added tooltips to all Icon buttons #4661

Added tooltips to all Icon buttons #4661

Conversation

mananjadhav commented Aug 14, 2021 • edited Loading

Details

Fixed Issues

Tests

QA Steps

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

mananjadhav commented Aug 14, 2021

iwiznia Aug 16, 2021

Choose a reason for hiding this comment

iwiznia Aug 16, 2021

Choose a reason for hiding this comment

iwiznia Aug 16, 2021

Choose a reason for hiding this comment

iwiznia Aug 16, 2021

Choose a reason for hiding this comment

iwiznia commented Aug 16, 2021

iwiznia commented Aug 16, 2021

mananjadhav commented Aug 16, 2021

iwiznia commented Aug 16, 2021

mananjadhav commented Aug 16, 2021

iwiznia commented Aug 16, 2021

mananjadhav commented Aug 16, 2021

iwiznia commented Aug 16, 2021

mananjadhav commented Aug 16, 2021

marklouisdeshaun Aug 16, 2021

Choose a reason for hiding this comment

marklouisdeshaun Aug 16, 2021

Choose a reason for hiding this comment

mananjadhav commented Aug 16, 2021

aldo-expensify left a comment

Choose a reason for hiding this comment

mananjadhav commented Aug 17, 2021

mananjadhav commented Aug 17, 2021

mananjadhav commented Aug 19, 2021

OSBotify commented Aug 24, 2021

isagoico commented Aug 26, 2021

mananjadhav commented Aug 26, 2021

OSBotify commented Aug 30, 2021

botify commented Sep 1, 2021

eVoloshchak commented Jan 23, 2023

mananjadhav commented Aug 14, 2021 •

edited

Loading