diff --git a/packages/react/src/components/SortingMenu/SortingMenu.tsx b/packages/react/src/components/SortingMenu/SortingMenu.tsx index 95309a5e5..661d82298 100644 --- a/packages/react/src/components/SortingMenu/SortingMenu.tsx +++ b/packages/react/src/components/SortingMenu/SortingMenu.tsx @@ -12,11 +12,13 @@ import Popover from '@mui/material/Popover'; import { IconSortAscendingLineW200, IconSortDescendingLineW200 } from '../../icons'; import { Button } from '../Button'; import { Divider } from '../Divider'; +import { InformationIcon } from '../InformationIcon'; import { Kbd } from '../Kbd'; import { Link } from '../Link'; import { ListItemText } from '../ListItem'; import { MenuItem } from '../MenuItem'; import { Switch } from '../Switch'; +import { Tooltip } from '../Tooltip'; const isMacintosh = () => { return navigator.userAgent.indexOf('Macintosh') > 0; @@ -47,6 +49,8 @@ export const SortingMenu = memo(function SortingMenu(inProps: SortingMenuProps) labelSortOrder, labelSortTooltip, labelMultisortTitle, + labelMultisortTooltip, + labelMultisortTooltipMacintosh, labelMultisortLMB, labelMultisortMobileOn, labelMultisortMobileOff, @@ -282,6 +286,12 @@ export const SortingMenu = memo(function SortingMenu(inProps: SortingMenuProps) + {labelMultisortLMB} {labelMultisortTitle} + + + )} diff --git a/packages/react/src/components/SortingMenu/SortingMenu.types.ts b/packages/react/src/components/SortingMenu/SortingMenu.types.ts index 2cda8d9f9..175ec6c50 100644 --- a/packages/react/src/components/SortingMenu/SortingMenu.types.ts +++ b/packages/react/src/components/SortingMenu/SortingMenu.types.ts @@ -41,6 +41,10 @@ export type SortingMenuProps = { labelSortTooltip?: string; /** Text for the switch label. */ labelMultisortTitle?: string; + /** Text for the multisort tooltip. */ + labelMultisortTooltip?: string; + /** Text for the multisort tooltip on macintosh. */ + labelMultisortTooltipMacintosh?: string; /** Text for the left mouse button. */ labelMultisortLMB?: string; /** Text for the switch label. */ diff --git a/packages/react/src/components/locale/index.ts b/packages/react/src/components/locale/index.ts index 1357d6104..2e4a8de8e 100644 --- a/packages/react/src/components/locale/index.ts +++ b/packages/react/src/components/locale/index.ts @@ -136,6 +136,8 @@ export interface Localization { | 'labelSortOrder' | 'labelSortTooltip' | 'labelMultisortTitle' + | 'labelMultisortTooltip' + | 'labelMultisortTooltipMacintosh' | 'labelMultisortLMB' | 'labelMultisortMobileOn' | 'labelMultisortMobileOff' @@ -354,6 +356,10 @@ export const en: Localization = { labelSortOrder: 'The sort order', labelSortTooltip: 'Sort by properties', labelMultisortTitle: 'Multisort', + labelMultisortTooltip: + 'Turn on the switch or hold down the "Ctrl" key and select multiple properties to sort by multiple criteria.', + labelMultisortTooltipMacintosh: + 'Turn on the switch or hold down the "⌘" key and select multiple properties to sort by multiple criteria.', labelMultisortLMB: 'LMB', labelMultisortMobileOn: 'Multisort enabled', labelMultisortMobileOff: 'Hold to multisort', @@ -578,6 +584,10 @@ export const ru: Localization = { labelSortOrder: 'Порядок сортировки', labelSortTooltip: 'Сортировка по свойствам', labelMultisortTitle: 'Мультисортировка', + labelMultisortTooltip: + 'Включите переключатель или, удерживая клавишу "Ctrl", выберите несколько свойств для сортировки по нескольким критериям.', + labelMultisortTooltipMacintosh: + 'Включите переключатель или, удерживая клавишу "⌘", выберите несколько свойств для сортировки по нескольким критериям.', labelMultisortLMB: 'ЛКМ', labelMultisortMobileOn: 'Мультисортировка включена', labelMultisortMobileOff: 'Удерживайте для мультисортировки', diff --git a/packages/theme/lib/components/_sorting-menu.scss b/packages/theme/lib/components/_sorting-menu.scss index b8e806b99..6953bf1a6 100644 --- a/packages/theme/lib/components/_sorting-menu.scss +++ b/packages/theme/lib/components/_sorting-menu.scss @@ -158,5 +158,9 @@ margin-top: 14px; padding-left: 16px; } + + &__information-icon { + margin-left: 4px; + } } }