Skip to content

Commit

Permalink
feat(plasma-*, sdds-*): Add required functionality in Combobox
Browse files Browse the repository at this point in the history
  • Loading branch information
@shuga2704 @Yakutoc
shuga2704 authored and Yakutoc committed Dec 4, 2024
1 parent 0ffc21e commit ef44489
Show file tree
Hide file tree
Showing 46 changed files with 2,653 additions and 252 deletions.
Binary file added ...bobox/Combobox.component-test.tsx/plasma-b2c Combobox -- prop optional.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...onent-test.tsx/plasma-b2c Combobox -- prop required, requiredPlacement.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...box/Combobox.component-test.tsx/plasma-web Combobox -- common disabled.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...bobox/Combobox.component-test.tsx/plasma-web Combobox -- common size l.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...bobox/Combobox.component-test.tsx/plasma-web Combobox -- common size m.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...bobox/Combobox.component-test.tsx/plasma-web Combobox -- common size s.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...obox/Combobox.component-test.tsx/plasma-web Combobox -- common size xs.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...box.component-test.tsx/plasma-web Combobox -- flow async items loading.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...Combobox.component-test.tsx/plasma-web Combobox -- prop isTargetAmount.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...st.tsx/plasma-web Combobox -- prop listWidth, listHeight, listOverflow.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...bobox/Combobox.component-test.tsx/plasma-web Combobox -- prop optional.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...obox/Combobox.component-test.tsx/plasma-web Combobox -- prop placement.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...box/Combobox.component-test.tsx/plasma-web Combobox -- prop renderItem.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ox/Combobox.component-test.tsx/plasma-web Combobox -- prop renderValue.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...onent-test.tsx/plasma-web Combobox -- prop required, requiredPlacement.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...mbobox/Combobox.component-test.tsx/plasma-web Combobox -- prop variant.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions packages/plasma-b2c/api/plasma-b2c.api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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< {
Expand Down
32 changes: 32 additions & 0 deletions packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
131 changes: 112 additions & 19 deletions packages/plasma-b2c/src/components/Combobox/Combobox.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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: {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
24 changes: 24 additions & 0 deletions packages/plasma-b2c/src/components/Combobox/Combobox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -86,6 +104,9 @@ const meta: Meta<StorySelectProps> = {
alwaysOpened: false,
disabled: false,
readOnly: false,
optional: false,
required: false,
requiredPlacement: 'right',
},
parameters: {
controls: {
Expand All @@ -107,6 +128,9 @@ const meta: Meta<StorySelectProps> = {
'listWidth',
'listOverflow',
'listHeight',
'optional',
'required',
'requiredPlacement',
],
},
},
Expand Down
Loading

0 comments on commit ef44489

Please sign in to comment.