feat(MenuItem): Added description to MenuItem (#1543)

[Local
playroom](http://localhost:9000/#?code=N4Igxg9gJgpiBcIA8BZGA7ArgHXQAgLwCcNYiAVAQyIHMYAXAXmAApgSAzAGjwnQAUSAZyEBfAJR5GAPjwtchRXiTkImMAAtKAIwA2MYjA7NOo3gOFDmfQTBGjpCpc4DyABwx4Athhz5nygD0qupaejCO-gTiok4EJOhkaFjMbJw8YLqUIgBylD4SUrLyUUpIUACWAG6GxuxGZpnZQnk%2BzE25%2BTAOcQEEqL4AkvQwXr19ilnaMLqM2CAA4kSYbhDz4xMEsEJgRBVu9BV8cyAAoiIGNMureJRgOpR4o3gAjACseBoQRNnrpZsEGyWVKSGR4YCiWL-AKBSIA5TJTDDUYbTZTGYnJYrCB4SD4TQwMAAa20EAAHn94Yptrt9odjvNzkJLtccXcHk8vK8Pl8fkJKVSCHj6EQILpyABPDwnAnE0kUkCoiayokwKBKvpAuxWVig2QQqHw2EawgDLDIsbQtE6DGM3QVLwVdDUPBXbECwU0vYHI7oE7neiPO5gCoAZ-w6BxzLwbkwaoM2y0YBgRA9VO2IvUhyqMBNzi1IhBRXBkLzeGNVrKiItZcmNtm8wAIhUhDp9OrFZW%2Bl66b6TjkcZUhKt0BVwrdeZQ0-Ch221bXCAWdSw9SXDQCK30kIFKlU4YQYrhYSBREA):
<img width="1334" height="750" alt="image"
src="https://github.com/user-attachments/assets/fb860242-fb47-47cf-858d-64517408cc6a"
/>

accessibility check:

<img width="1919" height="851" alt="Captura de pantalla 2026-05-05 a las
13 17 22"
src="https://github.com/user-attachments/assets/a8f6db62-7f35-4784-996b-e35132bc088e"
/>





ticket: https://jira.tid.es/browse/WEB-2410 

[figma](https://www.figma.com/design/a1pgrI7Wg41iyXWU8ETqlU/%F0%9F%94%B8-Menu-Specs?node-id=36-1496&p=f&t=a2dK3pQQwwfCJhMT-0):

<img width="1173" height="570" alt="image"
src="https://github.com/user-attachments/assets/c7dbaeb6-fb5a-4bc6-8255-a8b4f9f61764"
/>
<img width="1158" height="501" alt="image"
src="https://github.com/user-attachments/assets/ee6d67a5-ef60-4fee-8d04-5d6223d720b2"
/>

Author: AlexandraGallipoliRodrigues

playroom/snippets.tsx

@@ -27,9 +27,10 @@ const menuSnippet = {
       renderMenu={({ ref, className }) => (
         <div ref={ref} className={className}>
           <MenuSection>
-            <MenuItem label="option 1" onPress={() => {}} />
+            <MenuItem label="option 1" description="Description for option 1" onPress={() => {}} />
             <MenuItem
               label="option 2"
+              description="Description for option 2"
               onPress={() => setState("option 2", !getState("option 2", false))}
               controlType="checkbox"
               checked={getState("option 2", false)}

src/__screenshot_tests__/__image_snapshots__/menu-screenshot-test-tsx-menu-with-item-description-1-snap.png

@@ -92,3 +92,17 @@ test('Menu is rendered inside a datacard', async () => {
     await (await screen.findByRole('button')).click();
     expect(await page.screenshot()).toMatchImageSnapshot();
 });
+
+test('Menu with item description', async () => {
+    const page = await openStoryPage({
+        id: 'components-menu--default',
+        device: 'MOBILE_IOS',
+        viewport,
+        args: {
+            description: true,
+        },
+    });
+
+    await (await screen.findByRole('button')).click();
+    expect(await page.screenshot()).toMatchImageSnapshot();
+});

src/__screenshot_tests__/menu-screenshot-test.tsx

@@ -25,6 +25,7 @@ type MenuArgs = {
     verticalPosition: 'top' | 'bottom';
     icon: boolean;
     checkbox: boolean;
+    description: boolean;
 };
 
 export const Default: StoryComponent<MenuArgs> = ({
@@ -33,6 +34,7 @@ export const Default: StoryComponent<MenuArgs> = ({
     verticalPosition,
     icon,
     checkbox,
+    description,
 }) => {
     const {alert} = useDialog();
     const [valuesState, setValuesState] = React.useState<ReadonlyArray<number>>([]);
@@ -85,6 +87,11 @@ export const Default: StoryComponent<MenuArgs> = ({
                                         <MenuItem
                                             key={optionIndex}
                                             label={`Option ${optionIndex + 1}`}
+                                            description={
+                                                description
+                                                    ? `Description for option ${optionIndex + 1}`
+                                                    : undefined
+                                            }
                                             onPress={(item) => {
                                                 if (checkbox) {
                                                     setValues(item);
@@ -124,6 +131,7 @@ Default.args = {
     verticalPosition: 'top',
     icon: false,
     checkbox: true,
+    description: false,
 };
 Default.argTypes = {
     horizontalPosition: {

src/__stories__/menu-story.tsx

@@ -126,6 +126,12 @@ export const itemContent = style({
     alignItems: 'center',
 });
 
+export const itemTextContent = style({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+});
+
 export const iconContainer = style({
     display: 'flex',
     paddingRight: 8,

src/menu.css.ts

@@ -10,7 +10,7 @@ import {Portal} from './portal';
 import Box from './box';
 import Inline from './inline';
 import Touchable from './touchable';
-import {Text3} from './text';
+import {Text2, Text3} from './text';
 import {vars} from './skins/skin-contract.css';
 import Divider from './divider';
 import Checkbox from './checkbox';
@@ -53,6 +53,7 @@ const getItemIndexInMenu = (menu: HTMLElement | null, item: HTMLElement | null):
 
 interface MenuItemBaseProps {
     label: string;
+    description?: string;
     Icon?: (props: IconProps) => JSX.Element;
     destructive?: boolean;
     disabled?: boolean;
@@ -80,6 +81,7 @@ export const MenuItem = ({
     onPress,
     controlType,
     checked,
+    description,
     dataAttributes,
 }: MenuItemProps): JSX.Element => {
     const {focusedItem, setFocusedItem, closeMenu, isMenuOpen} = useMenuContext();
@@ -93,6 +95,19 @@ export const MenuItem = ({
 
     const menuItemDataAttributes = {testid: 'MenuItem', ...dataAttributes};
 
+    const renderTextContent = (id?: string) => (
+        <div id={id} className={styles.itemTextContent}>
+            <Text3 regular color={contentColor}>
+                {label}
+            </Text3>
+            {description && (
+                <Text2 regular color={vars.colors.textSecondary}>
+                    {description}
+                </Text2>
+            )}
+        </div>
+    );
+
     const renderContent = () =>
         controlType === 'checkbox' ? (
             <Checkbox
@@ -108,7 +123,7 @@ export const MenuItem = ({
                 disabled={disabled}
                 role="menuitemcheckbox"
                 dataAttributes={menuItemDataAttributes}
-                render={({controlElement}) => (
+                render={({controlElement, labelId}) => (
                     <Box paddingX={8} paddingY={12}>
                         <Inline space="between" alignItems="center">
                             <div className={styles.itemContent}>
@@ -117,9 +132,7 @@ export const MenuItem = ({
                                         <Icon size={24} color={contentColor} />
                                     </div>
                                 )}
-                                <Text3 regular color={contentColor}>
-                                    {label}
-                                </Text3>
+                                {renderTextContent(labelId)}
                             </div>
                             <Box paddingLeft={16}>{controlElement}</Box>
                         </Inline>
@@ -146,9 +159,7 @@ export const MenuItem = ({
                                 <Icon size={24} color={contentColor} />
                             </div>
                         )}
-                        <Text3 regular color={contentColor}>
-                            {label}
-                        </Text3>
+                        {renderTextContent()}
                     </div>
                 </Box>
             </Touchable>