feat(input): input mobile theme (PDS-241) (#737)

* feat: add mobile theme for form-contro & input

* chore(input): screenshots

* chore: update mobile button screenshots

Co-authored-by: dmitrsavk <dmitrsavk@yandex.ru>

.storybook/addons/theme-switcher/index.js

@@ -2,13 +2,36 @@ import { useEffect, useCallback } from 'react';
 import addons, { makeDecorator } from '@storybook/addons';
 import { ADDON_ID, THEME_DATA_ATTR } from './register';
 
+// Создает style-тэг с bluetint цветами для мобильной темы
+const handleThemeColors = theme => {
+    const tagId = 'mobile-styles';
+
+    const existingStyleTag = document.getElementById(tagId);
+
+    if (theme === 'mobile' && !existingStyleTag) {
+        import(`!!raw-loader!../../../packages/vars/src/colors-bluetint.css`).then(module => {
+            const style = document.createElement('style');
+            style.id = 'mobile-styles';
+            style.innerHTML = module.default;
+
+            document.head.appendChild(style);
+        });
+    }
+
+    if (theme !== 'mobile' && existingStyleTag) {
+        existingStyleTag.remove();
+    }
+};
+
 export default makeDecorator({
     name: 'withThemeSwitcher',
     wrapper: (getStory, context) => {
         const channel = addons.getChannel();
 
         const setTheme = useCallback(theme => {
             document.body.dataset[THEME_DATA_ATTR] = theme;
+
+            handleThemeColors(theme);
         }, []);
 
         useEffect(() => {

packages/form-control/src/docs/Component.stories.mdx

@@ -13,7 +13,7 @@ import styles from '!!raw-loader!../index.module.css';
 <Meta
     title='Компоненты/FormControl'
     component={FormControl}
-    parameters={{ 'theme-switcher': { themes: ['click'] } }}
+    parameters={{ 'theme-switcher': { themes: ['click', 'mobile'] } }}
 />
 
 

packages/form-control/src/index.module.css

@@ -20,6 +20,7 @@
     --form-control-labeled-m-paddings: 28px var(--gap-s) 8px;
     --form-control-labeled-l-paddings: 34px var(--gap-m) 10px;
     --form-control-labeled-xl-paddings: 38px var(--gap-m) 14px;
+    --form-control-sub-paddings: 0;
 
     /* disabled */
     --form-control-disabled-bg-color: color-mod(var(--color-light-bg-primary-inverted) alpha(15%));
@@ -136,6 +137,7 @@
 
     display: block;
     margin-top: var(--gap-2xs);
+    padding: var(--form-control-sub-paddings);
 }
 
 .hint {

packages/input/src/Component.tsx

@@ -333,6 +333,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
                     className={cn(
                         styles.input,
                         {
+                            [styles.error]: error,
                             [styles.hasLabel]: label,
                         },
                         inputClassName,

packages/input/src/component.screenshots.test.tsx

@@ -15,54 +15,60 @@ const screenshotTesting = setupScreenshotTesting({
 
 const clip = { x: 0, y: 0, width: 350, height: 150 };
 
-describe(
-    'Input | screenshots main props',
-    screenshotTesting({
-        cases: [
-            [
-                'sprite',
-                createSpriteStorybookUrl({
-                    componentName: 'Input',
-                    knobs: {
-                        label: 'Label',
-                        size: ['s', 'm', 'l'],
-                        block: [false, true],
-                        disabled: [false, true],
-                        value: ['', 'Value'],
-                    },
-                    size: { width: 350, height: 150 },
-                }),
+describe('Input | screenshots main props', () => {
+    const testCase = (theme: string) =>
+        screenshotTesting({
+            cases: [
+                [
+                    `${theme} theme`,
+                    createSpriteStorybookUrl({
+                        componentName: 'Input',
+                        knobs: {
+                            label: 'Label',
+                            size: ['s', 'm', 'l'],
+                            block: [false, true],
+                            disabled: [false, true],
+                            value: ['', 'Value'],
+                        },
+                        size: { width: 350, height: 150 },
+                    }),
+                ],
             ],
-        ],
-        screenshotOpts: {
-            fullPage: true,
-        },
-    }),
-);
+            screenshotOpts: {
+                fullPage: true,
+            },
+            theme,
+        })();
 
-describe(
-    'Input | screenshots hint and error',
-    screenshotTesting({
-        cases: [
-            [
-                'sprite',
-                createSpriteStorybookUrl({
-                    componentName: 'Input',
-                    knobs: {
-                        size: 'm',
-                        hint: ['', 'Hint'],
-                        error: ['', 'Error'],
-                        value: ['', 'Value'],
-                    },
-                    size: { width: 350, height: 150 },
-                }),
+    ['default', 'click', 'site', 'mobile'].map(testCase);
+});
+
+describe('Input | screenshots hint and error', () => {
+    const testCase = (theme: string) =>
+        screenshotTesting({
+            cases: [
+                [
+                    `${theme} theme`,
+                    createSpriteStorybookUrl({
+                        componentName: 'Input',
+                        knobs: {
+                            size: 'm',
+                            hint: ['', 'Hint'],
+                            error: ['', 'Error'],
+                            value: ['', 'Value'],
+                        },
+                        size: { width: 350, height: 150 },
+                    }),
+                ],
             ],
-        ],
-        screenshotOpts: {
-            fullPage: true,
-        },
-    }),
-);
+            screenshotOpts: {
+                fullPage: true,
+            },
+            theme,
+        })();
+
+    ['default', 'click', 'site', 'mobile'].map(testCase);
+});
 
 describe(
     'Input | screenshots addons',

packages/input/src/docs/Component.stories.mdx

@@ -13,7 +13,7 @@ import styles from '!!raw-loader!../index.module.css';
 <Meta
     title='Компоненты/Input'
     component={Input}
-    parameters={{ 'theme-switcher': { themes: ['click', 'site'] } }}
+    parameters={{ 'theme-switcher': { themes: ['click', 'site', 'mobile'] } }}
 />
 
 

packages/input/src/index.module.css

@@ -10,12 +10,16 @@
     --input-success-icon-display: flex;
     --input-error-icon: url('https://alfabank.st/icons/glyph_alert-circle_m_negative.svg');
     --input-success-icon: url('https://alfabank.st/icons/icon_ok_s_color.svg');
+    --input-caret-color: var(--input-color);
 
     /* disabled */
     --input-disabled-color: var(--color-light-text-secondary);
 
     /* read-only */
     --input-read-only-color: var(--color-light-text-secondary);
+
+    /* error */
+    --input-error-color: var(--color-light-text-primary);
 }
 
 @define-mixin _input-icon {
@@ -39,6 +43,7 @@
     outline: none;
     text-overflow: ellipsis;
     box-sizing: border-box;
+    caret-color: var(--input-caret-color);
     -webkit-appearance: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@@ -124,6 +129,12 @@
     opacity: 0;
 }
 
+/* ERROR STATE */
+.error {
+    color: var(--input-error-color);
+    caret-color: var(--input-error-color);
+}
+
 /* IE hide clear */
 
 .input::-ms-clear {

packages/themes/src/mixins/form-control/mobile.css

@@ -0,0 +1,31 @@
+@import '../../../../themes/src/default.css';
+
+@define-mixin form-control-mobile {
+    /* core vars */
+    --color-light-bg-secondary: #f3f4f5;
+    --border-radius-l: 12px;
+
+    /* theme */
+    --form-control-border-radius: var(--border-radius-l);
+    --form-control-border-bottom: 0;
+    --form-control-bg-color: var(--color-light-bg-secondary);
+
+    /* disabled */
+    --form-control-disabled-opacity: 0.5;
+    --form-control-disabled-border-bottom: 0;
+    --form-control-disabled-bg-color: var(--color-light-bg-secondary);
+
+    /* focus */
+    --form-control-focus-shadow: none;
+    --form-control-focus-border-bottom: 0;
+    --form-control-focus-bg-color: var(--color-light-bg-secondary);
+    --form-control-hover-bg-color: var(--color-light-bg-secondary);
+
+    /* error */
+    --form-control-error-label-color: var(--form-control-error-color);
+    --form-control-error-shadow: none;
+    --form-control-error-border-bottom: 0;
+
+    /* paddings */
+    --form-control-sub-paddings: 0 var(--gap-2xs);
+}

packages/themes/src/mixins/input/mobile.css

@@ -0,0 +1,16 @@
+@import '../../../../themes/src/default.css';
+
+@define-mixin input-mobile {
+    /* core vars */
+    --color-light-text-primary: #000;
+    --color-light-text-negative: #d91d0b;
+    --color-light-text-tertiary-transparent: rgba(60, 60, 67, 0.3);
+    --color-light-text-link: #0072ef;
+
+    /* theme */
+    --input-error-color: var(--color-light-text-negative);
+    --input-error-icon-display: none;
+    --input-disabled-color: var(--color-light-text-primary);
+    --input-focus-placeholder-color: var(--color-light-text-tertiary-transparent);
+    --input-caret-color: var(--color-light-text-link);
+}

packages/themes/src/mixins/mobile.css

@@ -1,4 +1,6 @@
 @import './button/mobile.css';
+@import './form-control/mobile.css';
+@import './input/mobile.css';
 @import './tag/mobile.css';
 @import './checkbox/mobile.css';
 @import './radio/mobile.css';
@@ -10,4 +12,6 @@
     @mixin checkbox-mobile;
     @mixin radio-mobile;
     @mixin confirmation-mobile;
+    @mixin form-control-mobile;
+    @mixin input-mobile;
 }