From e72bb73a9d948d4751d94a8e401c293ea087e32f Mon Sep 17 00:00:00 2001 From: Alexey Sudilovskiy Date: Tue, 9 Jan 2024 17:15:40 +0100 Subject: [PATCH 1/5] feat(TextInput/TextArea): prevent zoom on iOS --- src/components/controls/TextArea/TextArea.scss | 5 +++++ src/components/controls/TextArea/TextArea.tsx | 4 ++++ src/components/controls/TextInput/TextInput.scss | 4 ++++ src/components/controls/TextInput/TextInput.tsx | 4 ++++ src/components/controls/variables.scss | 2 ++ 5 files changed, 19 insertions(+) diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss index 93f2155aaf..6622ee5bbe 100644 --- a/src/components/controls/TextArea/TextArea.scss +++ b/src/components/controls/TextArea/TextArea.scss @@ -1,6 +1,7 @@ @use '../../../../styles/mixins'; @use '../../variables'; @use '../mixins.scss' as control-mixins; +@use '../variables' as control-variables; $block: '.#{variables.$ns-new}text-area'; @@ -9,6 +10,10 @@ $block: '.#{variables.$ns-new}text-area'; width: 100%; position: relative; + &_mobile { + font-size: control-variables.$mobile-safari-font-size; + } + &__content { box-sizing: border-box; display: flex; diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx index b94ec7635f..5ddd25715b 100644 --- a/src/components/controls/TextArea/TextArea.tsx +++ b/src/components/controls/TextArea/TextArea.tsx @@ -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'; @@ -63,6 +64,8 @@ export const TextArea = React.forwardRef(functio onChange, } = props; + const [mobile] = useMobile(); + const {errorMessage, validationState} = errorPropsMapper({ error, errorMessage: errorMessageProp, @@ -160,6 +163,7 @@ export const TextArea = React.forwardRef(functio style={style} className={b( { + mobile, view, size, disabled, diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss index 437a93584d..2533d8f37d 100644 --- a/src/components/controls/TextInput/TextInput.scss +++ b/src/components/controls/TextInput/TextInput.scss @@ -42,6 +42,10 @@ $block: '.#{variables.$ns}text-input'; width: 100%; position: relative; + &_mobile { + font-size: control-variables.$mobile-safari-font-size; + } + &__content { box-sizing: border-box; display: flex; diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx index f85d91cc13..0db447c86a 100644 --- a/src/components/controls/TextInput/TextInput.tsx +++ b/src/components/controls/TextInput/TextInput.tsx @@ -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'; @@ -80,6 +81,8 @@ export const TextInput = React.forwardRef(funct onChange, } = props; + const [mobile] = useMobile(); + const {errorMessage, errorPlacement, validationState} = errorPropsMapper({ error, errorMessage: errorMessageProp, @@ -193,6 +196,7 @@ export const TextInput = React.forwardRef(funct style={style} className={b( { + mobile, view, size, disabled, diff --git a/src/components/controls/variables.scss b/src/components/controls/variables.scss index 17f36d5dfa..3c82a36e6b 100644 --- a/src/components/controls/variables.scss +++ b/src/components/controls/variables.scss @@ -1 +1,3 @@ $border-width: 1px; +// Safari on iOS zoom page if input font-size is smaller than 16px +$mobile-safari-font-size: 16px; From 02aff05e89391853f4936040d07cd712b7fa9e07 Mon Sep 17 00:00:00 2001 From: Alexey Sudilovskiy Date: Tue, 9 Jan 2024 17:19:18 +0100 Subject: [PATCH 2/5] chore: link to details of iOS behaviour --- src/components/controls/variables.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/controls/variables.scss b/src/components/controls/variables.scss index 3c82a36e6b..1bcf913a9f 100644 --- a/src/components/controls/variables.scss +++ b/src/components/controls/variables.scss @@ -1,3 +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; From 38d8fa54194fbb068be42ee6b4b982e1263a0893 Mon Sep 17 00:00:00 2001 From: Alexey Sudilovskiy Date: Tue, 9 Jan 2024 17:32:30 +0100 Subject: [PATCH 3/5] fix: set input font-size --- src/components/controls/TextArea/TextArea.scss | 8 ++++---- src/components/controls/TextInput/TextInput.scss | 8 ++++---- src/components/controls/mixins.scss | 6 +++++- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss index 6622ee5bbe..5a0e3906e6 100644 --- a/src/components/controls/TextArea/TextArea.scss +++ b/src/components/controls/TextArea/TextArea.scss @@ -69,7 +69,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 { @@ -81,7 +81,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 { @@ -93,7 +93,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 { @@ -105,7 +105,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 { diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss index 2533d8f37d..49388fcd48 100644 --- a/src/components/controls/TextInput/TextInput.scss +++ b/src/components/controls/TextInput/TextInput.scss @@ -109,7 +109,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 { @@ -139,7 +139,7 @@ $block: '.#{variables.$ns}text-input'; &_m { #{$block}__control { - @include control-mixins.input-control(m); + @include control-mixins.input-control(m, $block); } #{$block}__label { @@ -169,7 +169,7 @@ $block: '.#{variables.$ns}text-input'; &_l { #{$block}__control { - @include control-mixins.input-control(l); + @include control-mixins.input-control(l, $block); } #{$block}__label { @@ -199,7 +199,7 @@ $block: '.#{variables.$ns}text-input'; &_xl { #{$block}__control { - @include control-mixins.input-control(xl); + @include control-mixins.input-control(xl, $block); } #{$block}__label { diff --git a/src/components/controls/mixins.scss b/src/components/controls/mixins.scss index 4710dbc5c5..32c2109193 100644 --- a/src/components/controls/mixins.scss +++ b/src/components/controls/mixins.scss @@ -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; @@ -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; + } } From 0004e02c3082997917c9ba7e6e242d01fd469351 Mon Sep 17 00:00:00 2001 From: Alexey Sudilovskiy Date: Thu, 11 Jan 2024 11:58:41 +0100 Subject: [PATCH 4/5] revert: font-size change for root block --- src/components/controls/TextArea/TextArea.scss | 4 ---- src/components/controls/TextInput/TextInput.scss | 4 ---- 2 files changed, 8 deletions(-) diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss index 5a0e3906e6..ef2c4c4b72 100644 --- a/src/components/controls/TextArea/TextArea.scss +++ b/src/components/controls/TextArea/TextArea.scss @@ -10,10 +10,6 @@ $block: '.#{variables.$ns-new}text-area'; width: 100%; position: relative; - &_mobile { - font-size: control-variables.$mobile-safari-font-size; - } - &__content { box-sizing: border-box; display: flex; diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss index 49388fcd48..d92551a6ad 100644 --- a/src/components/controls/TextInput/TextInput.scss +++ b/src/components/controls/TextInput/TextInput.scss @@ -42,10 +42,6 @@ $block: '.#{variables.$ns}text-input'; width: 100%; position: relative; - &_mobile { - font-size: control-variables.$mobile-safari-font-size; - } - &__content { box-sizing: border-box; display: flex; From 3bbf8105a102d8552e7c675f9bfd22db618849ab Mon Sep 17 00:00:00 2001 From: Alexey Sudilovskiy Date: Thu, 11 Jan 2024 12:03:02 +0100 Subject: [PATCH 5/5] chore: rm unused import --- src/components/controls/TextArea/TextArea.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss index ef2c4c4b72..c1013c5258 100644 --- a/src/components/controls/TextArea/TextArea.scss +++ b/src/components/controls/TextArea/TextArea.scss @@ -1,7 +1,6 @@ @use '../../../../styles/mixins'; @use '../../variables'; @use '../mixins.scss' as control-mixins; -@use '../variables' as control-variables; $block: '.#{variables.$ns-new}text-area';