fix(input): smart error icon (#746)

* fix(input): smart error icon * fix(slider-input): remove margins * fix(intl-phone-input): deps * chore: update screenshots * Update package.json * feat: input inverted colors (PDS-265) (#782) * feat: add inverted colors to inputs * fix(password-input): addons paddings * fix(form-control): error border 2px
core-ds · Aug 23, 2021 · f1950d6 · f1950d6
1 parent 36f6a5e
commit f1950d6
Show file tree

Hide file tree

Showing 87 changed files with 948 additions and 377 deletions.
diff --git a/packages/amount-input/src/Component.tsx b/packages/amount-input/src/Component.tsx
@@ -7,6 +7,13 @@ import { withSuffix } from '@alfalab/core-components-with-suffix';
 import { getFormattedValue, getAmountValueFromStr } from './utils';
 
 import styles from './index.module.css';
+import defaultColors from './default.module.css';
+import invertedColors from './inverted.module.css';
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 
 export type AmountInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
     /**
@@ -85,6 +92,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
             }`,
             integersOnly = false,
             bold = true,
+            colors = 'default',
             className,
             focusedClassName,
             dataTestId,
@@ -216,7 +224,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
                         <Fragment>
                             {majorPart}
 
-                            <span className={styles.minorPartAndCurrency}>
+                            <span className={colorStyles[colors].minorPartAndCurrency}>
                                 {minorPart !== undefined && `,${minorPart}`}
                                 {THINSP}
                                 {suffix === currency ? currencySymbol : suffix}
@@ -227,6 +235,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
                     clear={clear}
                     placeholder={placeholder}
                     value={inputValue}
+                    colors={colors}
                     className={cn(styles.component, className)}
                     focusedClassName={focusedClassName}
                     inputClassName={styles.input}

diff --git a/...amount-input/src/__image_snapshots__/amount-input-screenshots-inverted-snap.png b/...amount-input/src/__image_snapshots__/amount-input-screenshots-inverted-snap.png
diff --git a/packages/amount-input/src/__snapshots__/Component.test.tsx.snap b/packages/amount-input/src/__snapshots__/Component.test.tsx.snap
@@ -9,10 +9,10 @@ Object {
         class="container bold"
       >
         <div
-          class="component component hasSuffix s"
+          class="component component component hasSuffix s"
         >
           <div
-            class="inner"
+            class="inner inner"
           >
             <div
               class="inputWrapper"
@@ -21,7 +21,7 @@ Object {
                 class="input"
               >
                 <input
-                  class="input input"
+                  class="input input input"
                   placeholder="0 ₽"
                   type="text"
                   value=""
@@ -57,10 +57,10 @@ Object {
       class="container bold"
     >
       <div
-        class="component component hasSuffix s"
+        class="component component component hasSuffix s"
       >
         <div
-          class="inner"
+          class="inner inner"
         >
           <div
             class="inputWrapper"
@@ -69,7 +69,7 @@ Object {
               class="input"
             >
               <input
-                class="input input"
+                class="input input input"
                 placeholder="0 ₽"
                 type="text"
                 value=""
@@ -162,10 +162,10 @@ Object {
         class="container bold"
       >
         <div
-          class="component component hasSuffix s"
+          class="component component component hasSuffix s"
         >
           <div
-            class="inner"
+            class="inner inner"
           >
             <div
               class="inputWrapper"
@@ -174,7 +174,7 @@ Object {
                 class="input"
               >
                 <input
-                  class="input input"
+                  class="input input input"
                   placeholder="0 ₽"
                   type="text"
                   value=""
@@ -209,10 +209,10 @@ Object {
         class="container bold filled"
       >
         <div
-          class="component component suffixVisible hasSuffix s"
+          class="component component component suffixVisible hasSuffix s"
         >
           <div
-            class="inner filled"
+            class="inner inner filled"
           >
             <div
               class="inputWrapper"
@@ -221,7 +221,7 @@ Object {
                 class="input"
               >
                 <input
-                  class="input input"
+                  class="input input input"
                   placeholder="0 $"
                   type="text"
                   value="12 345,67"
@@ -260,10 +260,10 @@ Object {
       class="container bold filled"
     >
       <div
-        class="component component suffixVisible hasSuffix s"
+        class="component component component suffixVisible hasSuffix s"
       >
         <div
-          class="inner filled"
+          class="inner inner filled"
         >
           <div
             class="inputWrapper"
@@ -272,7 +272,7 @@ Object {
               class="input"
             >
               <input
-                class="input input"
+                class="input input input"
                 placeholder="0 $"
                 type="text"
                 value="12 345,67"

diff --git a/packages/amount-input/src/component.screenshots.test.tsx b/packages/amount-input/src/component.screenshots.test.tsx
@@ -1,4 +1,4 @@
-import { setupScreenshotTesting, createSpriteStorybookUrl } from '../../screenshot-utils';
+import { setupScreenshotTesting, createSpriteStorybookUrl, createStorybookUrl } from '../../screenshot-utils';
 
 const screenshotTesting = setupScreenshotTesting({
     it,
@@ -24,6 +24,17 @@ describe(
                     size: { width: 300, height: 70 },
                 }),
             ],
+            [
+                'inverted',
+                createStorybookUrl({
+                    componentName: 'AmountInput',
+                    knobs: {
+                        value: 12300,
+                        minority: 100,
+                        colors: 'inverted',
+                    },
+                }),
+            ],
         ],
     }),
 );
diff --git a/packages/amount-input/src/default.module.css b/packages/amount-input/src/default.module.css
@@ -0,0 +1,9 @@
+@import '../../themes/src/default.css';
+
+:root {
+    --amount-input-minor-part-and-currency-color: var(--color-light-text-secondary);
+}
+
+.minorPartAndCurrency {
+    color: var(--amount-input-minor-part-and-currency-color);
+}
diff --git a/packages/amount-input/src/index.module.css b/packages/amount-input/src/index.module.css
@@ -1,9 +1,5 @@
 @import '../../themes/src/default.css';
 
-:root {
-    --amount-input-minor-part-and-currency-color: var(--color-light-text-secondary);
-}
-
 /*
 * Задача:
 * 1) Отобразить символ валюты сразу за последним введенным символом
@@ -21,10 +17,6 @@
     position: relative;
 }
 
-.minorPartAndCurrency {
-    color: var(--amount-input-minor-part-and-currency-color);
-}
-
 .bold .input,
 .bold .suffixContainer {
     font-weight: bold;

diff --git a/packages/amount-input/src/inverted.module.css b/packages/amount-input/src/inverted.module.css
@@ -0,0 +1,11 @@
+@import '../../themes/src/default.css';
+
+:root {
+    --amount-input-inverted-minor-part-and-currency-color: var(
+        --color-light-text-secondary-inverted
+    );
+}
+
+.minorPartAndCurrency {
+    color: var(--amount-input-inverted-minor-part-and-currency-color);
+}
diff --git a/packages/bank-card/src/__snapshots__/Component.test.tsx.snap b/packages/bank-card/src/__snapshots__/Component.test.tsx.snap
@@ -32,10 +32,10 @@ exports[`BankCard Snapshots tests should match snapshots 1`] = `
           </svg>
         </div>
         <div
-          class="component filled s block hasRightAddons"
+          class="component component filled s block hasRightAddons"
         >
           <div
-            class="inner filled hasLabel"
+            class="inner inner filled hasLabel"
           >
             <div
               class="inputWrapper"
@@ -47,7 +47,7 @@ exports[`BankCard Snapshots tests should match snapshots 1`] = `
                 Номер карты или счёта
               </span>
               <div
-                class="label label"
+                class="label label label"
               >
                 <span
                   class="labelInner"
@@ -60,7 +60,7 @@ exports[`BankCard Snapshots tests should match snapshots 1`] = `
               >
                 <input
                   aria-label="Номер карты или счёта"
-                  class="input hasLabel input"
+                  class="input input hasLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"
@@ -150,10 +150,10 @@ exports[`BankCard Snapshots tests should match snapshots 2`] = `
           </svg>
         </div>
         <div
-          class="component filled s block hasRightAddons"
+          class="component component filled s block hasRightAddons"
         >
           <div
-            class="inner filled hasLabel"
+            class="inner inner filled hasLabel"
           >
             <div
               class="inputWrapper"
@@ -165,7 +165,7 @@ exports[`BankCard Snapshots tests should match snapshots 2`] = `
                 Номер карты или счёта
               </span>
               <div
-                class="label label"
+                class="label label label"
               >
                 <span
                   class="labelInner"
@@ -178,7 +178,7 @@ exports[`BankCard Snapshots tests should match snapshots 2`] = `
               >
                 <input
                   aria-label="Номер карты или счёта"
-                  class="input hasLabel input"
+                  class="input input hasLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"
@@ -266,10 +266,10 @@ exports[`BankCard Snapshots tests should match snapshots 3`] = `
           </svg>
         </div>
         <div
-          class="component filled s block hasRightAddons"
+          class="component component filled s block hasRightAddons"
         >
           <div
-            class="inner filled hasLabel"
+            class="inner inner filled hasLabel"
           >
             <div
               class="inputWrapper"
@@ -281,7 +281,7 @@ exports[`BankCard Snapshots tests should match snapshots 3`] = `
                 Номер карты или счёта
               </span>
               <div
-                class="label label"
+                class="label label label"
               >
                 <span
                   class="labelInner"
@@ -294,7 +294,7 @@ exports[`BankCard Snapshots tests should match snapshots 3`] = `
               >
                 <input
                   aria-label="Номер карты или счёта"
-                  class="input hasLabel input"
+                  class="input input hasLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"
@@ -382,10 +382,10 @@ exports[`BankCard Snapshots tests should match snapshots 4`] = `
           </svg>
         </div>
         <div
-          class="component filled s block hasRightAddons"
+          class="component component filled s block hasRightAddons"
         >
           <div
-            class="inner filled hasLabel"
+            class="inner inner filled hasLabel"
           >
             <div
               class="inputWrapper"
@@ -397,7 +397,7 @@ exports[`BankCard Snapshots tests should match snapshots 4`] = `
                 Номер карты или счёта
               </span>
               <div
-                class="label label"
+                class="label label label"
               >
                 <span
                   class="labelInner"
@@ -410,7 +410,7 @@ exports[`BankCard Snapshots tests should match snapshots 4`] = `
               >
                 <input
                   aria-label="Номер карты или счёта"
-                  class="input hasLabel input"
+                  class="input input hasLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"

diff --git a/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap
@@ -7,10 +7,10 @@ exports[`CalendarInput Display tests should match snapshot 1`] = `
     tabindex="-1"
   >
     <div
-      class="component s block hasRightAddons"
+      class="component component s block hasRightAddons"
     >
       <div
-        class="inner"
+        class="inner inner"
       >
         <div
           class="inputWrapper"
@@ -19,7 +19,7 @@ exports[`CalendarInput Display tests should match snapshot 1`] = `
             class="input"
           >
             <input
-              class="input"
+              class="input input"
               type="text"
               value=""
             />