feat(menu): deprecate props.mode / always support full capabilities + icons

[janhassel]

Closes #18148, #15875, #17725
Related #18084, https://ibm-analytics.slack.com/archives/C0M053VPT/p1715933314490569

Deprecates props.mode for Menu and always support the full list of capabilities:

• Selectable items (single and multi select)
• Nested menus
• Icons

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

• Updated styles to support a status icon column in menu items
• Moved checkmark icon logic from MenuItemSelectable and MenuItemRadioGroup into MenuItem based on aria-checked

Removed

• Removed all usage of props.mode
• Removed mode logic from menu context
• Removed warnings for invalid mode and feature pairings

---

@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 for MenuItemRadioGroup as well but it's not compatible with the current structure. My long-term thought is to replace the props.items with something like a MenuItemRadioOption component that should be used as children of MenuItemRadioGroup. But that's probably better discussed in a separate issue.

---

Opening as draft as an issue occurs with the nested MenuButton. For some reason, the overflow-y: auto causes the nested menu to be clipped in MenuButton but not Menu. I'll need to investigate further.

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	8fc6180
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/67448ab435582900081c679f
😎 Deploy Preview	https://deploy-preview-18153--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	8fc6180
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67448ab435582900081c679d
😎 Deploy Preview	https://deploy-preview-18153--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	8fc6180
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/67448ab435582900081c6799
😎 Deploy Preview	https://deploy-preview-18153--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[janhassel]

@tay1orjones It seems that using transform on the root menu causes the child menu to base it's boundaries on the parent for some reason. I couldn't find any related spec detailing this and I haven't seen this before (I think).

As a test, I wrote a janky middleware for floating-ui that adds the intended transform to top and left and it resolves the problem. Do you have an idea how to proceed here?

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):