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

salute-developers · Nov 1, 2024 · 35fa805 · 35fa805
1 parent 0b69f4e
commit 35fa805
Show file tree

Hide file tree

Showing 46 changed files with 2,653 additions and 252 deletions.
diff --git a/...bobox/Combobox.component-test.tsx/plasma-b2c Combobox -- prop optional.snap.png b/...bobox/Combobox.component-test.tsx/plasma-b2c Combobox -- prop optional.snap.png
diff --git a/...onent-test.tsx/plasma-b2c Combobox -- prop required, requiredPlacement.snap.png b/...onent-test.tsx/plasma-b2c Combobox -- prop required, requiredPlacement.snap.png
diff --git a/...box/Combobox.component-test.tsx/plasma-web Combobox -- common disabled.snap.png b/...box/Combobox.component-test.tsx/plasma-web Combobox -- common disabled.snap.png
diff --git a/...bobox/Combobox.component-test.tsx/plasma-web Combobox -- common size l.snap.png b/...bobox/Combobox.component-test.tsx/plasma-web Combobox -- common size l.snap.png
diff --git a/...bobox/Combobox.component-test.tsx/plasma-web Combobox -- common size m.snap.png b/...bobox/Combobox.component-test.tsx/plasma-web Combobox -- common size m.snap.png
diff --git a/...bobox/Combobox.component-test.tsx/plasma-web Combobox -- common size s.snap.png b/...bobox/Combobox.component-test.tsx/plasma-web Combobox -- common size s.snap.png
diff --git a/...obox/Combobox.component-test.tsx/plasma-web Combobox -- common size xs.snap.png b/...obox/Combobox.component-test.tsx/plasma-web Combobox -- common size xs.snap.png
diff --git a/...box.component-test.tsx/plasma-web Combobox -- flow async items loading.snap.png b/...box.component-test.tsx/plasma-web Combobox -- flow async items loading.snap.png
diff --git a/...Combobox.component-test.tsx/plasma-web Combobox -- prop isTargetAmount.snap.png b/...Combobox.component-test.tsx/plasma-web Combobox -- prop isTargetAmount.snap.png
diff --git a/...st.tsx/plasma-web Combobox -- prop listWidth, listHeight, listOverflow.snap.png b/...st.tsx/plasma-web Combobox -- prop listWidth, listHeight, listOverflow.snap.png
diff --git a/...bobox/Combobox.component-test.tsx/plasma-web Combobox -- prop optional.snap.png b/...bobox/Combobox.component-test.tsx/plasma-web Combobox -- prop optional.snap.png
diff --git a/...obox/Combobox.component-test.tsx/plasma-web Combobox -- prop placement.snap.png b/...obox/Combobox.component-test.tsx/plasma-web Combobox -- prop placement.snap.png
diff --git a/...box/Combobox.component-test.tsx/plasma-web Combobox -- prop renderItem.snap.png b/...box/Combobox.component-test.tsx/plasma-web Combobox -- prop renderItem.snap.png
diff --git a/...ox/Combobox.component-test.tsx/plasma-web Combobox -- prop renderValue.snap.png b/...ox/Combobox.component-test.tsx/plasma-web Combobox -- prop renderValue.snap.png
diff --git a/...onent-test.tsx/plasma-web Combobox -- prop required, requiredPlacement.snap.png b/...onent-test.tsx/plasma-web Combobox -- prop required, requiredPlacement.snap.png
diff --git a/...mbobox/Combobox.component-test.tsx/plasma-web Combobox -- prop variant.snap.png b/...mbobox/Combobox.component-test.tsx/plasma-web Combobox -- prop variant.snap.png
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -666,12 +666,12 @@ 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 & {
+} & Omit<TextFieldPropsBase, "required" | "requiredPlacement" | "optional" | "enumerationType" | "chips" | "onChangeChips"> & 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>))>;
+} & Omit<TextFieldPropsBase, "required" | "requiredPlacement" | "optional" | "enumerationType" | "chips" | "onChangeChips"> & Omit<InputHTMLAttributes_3<HTMLInputElement>, "size" | "required"> & RefAttributes<HTMLInputElement>))>;
 
 // @public (undocumented)
 export const Avatar: FunctionComponent<PropsType<    {

diff --git a/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx b/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx
@@ -1135,6 +1135,38 @@ describe('plasma-b2c: Combobox', () => {
         cy.get('#multiple2').should('not.be.focused');
     });
 
+    it('prop: required, requiredPlacement', () => {
+        cy.viewport(500, 100);
+
+        mount(
+            <div style={{ display: 'flex', gap: '30px' }}>
+                <div style={{ width: '200px' }}>
+                    <Combobox required items={items} label="Label" placeholder="Placeholder" />
+                </div>
+
+                <div style={{ width: '200px' }}>
+                    <Combobox required requiredPlacement="left" items={items} label="Label" placeholder="Placeholder" />
+                </div>
+            </div>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('prop: optional', () => {
+        cy.viewport(400, 100);
+
+        mount(
+            <div style={{ display: 'flex', gap: '30px' }}>
+                <div style={{ width: '300px' }}>
+                    <Combobox optional items={items} label="Label" placeholder="Placeholder" />
+                </div>
+            </div>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
     it('flow: single uncontrolled', () => {
         cy.viewport(1000, 500);
 

diff --git a/packages/plasma-b2c/src/components/Combobox/Combobox.config.ts b/packages/plasma-b2c/src/components/Combobox/Combobox.config.ts
@@ -10,20 +10,29 @@ export const config = {
         view: {
             default: css`
                 ${tokens.textFieldColor}: var(--text-primary);
+                ${tokens.textFieldClearColor}: var(--text-primary);
+
+                ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
+                ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary);
+                ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary);
+
                 ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary);
                 ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary);
                 ${tokens.textFieldCaretColor}: var(--text-accent);
-                ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${tokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-primary);
                 ${tokens.textFieldLeftHelperColor}: var(--text-secondary);
                 ${tokens.textFieldFocusColor}: var(--text-accent);
 
-                ${tokens.disclosureIconColor}: var(--text-secondary);
-                ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary);
+                ${tokens.textFieldContentSlotColor}: var(--text-secondary);
+                ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover);
+                ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active);
+
+                ${tokens.textFieldIndicatorColor}: var(--surface-negative);
+                ${tokens.textFieldOptionalColor}: var(--text-tertiary);
+
                 ${tokens.textFieldChipCloseIconColor}: var(--text-secondary);
                 ${tokens.textFieldChipColor}: var(--text-primary);
                 ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary);
@@ -36,23 +45,36 @@ export const config = {
                 ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary);
                 ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary);
                 ${tokens.textFieldChipOpacityReadonly}: 0.72;
+
+                ${tokens.disclosureIconColor}: var(--text-secondary);
+                ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
+                ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary);
             `,
             positive: css`
-                ${tokens.textFieldColor}: var(--plasma-colors-primary);
+                ${tokens.textFieldColor}: var(--text-primary);
+                ${tokens.textFieldClearColor}: var(--text-positive);
+
+                ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
+                ${tokens.textFieldClearPlaceholderColor}: var(--text-positive);
+                ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive);
+
                 ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive);
                 ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active);
                 ${tokens.textFieldCaretColor}: var(--text-accent);
-                ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${tokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-primary);
                 ${tokens.textFieldLeftHelperColor}: var(--text-positive);
                 ${tokens.textFieldFocusColor}: var(--text-accent);
 
-                ${tokens.disclosureIconColor}: var(--text-secondary);
-                ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary);
+                ${tokens.textFieldContentSlotColor}: var(--text-secondary);
+                ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover);
+                ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active);
+
+                ${tokens.textFieldIndicatorColor}: var(--surface-negative);
+                ${tokens.textFieldOptionalColor}: var(--text-tertiary);
+
                 ${tokens.textFieldChipCloseIconColor}: var(--text-secondary);
                 ${tokens.textFieldChipColor}: var(--text-primary);
                 ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary);
@@ -65,23 +87,36 @@ export const config = {
                 ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary);
                 ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary);
                 ${tokens.textFieldChipOpacityReadonly}: 0.72;
+
+                ${tokens.disclosureIconColor}: var(--text-secondary);
+                ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
+                ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary);
             `,
             warning: css`
-                ${tokens.textFieldColor}: var(--plasma-colors-primary);
+                ${tokens.textFieldColor}: var(--text-primary);
+                ${tokens.textFieldClearColor}: var(--text-warning);
+
+                ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
+                ${tokens.textFieldClearPlaceholderColor}: var(--text-warning);
+                ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning);
+
                 ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning);
                 ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active);
                 ${tokens.textFieldCaretColor}: var(--text-accent);
-                ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${tokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-primary);
                 ${tokens.textFieldLeftHelperColor}: var(--text-warning);
                 ${tokens.textFieldFocusColor}: var(--text-accent);
 
-                ${tokens.disclosureIconColor}: var(--text-secondary);
-                ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary);
+                ${tokens.textFieldContentSlotColor}: var(--text-secondary);
+                ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover);
+                ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active);
+
+                ${tokens.textFieldIndicatorColor}: var(--surface-negative);
+                ${tokens.textFieldOptionalColor}: var(--text-tertiary);
+
                 ${tokens.textFieldChipCloseIconColor}: var(--text-secondary);
                 ${tokens.textFieldChipColor}: var(--text-primary);
                 ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary);
@@ -94,23 +129,37 @@ export const config = {
                 ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary);
                 ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary);
                 ${tokens.textFieldChipOpacityReadonly}: 0.72;
+
+                ${tokens.disclosureIconColor}: var(--text-secondary);
+                ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
+                ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary);
             `,
             negative: css`
-                ${tokens.textFieldColor}: var(--plasma-colors-primary);
+                ${tokens.textFieldColor}: var(--text-primary);
+                ${tokens.textFieldClearColor}: var(--text-negative);
+
+                ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
+                ${tokens.textFieldClearPlaceholderColor}: var(--text-negative);
+                ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative);
+
                 ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative);
                 ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active);
+
                 ${tokens.textFieldCaretColor}: var(--text-accent);
-                ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${tokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-primary);
                 ${tokens.textFieldLeftHelperColor}: var(--text-negative);
                 ${tokens.textFieldFocusColor}: var(--text-accent);
 
-                ${tokens.disclosureIconColor}: var(--text-secondary);
-                ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary);
+                ${tokens.textFieldContentSlotColor}: var(--text-secondary);
+                ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover);
+                ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active);
+
+                ${tokens.textFieldIndicatorColor}: var(--surface-negative);
+                ${tokens.textFieldOptionalColor}: var(--text-tertiary);
+
                 ${tokens.textFieldChipCloseIconColor}: var(--text-secondary);
                 ${tokens.textFieldChipColor}: var(--text-primary);
                 ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary);
@@ -123,6 +172,10 @@ export const config = {
                 ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary);
                 ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary);
                 ${tokens.textFieldChipOpacityReadonly}: 0.72;
+
+                ${tokens.disclosureIconColor}: var(--text-secondary);
+                ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
+                ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary);
             `,
         },
         size: {
@@ -164,6 +217,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;
@@ -260,6 +323,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;
@@ -356,6 +429,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;
@@ -452,6 +535,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;

diff --git a/packages/plasma-b2c/src/components/Combobox/Combobox.stories.tsx b/packages/plasma-b2c/src/components/Combobox/Combobox.stories.tsx
@@ -71,6 +71,24 @@ const meta: Meta<StorySelectProps> = {
             control: { type: 'number' },
             if: { arg: 'isTargetAmount', truthy: true },
         },
+        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: {
         label: 'Label',
@@ -86,6 +104,9 @@ const meta: Meta<StorySelectProps> = {
         alwaysOpened: false,
         disabled: false,
         readOnly: false,
+        optional: false,
+        required: false,
+        requiredPlacement: 'right',
     },
     parameters: {
         controls: {
@@ -107,6 +128,9 @@ const meta: Meta<StorySelectProps> = {
                 'listWidth',
                 'listOverflow',
                 'listHeight',
+                'optional',
+                'required',
+                'requiredPlacement',
             ],
         },
     },