feat(slider-input): design updates (#673)

* test(keyboard-focusable): update screenshot * feat(form-control): change focused state bg-color * feat(input): swap right addons and error/success icon * feat(slider-input): update design * feat(input): change default error icon * feat(themes): add error icon to site theme * feat(input): update default error icon * docs(slider-input): add site theme to demo * feat(slider-input): add right slots margins * feat(themes): fix click form control
core-ds · Jun 22, 2021 · 794e3cc · 794e3cc
1 parent cbc6bd3
commit 794e3cc
Show file tree

Hide file tree

Showing 14 changed files with 58 additions and 27 deletions.
diff --git a/packages/form-control/src/index.module.css b/packages/form-control/src/index.module.css
@@ -29,6 +29,7 @@
 
     /* focus */
     --form-control-focus-border-bottom: 1px solid var(--color-light-border-key);
+    --form-control-focus-bg-color: color-mod(var(--color-light-bg-primary-inverted) alpha(15%));
 
     /* hover */
     --form-control-hover-bg-color: color-mod(var(--color-light-bg-primary-inverted) alpha(15%));
@@ -282,6 +283,10 @@
     transform: translateY(-100%) scale(0.875);
 }
 
+.focused.inner {
+    background-color: var(--form-control-focus-bg-color);
+}
+
 /* HOVER STATE */
 
 .inner:not(.disabled):hover {

diff --git a/packages/input/src/Component.stories.mdx b/packages/input/src/Component.stories.mdx
@@ -10,7 +10,7 @@ import { name, version } from '../package.json';
 <Meta
     title='Компоненты'
     component={Input}
-    parameters={{ 'theme-switcher': { themes: ['click'] } }}
+    parameters={{ 'theme-switcher': { themes: ['click', 'site'] } }}
 />
 
 

diff --git a/packages/input/src/Component.tsx b/packages/input/src/Component.tsx
@@ -296,9 +296,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
                                 <span className={styles.clearIcon} />
                             </Button>
                         )}
+                        {rightAddons}
                         {error && <span className={styles.errorIcon} />}
                         {success && !error && <span className={styles.successIcon} />}
-                        {rightAddons}
                     </Fragment>
                 )
             );

diff --git a/packages/input/src/__image_snapshots__/input-screenshots-addons-sprite-snap.png b/packages/input/src/__image_snapshots__/input-screenshots-addons-sprite-snap.png
diff --git a/.../input/src/__image_snapshots__/input-screenshots-hint-and-error-sprite-snap.png b/.../input/src/__image_snapshots__/input-screenshots-hint-and-error-sprite-snap.png
diff --git a/packages/input/src/index.module.css b/packages/input/src/index.module.css
@@ -8,7 +8,7 @@
     --input-with-label-placeholder-color: var(--color-light-text-tertiary);
     --input-error-icon-display: flex;
     --input-success-icon-display: flex;
-    --input-error-icon: url('https://alfabank.st/icons/icon_error_s_color.svg');
+    --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');
 
     /* disabled */
@@ -78,14 +78,14 @@
     @mixin _input-icon;
 
     display: var(--input-error-icon-display);
-    background-image: url('https://alfabank.st/icons/icon_error_s_color.svg');
+    background-image: var(--input-error-icon);
 }
 
 .successIcon {
     @mixin _input-icon;
 
     display: var(--input-success-icon-display);
-    background-image: url('https://alfabank.st/icons/icon_ok_s_color.svg');
+    background-image: var(--input-success-icon);
 }
 
 /* DISABLED STATE */

diff --git a/...image_snapshots__/keyboard-focusable-interactions-tests-focus-on-input-snap.png b/...image_snapshots__/keyboard-focusable-interactions-tests-focus-on-input-snap.png
diff --git a/packages/slider-input/src/Component.stories.mdx b/packages/slider-input/src/Component.stories.mdx
@@ -15,7 +15,7 @@ import { name, version } from '../package.json';
 <Meta
     title='Компоненты'
     component={SliderInput}
-    parameters={{ 'theme-switcher': { themes: ['click'] } }}
+    parameters={{ 'theme-switcher': { themes: ['click', 'site'] } }}
 />
 
 
@@ -41,7 +41,7 @@ import { name, version } from '../package.json';
             hint={text('hint', '')}
             info={text('info', '')}
             error={text('error', '')}
-            rightAddons={boolean('rightAddons', false) && !text('error') && <Icon />}
+            rightAddons={boolean('rightAddons', false) && <Icon />}
             leftAddons={boolean('leftAddons', false) && <Icon />}
             readOnly={boolean('readOnly', false)}
         />

diff --git a/packages/slider-input/src/Component.tsx b/packages/slider-input/src/Component.tsx
@@ -125,6 +125,7 @@ export const SliderInput = forwardRef<HTMLInputElement, SliderInputProps>(
             Input = DefaultInput,
             customInputProps = {},
             dataTestId,
+            error,
             ...restProps
         },
         ref,
@@ -159,6 +160,7 @@ export const SliderInput = forwardRef<HTMLInputElement, SliderInputProps>(
                         [styles.block]: block,
                         [styles.filled]: Boolean(value),
                         [styles.hasLabel]: label,
+                        [styles.hasError]: Boolean(error),
                     },
                     styles[size],
                     className,
@@ -180,29 +182,34 @@ export const SliderInput = forwardRef<HTMLInputElement, SliderInputProps>(
                     focusedClassName={styles.focused}
                     inputMode='numeric'
                     pattern='[0-9]*'
+                    error={error}
                     bottomAddons={
-                        <Slider
-                            min={min}
-                            max={max}
-                            step={step}
-                            onChange={handleSliderChange}
-                            ref={ref}
-                            value={Number.isNaN(sliderValue) ? 0 : sliderValue}
-                            disabled={disabled || readOnly}
-                            className={cn(styles.slider, sliderClassName)}
-                        />
+                        !disabled && (
+                            <Slider
+                                min={min}
+                                max={max}
+                                step={step}
+                                onChange={handleSliderChange}
+                                ref={ref}
+                                value={Number.isNaN(sliderValue) ? 0 : sliderValue}
+                                disabled={disabled || readOnly}
+                                className={cn(styles.slider, sliderClassName)}
+                            />
+                        )
                     }
                     rightAddons={
                         (info || rightAddons) && (
                             <Fragment>
                                 {info && <span className={styles.info}>{info}</span>}
-                                {rightAddons}
+                                {rightAddons && (
+                                    <span className={styles.rightAddons}>{rightAddons}</span>
+                                )}
                             </Fragment>
                         )
                     }
                 />
 
-                {steps.length > 0 && (
+                {steps.length > 0 && !error && (
                     <div className={cn(styles.steps, stepsClassName)}>
                         {steps.map((stepLabel, i) =>
                             isValidElement(stepLabel) ? (

diff --git a/...der-input/src/__image_snapshots__/slider-input-sprite-additional-props-snap.png b/...der-input/src/__image_snapshots__/slider-input-sprite-additional-props-snap.png
diff --git a/packages/slider-input/src/index.module.css b/packages/slider-input/src/index.module.css
@@ -30,6 +30,10 @@
         font-weight: 700;
         font-variant-numeric: tabular-nums;
     }
+
+    & input::placeholder {
+        font-weight: 400;
+    }
 }
 
 .steps {
@@ -44,13 +48,22 @@
 .info {
     @mixin system_16-20_regular;
 
+    margin-right: var(--gap-s);
     color: var(--slider-input-info-color);
     box-sizing: border-box;
     opacity: 0;
     transition: 0.2s ease;
     visibility: hidden;
 }
 
+.info:only-child {
+    margin-right: 0;
+}
+
+.hasError .rightAddons {
+    margin-right: var(--gap-2xs);
+}
+
 .s.hasLabel .info:first-child {
     padding: var(--form-control-labeled-s-paddings);
     padding-left: 0;

diff --git a/packages/themes/src/mixins/form-control/click.css b/packages/themes/src/mixins/form-control/click.css
@@ -17,6 +17,7 @@
     /* focus */
     --form-control-focus-shadow: none;
     --form-control-focus-border-bottom: 0;
+    --form-control-focus-bg-color: var(--color-light-bg-tertiary);
     --form-control-hover-bg-color: var(--color-light-bg-tertiary);
 
     /* error */

diff --git a/packages/themes/src/mixins/input/site.css b/packages/themes/src/mixins/input/site.css
@@ -0,0 +1,3 @@
+@define-mixin input-site {
+    --input-error-icon: url('https://alfabank.st/icons/glyph_cross-circle_m_negative.svg');
+}
diff --git a/packages/themes/src/mixins/site.css b/packages/themes/src/mixins/site.css
@@ -1,9 +1,11 @@
 @import './button/site.css';
 @import './tabs/site.css';
 @import './form-control/site.css';
+@import './input/site.css';
 
 @define-mixin theme-site {
     @mixin button-site;
     @mixin form-control-site;
     @mixin tabs-site;
+    @mixin input-site;
 }