feat(menu): deprecate props.mode / always support full capabilities + icons #18153
Conversation
✅ Deploy Preview for v11-carbon-web-components ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for v11-carbon-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@tay1orjones It seems that using As a test, I wrote a janky middleware for floating-ui that adds the intended transform to floatingSize({
apply({ elements }) {
const { transform, top: topPx, left: leftPx } = elements.floating.style;
if (transform) {
const [_, xPx, yPx] = transform.match(/translate\((.+), (.+)\)/);
const values = [topPx, yPx, leftPx, xPx].map((px) => Number(px.replace('px', '')));
Object.assign(elements.floating.style, {
top: `${values[0] + values[1]}px`,
left: `${values[2] + values[3]}px`,
transform: 'unset',
willChange: 'unset',
});
}
}
})With middleware: Without middleware (Safari): You can see the box-shadow of the nested menu on the right side of "Delete", showing that it renders but is clipped. In Edge, a scroll is added to the parent (without middleware): |
|
@janhassel I dug around a bit and found this floating-ui/floating-ui#2858 It might be worth trying to set the boundary to |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #18153 +/- ##
==========================================
- Coverage 84.16% 84.14% -0.02%
==========================================
Files 404 404
Lines 14350 14339 -11
Branches 4619 4591 -28
==========================================
- Hits 12077 12065 -12
- Misses 2111 2113 +2
+ Partials 162 161 -1 ☔ View full report in Codecov by Sentry. |
Closes #18148, #15875, #17725
Related #18084, https://ibm-analytics.slack.com/archives/C0M053VPT/p1715933314490569
Deprecates
props.modeforMenuand always support the full list of capabilities:The original concern of having a checkmark icon and a custom icon on the same visual level is being addressed by placing them in separate columns. The original concern was that users wouldn't be able to distinguish quickly what's a decorative icon and what is a status icon. The design was discussed with @thyhmdo and @ariellalgilmore.
Changelog
Changed
aria-checkedRemoved
props.mode@thyhmdo Side note: even if technically selectable items inside of menu and combo buttons would be allowed with this approach, we should probably add some details in the design guidance discouraging this. Also, here's our related discussion: https://ibm-analytics.slack.com/archives/C07HHD0CNR4/p1725459515044009
General side note: this adds support for icons for
MenuItemSelectable. We should probably add support forMenuItemRadioGroupas well but it's not compatible with the current structure. My long-term thought is to replace theprops.itemswith something like aMenuItemRadioOptioncomponent that should be used as children ofMenuItemRadioGroup. But that's probably better discussed in a separate issue.Opening as draft as an issue occurs with the nested
MenuButton. For some reason, theoverflow-y: autocauses the nested menu to be clipped inMenuButtonbut notMenu. I'll need to investigate further.