MenuItem — composition over configuration

[melvin-bot]

Problem

The MenuItem component has ~130 props. We're actively decomposing large components like this, so it's a perfect candidate — e.g. 10+ icon-related props, plus tooltip logic, both extractable once it follows composition. It's the same compound pattern we already use for Button and Table.

Proposed Solution

Adopt a compound component pattern with a granular interface (flexibility for complicated cases) and a few presets covering the majority of the app.

Proposed API

<MenuItem.Root>
    <MenuItem.Label />
    <MenuItem.Row>
        <MenuItem.Icon />
        <MenuItem.Content>
            <MenuItem.Description />
            <MenuItem.Title />
        </MenuItem.Content>
        <MenuItem.Trailing>
            <MenuItem.Badge />
            <MenuItem.BrickRoadIndicator />
            <MenuItem.Chevron />
        </MenuItem.Trailing>
    </MenuItem.Row>
    <MenuItem.Error />
    <MenuItem.Hint />
</MenuItem.Root>

Presets

• Extract MenuItemStandard (name TBD)
• Update existing MenuItemWithTopDescription
• These two presets should cover 80%+ of use cases; the rest will get dedicated presets or use the refactored MenuItem directly

Backwards compatibility

• The existing <MenuItem title icon … /> API stays as-is — nothing breaks
• Migration is incremental by deprecating the old component

Benefits

• Stops new props being added every time a part of the item needs customising
• Reduces rerenders across the app
• Improves maintainability
• Removes dead features (e.g. shouldPutLeftPaddingWhenNoIcon)

Issue Owner

Current Issue Owner: @Pujan92

[melvin-bot]

This issue is not open for proposals — war-in will be working on it directly.

[war-in]

I'm diving into the MenuItem implementation to understand it in detail. I've already removed some dead code and unused props. The next step is to define subcomponents and create a dev gallery of all variants so the old and new versions can be easily compared.

[war-in]

I managed to cover most of the MenuItem variants; TODOs

• compact variant
• secondary icon fill

I also contacted Shawn to consult on some designs and got access to figma. Looks like the current MenuItem is not aligned with it, so I'll make sure the new version follows the designs properly.

The MenuItem comparison gallery looks promising and I expect the draft PR to be submitted later this week

[war-in]

I opened a draft PR for an internal review (SWM) and triggered a Codex review. I'll open the PR once it passes review from SWM team

[war-in]

FYI, I received a review from SWM team and now I'm going through it

[war-in]

I addressed most of the comments. Now the decomposition pattern is confirmed, and I'm working on splitting the PR into smaller parts. It should improve its readability, and we shouldn't introduce any unused props