feat(MenuItem): Added description to MenuItem#1543
Conversation
|
Size stats
|
There was a problem hiding this comment.
Pull request overview
This PR extends the MenuItem component API to support an optional secondary text (description) and updates the menu item layout/styles to display it under the main label.
Changes:
- Add optional
description?: stringtoMenuItemprops. - Render the description below the label in both the normal and checkbox menu item variants.
- Introduce a new
itemTextContentstyle to layout label/description vertically.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/menu.tsx | Adds the description prop and renders it under the label in both checkbox and non-checkbox menu items. |
| src/menu.css.ts | Adds itemTextContent styling to stack label and description vertically. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className={styles.itemTextContent}> | ||
| <Text3 regular color={contentColor}> | ||
| {label} | ||
| </Text3> | ||
| {description && ( |
| <div className={styles.itemTextContent}> | ||
| <Text3 regular color={contentColor}> | ||
| {label} | ||
| </Text3> |
|
Deploy preview for mistica-web ready!
Deployed with vercel-action |
|
Accessibility report ℹ️ You can run this locally by executing |
atabel
left a comment
atabel
left a comment
There was a problem hiding this comment.
please follow the PR titles convention:
feat(component name): description
or
fix(component name): description
This PR title is used as a commit message when the branch is squashed+merged into master, and it's used to generate the release notes when we build a new release
| <div className={styles.itemTextContent}> | ||
| <Text3 regular color={contentColor}> | ||
| {label} | ||
| </Text3> |
|
|
||
| interface MenuItemBaseProps { | ||
| label: string; | ||
| description?: string; |
There was a problem hiding this comment.
please include some example using description in the storybook and make a screenshot test to cover the case
There was a problem hiding this comment.
you can include description in some item in playroom snippet also
AlexandraGallipoliRodrigues
changed the title
|
|
||
| interface MenuItemBaseProps { | ||
| label: string; | ||
| description?: string; |
There was a problem hiding this comment.
you can include description in some item in playroom snippet also
| {label} | ||
| </Text3> | ||
| {description && ( | ||
| <Text3 light color={vars.colors.textSecondary}> |
There was a problem hiding this comment.
Text2 regular instead of Text3
| {label} | ||
| </Text3> | ||
| {description && ( | ||
| <Text3 light color={vars.colors.textSecondary}> |
AlexandraGallipoliRodrigues
had a problem deploying
to
production
GitHub Actions
Failure
AlexandraGallipoliRodrigues
had a problem deploying
to
production
GitHub Actions
Failure
AlexandraGallipoliRodrigues
had a problem deploying
to
production
GitHub Actions
Failure
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 6 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| 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> | ||
| )} |
|
🎉 This PR is included in version 16.62.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
# [16.62.0](Telefonica/mistica-web@v16.61.0...v16.62.0) (2026-05-08) ### Features * **AiCard:** add new component aicard ([Telefonica#1544](Telefonica#1544)) ([96959e9](Telefonica@96959e9)) * allow PR workflows from forks ([Telefonica#1547](Telefonica#1547)) ([2270adc](Telefonica@2270adc)), closes [/github.com/Telefonica/tf-github-cdo-repos/blob/main/novum/repositories/mistica-web/terraform.tfvars#L23-L32](https://github.com//github.com/Telefonica/tf-github-cdo-repos/blob/main/novum/repositories/mistica-web/terraform.tfvars/issues/L23-L32) * **Icons:** update artificial intelligence icons in vivo ([Telefonica#1545](Telefonica#1545)) ([f732114](Telefonica@f732114)) * **MenuItem:** Added description to MenuItem ([Telefonica#1543](Telefonica#1543)) ([a1f2e7d](Telefonica@a1f2e7d))
Local playroom:
accessibility check:
ticket: https://jira.tid.es/browse/WEB-2410
figma: