feat: slider input mobile theme (PDS-242) (#738)

* feat: add mobile theme for form-contro & input * chore(input): screenshots * chore: update mobile button screenshots * feat: add mobile theme for slider & slider-input * fix(slider): mobile theme bg * fix(slider-input): font-weight normal for mobile Co-authored-by: dmitrsavk <dmitrsavk@yandex.ru>
core-ds · Jul 23, 2021 · 6e924aa · 6e924aa
1 parent 88f6f7c
commit 6e924aa
Show file tree

Hide file tree

Showing 17 changed files with 92 additions and 48 deletions.
diff --git a/packages/slider-input/src/Component.tsx b/packages/slider-input/src/Component.tsx
@@ -180,6 +180,7 @@ export const SliderInput = forwardRef<HTMLInputElement, SliderInputProps>(
                     readOnly={readOnly}
                     className={cn(inputClassName, styles.input)}
                     focusedClassName={styles.focused}
+                    fieldClassName={styles.field}
                     inputMode='numeric'
                     pattern='[0-9]*'
                     error={error}

diff --git a/...r-input/src/__image_snapshots__/slider-input-sprite-additional-props-2-snap.png b/...r-input/src/__image_snapshots__/slider-input-sprite-additional-props-2-snap.png
diff --git a/...r-input/src/__image_snapshots__/slider-input-sprite-additional-props-3-snap.png b/...r-input/src/__image_snapshots__/slider-input-sprite-additional-props-3-snap.png
diff --git a/.../slider-input/src/__image_snapshots__/slider-input-sprite-main-props-2-snap.png b/.../slider-input/src/__image_snapshots__/slider-input-sprite-main-props-2-snap.png
diff --git a/.../slider-input/src/__image_snapshots__/slider-input-sprite-main-props-3-snap.png b/.../slider-input/src/__image_snapshots__/slider-input-sprite-main-props-3-snap.png
diff --git a/packages/slider-input/src/__snapshots__/Component.test.tsx.snap b/packages/slider-input/src/__snapshots__/Component.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`SliderInput should match snapshot 1`] = `
       class="component input s block"
     >
       <div
-        class="inner"
+        class="field inner"
       >
         <div
           class="inputWrapper"

diff --git a/packages/slider-input/src/component.screenshots.test.tsx b/packages/slider-input/src/component.screenshots.test.tsx
@@ -7,43 +7,46 @@ const screenshotTesting = setupScreenshotTesting({
     expect,
 });
 
-describe(
-    'SliderInput | sprite',
-    screenshotTesting({
-        cases: [
-            [
-                'main props',
-                createSpriteStorybookUrl({
-                    componentName: 'SliderInput',
-                    knobs: {
-                        label: 'Оставшийся срок по кредиту',
-                        value: [0, 50, 100],
-                        size: ['s', 'm', 'l', 'xl'],
-                    },
-                    size: { width: 260, height: 120 },
-                }),
+describe('SliderInput | sprite', () => {
+    const testCase = (theme: string) =>
+        screenshotTesting({
+            cases: [
+                [
+                    'main props',
+                    createSpriteStorybookUrl({
+                        componentName: 'SliderInput',
+                        knobs: {
+                            label: 'Оставшийся срок по кредиту',
+                            value: [0, 50, 100],
+                            size: ['s', 'm', 'l', 'xl'],
+                        },
+                        size: { width: 260, height: 120 },
+                    }),
+                ],
+                [
+                    'additional props',
+                    createSpriteStorybookUrl({
+                        componentName: 'SliderInput',
+                        knobs: {
+                            value: 50,
+                            info: 'Р',
+                            label: ['', 'Оставшийся срок по кредиту'],
+                            error: ['', 'Ошибка'],
+                            steps: [['36 мес', '180 мес', '360 мес']],
+                        },
+                        size: { width: 260, height: 120 },
+                    }),
+                ],
             ],
-            [
-                'additional props',
-                createSpriteStorybookUrl({
-                    componentName: 'SliderInput',
-                    knobs: {
-                        value: 50,
-                        info: 'Р',
-                        label: ['', 'Оставшийся срок по кредиту'],
-                        error: ['', 'Ошибка'],
-                        steps: [['36 мес', '180 мес', '360 мес']],
-                    },
-                    size: { width: 260, height: 120 },
-                }),
-            ],
-        ],
-        screenshotOpts: {
-            fullPage: true,
-        },
-        viewport: {
-            width: 1100,
-            height: 500,
-        },
-    }),
-);
+            screenshotOpts: {
+                fullPage: true,
+            },
+            viewport: {
+                width: 1100,
+                height: 500,
+            },
+            theme,
+        })();
+
+    ['default', 'click', 'mobile'].map(testCase);
+});
diff --git a/packages/slider-input/src/docs/Component.stories.mdx b/packages/slider-input/src/docs/Component.stories.mdx
@@ -12,7 +12,7 @@ import styles from '!!raw-loader!../index.module.css';
 <Meta
     title='Компоненты/SliderInput'
     component={SliderInput}
-    parameters={{ 'theme-switcher': { themes: ['click'] } }}
+    parameters={{ 'theme-switcher': { themes: ['click', 'mobile'] } }}
 />
 
 

diff --git a/packages/slider-input/src/index.module.css b/packages/slider-input/src/index.module.css
@@ -3,6 +3,7 @@
 :root {
     --slider-input-steps-color: var(--color-light-text-secondary);
     --slider-input-info-color: var(--color-light-text-secondary);
+    --slider-input-font-weight: 700;
 }
 
 .component {
@@ -24,10 +25,15 @@
     }
 }
 
+.field {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
 .input {
     & input,
     & input + div {
-        font-weight: 700;
+        font-weight: var(--slider-input-font-weight);
         font-variant-numeric: tabular-nums;
     }
 

diff --git a/packages/slider/src/__image_snapshots__/slider-main-props-click-snap.png b/packages/slider/src/__image_snapshots__/slider-main-props-click-snap.png
diff --git a/packages/slider/src/__image_snapshots__/slider-main-props-mobile-snap.png b/packages/slider/src/__image_snapshots__/slider-main-props-mobile-snap.png
diff --git a/packages/slider/src/component.screenshots.test.tsx b/packages/slider/src/component.screenshots.test.tsx
@@ -32,5 +32,5 @@ describe('Slider | main props', () => {
             theme,
         })();
 
-    ['default', 'click'].map(testCase);
+    ['default', 'click', 'mobile'].map(testCase);
 });
diff --git a/packages/slider/src/docs/Component.stories.mdx b/packages/slider/src/docs/Component.stories.mdx
@@ -12,7 +12,7 @@ import styles from '!!raw-loader!../index.module.css';
 <Meta
     title='Компоненты/Slider'
     component={Slider}
-    parameters={{ 'theme-switcher': { themes: ['click'] } }}
+    parameters={{ 'theme-switcher': { themes: ['click', 'mobile'] } }}
 />
 
 

diff --git a/packages/slider/src/index.module.css b/packages/slider/src/index.module.css
@@ -12,6 +12,7 @@
     --slider-progress-background: transparent;
     --slider-progress-hover-background: transparent;
     --slider-progress-border-radius: 0;
+    --slider-range-offest: calc(var(--slider-thumb-size) / 2 * -1);
 }
 
 /* Не работают префиксные селекторы через запятую - пришлось вынести в миксины */
@@ -96,8 +97,8 @@
     position: absolute;
     z-index: 1;
     top: 0;
-    right: calc(var(--slider-thumb-size) / 2 * -1);
-    left: calc(var(--slider-thumb-size) / 2 * -1);
+    right: var(--slider-range-offest);
+    left: var(--slider-range-offest);
 }
 
 .range,

diff --git a/packages/themes/src/mixins/mobile.css b/packages/themes/src/mixins/mobile.css
@@ -5,6 +5,10 @@
 @import './checkbox/mobile.css';
 @import './radio/mobile.css';
 @import './confirmation/mobile.css';
+@import './form-control/mobile.css';
+@import './input/mobile.css';
+@import './slider/mobile.css';
+@import './slider-input/mobile.css';
 
 @define-mixin theme-mobile {
     @mixin button-mobile;
@@ -14,4 +18,6 @@
     @mixin confirmation-mobile;
     @mixin form-control-mobile;
     @mixin input-mobile;
+    @mixin slider-mobile;
+    @mixin slider-input-mobile;
 }
diff --git a/packages/themes/src/mixins/slider-input/mobile.css b/packages/themes/src/mixins/slider-input/mobile.css
@@ -0,0 +1,5 @@
+@import '../../../../themes/src/default.css';
+
+@define-mixin slider-input-mobile {
+    --slider-input-font-weight: normal;
+}
diff --git a/packages/themes/src/mixins/slider/mobile.css b/packages/themes/src/mixins/slider/mobile.css
@@ -0,0 +1,7 @@
+@import '../../../../themes/src/default.css';
+
+@define-mixin slider-mobile {
+    --slider-progress-background: var(--color-light-graphic-neutral);
+    --slider-progress-hover-background: var(--color-light-graphic-neutral);
+    --slider-range-offest: 0;
+}