Mobile Zooming on Inputs

[cikeddy]

Summary

Currently our input form fields have a text size that is less than 16 px, which causes phones on iOS to zoom into the field when focused/clicked. We should probably set the text size to at least 16 px on mobile to fix this, but there are other possible solutions (see article in additional context section).

Reproduction

Steps to reproduce:

1. Navigate to Cashmere on an iPhone
2. Click any input field

Stackblitz reproduction (click the "Edit on Stackblitz" link on a component example and fork the template):

Additional context

Here's an article explaining this issue: https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/

[corykon]

@cikeddy really good find - I’d always noticed the zoom thing on some form fields and not ever understood why, never looked into it. Avoiding that would be an awesome/easy win for mobile UX

[cikeddy]

@corykon totally! Picked this up in a UI course I've been doing...would've never thought about looking into it otherwise.

[corykon]

Talked about this in standup, recording here on the issue as well - in addition to fixing this issue for inputs, we're going to make sure we do the same for other form controls: Selects, checkboxes, radios, textareas, etc

[andrew-frueh]

It's pretty tricky to get the component to only jump to the larger font size on mobile devices automatically. We decided the best bet is to leave that to the developer. However, to make that easier, I'd propose the following solution:

Add a new param called fieldStyle with values of either normal(default), tight, or mobile. We would keep the separate tight param as something deprecated for a few releases and just have it set the style param. The mobile style will increase the font size of the component to 16px and adjust padding accordingly.

[health-catalyst]

:tada: This issue has been resolved in version 11.3.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: