Android - Profile - "Save" button overlaps on the self select pronouns field

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Expected Result:

User able to type text in the field

Actual Result:

"Save" button overlaps with the field and the user is unable to scroll.

Action Performed:

1. Launch the app and login
2. Tap avatar > profile
3. Select "Self select" from the preferred pronouns
4. Tap self select your pronoun field

Workaround:

Unknown

Platform:

Where is this issue confirmed?

Web
iOS
Android ✔️
Desktop App
Mobile Web

Version Number: 1.0.8-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:
Video

Expensify/Expensify Issue URL:

[shawnborton]

I think this is expected behavior since the Save button is sticky to the bottom of the viewport.

[shawnborton]

However, I can see an argument that we should add some white background behind the Save button so that it properly covers the content behind it. As in, the little bit of background UI you see under the save button feels weird to me. cc @NikkiWines @michelle-thompson @Maftalion

[isagoico]

I think this issue https://github.com/Expensify/Expensify/issues/158769 has the same source as this one. Maybe this one will be fixed when @marcaaron PR for the other issue is merged.

[NikkiWines]

I don't know if we have different functionality re:sticky buttons for iOS vs Android, but on iOS the save button doesn't show when selecting the Self Select input field.

If we do want sticky buttons on Android then your suggestion of a white background makes sense to me 👍

[michelle-thompson]

We have sticky buttons that respond to keyboards on other screens, so we should probably keep the same behavior here. I'm in favor of adding a white background too.

[shawnborton]

cc @trjExpensify - I think we recently chatted about our button inconsistencies throughout the Settings pages.

[marcaaron]

I think this issue Expensify/Expensify#158769 has the same source as this one. Maybe this one will be fixed when @marcaaron PR for the other issue is merged.

I did think this as well @isagoico, but upon further inspection believe it's a different issue.

[MelvinBot]

Triggered auto assignment to @RachCHopkins (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[NikkiWines]

So do we have a consensus on what kind of button functionality we want? I see both sticky and non-sticky buttons on iOS at the moment, in addition to the variations we have between android and ios.

Non Sticky:

• Profile View
• Change Password View
• Payments View

Sticky:

• Chat textbox (not a button, but it is sticky)
• New Group page once you've selected a user but not before then
  • Side note that this is also kind of a unique example in that the button doesn't show in the view at all until someone has been selected. In other cases, we seem to disable the button but still show it.

[shawnborton]

It seems like the Change Password view and the Payments view are using a bottom sticky button.

For Sign Out, I wonder if a better approach is to use the same kind of navigational menu option that we use for the Profile options. It feels way less heavy and then we have one less outlier:

For the sticky buttons, I think I like having the button be shown as disabled at all times, and then enable it when the button can actually take an action. I think this will better communicate functionality and end up being more predictable for us.

[mallenexpensify]

@shawnborton @michelle-thompson @NikkiWines can one of y'all break down exactly what's needed so @RachCHopkins can upload the issue to Upwork? Thanks

[NikkiWines]

Yeah, so reading back through this I'm a little unclear on where we landed. I agree it's ideal to keep the buttons disabled until they can actually take an action. Do we want to keep all save/complete action buttons non-sticky then?

As for the signout/navigation button - I think that's a good idea too. I can add that separately today since it's not really tied to this issue specifically.

[shawnborton]

I think it's fine if the Save buttons are sticky to the bottom, but the area to the left and bottom of the button (that outer margin that is currently transparent) should have a solid white fill. This way we don't get the awkward content behind the button feeling.

[NikkiWines]

Ok, so to summarize for the Upwork post:

Upwork/E.cash Posting

---

There's currently inconsistency across our product (and across platforms) with how we display Save/Complete Action buttons. Some are sticky; some are not. Some are only enabled when the user has completed an action; some are enabled all the time. Let's update this, so things are consistent.

Deliverables:
Ensure all of the following buttons have the following three attributes across all platforms (including both iOS and Android):

• They are sticky to the bottom of the page/view
• They won't enable unless the user has completed an action (e.g., typed in a text field, selected a dropdown value, etc.)
  • When the button is disabled it should have a reduced opacity and we should eliminate mouse/touch events for the disabled states.
• They have a white margin to the sides and below the button to prevent the look of overlapping content (see image below)

Buttons to Modify

1. Settings > Profile Save button
2. Settings > Profile > Add Phone Number/Add Email > Send Validation button
3. Settings > Change Password Save button
4. Settings > Payments Add PayPal Account button
5. + FAB > New Group > Select 1 or more people > Create Group button
6. + FAB > Request Money > Enter Amount and Press Next > Request $XX button.
7. + FAB > Split Bill > Enter Amount and Press Next > Select 1 or more people > Next button

You can omit changes to the Sign Out button on the Settings page, as that button has been modified to be part of the Settings menu items.

---

Other things

@shawnborton couple of follow up questions:

1. Can we get a mockup of the white margin around a button that you were describing?
2. I noticed the color of the disabled button in the Settings pages is grey, but for the IOU/Split Bill flow it looks like a pale green color. Do we want to update the colors, so everything is unified there as well?

Settings >	IOU

[NikkiWines]

I think that's all of the buttons... the IOU/Split bill flow does have a button (as shown above) but since we have a built-in keypad for it on mobile (and no keypad on web/desktop) I don't think we'd run into the overlapping issue for those.

[mallenexpensify]

Thanks @NikkiWines!!! Bumping to daily so you can get it up on Upwork Rach

[shawnborton]

@NikkiWines here is an icon you can use for Sign Out: sign-out.svg.zip

[shawnborton]

Let me know if this mockup helps. On the left, you can see how the content shows behind the green button. On the right, you can see how we give the area behind the green button a white background:

So to double confirm, this area should have a white fill:

To triple confirm, here it is with a pink background so you can see which area needs to be filled with white:

[NikkiWines]

Oops this shouldn't be closed since my PR didn't fix the whole issue, just part of it.

[NikkiWines]

@shawnborton those mockups look great, thanks for adding them!!

[RachCHopkins]

Oh wow, this literally just appeared on my list today and I have no idea what to do. Let me get up to speed....

[MelvinBot]

Triggered auto assignment to @kadiealexander (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[mallenexpensify]

D'oh, I think I messed this up by reassigning to Rachel when I should have added the External label instead to get it auto-assigned to a member of the Contributor Management team to get posted on Upwork, sorry. @kadiealexander, all yours!

[NikkiWines]

Updated the details for the issue for Upwork/E.cash here to include the mockups and also a new button that we found that needs to be updated.

@shawnborton did you have an opinion on standardizing background colors for disabled buttons? You can see here that we use both grey and green at the moment.

[shawnborton]

I think I would prefer that we use something like reduced opacity and eliminating mouse/touch events for the disabled states. This way each button state (default or success) always retains its normal styling, but the reduced opacity indicates that it can't be interacted with. Thoughts on that approach?

[isagoico]

Issue not reproducible during today's KI retests

[kadiealexander]

I tried to reproduce this on Android v1.0.39-5, and was unable to as well. I'm going to close this, anyone who can reproduce this should feel free to reopen.

[trjExpensify]

Did this comment get created in a new issue for Upwork somewhere? #2149 (comment)

[NikkiWines]

Since the proposed upwork issue would cover more than just the Android "Save" button overlapping with other fields, I think this is still worth pushing this to upwork. I've made a separate E.com issue and applied the External label to it so it goes through the contributor-management process.