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

Yakutoc · Dec 4, 2024 · b1202da · b1202da
1 parent a9d8bde
commit b1202da
Show file tree

Hide file tree

Showing 34 changed files with 1,664 additions and 168 deletions.
diff --git a/...tocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop optional.snap.png b/...tocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop optional.snap.png
diff --git a/...t-test.tsx/plasma-b2c Autocomplete -- prop required, requiredPlacement.snap.png b/...t-test.tsx/plasma-b2c Autocomplete -- prop required, requiredPlacement.snap.png
diff --git a/...tocomplete.component-test.tsx/plasma-web Autocomplete -- prop optional.snap.png b/...tocomplete.component-test.tsx/plasma-web Autocomplete -- prop optional.snap.png
diff --git a/...t-test.tsx/plasma-web Autocomplete -- prop required, requiredPlacement.snap.png b/...t-test.tsx/plasma-web Autocomplete -- prop required, requiredPlacement.snap.png
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -661,7 +661,17 @@ true: PolymorphicClassName;
 readOnly: {
 true: PolymorphicClassName;
 };
-}> & BaseProps & Omit<TextFieldPropsBase, "required" | "enumerationType" | "chips" | "onChangeChips" | "requiredPlacement" | "optional"> & Omit<InputHTMLAttributes_3<HTMLInputElement>, "size" | "required"> & RefAttributes<HTMLInputElement>>;
+}> & ((BaseProps & {
+requiredPlacement?: "right" | "left" | undefined;
+} & {
+required: true;
+optional?: false | undefined;
+} & Omit<TextFieldPropsBase, "required" | "enumerationType" | "chips" | "onChangeChips" | "requiredPlacement" | "optional"> & Omit<InputHTMLAttributes_3<HTMLInputElement>, "size" | "required"> & RefAttributes<HTMLInputElement>) | (BaseProps & {
+requiredPlacement?: "right" | "left" | undefined;
+} & {
+optional?: true | undefined;
+required?: false | undefined;
+} & Omit<TextFieldPropsBase, "required" | "enumerationType" | "chips" | "onChangeChips" | "requiredPlacement" | "optional"> & Omit<InputHTMLAttributes_3<HTMLInputElement>, "size" | "required"> & RefAttributes<HTMLInputElement>))>;
 
 // @public (undocumented)
 export const Avatar: FunctionComponent<PropsType<    {

diff --git a/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.component-test.tsx b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.component-test.tsx
@@ -471,6 +471,48 @@ describe('plasma-b2c: Autocomplete', () => {
         cy.get('[id=parentId] > div').eq(1).find('div').and('have.class', 'popover-root');
     });
 
+    it('prop: required, requiredPlacement', () => {
+        cy.viewport(500, 100);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ display: 'flex', gap: '30px' }}>
+                    <div style={{ width: '200px' }}>
+                        <Autocomplete required label="Label" placeholder="Placeholder" suggestions={suggestions} />
+                    </div>
+
+                    <div style={{ width: '200px' }}>
+                        <Autocomplete
+                            required
+                            requiredPlacement="left"
+                            label="Label"
+                            placeholder="Placeholder"
+                            suggestions={suggestions}
+                        />
+                    </div>
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('prop: optional', () => {
+        cy.viewport(400, 100);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ display: 'flex', gap: '30px' }}>
+                    <div style={{ width: '300px' }}>
+                        <Autocomplete optional label="Label" placeholder="Placeholder" suggestions={suggestions} />
+                    </div>
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
     it('keyboard interactions', () => {
         cy.viewport(1000, 500);
 

diff --git a/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.config.ts b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.config.ts
diff --git a/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.stories.tsx
@@ -91,6 +91,25 @@ const meta: Meta<StoryProps> = {
                 type: 'inline-radio',
             },
         },
+        requiredPlacement: {
+            options: ['left', 'right'],
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'required', truthy: true },
+        },
+        required: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'optional', truthy: false },
+        },
+        optional: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'required', truthy: false },
+        },
     },
     args: {
         view: 'default',
@@ -108,6 +127,9 @@ const meta: Meta<StoryProps> = {
         threshold: 2,
         enableContentLeft: true,
         enableContentRight: true,
+        optional: false,
+        required: false,
+        requiredPlacement: 'right',
     },
 };
 

diff --git a/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tokens.ts b/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tokens.ts
@@ -5,65 +5,110 @@ export const classes = {
 export const tokens = {
     // Токены для TextField
     textFieldColor: '--plasma-autocomplete-textfield-color',
-    textFieldPlaceholderColorFocus: '--plasma-autocomplete-textfield__placeholder-color-focus',
+    textFieldClearColor: '--plasma-autocomplete-textfield-clear-color',
+
     textFieldBackgroundColor: '--plasma-autocomplete-textfield-background-color',
     textFieldBackgroundColorHover: '--plasma-autocomplete-textfield-background-color-hover',
     textFieldBackgroundColorFocus: '--plasma-autocomplete-textfield-background-color-focus',
+
     textFieldBorderColor: '--plasma-autocomplete-textfield-border-color',
     textFieldBorderColorHover: '--plasma-autocomplete-textfield-border-color-hover',
     textFieldBorderColorFocus: '--plasma-autocomplete-textfield-border-color-focus',
+
+    textFieldDividerColor: '--plasma-autocomplete-textfield-divider-color',
+    textFieldDividerColorHover: '--plasma-autocomplete-textfield-divider-color-hover',
+    textFieldDividerColorFocus: '--plasma-autocomplete-textfield-divider-color-focus',
+
     textFieldColorReadOnly: '--plasma-autocomplete-textfield-color-readonly',
     textFieldBackgroundColorReadOnly: '--plasma-autocomplete-textfield-bg-color-readonly',
     textFieldBorderColorReadOnly: '--plasma-autocomplete-textfield-border-color-readonly',
-    textFieldPlaceholderColorReadOnly: '--plasma-autocomplete-textfield__placeholder-color-readonly',
+    textFieldPlaceholderColorReadOnly: '--plasma-autocomplete-textfield-placeholder-color-readonly',
+    textFieldDividerColorReadOnly: '--plasma-autocomplete-textfield-divider-color-readonly',
+
     textFieldCaretColor: '--plasma-autocomplete-textfield-caret-color',
     textFieldPlaceholderColor: '--plasma-autocomplete-textfield-placeholder-color',
+    textFieldPlaceholderColorFocus: '--plasma-autocomplete-textfield-placeholder-color-focus',
+    textFieldClearPlaceholderColor: '--plasma-autocomplete-textfield-clear-placeholder-color',
+    textFieldClearPlaceholderColorFocus: '--plasma-autocomplete-textfield-clear-placeholder-color-focus',
+    textFieldOptionalColor: '--plasma-autocomplete-textfield-optional-color',
+
     textFieldHeight: '--plasma-autocomplete-textfield-height',
     textFieldBorderWidth: '--plasma-autocomplete-textfield-border-width',
     textFieldBorderRadius: '--plasma-autocomplete-textfield-border-radius',
+
     textFieldPadding: '--plasma-autocomplete-textfield-padding',
-    textFieldLeftContentMargin: '--plasma-autocomplete-textfield__left-content-margin',
-    textFieldRightContentMargin: '--plasma-autocomplete-textfield__right-content-margin',
+
+    textFieldLeftContentMargin: '--plasma-autocomplete-textfield-left-content-margin',
+    textFieldRightContentMargin: '--plasma-autocomplete-textfield-right-content-margin',
+
     textFieldFontFamily: '--plasma-autocomplete-textfield-font-family',
     textFieldFontStyle: '--plasma-autocomplete-textfield-font-style',
     textFieldFontSize: '--plasma-autocomplete-textfield-font-size',
     textFieldFontWeight: '--plasma-autocomplete-textfield-font-weight',
     textFieldLetterSpacing: '--plasma-autocomplete-textfield-letter-spacing',
     textFieldLineHeight: '--plasma-autocomplete-textfield-line-height',
+
+    textFieldContentSlotColor: '--plasma-autocomplete-textfield-content-slot-color',
+    textFieldContentSlotColorHover: '--plasma-autocomplete-textfield-content-slot-color-hover',
+    textFieldContentSlotColorActive: '--plasma-autocomplete-textfield-content-slot-color-active',
+
+    textFieldContentSlotRightColor: '--plasma-autocomplete-textfield-content-right-slot-color', //
+    textFieldContentSlotRightColorHover: '--plasma-autocomplete-textfield-content-right-slot-color-hover', //
+    textFieldContentSlotRightColorActive: '--plasma-autocomplete-textfield-content-right-slot-color-active', //
+
     textFieldLabelColor: '--plasma-autocomplete-textfield-label-color',
-    textFieldLabelColorReadOnly: '--plasma-autocomplete-textfield__label-color-readonly',
-    textFieldLabelOffset: '--plasma-autocomplete-textfield__label-offset',
-    textFieldLabelFontFamily: '--plasma-autocomplete-textfield__label-font-family',
-    textFieldLabelFontStyle: '--plasma-autocomplete-textfield__label-font-style',
-    textFieldLabelFontSize: '--plasma-autocomplete-textfield__label-font-size',
-    textFieldLabelFontWeight: '--plasma-autocomplete-textfield__label-font-weight',
-    textFieldLabelLetterSpacing: '--plasma-autocomplete-textfield__label-letter-spacing',
-    textFieldLabelLineHeight: '--plasma-autocomplete-textfield__label-line-height',
-    textFieldLabelInnerFontFamily: '--plasma-autocomplete-textfield-placement_inner__label-font-family',
-    textFieldLabelInnerFontStyle: '--plasma-autocomplete-textfield-placement_inner__label-font-style',
-    textFieldLabelInnerFontSize: '--plasma-autocomplete-textfield-placement_inner__label-font-size',
-    textFieldLabelInnerFontWeight: '--plasma-autocomplete-textfield-placement_inner__label-font-weight',
-    textFieldLabelInnerLetterSpacing: '--plasma-autocomplete-textfield-placement_inner__label-letter-spacing',
-    textFieldLabelInnerLineHeight: '--plasma-autocomplete-textfield-placement_inner__label-line-height',
-    textFieldLabelInnerPadding: '--plasma-autocomplete-textfield-placement_inner__label-padding',
-    textFieldContentLabelInnerPadding: '--plasma-autocomplete-textfield-placement_inner__content-padding',
-    textFieldLeftHelperColor: '--plasma-autocomplete-textfield__left-helper-color',
-    textFieldLeftHelperColorReadOnly: '--plasma-autocomplete-textfield__left-helper-color-readonly',
-    textFieldLeftHelperOffset: '--plasma-autocomplete-textfield__left-helper-offset',
-    textFieldLeftHelperFontFamily: '--plasma-autocomplete-textfield__left-helper-font-family',
-    textFieldLeftHelperFontStyle: '--plasma-autocomplete-textfield__left-helper-font-style',
-    textFieldLeftHelperFontSize: '--plasma-autocomplete-textfield__left-helper-font-size',
-    textFieldLeftHelperFontWeight: '--plasma-autocomplete-textfield__left-helper-font-weight',
-    textFieldLeftHelperLetterSpacing: '--plasma-autocomplete-textfield__left-helper-letter-spacing',
-    textFieldLeftHelperLineHeight: '--plasma-autocomplete-textfield__left-helper-line-height',
-    textFieldTextBeforeColor: '--plasma-autocomplete-textfield__before-text-color',
-    textFieldTextAfterColor: '--plasma-autocomplete-textfield__after-text-color',
-    textFieldTextBeforeMargin: '--plasma-autocomplete-textfield__before-text-margin',
-    textFieldTextAfterMargin: '--plasma-autocomplete-textfield__after-text-margin',
+    textFieldLabelColorReadOnly: '--plasma-autocomplete-textfield-label-color-readonly',
+    textFieldLabelOffset: '--plasma-autocomplete-textfield-label-offset',
+    textFieldClearLabelOffset: '--plasma-autocomplete-textfield-clear-label-offset',
+
+    textFieldLabelFontFamily: '--plasma-autocomplete-textfield-label-font-family',
+    textFieldLabelFontStyle: '--plasma-autocomplete-textfield-label-font-style',
+    textFieldLabelFontSize: '--plasma-autocomplete-textfield-label-font-size',
+    textFieldLabelFontWeight: '--plasma-autocomplete-textfield-label-font-weight',
+    textFieldLabelLetterSpacing: '--plasma-autocomplete-textfield-label-letter-spacing',
+    textFieldLabelLineHeight: '--plasma-autocomplete-textfield-label-line-height',
+
+    textFieldLabelInnerFontFamily: '--plasma-autocomplete-textfield-placement-inner-label-font-family',
+    textFieldLabelInnerFontStyle: '--plasma-autocomplete-textfield-placement-inner-label-font-style',
+    textFieldLabelInnerFontSize: '--plasma-autocomplete-textfield-placement-inner-label-font-size',
+    textFieldLabelInnerFontWeight: '--plasma-autocomplete-textfield-placement-inner-label-font-weight',
+    textFieldLabelInnerLetterSpacing: '--plasma-autocomplete-textfield-placement-inner-label-letter-spacing',
+    textFieldLabelInnerLineHeight: '--plasma-autocomplete-textfield-placement-inner-label-line-height',
+
+    textFieldLabelInnerPadding: '--plasma-autocomplete-textfield-placement-inner-label-padding',
+    textFieldContentLabelInnerPadding: '--plasma-autocomplete-textfield-placement-inner-content-padding',
+
+    textFieldLeftHelperColor: '--plasma-autocomplete-textfield-left-helper-color',
+    textFieldLeftHelperColorReadOnly: '--plasma-autocomplete-textfield-left-helper-color-readonly',
+    textFieldLeftHelperOffset: '--plasma-autocomplete-textfield-left-helper-offset',
+
+    textFieldLeftHelperFontFamily: '--plasma-autocomplete-textfield-left-helper-font-family',
+    textFieldLeftHelperFontStyle: '--plasma-autocomplete-textfield-left-helper-font-style',
+    textFieldLeftHelperFontSize: '--plasma-autocomplete-textfield-left-helper-font-size',
+    textFieldLeftHelperFontWeight: '--plasma-autocomplete-textfield-left-helper-font-weight',
+    textFieldLeftHelperLetterSpacing: '--plasma-autocomplete-textfield-left-helper-letter-spacing',
+    textFieldLeftHelperLineHeight: '--plasma-autocomplete-textfield-left-helper-line-height',
+
+    textFieldTextBeforeColor: '--plasma-autocomplete-textfield-before-text-color',
+    textFieldTextAfterColor: '--plasma-autocomplete-textfield-after-text-color',
+    textFieldTextBeforeMargin: '--plasma-autocomplete-textfield-before-text-margin',
+    textFieldTextAfterMargin: '--plasma-autocomplete-textfield-after-text-margin',
+
     textFieldDisabledOpacity: '--plasma-autocomplete-textfield-disabled-opacity',
+
     textFieldFocusColor: '--plasma-autocomplete-textfield-focus-color',
-    textFieldContentSlotColor: '--plasma-autocomplete-content-color',
-    textFieldContentSlotRightColor: '--plasma-autocomplete-content-right-color',
+
+    textFieldIndicatorColor: '--plasma-autocomplete-textfield-indicator-color',
+    textFieldIndicatorSizeInner: '--plasma-autocomplete-textfield-indicator-size-inner',
+    textFieldIndicatorSizeOuter: '--plasma-autocomplete-textfield-indicator-size-outer',
+    textFieldIndicatorLabelPlacementInner: '--plasma-autocomplete-textfield-indicator-label-placement-inner',
+    textFieldIndicatorLabelPlacementOuter: '--plasma-autocomplete-textfield-indicator-label-placement-outer',
+    textFieldIndicatorLabelPlacementInnerRight: '--plasma-autocomplete-textfield-indicator-label-placement-inner-right',
+    textFieldIndicatorLabelPlacementOuterRight: '--plasma-autocomplete-textfield-indicator-label-placement-outer-right',
+    textFieldClearIndicatorLabelPlacementInner: '--plasma-autocomplete-textfield-clear-indicator-label-placement-inner',
+    textFieldClearIndicatorLabelPlacementInnerRight:
+        '--plasma-autocomplete-textfield-clear-indicator-label-placement-inner-right',
+    textFieldClearIndicatorHintInnerRight: '--plasma-autocomplete-textfield-clear-indicator-hint-placement-inner-right',
 
     // Токены для дропдауна
     background: '--plasma-autocomplete-background',

diff --git a/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.types.ts b/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.types.ts
@@ -1,6 +1,6 @@
 import type { InputHTMLAttributes, ReactNode } from 'react';
 
-import { TextFieldPropsBase } from '../TextField/TextField.types';
+import { TextFieldPropsBase, RequiredProps } from '../TextField/TextField.types';
 
 export type SuggestionItemType = {
     /**
@@ -89,6 +89,7 @@ export type BaseProps = {
 };
 
 export type AutocompleteProps = BaseProps &
+    RequiredProps &
     Omit<
         TextFieldPropsBase,
         'chips' | 'onChangeChips' | 'enumerationType' | 'required' | 'optional' | 'requiredPlacement'