[Feature Request]: v12 overflowMenu support for renderIcon prop on MenuItem. and checkbox
#18148
Comments
|
Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team. |
devadula-nandan
changed the title
renderIcon prop on MenuItem and checkboxrenderIcon prop on MenuItem. and checkbox
|
The static icon part of this issue is resolved by #18153. For the the interactive checkbox designs we actually recommend using a popover where the menu requires non-menu actions like shown in the filter. Here is an example in this data table story of the suggested solution for filter menus. |
|
Anna's suggestion is great! I just want to add a point of clarification here. Currently, we have an OverflowMenu Render Custom Icon that uses the Filter icon (or any other icon). I think this creates some confusion. @janhassel, we should aim for consistency in where specific Overflow Menus will live and consider providing more flexibility—for example, using a popover for the Overflow Menu button within the data table. |
|
@thyhmdo Wouldn't an OverflowMenu with three |
The problem
Migration from v11 to v12
OverflowMenu(experimental). doesn't provide an option to render icons inMenuItemAFAIK.We have an issue in C4IP where
In v11, we utilized the
OverflowMenucomponent withOverflowMenuItemas its child, which supported anitemTextprop that accepted a React node. This allowed us to pass both an icon and text together.To render the checkbox, we implemented a workaround, though it was not ideal, as shown below. This approach needs to be updated to align with Carbon's implementation. However, I could not find an option to achieve the same result with the
MenuItemcomponent. Do you have any recommendations on how to approach this?In v12 of
OverflowMenu, theMenuItemcomponent is used as a child element with properties such aslabelandshortcut, both of which are strings. Additionally, therenderIconprop does not function as expected onMenuItemunless the parent component is set tomode='basic'. However, this configuration is only applicable to theMenucomponent and cannot be used withOverflowMenu.The solution
ability to render checkboxes and icons for v12
OverflowMenu, like we did in v11.Examples
v11 implementation (go to folder 1 to see 2 overflow menu use cases in action)
https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-patterns-add-and-select-multiaddselect--with-hierarchy&globals=viewport:basic
Application/PAL
c4ip
Business priority
Medium Priority = upcoming release but is not pressing
Available extra resources
No response
Code of Conduct
The text was updated successfully, but these errors were encountered: