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!Built without sensitive environment variables
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 ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #18153 +/- ##
==========================================
- Coverage 84.17% 84.14% -0.03%
==========================================
Files 408 408
Lines 14435 14429 -6
Branches 4690 4655 -35
==========================================
- Hits 12150 12142 -8
- Misses 2121 2122 +1
- Partials 164 165 +1 ☔ View full report in Codecov by Sentry. |
|
@tay1orjones Thank you for the link! After further research I found the culprit: when an element is using
https://www.w3.org/TR/2019/CR-css-transforms-1-20190214/#current-transformation-matrix-computation This caused the submenu to fall into the |
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.