PLASMA-3868: Add error and success status to Datepicker and Range

packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts

@@ -15,6 +15,8 @@ export const config = {
                 ${tokens.dividerColor}: var(--text-primary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
+                ${tokens.leftHelperColorError}: var(--text-negative);
+                ${tokens.leftHelperColorSuccess}: var(--text-positive);
 
                 ${tokens.textFieldColor}: var(--text-primary);
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);

packages/plasma-b2c/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps, useEffect, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { disableProps, IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
 import { IconButton } from '../IconButton/IconButton';
 
@@ -65,6 +65,7 @@ const meta: Meta = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

packages/plasma-b2c/src/components/Range/Range.config.ts

@@ -15,6 +15,8 @@ export const config = {
                 ${tokens.dividerColor}: var(--text-primary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
+                ${tokens.leftHelperColorError}: var(--text-negative);
+                ${tokens.leftHelperColorSuccess}: var(--text-positive);
 
                 ${tokens.textFieldColor}: var(--text-primary);
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);

packages/plasma-b2c/src/components/Range/Range.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 import { IconSearch, IconSber, IconArrowRight } from '@salutejs/plasma-icons';
 
 import { IconButton } from '../IconButton/IconButton';
@@ -46,6 +46,7 @@ const meta: Meta<typeof Range> = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

packages/plasma-giga/src/components/DatePicker/DatePicker.config.ts

@@ -15,6 +15,8 @@ export const config = {
                 ${tokens.dividerColor}: var(--text-primary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
+                ${tokens.leftHelperColorError}: var(--text-negative);
+                ${tokens.leftHelperColorSuccess}: var(--text-positive);
 
                 ${tokens.textFieldColor}: var(--text-primary);
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);

packages/plasma-giga/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps, useEffect, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { disableProps, IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
 import { IconButton } from '../IconButton';
 
@@ -65,6 +65,7 @@ const meta: Meta = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

packages/plasma-giga/src/components/Range/Range.config.ts

@@ -15,6 +15,8 @@ export const config = {
                 ${tokens.dividerColor}: var(--text-primary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
+                ${tokens.leftHelperColorError}: var(--text-negative);
+                ${tokens.leftHelperColorSuccess}: var(--text-positive);
 
                 ${tokens.textFieldColor}: var(--text-primary);
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);

packages/plasma-giga/src/components/Range/Range.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 import { IconSearch, IconSber, IconArrowRight } from '@salutejs/plasma-icons';
 
 import { IconButton } from '../IconButton';
@@ -46,6 +46,7 @@ const meta: Meta<typeof Range> = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts

@@ -71,6 +71,8 @@ export const tokens = {
 
     /** Токены вспомогательного текста */
     leftHelperColor: '--plasma-date-picker__left-helper-color',
+    leftHelperColorError: '--plasma-date-picker__left-helper-color-error',
+    leftHelperColorSuccess: '--plasma-date-picker__left-helper-color-success',
     leftHelperColorReadOnly: '--plasma-date-picker__left-helper-color-readonly',
     leftHelperOffset: '--plasma-date-picker__left-helper-offset',
 

packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.styles.ts

@@ -3,7 +3,7 @@ import { css } from '@linaria/core';
 
 import { component, mergeConfig } from '../../../engines';
 import { rangeConfig, rangeTokens } from '../../Range';
-import { tokens } from '../DatePicker.tokens';
+import { classes, tokens } from '../DatePicker.tokens';
 import { popoverConfig } from '../../Popover';
 
 const mergedRangeConfig = mergeConfig(rangeConfig);
@@ -120,4 +120,14 @@ export const base = css`
     display: inline-block;
 `;
 
-export const LeftHelper = styled.div``;
+export const LeftHelper = styled.div`
+    color: var(${tokens.leftHelperColor});
+
+    &.${classes.datePickerError} {
+        color: var(${tokens.leftHelperColorError});
+    }
+
+    &.${classes.datePickerSuccess} {
+        color: var(${tokens.leftHelperColorSuccess});
+    }
+`;

packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.tsx

@@ -150,6 +150,9 @@ export const datePickerRangeRoot = (
 
             const [secondTextFieldClicked, setSecondTextFieldClicked] = useState(false);
 
+            const rangeErrorClass = firstValueError || secondValueError ? classes.datePickerError : undefined;
+            const rangeSuccessClass = firstValueSuccess || secondValueSuccess ? classes.datePickerSuccess : undefined;
+
             const setFirstInputValue = (value: React.SetStateAction<string>) => {
                 setInputFirstValue(value);
 
@@ -474,7 +477,9 @@ export const datePickerRangeRoot = (
                         onChangeStartOfRange={handleChangeStartOfRange}
                         onChangeValue={handleChangeCalendarValue}
                     />
-                    {leftHelper && <LeftHelper>{leftHelper}</LeftHelper>}
+                    {leftHelper && (
+                        <LeftHelper className={cx(rangeErrorClass, rangeSuccessClass)}>{leftHelper}</LeftHelper>
+                    )}
                     <InputHidden
                         name={name}
                         type="hidden"

packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.styles.ts

@@ -119,4 +119,14 @@ export const base = css`
     }
 `;
 
-export const LeftHelper = styled.div``;
+export const LeftHelper = styled.div`
+    color: var(${tokens.leftHelperColor});
+
+    &.${classes.datePickerError} {
+        color: var(${tokens.leftHelperColorError});
+    }
+
+    &.${classes.datePickerSuccess} {
+        color: var(${tokens.leftHelperColorSuccess});
+    }
+`;

packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx

@@ -231,7 +231,11 @@ export const datePickerRoot = (
                             />
                         </Root>
                     </StyledPopover>
-                    {leftHelper && <LeftHelper>{leftHelper}</LeftHelper>}
+                    {leftHelper && (
+                        <LeftHelper className={cx(datePickerErrorClass, datePickerSuccessClass)}>
+                            {leftHelper}
+                        </LeftHelper>
+                    )}
                     <InputHidden
                         type="hidden"
                         datatype="datepicker-single"

packages/plasma-new-hope/src/components/Range/Range.tokens.ts

@@ -60,6 +60,8 @@ export const tokens = {
     leftHelperColor: '--plasma-range__left-helper-color',
     leftHelperColorReadOnly: '--plasma-range__left-helper-color-readonly',
     leftHelperOffset: '--plasma-range__left-helper-offset',
+    leftHelperColorError: '--plasma-range__left-helper-color-error',
+    leftHelperColorSuccess: '--plasma-range__left-helper-color-success',
 
     leftHelperFontFamily: '--plasma-range__left-helper-font-family',
     leftHelperFontStyle: '--plasma-range__left-helper-font-style',

packages/plasma-new-hope/src/components/Range/Range.tsx

@@ -80,8 +80,10 @@ export const rangeRoot = (Root: RootProps<HTMLDivElement, RangeProps>) =>
             const requiredPlacementClass = requiredPlacement === 'right' ? classes.requiredAlignRight : undefined;
 
             const rangeErrorClass = firstValueError && secondValueError ? classes.rangeError : undefined;
+
             const firstValueErrorClass = !rangeErrorClass && firstValueError ? classes.rangeValueError : undefined;
             const secondValueErrorClass = !rangeErrorClass && secondValueError ? classes.rangeValueError : undefined;
+
             const rangeSuccessClass = firstValueSuccess && secondValueSuccess ? classes.rangeSuccess : undefined;
             const firstValueSuccessClass =
                 !rangeSuccessClass && firstValueSuccess ? classes.rangeValueSuccess : undefined;
@@ -178,7 +180,20 @@ export const rangeRoot = (Root: RootProps<HTMLDivElement, RangeProps>) =>
                         />
                         {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}
                     </ContentWrapper>
-                    {leftHelper && <LeftHelper>{leftHelper}</LeftHelper>}
+                    {leftHelper && (
+                        <LeftHelper
+                            className={cx(
+                                rangeErrorClass,
+                                firstValueErrorClass,
+                                secondValueErrorClass,
+                                rangeSuccessClass,
+                                firstValueSuccessClass,
+                                secondValueSuccessClass,
+                            )}
+                        >
+                            {leftHelper}
+                        </LeftHelper>
+                    )}
                 </Root>
             );
         },

packages/plasma-new-hope/src/components/Range/variations/_view/base.ts

@@ -34,5 +34,13 @@ export const base = css`
 
     ${LeftHelper} {
         color: var(${tokens.leftHelperColor});
+
+        &.${classes.rangeError}, &.${classes.rangeValueError} {
+            color: var(${tokens.leftHelperColorError});
+        }
+
+        &.${classes.rangeSuccess}, &.${classes.rangeValueSuccess} {
+            color: var(${tokens.leftHelperColorSuccess});
+        }
     }
 `;

packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.config.ts

@@ -17,6 +17,8 @@ export const config = {
                 ${tokens.dividerColor}: var(--text-primary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
+                ${tokens.leftHelperColorError}: var(--text-negative);
+                ${tokens.leftHelperColorSuccess}: var(--text-positive);
 
                 ${tokens.textFieldColor}: var(--text-primary);
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);

packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -61,6 +61,7 @@ const meta: Meta = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

packages/plasma-new-hope/src/examples/plasma_b2c/components/Range/Range.config.ts

@@ -17,6 +17,8 @@ export const config = {
                 ${tokens.dividerColor}: var(--text-primary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
+                ${tokens.leftHelperColorError}: var(--text-negative);
+                ${tokens.leftHelperColorSuccess}: var(--text-positive);
 
                 ${tokens.textFieldColor}: var(--text-primary);
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);

packages/plasma-new-hope/src/examples/plasma_b2c/components/Range/Range.stories.tsx

@@ -47,6 +47,7 @@ const meta: Meta<typeof Range> = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.config.ts

@@ -20,6 +20,8 @@ export const config = {
                 ${tokens.dividerColor}: var(--text-primary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
+                ${tokens.leftHelperColorError}: var(--text-negative);
+                ${tokens.leftHelperColorSuccess}: var(--text-positive);
 
                 ${tokens.textFieldColor}: var(--text-primary);
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);

packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx

@@ -61,6 +61,7 @@ const meta: Meta = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

packages/plasma-new-hope/src/examples/plasma_web/components/Range/Range.config.ts

@@ -18,6 +18,8 @@ export const config = {
                 ${tokens.dividerColor}: var(--text-primary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
+                ${tokens.leftHelperColorError}: var(--text-negative);
+                ${tokens.leftHelperColorSuccess}: var(--text-positive);
 
                 ${tokens.textFieldColor}: var(--text-primary);
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);

packages/plasma-new-hope/src/examples/plasma_web/components/Range/Range.stories.tsx

@@ -47,6 +47,7 @@ const meta: Meta<typeof Range> = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

packages/plasma-web/src/components/DatePicker/DatePicker.config.ts

@@ -18,6 +18,8 @@ export const config = {
                 ${tokens.dividerColor}: var(--text-primary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
+                ${tokens.leftHelperColorError}: var(--text-negative);
+                ${tokens.leftHelperColorSuccess}: var(--text-positive);
 
                 ${tokens.textFieldColor}: var(--text-primary);
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);

packages/plasma-web/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps, useEffect, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { disableProps, IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
 import { IconButton } from '../IconButton/IconButton';
 
@@ -65,6 +65,7 @@ const meta: Meta = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

packages/plasma-web/src/components/Range/Range.config.ts

@@ -16,6 +16,8 @@ export const config = {
                 ${tokens.dividerColor}: var(--text-primary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
+                ${tokens.leftHelperColorError}: var(--text-negative);
+                ${tokens.leftHelperColorSuccess}: var(--text-positive);
 
                 ${tokens.indicatorColor}: var(--surface-negative);
 

packages/plasma-web/src/components/Range/Range.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 import { IconSearch, IconSber, IconArrowRight } from '@salutejs/plasma-icons';
 
 import { IconButton } from '../IconButton/IconButton';
@@ -46,6 +46,7 @@ const meta: Meta<typeof Range> = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

packages/sdds-cs/src/components/DatePicker/DatePicker.config.ts

@@ -18,6 +18,8 @@ export const config = {
                 ${tokens.dividerColor}: var(--text-primary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
+                ${tokens.leftHelperColorError}: var(--text-negative);
+                ${tokens.leftHelperColorSuccess}: var(--text-positive);
 
                 ${tokens.textFieldColor}: var(--text-primary);
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);

packages/sdds-cs/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { disableProps, IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 import { IconPlasma, IconCalendarOutline } from '@salutejs/plasma-icons';
 
 import { IconButton } from '../IconButton/IconButton';
@@ -66,6 +66,7 @@ const meta: Meta = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

packages/sdds-cs/src/components/Range/Range.config.ts

@@ -16,6 +16,8 @@ export const config = {
                 ${tokens.dividerColor}: var(--text-primary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
+                ${tokens.leftHelperColorError}: var(--text-negative);
+                ${tokens.leftHelperColorSuccess}: var(--text-positive);
 
                 ${tokens.indicatorColor}: var(--surface-negative);