[HOLD for payment 2021-12-15] Text inputs - Further improve the text inputs design

[isagoico]

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

---

Action Performed:

1. Navigate to any page in the app that has a text input (or several, for example: staging.new.expensify.com/bank-account/new)

Expected Result:

Text inputs should have a proper size and alignment.

Actual Result:

Adding comment from @shawnborton here

• All inputs (text/selects) have too much horizontal padding by just 1px.
• The position of the small gray label is slightly too high when the input has a value
• Select inputs are too tall, they should be 52px tall but they are 54px which makes them taller than other inputs

Workaround:

None needed, visual issue.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.1-0

Reproducible in staging?: yes
**Reproducible in production?:**yes

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

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1632330334042400

View all open jobs on GitHub

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to @michelle-thompson (Design), see these Stack Overflow questions for more details.

[parasharrajat]

• Select the input to have two outer and inner borders and I disabled the Inner one but the outer border is causing the extra height. So we should enable inner and disable outer.
• Input has this box model
  
  This seems to be correct except the border is 0.8px.

[shawnborton]

So I think this is almost like a box-sizing mixup - 12px for horizontal padding is technically correct, but the border should be included in that. What should be happening is that you have a 1px border on the left edge, and then 11px of padding after that, and then the content. I agree, it is strange that the border is .8px and not 1px.

Figma screenshot for reference:

[parasharrajat]

I don't think Box-model includes a border in padding on the Web, we are already using box-sizing:border-box. Thus we can set the padding to 11px on the x-axis.

What you said would be box-sizing:padding-box but that is not supported in any browser https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#browser_compatibility

[shawnborton]

Ah yeah, I think what I am saying is we just need to reduce the hard-coded horizontal padding value by 1px on each side 😄

[MelvinBot]

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

[Dal-Papa]

Throwing the External label for contributors to grab.

[parasharrajat]

Proposal (based on the discussion above).

1. Select the input to have two outer and inner borders and I disabled the Inner one but the outer border is causing the extra height. So we should enable inner and disable outer.

2. I will reduce the horizontal padding to 11px so that it is 1px less on both sides.

3. Doing point 1, should correctly place the labels as well. Otherwise, I can adjust that in the PR review.

[MitchExpensify]

Upwork job

[Rehan-05]

Problem Statement: -

All inputs (text/selects) have too much horizontal padding by just 1px.
The position of the small gray label is slightly too high when the input has a value
Select inputs are too tall, they should be 52px tall but they are 54px which makes them taller than other inputs.

I have done deeply look at your issue. So, it can be solved by using react-native CSS properties in the following way.
Proposed Solution: -

• We should minimize the Top padding then it will be fixed. And another thing that I will try is by doing just padding-Left it can also be a good solution. By disable the border, it will not be fixed. Error in the padding and the border height is not too much that can be a problem here.
• Grey label can also be fixed by minimizing the horizontal padding.
• The third and final issue is already proposed I can do it by reviewing that.

Thanks

[MelvinBot]

Triggered auto assignment to @pecanoro (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[kadiealexander]

Please refer to this post for updated information on the n6 hold, we've raised the bonus to $250 for all issues where a PR is created before the N6 hold is lifted.

[Rehan-05]

Hey Kadielaxander, Please add me on Expensify slack channel. I proposed a solution in the GitHub name *Rehan-05.* *Thank You* *Regards,* *Rehan *

…

On Fri, Oct 8, 2021 at 6:31 AM kadiealexander ***@***.***> wrote: Please refer to this post <https://expensify.slack.com/archives/C01GTK53T8Q/p1633557259458600> for updated information on the n6 hold, we've raised the bonus to *$250* for all issues where a *PR is created* before the N6 hold is lifted. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#5462 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARJZVWCNF7T6VXE2TAVEZTDUFZCVLANCNFSM5EUJYY2Q> .

[kadiealexander]

Hey Rehan! Happy to! Could you please request this in a quick email to [email protected] so I can grab your email address and get you added? 😊

[MitchExpensify]

Hey @parasharrajat ! If you could accept the invite to the new Upwork posting that would be great, then I'll issue payment! https://www.upwork.com/jobs/~01bf778387677c2274

The OG post closed because of the n6 hold

[parasharrajat]

I will accept the job but I am still working on a follow up PR so let's just not release the payment for now and until that PR is deployed we can hold the payment.

[MitchExpensify]

Ok thanks for the heads up! Offer sent

[mallenexpensify]

Removed [HOLD for payment 2021-10-30] from the title

[MelvinBot]

This issue has not been updated in over 15 days. @pecanoro, @parasharrajat, @MitchExpensify, @michelle-thompson eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[parasharrajat]

In progress... Not monthly

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.18-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: input alignment & error border for input #5805

If no regressions arise, payment will be issued on 2021-12-15. 🎊

[parasharrajat]

Requesting price increase for this job. Originally

Why

1. Scope of the issue increased drastically, from Actual results and proposal.
2. I had to create two PR's to cover the changes.
3. Eventually plan changed from adjusting the input styles to refactoring them. I had to refactor(redesign) the existing BaseExpensiInput(which was not part of this issue) to fix the root cause which was not mentioned in the issue but will save us further issues like this one.
4. I had to refactor the uses of ExpensiInput throughout the app. Thus testing them all for regressions. It could have been a separate issue and PR. but that did not make sense without this PR so I decided to do it in one.

Based on the above and the Actual time spent is way more than anticipated, I request the price increase for the job. The fact that the payment of one-liner issues is greater than this does not justify it.
cc: @MitchExpensify

[shawnborton]

I think that is a fair assessment Rajat, I agree with you.

[mallenexpensify]

@pecanoro can you review this internal SO to determine the price increase?

[pecanoro]

@parasharrajat what do you think it's a fair price?

[parasharrajat]

@pecanoro Sorry, which price?

[pecanoro]

Oh sorry, maybe I didn't explain myself properly haha How much would you like it increased?

[parasharrajat]

Well, that would be hard for me to tell. I can't arbitrarily tell a value. What does the internal SO say? I would say at least $500.

[pecanoro]

$500 sounds reasonable. I don't want to arbitrarily increase prices without your input, you are more aware of the time you invested in the issue than me and we want it to be fair.

[parasharrajat]

Ok. $500 is fine. Anyways, there is a hold bonus so that should cover it. Thanks, @pecanoro.

[mallenexpensify]

@parasharrajat so it should be

• $250 original issue
• $250 n6 hold bonus
• $500 scope increase.
• Total - $1000

is that accurate? cc @MitchExpensify since you're CM

[parasharrajat]

Looks good to me. Thanks.

[mallenexpensify]

Paid (cuz I was already in this issue and it's due tomorrow). Thanks @parasharrajat