Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(TextInput/TextArea): prevent zoom on iOS #1238

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat(TextInput/TextArea): prevent zoom on iOS #1238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e72bb73
feat(TextInput/TextArea): prevent zoom on iOS
ogonkov Jan 9, 2024
02aff05
chore: link to details of iOS behaviour
ogonkov Jan 9, 2024
38d8fa5
fix: set input font-size
ogonkov Jan 9, 2024
0004e02
revert: font-size change for root block
ogonkov Jan 11, 2024
3bbf810
chore: rm unused import
ogonkov Jan 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/controls/TextArea/TextArea.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ $block: '.#{variables.$ns-new}text-area';
&_size {
&_s {
#{$block}__control {
@include control-mixins.input-control(s);
@include control-mixins.input-control(s, $block);
}

&#{$block}_has-clear #{$block}__control {
Expand All @@ -76,7 +76,7 @@ $block: '.#{variables.$ns-new}text-area';

&_m {
#{$block}__control {
@include control-mixins.input-control(m);
@include control-mixins.input-control(m, $block);
}

&#{$block}_has-clear #{$block}__control {
Expand All @@ -88,7 +88,7 @@ $block: '.#{variables.$ns-new}text-area';

&_l {
#{$block}__control {
@include control-mixins.input-control(l);
@include control-mixins.input-control(l, $block);
}

&#{$block}_has-clear #{$block}__control {
Expand All @@ -100,7 +100,7 @@ $block: '.#{variables.$ns-new}text-area';

&_xl {
#{$block}__control {
@include control-mixins.input-control(xl);
@include control-mixins.input-control(xl, $block);
}

&#{$block}_has-clear #{$block}__control {
Expand Down
4 changes: 4 additions & 0 deletions src/components/controls/TextArea/TextArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';

import {useForkRef, useUniqId} from '../../../hooks';
import {useMobile} from '../../mobile';
import {blockNew} from '../../utils/cn';
import {ClearButton, mapTextInputSizeToButtonSize} from '../common';
import {OuterAdditionalContent} from '../common/OuterAdditionalContent/OuterAdditionalContent';
Expand Down Expand Up @@ -63,6 +64,8 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
onChange,
} = props;

const [mobile] = useMobile();

const {errorMessage, validationState} = errorPropsMapper({
error,
errorMessage: errorMessageProp,
Expand Down Expand Up @@ -160,6 +163,7 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
style={style}
className={b(
{
mobile,
view,
size,
disabled,
Expand Down
8 changes: 4 additions & 4 deletions src/components/controls/TextInput/TextInput.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ $block: '.#{variables.$ns}text-input';
&_size {
&_s {
#{$block}__control {
@include control-mixins.input-control(s);
@include control-mixins.input-control(s, $block);
}

#{$block}__label {
Expand Down Expand Up @@ -135,7 +135,7 @@ $block: '.#{variables.$ns}text-input';

&_m {
#{$block}__control {
@include control-mixins.input-control(m);
@include control-mixins.input-control(m, $block);
}

#{$block}__label {
Expand Down Expand Up @@ -165,7 +165,7 @@ $block: '.#{variables.$ns}text-input';

&_l {
#{$block}__control {
@include control-mixins.input-control(l);
@include control-mixins.input-control(l, $block);
}

#{$block}__label {
Expand Down Expand Up @@ -195,7 +195,7 @@ $block: '.#{variables.$ns}text-input';

&_xl {
#{$block}__control {
@include control-mixins.input-control(xl);
@include control-mixins.input-control(xl, $block);
}

#{$block}__label {
Expand Down
4 changes: 4 additions & 0 deletions src/components/controls/TextInput/TextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {useForkRef, useUniqId} from '../../../hooks';
import {useElementSize} from '../../../hooks/private';
import {Icon} from '../../Icon';
import {Popover} from '../../Popover';
import {useMobile} from '../../mobile';
import {block} from '../../utils/cn';
import {ClearButton, mapTextInputSizeToButtonSize} from '../common';
import {OuterAdditionalContent} from '../common/OuterAdditionalContent/OuterAdditionalContent';
Expand Down Expand Up @@ -80,6 +81,8 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
onChange,
} = props;

const [mobile] = useMobile();

const {errorMessage, errorPlacement, validationState} = errorPropsMapper({
error,
errorMessage: errorMessageProp,
Expand Down Expand Up @@ -193,6 +196,7 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
style={style}
className={b(
{
mobile,
view,
size,
disabled,
Expand Down
6 changes: 5 additions & 1 deletion src/components/controls/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@use '../variables.scss';
@use './variables.scss' as control-variables;

@mixin input-control($size) {
@mixin input-control($size, $block) {
@if $size == 's' {
@include mixins.text-body-short;

Expand All @@ -27,4 +27,8 @@
height: #{variables.$xl-height - control-variables.$border-width * 2};
padding: 11px 12px;
}

@at-root #{$block}_mobile#{&} {
font-size: control-variables.$mobile-safari-font-size;
}
}
3 changes: 3 additions & 0 deletions src/components/controls/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
$border-width: 1px;
// Safari on iOS zoom page if input font-size is smaller than 16px
// https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
$mobile-safari-font-size: 16px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest u to rename this to $mobile-font-size case of it uses not only for safari styles

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May be $mobile-min-font-size then?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But we do not have a max size or other size at all

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But we do have minimal size, it's not just any mobile font size, it is a minimal possible size for Safari

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok. It's not a public api

Loading