skbkontur · mshatikhin · May 16, 2024 · May 16, 2024 · May 17, 2024 · May 17, 2024
diff --git a/.gitignore b/.gitignore
@@ -16,3 +16,5 @@ browsers/
 .scannerwork
 /packages/react-ui-validations/.creevey/report
 /packages/react-ui-validations/.storybook/build/
+
+.vs
diff --git a/contributing.md b/contributing.md
@@ -350,7 +350,7 @@ function foo() {}
    Стоит избегать общих слов, таких как "change". Вместо этого опишите в чем конкретно произошло изменение.
 
    Примеры:
-   - validationsRemoveExtraSpans - Избавиться от обертки span в ValidationContainer, ValidationWrapper и ValidationText
+   - validationsDivWrapper - Поменять обертку span на div c 'display: inline' чтобы соответсвовать w3c стандарту в ValidationContainer, ValidationWrapper и ValidationText
    - tokenInputRemoveWhitespaceFromDefaultDelimiters - В TokenInput изменили разделитель по умолчанию
 
 2) Добавьте флаг в ReactUIFeatureFlags в файл ReactUIFeatureFlagsContext.tsx и в документацию FEATUREFLAGSCONTEXT.md

diff --git a/.../react-ui-validations/docs/Pages/Displaying/FeatureFlags/FeatureFlagsContext.md b/.../react-ui-validations/docs/Pages/Displaying/FeatureFlags/FeatureFlagsContext.md
@@ -3,7 +3,7 @@
 ## Доступные флаги
 
     export interface ValidationsFeatureFlags {
-      validationsRemoveExtraSpans?: boolean;
+      validationsDivWrapper?: boolean;
       fixedValidationTextColors?: boolean;
       darkTheme?: boolean;
     }
@@ -14,16 +14,16 @@
 
     import { ValidationsFeatureFlagsContext } from '@skbkontur/react-ui-validations'
 
-    <ValidationsFeatureFlagsContext.Provider value={{ validationsRemoveExtraSpans: true }}>{/* ... */}</ValidationsFeatureFlagsContext.Provider>;
+    <ValidationsFeatureFlagsContext.Provider value={{ validationsDivWrapper: true }}>{/* ... */}</ValidationsFeatureFlagsContext.Provider>;
 
 ## Использование
 
-### validationsRemoveExtraSpans
+### validationsDivWrapper
 
 В ValidationContainer, ValidationWrapper и ValidationText из корня удалён лишний span.
 В Validations 2.0 фича будет применена по умолчанию.
 
-    !!DemoWithCode!!FeatureFlagsExamplevalidationsRemoveExtraSpans
+    !!DemoWithCode!!FeatureFlagsExampleValidationsRemoveDivWrapper
 
 
 ### fixedValidationTextColors

diff --git a/...ampleValidationsRemoveExtraSpans.demo.tsx → ...ampleValidationsRemoveDivWrapper.demo.tsx b/...ampleValidationsRemoveExtraSpans.demo.tsx → ...ampleValidationsRemoveDivWrapper.demo.tsx
@@ -13,7 +13,7 @@ interface CheckboxState {
   checked: boolean;
 }
 
-export default class FeatureFlagsExampleValidationsWrapperAndContainerRemoveExtraSpan extends React.Component {
+export default class FeatureFlagsExampleValidationsWrapperAndContainerDivWrapper extends React.Component {
   public state: CheckboxState = {
     checked: false,
   };
@@ -31,9 +31,7 @@ export default class FeatureFlagsExampleValidationsWrapperAndContainerRemoveExtr
 
   render() {
     return (
-      <ValidationsFeatureFlagsContext.Provider
-        value={{ validationsRemoveExtraSpans: true }}
-      >
+      <ValidationsFeatureFlagsContext.Provider value={{ validationsDivWrapper: true }}>
         <ValidationContainer ref={this.refContainer}>
           <ValidationWrapper validationInfo={this.validateSex()}>
             <Checkbox

diff --git a/packages/react-ui-validations/selenium-tests/Common.DotSettings b/packages/react-ui-validations/selenium-tests/Common.DotSettings
@@ -170,6 +170,7 @@
 	<s:Boolean x:Key="/Default/Environment/SettingsMigration/IsMigratorApplied/=JetBrains_002EReSharper_002EPsi_002ECSharp_002ECodeStyle_002ECSharpKeepExistingMigration/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/Environment/SettingsMigration/IsMigratorApplied/=JetBrains_002EReSharper_002EPsi_002ECSharp_002ECodeStyle_002ECSharpPlaceEmbeddedOnSameLineMigration/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/Environment/SettingsMigration/IsMigratorApplied/=JetBrains_002EReSharper_002EPsi_002ECSharp_002ECodeStyle_002ECSharpRenamePlacementToArrangementMigration/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/Environment/SettingsMigration/IsMigratorApplied/=JetBrains_002EReSharper_002EPsi_002ECSharp_002ECodeStyle_002ECSharpUseContinuousIndentInsideBracesMigration/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/Environment/SettingsMigration/IsMigratorApplied/=JetBrains_002EReSharper_002EPsi_002ECSharp_002ECodeStyle_002ESettingsUpgrade_002EAddAccessorOwnerDeclarationBracesMigration/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/Environment/SettingsMigration/IsMigratorApplied/=JetBrains_002EReSharper_002EPsi_002ECSharp_002ECodeStyle_002ESettingsUpgrade_002EAlwaysTreatStructAsNotReorderableMigration/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/Environment/SettingsMigration/IsMigratorApplied/=JetBrains_002EReSharper_002EPsi_002ECSharp_002ECodeStyle_002ESettingsUpgrade_002ECSharpPlaceAttributeOnSameLineMigration/@EntryIndexedValue">True</s:Boolean>

diff --git a/packages/react-ui-validations/selenium-tests/ValidationTests/App.config b/packages/react-ui-validations/selenium-tests/ValidationTests/App.config
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?><configuration>
+  <runtime>
+    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
+      <dependentAssembly>
+        <assemblyIdentity name="System.ValueTuple" publicKeyToken="cc7b13ffcd2ddd51" culture="neutral" />
+        <bindingRedirect oldVersion="0.0.0.0-4.0.3.0" newVersion="4.0.3.0" />
+      </dependentAssembly>
+      <dependentAssembly>
+        <assemblyIdentity name="WebDriver" publicKeyToken="null" culture="neutral" />
+        <bindingRedirect oldVersion="0.0.0.0-3.13.1.0" newVersion="3.13.1.0" />
+      </dependentAssembly>
+    </assemblyBinding>
+  </runtime>
+</configuration>
diff --git a/packages/react-ui-validations/selenium-tests/ValidationTests/ValidationTests.csproj b/packages/react-ui-validations/selenium-tests/ValidationTests/ValidationTests.csproj
@@ -9,8 +9,9 @@
     <AppDesignerFolder>Properties</AppDesignerFolder>
     <RootNamespace>SKBKontur.ValidationTests</RootNamespace>
     <AssemblyName>ValidationTests</AssemblyName>
-    <TargetFrameworkVersion>v4.5</TargetFrameworkVersion>
+    <TargetFrameworkVersion>v4.8</TargetFrameworkVersion>
     <FileAlignment>512</FileAlignment>
+    <TargetFrameworkProfile />
   </PropertyGroup>
   <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
     <DebugSymbols>true</DebugSymbols>
@@ -43,13 +44,14 @@
       <HintPath>..\packages\Kontur.Selone.0.0.6-alpha\lib\net45\Kontur.Selone.dll</HintPath>
     </Reference>
     <Reference Include="Microsoft.CSharp" />
+    <Reference Include="mscorlib" />
     <Reference Include="nunit.framework, Version=3.6.1.0, Culture=neutral, PublicKeyToken=2638cd05610744eb">
       <HintPath>..\packages\NUnit.3.6.1\lib\net45\nunit.framework.dll</HintPath>
     </Reference>
     <Reference Include="System" />
     <Reference Include="System.Core" />
-    <Reference Include="System.ValueTuple, Version=4.0.2.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51">
-      <HintPath>..\packages\System.ValueTuple.4.4.0\lib\netstandard1.0\System.ValueTuple.dll</HintPath>
+    <Reference Include="System.ValueTuple, Version=4.0.3.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51, processorArchitecture=MSIL">
+      <HintPath>..\packages\System.ValueTuple.4.5.0\lib\net47\System.ValueTuple.dll</HintPath>
     </Reference>
     <Reference Include="WebDriver, Version=3.13.1.0, Culture=neutral, PublicKeyToken=null">
       <HintPath>..\packages\Selenium.WebDriver.3.13.1\lib\net45\WebDriver.dll</HintPath>
@@ -76,6 +78,7 @@
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>
   <ItemGroup>
+    <None Include="App.config" />
     <None Include="packages.config" />
   </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />

diff --git a/packages/react-ui-validations/selenium-tests/ValidationTests/packages.config b/packages/react-ui-validations/selenium-tests/ValidationTests/packages.config
@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
-  <package id="JetBrains.Annotations" version="2020.1.0" targetFramework="net45" />
-  <package id="Kontur.ReactUI.SeleniumTesting" version="3.5.1" targetFramework="net45" />
-  <package id="Kontur.RetryableAssertions" version="0.0.2-alpha" targetFramework="net45" />
-  <package id="Kontur.Selone" version="0.0.6-alpha" targetFramework="net45" />
-  <package id="Microsoft.Windows.Compatibility" version="2.0.1" targetFramework="net45" />
-  <package id="NUnit" version="3.6.1" targetFramework="net45" />
-  <package id="NUnit3TestAdapter" version="3.15.1" targetFramework="net45" />
-  <package id="Selenium.WebDriver" version="3.13.1" targetFramework="net45" />
-  <package id="System.ValueTuple" version="4.4.0" targetFramework="net45" />
-</packages>
+  <package id="JetBrains.Annotations" version="2020.1.0" targetFramework="net48" />
+  <package id="Kontur.ReactUI.SeleniumTesting" version="3.5.1" targetFramework="net48" />
+  <package id="Kontur.RetryableAssertions" version="0.0.2-alpha" targetFramework="net48" />
+  <package id="Kontur.Selone" version="0.0.6-alpha" targetFramework="net48" />
+  <package id="Microsoft.Windows.Compatibility" version="2.0.1" targetFramework="net48" />
+  <package id="NUnit" version="3.6.1" targetFramework="net48" />
+  <package id="NUnit3TestAdapter" version="3.15.1" targetFramework="net48" />
+  <package id="Selenium.WebDriver" version="3.13.1" targetFramework="net48" />
+  <package id="System.ValueTuple" version="4.5.0" targetFramework="net48" />
+</packages>
diff --git a/packages/react-ui-validations/src/ValidationContextWrapper.tsx b/packages/react-ui-validations/src/ValidationContextWrapper.tsx
@@ -9,6 +9,7 @@ import { ValidationWrapperInternal } from './ValidationWrapperInternal';
 import type { ScrollOffset, ValidateArgumentType } from './ValidationContainer';
 import { isNullable } from './utils/isNullable';
 import { FocusMode } from './FocusMode';
+import { InlineDiv } from './utils/InlineDiv';
 
 export interface ValidationContextSettings {
   scrollOffset: ScrollOffset;
@@ -165,8 +166,8 @@ export class ValidationContextWrapper extends React.Component<ValidationContextW
   private featureFlags!: ValidationsFeatureFlags;
 
   private children = (flags: ValidationsFeatureFlags) => {
-    if (flags.validationsRemoveExtraSpans) {
-      return this.props.children;
+    if (flags.validationsDivWrapper) {
+      return <InlineDiv>{this.props.children}</InlineDiv>;
     }
 
     return <span>{this.props.children}</span>;

diff --git a/packages/react-ui-validations/src/ValidationText.tsx b/packages/react-ui-validations/src/ValidationText.tsx
@@ -21,19 +21,13 @@ export const ValidationText = ({ pos, children, validation, 'data-tid': dataTid
   const color = getValidationTextColor(featureFlags, theme, validation?.level);
 
   if (pos === 'right') {
-    const childrenAndValidationText = (
-      <>
+    return (
+      <span style={{ display: 'inline-block' }}>
         {children}
         <span data-tid={dataTid} data-validation-message="text" style={{ marginLeft: '10px', color }}>
           {(validation && validation.message) || ''}
         </span>
-      </>
-    );
-
-    return featureFlags.validationsRemoveExtraSpans ? (
-      childrenAndValidationText
-    ) : (
-      <span style={{ display: 'inline-block' }}>{childrenAndValidationText}</span>
+      </span>
     );
   }
 
@@ -54,12 +48,7 @@ export const ValidationText = ({ pos, children, validation, 'data-tid': dataTid
     </span>
   );
 
-  return featureFlags.validationsRemoveExtraSpans ? (
-    <>
-      {children}
-      <span style={{ position: 'absolute', display: 'block' }}>{validationText}</span>
-    </>
-  ) : (
+  return (
     <span style={{ position: 'relative', display: 'inline-block' }}>
       {children}
       <span style={{ position: 'absolute', bottom: 0, left: 0, height: 0 }}>{validationText}</span>

diff --git a/packages/react-ui-validations/src/ValidationTooltip.tsx b/packages/react-ui-validations/src/ValidationTooltip.tsx
@@ -1,10 +1,5 @@
 import React from 'react';
 
-import {
-  ValidationsFeatureFlags,
-  ValidationsFeatureFlagsContext,
-  getFullValidationsFlagsContext,
-} from './utils/featureFlagsContext';
 import { ReactUiDetection, Tooltip } from './ReactUiDetection';
 
 export type TooltipPosition =
@@ -33,31 +28,22 @@ export class ValidationTooltip extends React.Component<ValidationTooltipProps> {
   public static __KONTUR_REACT_UI__ = 'ValidationTooltip';
   public static displayName = 'ValidationTooltip';
 
-  private featureFlags!: ValidationsFeatureFlags;
   public render() {
     const { children, pos, error, render, ...rest } = this.props;
 
     const onlyChild = React.Children.only(children);
     const child = onlyChild && onlyChild.props ? onlyChild.props.children : null;
 
-    return (
-      <ValidationsFeatureFlagsContext.Consumer>
-        {(flags) => {
-          this.featureFlags = getFullValidationsFlagsContext(flags);
-          return !this.featureFlags.validationsRemoveExtraSpans &&
-            (ReactUiDetection.isRadioGroup(child) ||
-              ReactUiDetection.isTokenInput(child) ||
-              ReactUiDetection.isSwitcher(child)) ? (
-            <Tooltip useWrapper={false} pos={pos} render={error && render} trigger={'hover&focus'} {...rest}>
-              {child}
-            </Tooltip>
-          ) : (
-            <Tooltip pos={pos} render={error && render} trigger={'hover&focus'} {...rest}>
-              {children}
-            </Tooltip>
-          );
-        }}
-      </ValidationsFeatureFlagsContext.Consumer>
+    return ReactUiDetection.isRadioGroup(child) ||
+      ReactUiDetection.isTokenInput(child) ||
+      ReactUiDetection.isSwitcher(child) ? (
+      <Tooltip useWrapper={false} pos={pos} render={error && render} trigger={'hover&focus'} {...rest}>
+        {child}
+      </Tooltip>
+    ) : (
+      <Tooltip pos={pos} render={error && render} trigger={'hover&focus'} {...rest}>
+        {children}
+      </Tooltip>
     );
   }
 }
diff --git a/packages/react-ui-validations/src/ValidationWrapperInternal.tsx b/packages/react-ui-validations/src/ValidationWrapperInternal.tsx
@@ -3,11 +3,6 @@ import warning from 'warning';
 
 import { Nullable } from '../typings/Types';
 
-import {
-  ValidationsFeatureFlags,
-  ValidationsFeatureFlagsContext,
-  getFullValidationsFlagsContext,
-} from './utils/featureFlagsContext';
 import { getRootNode } from './utils/getRootNode';
 import { isBrowser } from './utils/utils';
 import { smoothScrollIntoView } from './smoothScrollIntoView';
@@ -70,8 +65,6 @@ export class ValidationWrapperInternal extends React.Component<
   public static contextType = ValidationContext;
   public context: ValidationContextType = this.context;
 
-  private featureFlags!: ValidationsFeatureFlags;
-
   public componentDidMount() {
     warning(
       this.context,
@@ -110,11 +103,12 @@ export class ValidationWrapperInternal extends React.Component<
     const { children, 'data-tid': dataTid } = this.props;
     const { validation } = this.state;
 
+    const immediate = validation?.behaviour === 'immediate';
     let clonedChild: React.ReactElement<any> = children ? (
       React.cloneElement(children, {
         ref: this.customRef,
-        error: !this.isChanging && getLevel(validation) === 'error',
-        warning: !this.isChanging && getLevel(validation) === 'warning',
+        error: (!this.isChanging || immediate) && getLevel(validation) === 'error',
+        warning: (!this.isChanging || immediate) && getLevel(validation) === 'warning',
         onBlur: (...args: any[]) => {
           this.handleBlur();
           if (children.props && children.props.onBlur) {
@@ -149,23 +143,9 @@ export class ValidationWrapperInternal extends React.Component<
       });
     }
 
-    return (
-      <ValidationsFeatureFlagsContext.Consumer>
-        {(flags) => {
-          this.featureFlags = getFullValidationsFlagsContext(flags);
-          return React.cloneElement(
-            this.props.errorMessage(
-              this.featureFlags.validationsRemoveExtraSpans ? clonedChild : <span>{clonedChild}</span>,
-              !!validation,
-              validation,
-            ),
-            {
-              'data-tid': dataTid,
-            },
-          );
-        }}
-      </ValidationsFeatureFlagsContext.Consumer>
-    );
+    return React.cloneElement(this.props.errorMessage(clonedChild, !!validation, validation), {
+      'data-tid': dataTid,
+    });
   }
 
   private customRef = (instance: Nullable<ReactInstance>) => {

diff --git a/packages/react-ui-validations/src/utils/InlineDiv.tsx b/packages/react-ui-validations/src/utils/InlineDiv.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import type { FC, PropsWithChildren } from 'react';
+
+export const InlineDiv: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({ children, ...rest }) => (
+  <div style={{ display: 'inline' }} {...rest}>
+    {children}
+  </div>
+);
diff --git a/...ges/react-ui-validations/src/utils/featureFlagsContext/ValidationsFeatureFlagsContext.tsx b/...ges/react-ui-validations/src/utils/featureFlagsContext/ValidationsFeatureFlagsContext.tsx
@@ -5,7 +5,7 @@ export type FeatureFlags = 'validationsRemoveExtraSpans' | 'fixedValidationTextC
 export type ValidationsFeatureFlags = Partial<Record<FeatureFlags, boolean>>;
 
 export const validationsFeatureFlagsDefault: ValidationsFeatureFlags = {
-  validationsRemoveExtraSpans: false,
+  validationsDivWrapper: false,
   fixedValidationTextColors: false,
 };
 

diff --git a/packages/react-ui-validations/stories/Checkbox.stories.tsx b/packages/react-ui-validations/stories/Checkbox.stories.tsx
@@ -3,7 +3,7 @@ import { Meta } from '@storybook/react';
 import { Button } from '@skbkontur/react-ui/components/Button';
 import { Checkbox } from '@skbkontur/react-ui/components/Checkbox/Checkbox';
 
-import { ValidationContainer, ValidationInfo, ValidationWrapper, ValidationsFeatureFlagsContext } from '../src';
+import { ValidationContainer, ValidationInfo, ValidationWrapper } from '../src';
 import { Nullable } from '../typings/Types';
 
 export default {
@@ -22,19 +22,17 @@ export const Required = () => {
   };
 
   return (
-    <ValidationsFeatureFlagsContext.Provider value={{ validationsRemoveExtraSpans: true }}>
-      <div style={{ padding: 20 }}>
-        <ValidationContainer ref={refContainer}>
-          <ValidationWrapper validationInfo={validateSex()}>
-            <Checkbox checked={checked ? checked : false} onValueChange={setChecked}>
-              Checkbox
-            </Checkbox>
-          </ValidationWrapper>
-          <div style={{ padding: '20px 0' }}>
-            <Button onClick={() => refContainer.current?.validate()}>Check</Button>
-          </div>
-        </ValidationContainer>
-      </div>
-    </ValidationsFeatureFlagsContext.Provider>
+    <div style={{ padding: 20 }}>
+      <ValidationContainer ref={refContainer}>
+        <ValidationWrapper validationInfo={validateSex()}>
+          <Checkbox checked={checked ? checked : false} onValueChange={setChecked}>
+            Checkbox
+          </Checkbox>
+        </ValidationWrapper>
+        <div style={{ padding: '20px 0' }}>
+          <Button onClick={() => refContainer.current?.validate()}>Check</Button>
+        </div>
+      </ValidationContainer>
+    </div>
   );
 };