search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.14k stars 32.35k forks source link

[RFC][material-ui][Alert] Revise `action`, `icon`, and `iconMappings` props #40680

Open DiegoAndai opened 10 months ago

DiegoAndai commented 10 months ago

What's the problem?

The action, icon, and iconMappings props could use a revision:

What are the requirements?

Revise the API, comparing with the rest of components, and deciding whether it's still the best option or if it needs an update.

What are our options?

Proposed solution

Implement something similar to Joy UI: deprecate and eventually remove action and icon in favor of startDecorator and endDecorator, each with a corresponding slot like Joy UI. The slots receive the ownerState so they can be used to replace iconMappings.

Resources and benchmarks

Search keywords:

oliviertassinari commented 10 months ago

A few notes:

  1. They don't have respective slots

Do they need a slot? Every time we can use a React element over a React component is a significantly better DX (more flexible), but it's not always possible.

  1. Seems arbitrary that icon is to the left and action to the right

Indeed, though it depends on what we optimize for. For example, icon / action is clearer than start / end if it's 80% of the use case.

  1. iconMapping might be better handled via slots

If I recall correctly, this prop is meant for theme customization (use with defaultProps), or through a wrapper to save boilerplate code. It was inspired by the variantMapping prop of the Typography (though there it's a component, not an element as object value).

DiegoAndai commented 10 months ago

@oliviertassinari I think we could optimize for the most common use case but be flexible:

We could keep icon/action as is and introduce leftDecorator and rightDecorator slots for anything beyond that use case. Using leftDecorator would override icon, for example.

Regarding iconMapping. I think using leftDecorator would be more flexible, and users could still provide it as defaultProps. Overall, I think promoting the slots pattern for all specialized use cases where possible would result in users getting familiar with it and incorporating it in their mental models, instead of having different mental models for each component. I would say: