FluentUI like slots and shorthand props

[iammathew]

Hey!

Mantine already provides lots of customization options (Thanks!), but fails to provide them in a consistent fashion.

Examples:

• Button does not allow passing a custom loader component, but allows passing custom loader props
• Notification also uses the loader component but does not allow a custom loader component or custom loader props
• Notification and Alert, contain both a close button but don't allow a custom component, and props are called differently each time
• Select and similar input components, allow custom item components, but don't allow custom divider props or component

This will inevitably lead to many requests for adding different customization options down the line.

In order to mitigate these issues, one could introduce a system similar to the slot and shorthand prop system used by FluentUI Northstar. The benefits of this system are that it keeps the props for most cases quite short (when using default components), but at the same time allows passing custom components, when necessary, or even introducing extra functionality like tooltips using the render props API. It does so in a consistent fashion across the whole UI library.

Link to Concept Introduction: https://fluentsite.z22.web.core.windows.net/0.61.0/shorthand-props

I'm aware this would be a big breaking change, but I believe it can be setting up this library on the road to success!
This is meant as a source of inspiration on how to tackle this problem, and to open up the discussion on how to solve these problems going forward.

[rtivital]

Thanks for feedback, we will consider this option