diff --git a/cypress/snapshots/finai/chromium/DatePicker/DatePickerRange -- hintText, required, requiredPlacement=right.snap.png b/cypress/snapshots/finai/chromium/DatePicker/DatePickerRange -- hintText, required, requiredPlacement=right.snap.png index 963c615a77d..00b196f0b04 100644 Binary files a/cypress/snapshots/finai/chromium/DatePicker/DatePickerRange -- hintText, required, requiredPlacement=right.snap.png and b/cypress/snapshots/finai/chromium/DatePicker/DatePickerRange -- hintText, required, requiredPlacement=right.snap.png differ diff --git a/cypress/snapshots/finai/webkit/DatePicker/DatePickerRange -- hintText, required, requiredPlacement=right.snap.png b/cypress/snapshots/finai/webkit/DatePicker/DatePickerRange -- hintText, required, requiredPlacement=right.snap.png index 9e84872d95d..89e30d557f9 100644 Binary files a/cypress/snapshots/finai/webkit/DatePicker/DatePickerRange -- hintText, required, requiredPlacement=right.snap.png and b/cypress/snapshots/finai/webkit/DatePicker/DatePickerRange -- hintText, required, requiredPlacement=right.snap.png differ diff --git a/packages/sdds-finai/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-finai/src/components/DatePicker/DatePicker.config.ts index 9a9ad4ab91c..f3080635ddc 100644 --- a/packages/sdds-finai/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-finai/src/components/DatePicker/DatePicker.config.ts @@ -65,6 +65,7 @@ export const config = { ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); @@ -154,6 +155,13 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintWithoutLabelPlacementOffset}: 0.563rem -2.938rem auto auto; + ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; + + ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; + ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; ${tokens.embedIconButtonPadding}: 1rem; @@ -309,6 +317,13 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintWithoutLabelPlacementOffset}: 0.312rem -2.813rem auto auto; + ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; + + ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; + ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; ${tokens.embedIconButtonPadding}: 0.75rem; @@ -464,6 +479,13 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintWithoutLabelPlacementOffset}: 0.062rem -2.688rem auto auto; + ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; + + ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; + ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; ${tokens.embedIconButtonPadding}: 0.5rem; @@ -619,6 +641,13 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintWithoutLabelPlacementOffset}: -0.188rem -2.063rem auto auto; + ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; + + ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; + ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; ${tokens.embedIconButtonPadding}: 0.5rem; @@ -799,6 +828,64 @@ export const config = { ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); `, }, + hintView: { + default: css` + ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); + ${tokens.hintTooltipColor}: var(--text-primary); + ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + `, + }, + hintSize: { + m: css` + ${tokens.hintTooltipPaddingTop}: 0.6875rem; + ${tokens.hintTooltipPaddingRight}: 0.875rem; + ${tokens.hintTooltipPaddingBottom}: 0.6875rem; + ${tokens.hintTooltipPaddingLeft}: 0.875rem; + + ${tokens.hintTooltipMinHeight}: 2.5rem; + ${tokens.hintTooltipBorderRadius}: 0.625rem; + + ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.hintTooltipContentLeftMargin}: 0.375rem; + + ${tokens.hintTooltipArrowMaskWidth}: 1.25rem; + ${tokens.hintTooltipArrowMaskHeight}: 1.25rem; + ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); + ${tokens.hintTooltipArrowHeight}: 0.5rem; + ${tokens.hintTooltipArrowEdgeMargin}: 0.625rem; + `, + s: css` + ${tokens.hintTooltipPaddingTop}: 0.5rem; + ${tokens.hintTooltipPaddingRight}: 0.75rem; + ${tokens.hintTooltipPaddingBottom}: 0.5rem; + ${tokens.hintTooltipPaddingLeft}: 0.75rem; + + ${tokens.hintTooltipMinHeight}: 2rem; + ${tokens.hintTooltipBorderRadius}: 0.5rem; + + ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.hintTooltipContentLeftMargin}: 0.25rem; + + ${tokens.hintTooltipArrowMaskWidth}: 1rem; + ${tokens.hintTooltipArrowMaskHeight}: 1rem; + ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); + ${tokens.hintTooltipArrowHeight}: 0.375rem; + ${tokens.hintTooltipArrowEdgeMargin}: 0.5625rem; + `, + }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; diff --git a/packages/sdds-finai/src/components/DatePicker/DatePicker.stories.tsx b/packages/sdds-finai/src/components/DatePicker/DatePicker.stories.tsx index eaa14a17483..ac3a65e6f54 100644 --- a/packages/sdds-finai/src/components/DatePicker/DatePicker.stories.tsx +++ b/packages/sdds-finai/src/components/DatePicker/DatePicker.stories.tsx @@ -15,7 +15,6 @@ const { meta: META, Default } = getDatePickerStories({ 'appearance', 'hasClearDivider', 'view', - 'hasHint', 'showShortcuts', 'dateShortcutsWidth', 'dateShortcutsPlacement', diff --git a/packages/sdds-finai/src/components/DatePicker/DatePickerRange.stories.tsx b/packages/sdds-finai/src/components/DatePicker/DatePickerRange.stories.tsx index 663d57e0481..c4351fb057f 100644 --- a/packages/sdds-finai/src/components/DatePicker/DatePickerRange.stories.tsx +++ b/packages/sdds-finai/src/components/DatePicker/DatePickerRange.stories.tsx @@ -15,7 +15,6 @@ const { meta: META, Range } = getDatePickerRangeStories({ 'appearance', 'hasClearDivider', 'view', - 'hasHint', 'showShortcuts', 'dateShortcutsWidth', 'dateShortcutsPlacement', diff --git a/website/sdds-finai-docs/docs/components/DatePicker.mdx b/website/sdds-finai-docs/docs/components/DatePicker.mdx index e387884c730..b4ec9457323 100644 --- a/website/sdds-finai-docs/docs/components/DatePicker.mdx +++ b/website/sdds-finai-docs/docs/components/DatePicker.mdx @@ -486,9 +486,9 @@ import { DatePicker } from '@salutejs/sdds-finai'; import { DatePickerRange, IconButton } from '@salutejs/sdds-finai'; import { IconDone } from '@salutejs/plasma-icons'; - type DateType = Date | string | undefined | null - export function App() { + type DateType = Date | string | undefined | null + const [dateValue, setDate] = useState<[DateType, DateType]>([new Date(), null]); const [originalDateValue, setOriginalDate] = useState<[DateType, DateType]>([new Date(), null]); const [isoDateValue, setIsoDate] = useState<[string?, string?]>([new Date().toISOString(), '']); @@ -563,9 +563,9 @@ import { DatePicker } from '@salutejs/sdds-finai'; import { DatePickerRange } from '@salutejs/sdds-finai'; import { IconDone } from '@salutejs/plasma-icons'; - type DateType = Date | string | undefined | null - export function App() { + type DateType = Date | string | undefined | null + const [dateValue, setDate] = useState<[DateType, DateType]>([new Date(), null]); const [originalDateValue, setOriginalDate] = useState<[DateType, DateType]>([new Date(), null]); const [isoDateValue, setIsoDate] = useState<[string?, string?]>([new Date().toISOString(), '']); @@ -639,7 +639,7 @@ import { DatePicker } from '@salutejs/sdds-finai'; import { IconDone } from '@salutejs/plasma-icons'; export function App() { - const sizes = ['xl', 'l', 'm', 's', 'xs'] + const sizes = ['l', 'm', 's', 'xs'] const ActionButton = () => { return ( diff --git a/website/sdds-finai-docs/docs/components/NumberFormat.mdx b/website/sdds-finai-docs/docs/components/NumberFormat.mdx index 2f40ba9c5d1..16a4973ff6f 100644 --- a/website/sdds-finai-docs/docs/components/NumberFormat.mdx +++ b/website/sdds-finai-docs/docs/components/NumberFormat.mdx @@ -166,3 +166,44 @@ export function App() { ); } ``` + +### Функция форматирования +Для приведения числа к нужному формату можно использовать функцию `numberFormatter`. +Она принимает два параметра: +- строковое значение +- объект с параметрами форматирования + +```tsx +const num = 100.23 +const options = { + /** + * Разделитель тысяч. + * Может быть строкой (например, " "). + * @example 123 456 789 + */ + thousandSeparator: ' ', + /** + * Разделитель десятичных знаков (например, "."). + * @example 123.456 + */ + decimalSeparator: '.', + /** + * Количество знаков после запятой. + */ + decimalScale: 3, + /** + * Фиксирует количество знаков после запятой, даже если число их не содержит (добавляет нули). + */ + fixedDecimalScale: false, + /** + * Разрешает ввод отрицательных чисел. + */ + allowNegative: true, + /** + * Разрешает ведущие нули (например, "0123"). + */ + allowLeadingZeros: false, +} + +const value = numberFormatter(String(num), options) +```