Card Screen - p character on 'Help' button is cropped

[isagoico]

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

---

Issue found while executing #4637

Action Performed:

1. Open app and login
2. Go to FAB > New Workspace
3. Tap on Company Cards

Expected Result:

User is able to see guide call button (Help button) with no issues

Actual Result:

p character is cropped

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.0.88-0

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

Notes/Photos/Videos:

Expensify/Expensify Issue URL:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @iwiznia (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[isagoico]

@alex-mechler This was found while executing QA for #4637. I wasn't sure on adding the deploy blocker label here since this feature is not available in prod yet (and it's a small visual issue imo). Could you review this?

[alex-mechler]

@isagoico I agree, I don't think this is a deploy blocker for the reasons you mentioned! I do think we should fix this though. What device or screensize did this happen on? Will take this over from Ioni

[isagoico]

I was able to reproduce this both on an iPhone 6S for iOS and a Huawei P20 Pro (6.2-inch screen size) for Android

[alex-mechler]

Awesome, I'll look into this! Thanks!

[alex-mechler]

Ahhhh, I figured out why this is happening. I was using a small button, but not small text. With small text, it looks fine on mobile.

However, it looks a bit off to me on web

@Expensify/design any suggestions on what we can try here?

[shawnborton]

Small buttons should be using smaller text by default right? Basically if you pass in the "small" prop to the button, I would assume it would use the small font size (11px) by default.

In terms of this looking a bit off... maybe it's just the icon that feels a bit off? So perhaps for small buttons, if the icons were a bit smaller (like 16x16 instead of 20x20?) they might look better?

[isagoico]

Issue reproducible during KI retests

[alex-mechler]

Small buttons should be using smaller text by default right? Basically if you pass in the "small" prop to the button, I would assume it would use the small font size (11px) by default.

Ahh, this is because a normal button did not work in this case, I had to create my own "button" with similar styles to get the icon in there.

In terms of this looking a bit off... maybe it's just the icon that feels a bit off? So perhaps for small buttons, if the icons were a bit smaller (like 16x16 instead of 20x20?) they might look better?

I agree, I think that the icon being large is what is throwing me off, I can try with a smaller icon and will post results here

[shawnborton]

Is it possible to do this using the same button component though? I think ideally we don't want a different kind of button to maintain.

[alex-mechler]

Possibly, I can look into refactoring that. It might take a minute, so let me test with the icon sizes first, so that we can settle on look before worrying about that.

[alex-mechler]

Hmm, 16x16 is already what "small" is for an icon.

How about adding an xsmall of 12x12?

[shawnborton]

That works for me. So that makes me wonder, where else do we have these small buttons that have icons... maybe nowhere?

[shawnborton]

What I am saying is, I wonder if 12x12 should just be the default for small buttons instead of having to add an XS class.

[alex-mechler]

That works for me. So that makes me wonder, where else do we have these small buttons that have icons... maybe nowhere?

The button component currently has no way to show an icon as well, so I think this is the only case where we do.

What I am saying is, I wonder if 12x12 should just be the default for small buttons instead of having to add an XS class.

I would default the text to be textSmall and iconXSmall when the button is small.

[michelle-thompson]

Unpopular opinion here, but I actually feel like 12x12 is too small. I think it's hard to distinguish on web what that icon is. Plus, it looks so much smaller than the grey icons that it feels a little distracting.

[shawnborton]

Fair point Michelle, and maybe the phone icon itself is a weird one.. maybe a more common case of having a down/up caret wouldn't look so strange.

Okay, so maybe we just keep the icon at 16x16 then and make sure the font size is 11pt (like other small buttons) and call it a day?

[alex-mechler]

Works for me, I can also do that refactor to make this not a special case button

[shawnborton]

Sounds great to me - hbu Michelle?

[michelle-thompson]

Sounds great, thanks guys!

[botify]

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

[botify]

🚀 Deployed to staging by @flodnv in version: 1.0.90-3 🚀

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

[botify]

🚀 Deployed to production by @roryabraham in version: 1.0.91-0 🚀

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