Skip to content

Commit

Permalink
feat(plasma-*): update configs and tests for Hint
Browse files Browse the repository at this point in the history
  • Loading branch information
@TitanKuzmich
TitanKuzmich committed Jan 18, 2025
1 parent adf7337 commit 41bd0a0
Show file tree
Hide file tree
Showing 36 changed files with 1,981 additions and 202 deletions.
Binary file modified ...xtField.component-test.tsx/plasma-b2c TextField -- with hint -- _sizel.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 ...xtField.component-test.tsx/plasma-b2c TextField -- with hint -- _sizem.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 ...xtField.component-test.tsx/plasma-b2c TextField -- with hint -- _sizes.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 ...tField.component-test.tsx/plasma-b2c TextField -- with hint -- _sizexs.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 ...xtField.component-test.tsx/plasma-web TextField -- with hint -- _sizel.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 ...xtField.component-test.tsx/plasma-web TextField -- with hint -- _sizem.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 ...xtField.component-test.tsx/plasma-web TextField -- with hint -- _sizes.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 ...tField.component-test.tsx/plasma-web TextField -- with hint -- _sizexs.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.
110 changes: 106 additions & 4 deletions packages/plasma-b2c/src/components/Autocomplete/Autocomplete.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ export const config = {
${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};
${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor};
${tokens.infiniteLoaderSpinnerColor}: var(--text-primary);
${tokens.textFieldHintIconColor}: var(--text-secondary);
`,
positive: css`
${tokens.textFieldColor}: var(--text-primary);
Expand Down Expand Up @@ -87,6 +89,8 @@ export const config = {
${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};
${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor};
${tokens.infiniteLoaderSpinnerColor}: var(--text-primary);
${tokens.textFieldHintIconColor}: var(--text-secondary);
`,
warning: css`
${tokens.textFieldColor}: var(--text-primary);
Expand Down Expand Up @@ -127,6 +131,8 @@ export const config = {
${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};
${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor};
${tokens.infiniteLoaderSpinnerColor}: var(--text-primary);
${tokens.textFieldHintIconColor}: var(--text-secondary);
`,
negative: css`
${tokens.textFieldColor}: var(--text-primary);
Expand Down Expand Up @@ -167,6 +173,8 @@ export const config = {
${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};
${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor};
${tokens.infiniteLoaderSpinnerColor}: var(--text-primary);
${tokens.textFieldHintIconColor}: var(--text-secondary);
`,
},
size: {
Expand All @@ -177,6 +185,10 @@ export const config = {
${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem;
${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem;
${tokens.textFieldRightContentWithHintMargin}: -0.0625rem -0.438rem -0.0625rem 0.75rem;
${tokens.textFieldContentRightWrapperGap}: 0.25rem;
${tokens.textFieldContentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0;
${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;
${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
Expand All @@ -197,6 +209,11 @@ export const config = {
${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height);
${tokens.textFieldHintMargin}: -0.688rem -0.5rem;
${tokens.textFieldHintTargetSize}: 2.375rem;
${tokens.textFieldHintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
${tokens.textFieldLeftHelperOffset}: 0.25rem;
${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
Expand All @@ -216,7 +233,7 @@ export const config = {
${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.textFieldClearIndicatorHintInnerRight}: 1.5rem -2.488rem auto auto;
${tokens.borderRadius}: 0.875rem;
${tokens.padding}: 0.125rem;
Expand All @@ -243,6 +260,10 @@ export const config = {
${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem;
${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem;
${tokens.textFieldRightContentWithHintMargin}: -0.125rem -0.438rem -0.125rem 0.75rem;
${tokens.textFieldContentRightWrapperGap}: 0.25rem;
${tokens.textFieldContentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0;
${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;
${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
Expand All @@ -263,6 +284,11 @@ export const config = {
${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height);
${tokens.textFieldHintMargin}: -0.688rem -0.5rem;
${tokens.textFieldHintTargetSize}: 2.375rem;
${tokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
${tokens.textFieldLeftHelperOffset}: 0.25rem;
${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
Expand All @@ -282,7 +308,7 @@ export const config = {
${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.textFieldClearIndicatorHintInnerRight}: 1.25rem -2.488rem auto auto;
${tokens.borderRadius}: 0.75rem;
${tokens.padding}: 0.125rem;
Expand All @@ -309,6 +335,10 @@ export const config = {
${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem;
${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem;
${tokens.textFieldRightContentWithHintMargin}: -0.1875rem -0.438rem -0.1875rem 0.75rem;
${tokens.textFieldContentRightWrapperGap}: 0.25rem;
${tokens.textFieldContentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0;
${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;
${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
Expand All @@ -329,6 +359,11 @@ export const config = {
${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
${tokens.textFieldHintMargin}: -0.688rem -0.5rem;
${tokens.textFieldHintTargetSize}: 2.375rem;
${tokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
${tokens.textFieldLeftHelperOffset}: 0.25rem;
${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
Expand All @@ -348,7 +383,7 @@ export const config = {
${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.textFieldClearIndicatorHintInnerRight}: 1.063rem -2.238rem auto auto;
${tokens.borderRadius}: 0.625rem;
${tokens.padding}: 0.125rem;
Expand All @@ -375,6 +410,10 @@ export const config = {
${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem;
${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem;
${tokens.textFieldRightContentWithHintMargin}: -0.0625rem -0.688rem -0.0625rem 0.75rem;
${tokens.textFieldContentRightWrapperGap}: 0.25rem;
${tokens.textFieldContentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0;
${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;
${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
Expand All @@ -395,6 +434,11 @@ export const config = {
${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height);
${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem;
${tokens.textFieldHintTargetSize}: 2.375rem;
${tokens.textFieldHintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;
${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
${tokens.textFieldLeftHelperOffset}: 0.25rem;
${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
Expand All @@ -414,7 +458,7 @@ export const config = {
${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.textFieldClearIndicatorHintInnerRight}: 0.813rem -1.988rem auto auto;
${tokens.borderRadius}: 0.5rem;
${tokens.padding}: 0.125rem;
Expand Down Expand Up @@ -447,6 +491,64 @@ export const config = {
`,
outer: css``,
},
hintView: {
default: css`
${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness);
${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08));
${tokens.textFieldTooltipColor}: var(--text-primary);
${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card);
`,
},
hintSize: {
m: css`
${tokens.textFieldTooltipPaddingTop}: 0.6875rem;
${tokens.textFieldTooltipPaddingRight}: 0.875rem;
${tokens.textFieldTooltipPaddingBottom}: 0.6875rem;
${tokens.textFieldTooltipPaddingLeft}: 0.875rem;
${tokens.textFieldTooltipMinHeight}: 2.5rem;
${tokens.textFieldTooltipBorderRadius}: 0.625rem;
${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family);
${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size);
${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style);
${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight);
${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height);
${tokens.textFieldTooltipContentLeftMargin}: 0.375rem;
${tokens.textFieldTooltipArrowMaskWidth}: 1.25rem;
${tokens.textFieldTooltipArrowMaskHeight}: 1.25rem;
${tokens.textFieldTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");
${tokens.textFieldTooltipArrowHeight}: 0.5rem;
${tokens.textFieldTooltipArrowEdgeMargin}: 0.625rem;
`,
s: css`
${tokens.textFieldTooltipPaddingTop}: 0.5rem;
${tokens.textFieldTooltipPaddingRight}: 0.75rem;
${tokens.textFieldTooltipPaddingBottom}: 0.5rem;
${tokens.textFieldTooltipPaddingLeft}: 0.75rem;
${tokens.textFieldTooltipMinHeight}: 2rem;
${tokens.textFieldTooltipBorderRadius}: 0.5rem;
${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family);
${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size);
${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style);
${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height);
${tokens.textFieldTooltipContentLeftMargin}: 0.25rem;
${tokens.textFieldTooltipArrowMaskWidth}: 1rem;
${tokens.textFieldTooltipArrowMaskHeight}: 1rem;
${tokens.textFieldTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");
${tokens.textFieldTooltipArrowHeight}: 0.375rem;
${tokens.textFieldTooltipArrowEdgeMargin}: 0.5625rem;
`,
},
disabled: {
true: css`
${tokens.textFieldDisabledOpacity}: 0.4;
Expand Down
81 changes: 81 additions & 0 deletions packages/plasma-b2c/src/components/Autocomplete/Autocomplete.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,29 @@ import { Autocomplete } from './Autocomplete';
const sizes = ['l', 'm', 's', 'xs'];
const views = ['default', 'positive', 'warning', 'negative'];
const labelPlacements = ['outer', 'inner'];
const hintViews = ['default'];
const hintSizes = ['m', 's'];
const hintTriggers = ['hover', 'click'];
const hintTargetPlacements = ['outer', 'inner'];
const placements: Array<PopoverPlacement> = [
'top',
'top-start',
'top-end',

'bottom',
'bottom-start',
'bottom-end',

'left',
'left-start',
'left-end',

'right',
'right-start',
'right-end',

'auto',
];

const suggestions = [
{ label: 'Алексей Смирнов' },
Expand Down Expand Up @@ -66,6 +89,7 @@ const suggestions = [
type StoryProps = ComponentProps<typeof Autocomplete> & {
enableContentLeft: boolean;
enableContentRight: boolean;
hasHint: boolean;
};

const meta: Meta<StoryProps> = {
Expand Down Expand Up @@ -116,6 +140,54 @@ const meta: Meta<StoryProps> = {
},
if: { arg: 'required', truthy: false },
},
hintText: {
control: { type: 'text' },
if: { arg: 'hasHint', truthy: true },
},
hintView: {
options: hintViews,
control: {
type: 'select',
},
if: { arg: 'hasHint', truthy: true },
},
hintSize: {
options: hintSizes,
control: {
type: 'select',
},
if: { arg: 'hasHint', truthy: true },
},
hintTargetPlacement: {
options: hintTargetPlacements,
control: {
type: 'inline-radio',
},
if: { arg: 'hasHint', truthy: true },
},
hintTrigger: {
options: hintTriggers,
control: {
type: 'inline-radio',
},
if: { arg: 'hasHint', truthy: true },
},
hintPlacement: {
options: placements,
control: {
type: 'select',
},
if: { arg: 'hasHint', truthy: true },
mappers: placements,
},
hintHasArrow: {
control: { type: 'boolean' },
if: { arg: 'hasHint', truthy: true },
},
hintWidth: {
control: { type: 'text' },
if: { arg: 'hasHint', truthy: true },
},
},
args: {
view: 'default',
Expand All @@ -137,6 +209,15 @@ const meta: Meta<StoryProps> = {
optional: false,
required: false,
requiredPlacement: 'right',
hasHint: false,
hintText: 'Текст подсказки',
hintTrigger: 'hover',
hintView: 'default',
hintSize: 'm',
hintTargetPlacement: 'outer',
hintPlacement: 'auto',
hintWidth: '10rem',
hintHasArrow: true,
},
};

Expand Down
Loading

0 comments on commit 41bd0a0

Please sign in to comment.