Create custom TextInput

[kakajann]

Details

Fixed Issues

Fixes #3108

Tests

Make sure form inputs match specs & screenshots below

QA Steps

Same as above

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Specific Specs

• Text size should be 13pt for field label and 15pt for text
• Keeping our existing border style (blue when focused/active, red when error/active) and button style (green for primary actions)
• Field inside the box should be white (both in a selected field and unselected field)
• Field label text should be grey (both in a selected field and unselected field)
• These field changes need to be made to all fields on the mobile app
• Input/select height should be 52
• The horizontal padding should be 12
• The vertical padding should be 8, though the label/text should be vertically centered

Screenshots

Web

web.mov

Mobile Web

web.mobile.mov

Desktop

desktop.app.mov

iOS

ios.mov

[MariaHCD]

Un-assigning myself as this isn't ready for review yet. Feel free to assign pullerbear again once ready for reviews!

[kakajann]

@shawnborton Could you take a look at this PR?

[shawnborton]

Can do, will take a pass at this today!

[shawnborton]

Some weird behavior with Chrome and autofill:

Not entirely sure how to fix or diagnose that.

[shawnborton]

For select/picker menus, can we make it so that you can tap anywhere on the picker to launch the menu? Currently it looks like it only works if you tap on the value text, but if you tap the label or anything else, it doesn't launch.

[Beamanator]

Tested again on the devices that were giving us trouble before, and everything seems great! Time to merge :D

[Beamanator]

@roryabraham back to you (since you requested changes recently) - also thanks so much for the help reviewing this beast of a PR!

[kakajann]

@roryabraham requesting a review

[roryabraham]

I think we took this change a bit too far. Can we undo the last commit, and then just make the simple change of getting rid of styles.picker.inputAndroid and styles.picker.inputIOS, and replacing them with styles.picker.inputNative.

[roryabraham]

This is a style, not a react component. So it doesn't make sense to include propTypes, defaultProps, or displayName.

[roryabraham]

Approved, we can merge as soon as iOS E2E tests pass.

[kakajann]

Approved, we can merge as soon as iOS E2E tests pass.

Thank you. I was waiting for e2e tests to request a review again)

[OSBotify]

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

[OSBotify]

🚀 Deployed to staging by @roryabraham in version: 1.0.83-2 🚀

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

[Jag96]

Left a note on the issue linked above but also tagging here, this PR is causing a deploy blocker: #4597 (comment). @kakajann please have a look

[botify]

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-08-24. 🎊

[OSBotify]

🚀 Deployed to production by @isagoico in version: 1.0.85-9 🚀

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

[mananjadhav]

I am tagging this PR to highlight an issue fixed here. All conditions in ternary expressions or left-hand operands on conditional renders, should be boolean. This PR is one of the PRs that uses conditional render with string operands, hence I am tagging it here for the contributors to check.

We've also updated the item in the checklist with this PR to avoid this issue in the future.