feat(Validations): fixedValidationTextColors and darkTheme feature fl…

…ags (#3420)

packages/react-ui-validations/docs/Pages/Displaying/FeatureFlags/FeatureFlagsContext.md

@@ -4,6 +4,8 @@
 
     export interface ValidationsFeatureFlags {
       validationsRemoveExtraSpans?: boolean;
+      fixedValidationTextColors?: boolean;
+      darkTheme?: boolean;
     }
 
 Механизм работы: новая функциональность применяется или не применяется в зависимости от того, был ли передан со значением true соответствующий флаг или нет.
@@ -23,6 +25,21 @@
 
     !!DemoWithCode!!FeatureFlagsExamplevalidationsRemoveExtraSpans
 
+
+### fixedValidationTextColors
+
+В ValidationText будут использоваться цвета по гайдам для error и warning.
+В Validations 2.0 фича будет применена по умолчанию.
+
+    !!DemoWithCode!!FeatureFlagsExampleFixedValidationTextColors
+
+### darkTheme
+
+На данный момент работает только в паре с **fixedValidationTextColors: true**.
+В ValidationText будут использоваться цвета по гайдам для error и warning из темной темы
+
+    !!DemoWithCode!!FeatureFlagsExampleFixedValidationTextColorsDarkTheme
+
 ## Объект со всеми флагами
 
 Чтобы получить объект со всеми флагами, необходимо применить вспомогательную функцию getFullValidationsFlagsContext к объекту заданных флагов:

packages/react-ui-validations/docs/Pages/Displaying/FeatureFlags/FeatureFlagsExampleFixedValidationTextColors.demo.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Gapped, Input } from '@skbkontur/react-ui';
+
+import {
+  text,
+  ValidationContainer,
+  ValidationsFeatureFlagsContext,
+  ValidationWrapper,
+} from '../../../../src';
+
+export default function FeatureFlagsExampleFixedValidationTextColors() {
+  return (
+    <ValidationsFeatureFlagsContext.Provider value={{ fixedValidationTextColors: true }}>
+      <ValidationContainer>
+        <Gapped style={{ padding: '10px 0 32px 10px' }}>
+          <ValidationWrapper
+            validationInfo={{
+              level: 'error',
+              type: 'immediate',
+              independent: false,
+              message: 'Error message',
+            }}
+            renderMessage={text('bottom')}
+          >
+            <Input />
+          </ValidationWrapper>
+          <ValidationWrapper
+            validationInfo={{
+              level: 'warning',
+              type: 'immediate',
+              independent: false,
+              message: 'Warning message',
+            }}
+            renderMessage={text('bottom')}
+          >
+            <Input />
+          </ValidationWrapper>
+        </Gapped>
+      </ValidationContainer>
+    </ValidationsFeatureFlagsContext.Provider>
+  );
+}

packages/react-ui-validations/docs/Pages/Displaying/FeatureFlags/FeatureFlagsExampleFixedValidationTextColorsDarkTheme.demo.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Gapped, Input } from '@skbkontur/react-ui';
+
+import {
+  text,
+  ValidationContainer,
+  ValidationsFeatureFlagsContext,
+  ValidationWrapper,
+} from '../../../../src';
+
+export default function FeatureFlagsExampleFixedValidationTextColorsDarkTheme() {
+  return (
+    <ValidationsFeatureFlagsContext.Provider
+      value={{ fixedValidationTextColors: true, darkTheme: true }}
+    >
+      <ValidationContainer>
+        <Gapped style={{ background: '#2b2b2b', padding: '10px 0 32px 10px' }}>
+          <ValidationWrapper
+            validationInfo={{
+              level: 'error',
+              type: 'immediate',
+              independent: false,
+              message: 'Error message',
+            }}
+            renderMessage={text('bottom')}
+          >
+            <Input />
+          </ValidationWrapper>
+          <ValidationWrapper
+            validationInfo={{
+              level: 'warning',
+              type: 'immediate',
+              independent: false,
+              message: 'Warning message',
+            }}
+            renderMessage={text('bottom')}
+          >
+            <Input />
+          </ValidationWrapper>
+        </Gapped>
+      </ValidationContainer>
+    </ValidationsFeatureFlagsContext.Provider>
+  );
+}

packages/react-ui-validations/package.json

@@ -19,7 +19,7 @@
     "storybook": "node ../../scripts/patch-node-options.js \"cross-env STORYBOOK_REACT_UI_TEST=true start-storybook -p 8081\"",
     "storybook:build": "node ../../scripts/patch-node-options.js \"cross-env STORYBOOK_REACT_UI_TEST=true build-storybook -o .storybook/build --quiet\"",
     "storybook:serve": "serve -l 8081 .storybook/build",
-    "start:docs": "webpack-dev-server -d --config webpack.docs.config.js --hot",
+    "start:docs": "node ../../scripts/patch-node-options.js \"webpack-dev-server -d --config webpack.docs.config.js --hot\"",
     "lint": "npm-run-all --continue-on-error --parallel lint:*",
     "lint:tsc": "tsc --noEmit --diagnostics",
     "lint:eslint": "cross-env TIMING=1 eslint --ext .js,.jsx,.ts,.tsx ./",

packages/react-ui-validations/src/ValidationText.tsx

@@ -4,6 +4,7 @@ import { Nullable } from '../typings/Types';
 
 import { getFullValidationsFlagsContext, ValidationsFeatureFlagsContext } from './utils/featureFlagsContext';
 import { TextPosition, Validation } from './ValidationWrapperInternal';
+import { getValidationTextColor } from './utils/getValidationTextColor';
 
 export interface ValidationTextProps {
   pos: TextPosition;
@@ -14,12 +15,15 @@ export interface ValidationTextProps {
 
 export const ValidationText = ({ pos, children, validation, 'data-tid': dataTid }: ValidationTextProps) => {
   const featureFlags = getFullValidationsFlagsContext(useContext(ValidationsFeatureFlagsContext));
+  const color = featureFlags.fixedValidationTextColors
+    ? getValidationTextColor(featureFlags.darkTheme, validation?.level)
+    : '#d43517';
 
   if (pos === 'right') {
     const childrenAndValidationText = (
       <>
         {children}
-        <span data-tid={dataTid} data-validation-message="text" style={{ marginLeft: '10px', color: '#d43517' }}>
+        <span data-tid={dataTid} data-validation-message="text" style={{ marginLeft: '10px', color }}>
           {(validation && validation.message) || ''}
         </span>
       </>
@@ -37,7 +41,7 @@ export const ValidationText = ({ pos, children, validation, 'data-tid': dataTid
       data-tid={dataTid}
       data-validation-message="text"
       style={{
-        color: '#d43517',
+        color,
         overflow: 'visible',
         whiteSpace: 'nowrap',
         position: 'absolute',

packages/react-ui-validations/src/utils/featureFlagsContext/ValidationsFeatureFlagsContext.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
 
-export interface ValidationsFeatureFlags {
+import { Nullable } from '../../../typings/Types';
+
+export interface ValidationsFeatureFlags extends Record<string, Nullable<boolean>> {
   validationsRemoveExtraSpans?: boolean;
+  fixedValidationTextColors?: boolean;
+  darkTheme?: boolean;
 }
 
 export const validationsFeatureFlagsDefault: ValidationsFeatureFlags = {
   validationsRemoveExtraSpans: false,
+  fixedValidationTextColors: false,
 };
 
 export const ValidationsFeatureFlagsContext =

packages/react-ui-validations/src/utils/getValidationTextColor.ts

@@ -0,0 +1,10 @@
+import type { ValidationLevel } from '../ValidationWrapperInternal';
+
+export function getValidationTextColor(darkTheme = false, level: ValidationLevel = 'error') {
+  switch (level) {
+    case 'warning':
+      return darkTheme ? '#fdd481' : '#ef8b17';
+    case 'error':
+      return darkTheme ? '#ff887b' : '#cb3d35';
+  }
+}

packages/react-ui-validations/stories/ValidationContainer.stories.tsx

@@ -9,6 +9,12 @@ export default {
 } as Meta;
 
 const validation: ValidationInfo = { message: 'Error', type: 'immediate', level: 'error', independent: true };
+const validationWarning: ValidationInfo = {
+  message: 'Warning',
+  type: 'immediate',
+  level: 'warning',
+  independent: true,
+};
 
 export const Default = () => (
   <ValidationContainer data-tid="TestTid">
@@ -19,7 +25,7 @@ export const Default = () => (
       <ValidationWrapper renderMessage={text()} validationInfo={validation}>
         <div>Text</div>
       </ValidationWrapper>
-      <ValidationWrapper renderMessage={text('bottom')} validationInfo={validation}>
+      <ValidationWrapper renderMessage={text('bottom')} validationInfo={validationWarning}>
         <div>TextBottom</div>
       </ValidationWrapper>
       <ValidationWrapper renderMessage={text('right')} validationInfo={validation}>
@@ -66,18 +72,22 @@ export const WithWrapperError = () => (
 
 export const WithWrapperErrorWithoutSpan = () => (
   <Gapped vertical gap={20}>
-    <ValidationsFeatureFlagsContext.Provider value={{ validationsRemoveExtraSpans: true }}>
+    <ValidationsFeatureFlagsContext.Provider
+      value={{ validationsRemoveExtraSpans: true, fixedValidationTextColors: true, darkTheme: true }}
+    >
       <ValidationContainer>
         <div>
           <Button>Submit</Button>
-          <ValidationWrapper renderMessage={text('bottom')} validationInfo={validation}>
+          <ValidationWrapper renderMessage={text('bottom')} validationInfo={validationWarning}>
             <Input />
           </ValidationWrapper>
         </div>
       </ValidationContainer>
     </ValidationsFeatureFlagsContext.Provider>
 
-    <ValidationsFeatureFlagsContext.Provider value={{ validationsRemoveExtraSpans: false }}>
+    <ValidationsFeatureFlagsContext.Provider
+      value={{ validationsRemoveExtraSpans: false, fixedValidationTextColors: true }}
+    >
       <ValidationContainer>
         <div>
           <Button>Submit</Button>