[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 contributors@expensify.com 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.