feat(plasma-*, sdds-*): Add required functionality

packages/plasma-b2c/src/components/Select/Select.component-test.tsx

@@ -652,6 +652,48 @@ describe('plasma-b2c: Select', () => {
         cy.matchImageSnapshot();
     });
 
+    it('prop: required, requiredPlacement', () => {
+        cy.viewport(500, 100);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ display: 'flex', gap: '30px' }}>
+                    <div style={{ width: '200px' }}>
+                        <Select required items={items} label="Label" placeholder="Placeholder" />
+                    </div>
+
+                    <div style={{ width: '200px' }}>
+                        <Select
+                            required
+                            requiredPlacement="left"
+                            items={items}
+                            label="Label"
+                            placeholder="Placeholder"
+                        />
+                    </div>
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('prop: optional', () => {
+        cy.viewport(400, 100);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ display: 'flex', gap: '30px' }}>
+                    <div style={{ width: '300px' }}>
+                        <Select optional items={items} label="Label" placeholder="Placeholder" />
+                    </div>
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
     it('basic logic', () => {
         cy.viewport(1000, 500);
 

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

@@ -27,6 +27,9 @@ export const config = {
                 ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover);
                 ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active);
 
+                ${tokens.textFieldIndicatorColor}: var(--surface-negative);
+                ${tokens.textFieldOptionalColor}: var(--text-tertiary);
+
                 ${tokens.buttonColor}: var(--inverse-text-primary);
                 ${tokens.buttonColorHover}: var(--inverse-text-primary-hover);
                 ${tokens.buttonColorActive}: var(--inverse-text-primary-active);
@@ -59,6 +62,9 @@ export const config = {
                 ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover);
                 ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active);
 
+                ${tokens.textFieldIndicatorColor}: var(--surface-negative);
+                ${tokens.textFieldOptionalColor}: var(--text-tertiary);
+
                 ${tokens.buttonColor}: var(--on-dark-text-primary);
                 ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover);
                 ${tokens.buttonColorActive}: var(--on-dark-text-primary-active);
@@ -91,6 +97,9 @@ export const config = {
                 ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover);
                 ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active);
 
+                ${tokens.textFieldIndicatorColor}: var(--surface-negative);
+                ${tokens.textFieldOptionalColor}: var(--text-tertiary);
+
                 ${tokens.buttonColor}: var(--on-dark-text-primary);
                 ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover);
                 ${tokens.buttonColorActive}: var(--on-dark-text-primary-active);
@@ -123,6 +132,9 @@ export const config = {
                 ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover);
                 ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active);
 
+                ${tokens.textFieldIndicatorColor}: var(--surface-negative);
+                ${tokens.textFieldOptionalColor}: var(--text-tertiary);
+
                 ${tokens.buttonColor}: var(--on-dark-text-primary);
                 ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover);
                 ${tokens.buttonColorActive}: var(--on-dark-text-primary-active);
@@ -267,6 +279,16 @@ export const config = {
                 ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0;
                 ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0;
 
+                ${tokens.textFieldIndicatorSizeInner}: 0.5rem;
+                ${tokens.textFieldIndicatorSizeOuter}: 0.375rem;
+                ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0;
+                ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.5rem auto auto -0.75rem;
+                ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto;
+                ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.625rem auto auto;
+                ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.5rem auto auto -0.875rem;
+                ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.5rem -0.875rem auto auto;
+                ${tokens.textFieldClearIndicatorHintInnerRight}: 1.5rem -2.25rem auto auto;
+
                 ${tokens.textFieldChipGap}: 0.25rem;
                 ${tokens.textFieldChipBorderRadius}: 0.5rem;
                 ${tokens.textFieldChipWidth}: auto;
@@ -366,6 +388,16 @@ export const config = {
                 ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0;
                 ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0;
 
+                ${tokens.textFieldIndicatorSizeInner}: 0.5rem;
+                ${tokens.textFieldIndicatorSizeOuter}: 0.375rem;
+                ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0;
+                ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.375rem auto auto -0.75rem;
+                ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto;
+                ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.6875rem auto auto;
+                ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.25rem auto auto -0.875rem;
+                ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.25rem -0.875rem auto auto;
+                ${tokens.textFieldClearIndicatorHintInnerRight}: 1.25rem -2.25rem auto auto;
+
                 ${tokens.textFieldChipGap}: 0.25rem;
                 ${tokens.textFieldChipBorderRadius}: 0.375rem;
                 ${tokens.textFieldChipWidth}: auto;
@@ -465,6 +497,16 @@ export const config = {
                 ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;
                 ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
 
+                ${tokens.textFieldIndicatorSizeInner}: 0.375rem;
+                ${tokens.textFieldIndicatorSizeOuter}: 0.375rem;
+                ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0;
+                ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.3125rem auto auto -0.6875rem;
+                ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto;
+                ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.625rem auto auto;
+                ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.063rem auto auto -0.75rem;
+                ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.063rem -0.75rem auto auto;
+                ${tokens.textFieldClearIndicatorHintInnerRight}: 1.063rem -2.125rem auto auto;
+
                 ${tokens.textFieldChipGap}: 0.25rem;
                 ${tokens.textFieldChipBorderRadius}: 0.25rem;
                 ${tokens.textFieldChipWidth}: auto;
@@ -564,6 +606,16 @@ export const config = {
                 ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;
                 ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
 
+                ${tokens.textFieldIndicatorSizeInner}: 0.375rem;
+                ${tokens.textFieldIndicatorSizeOuter}: 0.375rem;
+                ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0;
+                ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.25rem auto auto -0.625rem;
+                ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto;
+                ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.125rem -0.6875rem auto auto;
+                ${tokens.textFieldClearIndicatorLabelPlacementInner}: 0.813rem auto auto -0.625rem;
+                ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 0.813rem -0.625rem auto auto;
+                ${tokens.textFieldClearIndicatorHintInnerRight}: 0.813rem -1.875rem auto auto;
+
                 ${tokens.textFieldChipGap}: 0.25rem;
                 ${tokens.textFieldChipBorderRadius}: 0.125rem;
                 ${tokens.textFieldChipWidth}: auto;

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

@@ -43,6 +43,12 @@ const meta: Meta<StorySelectProps> = {
                 eq: 'textfield-like',
             },
         },
+        placeholder: {
+            if: {
+                arg: 'target',
+                eq: 'textfield-like',
+            },
+        },
         chipView: {
             control: 'select',
             options: chip,
@@ -78,6 +84,24 @@ const meta: Meta<StorySelectProps> = {
                 eq: 'textfield-like',
             },
         },
+        requiredPlacement: {
+            options: ['left', 'right'],
+            control: {
+                type: 'select',
+            },
+        },
+        required: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'optional', truthy: false },
+        },
+        optional: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'required', truthy: false },
+        },
     },
     args: {
         target: 'textfield-like',
@@ -92,6 +116,9 @@ const meta: Meta<StorySelectProps> = {
         isTargetAmount: false,
         variant: 'normal',
         disabled: false,
+        optional: false,
+        required: false,
+        requiredPlacement: 'right',
     },
     parameters: {
         controls: {
@@ -112,6 +139,9 @@ const meta: Meta<StorySelectProps> = {
                 'listWidth',
                 'listOverflow',
                 'listHeight',
+                'optional',
+                'required',
+                'requiredPlacement',
             ],
         },
     },

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

@@ -84,7 +84,6 @@ export const tokens = {
 
     textFieldPlaceholderColor: '--plasma-select-textfield-placeholder-color',
     textFieldPlaceholderColorFocus: '--plasma-select-textfield-placeholder-color-focus',
-    textFieldOptionalColor: '--plasma-select-textfield-optional-color',
 
     textFieldHeight: '--plasma-select-textfield-height',
     textFieldBorderWidth: '--plasma-select-textfield-border-width',
@@ -186,6 +185,19 @@ export const tokens = {
     textFieldChipClearContentMarginLeft: '--plasma-select-textfield-chip-clear-content-margin-left',
     textFieldChipClearContentMarginRight: '--plasma-select-textfield-chip-clear-content-margin-right',
 
+    textFieldIndicatorColor: '--plasma-select-new-textfield-indicator-color',
+    textFieldIndicatorSizeInner: '--plasma-select-new-textfield-indicator-size-inner',
+    textFieldIndicatorSizeOuter: '--plasma-select-new-textfield-indicator-size-outer',
+    textFieldIndicatorLabelPlacementInner: '--plasma-select-new-textfield-indicator-placement-inner',
+    textFieldIndicatorLabelPlacementOuter: '--plasma-select-new-textfield-indicator-placement-outer',
+    textFieldIndicatorLabelPlacementInnerRight: '--plasma-select-new-textfield-indicator-placement-inner-right',
+    textFieldIndicatorLabelPlacementOuterRight: '--plasma-select-new-textfield-indicator-placement-outer-right',
+    textFieldClearIndicatorLabelPlacementInner: '--plasma-select-new-textfield-clear-indicator-placement-inner',
+    textFieldClearIndicatorLabelPlacementInnerRight:
+        '--plasma-select-new-textfield-clear-indicator-placement-inner-right',
+    textFieldClearIndicatorHintInnerRight: '--plasma-select-new-textfield-clear-indicator-hint-placement-inner-right',
+    textFieldOptionalColor: '--plasma-select-new-textfield-optional-color',
+
     textFieldFocusColor: '--plasma-select-textfield-focus-color',
 
     disclosureIconColor: '--plasma-select-disclosure-icon-color',

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

@@ -18,7 +18,7 @@ import { Inner, Target } from './ui';
 import { pathReducer, focusedPathReducer } from './reducers';
 import { usePathMaps } from './hooks/usePathMaps';
 import { Ul, base } from './Select.styles';
-import type { ItemContext, MergedSelectProps } from './Select.types';
+import type { ItemContext, MergedSelectProps, RequiredProps } from './Select.types';
 import type { MergedDropdownNodeTransformed } from './ui/Inner/ui/Item/Item.types';
 import { FloatingPopover } from './FloatingPopover';
 
@@ -88,6 +88,16 @@ export const selectRoot = (Root: RootProps<HTMLButtonElement, Omit<MergedSelectP
         const treeId = safeUseId();
         const view = target === 'textfield-like' && disabled ? 'default' : getView(status, outerView);
 
+        // Собираем объект с пропсами для required и прокидываем их напрямую в компонент Textfield.
+        const requiredProps =
+            props.target === 'button-like'
+                ? undefined
+                : ({
+                      required: props.required,
+                      requiredPlacement: props.requiredPlacement,
+                      optional: props.optional,
+                  } as RequiredProps);
+
         const targetRef = useOutsideClick<HTMLUListElement>(() => {
             if (!isCurrentListOpen) {
                 return;
@@ -290,7 +300,6 @@ export const selectRoot = (Root: RootProps<HTMLButtonElement, Omit<MergedSelectP
                         target={(referenceRef) => (
                             <Target
                                 ref={ref}
-                                target={target}
                                 value={value}
                                 opened={isCurrentListOpen}
                                 valueToItemMap={valueToItemMap}
@@ -315,6 +324,7 @@ export const selectRoot = (Root: RootProps<HTMLButtonElement, Omit<MergedSelectP
                                 labelToItemMap={labelToItemMap}
                                 chipView={chipView}
                                 separator={separator}
+                                requiredProps={requiredProps}
                             />
                         )}
                     >

packages/plasma-new-hope/src/components/Select/Select.types.ts

@@ -1,6 +1,8 @@
 import type { CSSProperties, ButtonHTMLAttributes, SyntheticEvent } from 'react';
 import React from 'react';
 
+import type { RequiredProps } from '../TextField/TextField.types';
+
 import { FocusedPathState } from './reducers';
 import {
     ItemOption,
@@ -12,8 +14,10 @@ import type { ValueToCheckedMapType } from './hooks/usePathMaps';
 type SelectPlacementBasic = 'top' | 'bottom' | 'right' | 'left';
 type SelectPlacement = 'top' | 'bottom' | 'right' | 'left' | 'auto';
 
+export type { RequiredProps };
+
 type Target =
-    | {
+    | (RequiredProps & {
           /**
            * Стиль селекта: button-like или textfield-like.
            * @default textfield-like
@@ -37,7 +41,7 @@ type Target =
            * Вспомогательный текст снизу слева для поля ввода.
            */
           helperText?: string;
-      }
+      })
     | {
           target: 'button-like';
           view?:

packages/plasma-new-hope/src/components/Select/ui/Target/Target.tsx

@@ -9,7 +9,6 @@ export const Target = forwardRef<HTMLButtonElement, TargetProps>(
     (
         {
             value,
-            target,
             opened,
             valueToItemMap,
             label,
@@ -33,6 +32,7 @@ export const Target = forwardRef<HTMLButtonElement, TargetProps>(
             labelToItemMap,
             chipView,
             separator,
+            requiredProps,
         },
         ref,
     ) => {
@@ -50,7 +50,7 @@ export const Target = forwardRef<HTMLButtonElement, TargetProps>(
             );
         }
 
-        return target === 'button-like' ? (
+        return selectProps.target === 'button-like' ? (
             <Button
                 ref={buttonRef}
                 opened={opened}
@@ -91,6 +91,7 @@ export const Target = forwardRef<HTMLButtonElement, TargetProps>(
                 onChange={onChange}
                 labelToItemMap={labelToItemMap}
                 chipView={chipView}
+                requiredProps={requiredProps}
             />
         );
     },

packages/plasma-new-hope/src/components/Select/ui/Target/Target.types.ts

@@ -1,7 +1,7 @@
 import type { KeyboardEvent, MutableRefObject } from 'react';
 
 import type { LabelToItemMapType, ValueToItemMapType } from '../../hooks/usePathMaps';
-import type { DefaultValueType, MergedSelectProps } from '../../Select.types';
+import type { DefaultValueType, MergedSelectProps, RequiredProps } from '../../Select.types';
 
 export type TargetProps = Pick<
     MergedSelectProps,
@@ -16,7 +16,6 @@ export type TargetProps = Pick<
     | 'multiselect'
     | 'helperText'
     | 'isTargetAmount'
-    | 'target'
     | 'chipView'
 > & {
     value: DefaultValueType;
@@ -30,5 +29,6 @@ export type TargetProps = Pick<
     activeDescendantItemValue: string;
     onChange: (newValue: string | number | Array<string | number>) => void;
     labelToItemMap: LabelToItemMapType;
+    requiredProps: RequiredProps | undefined;
     separator?: string;
 };

packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.styles.tsx

@@ -134,6 +134,18 @@ export const StyledTextField = styled(TextField)<{ opened: boolean }>`
     ${textFieldTokens.chipClearContentMarginLeft}: var(${tokens.textFieldChipClearContentMarginLeft});
     ${textFieldTokens.chipClearContentMarginRight}: var(${tokens.textFieldChipClearContentMarginRight});
 
+    ${textFieldTokens.indicatorColor}: var(${tokens.textFieldIndicatorColor});
+    ${textFieldTokens.indicatorSizeInner}: var(${tokens.textFieldIndicatorSizeInner});
+    ${textFieldTokens.indicatorSizeOuter}: var(${tokens.textFieldIndicatorSizeOuter});
+    ${textFieldTokens.indicatorLabelPlacementInner}: var(${tokens.textFieldIndicatorLabelPlacementInner});
+    ${textFieldTokens.indicatorLabelPlacementOuter}: var(${tokens.textFieldIndicatorLabelPlacementOuter});
+    ${textFieldTokens.indicatorLabelPlacementInnerRight}: var(${tokens.textFieldIndicatorLabelPlacementInnerRight});
+    ${textFieldTokens.indicatorLabelPlacementOuterRight}: var(${tokens.textFieldIndicatorLabelPlacementOuterRight});
+    ${textFieldTokens.clearIndicatorLabelPlacementInner}: var(${tokens.textFieldClearIndicatorLabelPlacementInner});
+    ${textFieldTokens.clearIndicatorLabelPlacementInnerRight}:
+        var(${tokens.textFieldClearIndicatorLabelPlacementInnerRight});
+    ${textFieldTokens.clearIndicatorHintInnerRight}: var(${tokens.textFieldClearIndicatorHintInnerRight});
+
     ${textFieldTokens.focusColor}: var(${tokens.textFieldFocusColor});
 
     /* TODO: #1544 */