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 = (
+ <>
+
+
+ >
+ );
+
+ return (
+ }
+ variant="light"
+ name="With icon"
+ >
+ {dropdownItems}
+
+ );
+};
+
+export const DisableReason = () => {
+ const dropdownItems = (
+ <>
+
+
+ >
+ );
+
+ 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();
+
+ 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(
+ ,
+ );
+
+ 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 = (