diff --git a/packages/components/src/DropdownButton/DropdownButton.stories.tsx b/packages/components/src/DropdownButton/DropdownButton.stories.tsx index 56aede743..c2d7294b2 100644 --- a/packages/components/src/DropdownButton/DropdownButton.stories.tsx +++ b/packages/components/src/DropdownButton/DropdownButton.stories.tsx @@ -70,6 +70,52 @@ export const StartIcon = () => { ); }; +export const Note = () => { + const dropdownItems = ( + <> + console.log('v1')}> + Профиль + + console.log('v3')}>Выход + + ); + + return ( + } + variant="light" + name="With icon" + > + {dropdownItems} + + ); +}; + +export const DisableReason = () => { + const dropdownItems = ( + <> + console.log('v1')} + > + Профиль + + console.log('v3')}>Выход + + ); + + return ( + } + variant="light" + name="With icon" + > + {dropdownItems} + + ); +}; + /** Для стилизации основной кнопки доступны ButtonProps */ export const ButtonProps = () => ( diff --git a/packages/components/src/MenuItem/MenuItem.stories.tsx b/packages/components/src/MenuItem/MenuItem.stories.tsx index 2639e6c14..e8b7bd614 100644 --- a/packages/components/src/MenuItem/MenuItem.stories.tsx +++ b/packages/components/src/MenuItem/MenuItem.stories.tsx @@ -52,6 +52,28 @@ export const Example = () => { ); }; +/** + * prop ```note``` выводит Tooltip на не заблокированном элементе меню + */ +export const Note = () => { + return ( + + + + + + Мой профиль + + + + + + Выход + + + ); +}; + export const Selected = () => { return ( diff --git a/packages/components/src/MenuItem/MenuItem.test.tsx b/packages/components/src/MenuItem/MenuItem.test.tsx new file mode 100644 index 000000000..f3ab7e0af --- /dev/null +++ b/packages/components/src/MenuItem/MenuItem.test.tsx @@ -0,0 +1,40 @@ +import { describe, expect, it } from 'vitest'; +import { renderWithTheme, screen, userEvents } from '@astral/tests'; + +import { MenuItem } from './MenuItem'; + +describe('MenuItem', () => { + it('Tooltip отображается если передан note и disabled=false', async () => { + const label = 'Мой профиль'; + + renderWithTheme({label}); + + const item = screen.getByText(label); + + await userEvents.hover(item); + + const tooltip = await screen.findByRole('tooltip'); + + expect(tooltip).toBeVisible(); + expect(tooltip).toHaveTextContent('Перейти в профиль'); + }); + + it('Tooltip отображается если передан disabledReason и disabled=true', async () => { + const label = 'Мой профиль'; + + renderWithTheme( + + {label} + , + ); + + const item = screen.getByLabelText('Заблокировано'); + + await userEvents.hover(item); + + const tooltip = await screen.findByRole('tooltip'); + + expect(tooltip).toBeVisible(); + expect(tooltip).toHaveTextContent('Заблокировано'); + }); +}); diff --git a/packages/components/src/MenuItem/MenuItem.tsx b/packages/components/src/MenuItem/MenuItem.tsx index cd64020d0..10e7ce763 100644 --- a/packages/components/src/MenuItem/MenuItem.tsx +++ b/packages/components/src/MenuItem/MenuItem.tsx @@ -18,6 +18,14 @@ export type MenuItemProps = * Текст тултипа при заблокированном состоянии элемента меню */ disabledReason?: string; + /** + * Текст тултипа при наведении на элемент меню + */ + note?: string; + /** + * Позиционирование тултипа + * @default left + */ tooltipPlacement?: TooltipProps['placement']; /** * Тип элемента @@ -38,7 +46,8 @@ const InnerMenuItem = ( disabled, component = 'div', title, - tooltipPlacement, + tooltipPlacement = 'left', + note, ...rest } = props; @@ -46,7 +55,7 @@ const InnerMenuItem = (