[docs] Add the slots concept introduction page
#13881
Conversation
|
Deploy preview: https://deploy-preview-13881--material-ui-x.netlify.app/ Updated pages: |
| ## Slot props | ||
|
|
||
| To override default props or pass custom props to slot components, use the `slotProps` prop. | ||
| ## Custom slot props with TypeScript |
There was a problem hiding this comment.
I kept the module augmentation doc here for now because only the grid has it so it felt weird to movie it fully to the shared page.
| @@ -21,6 +20,13 @@ const pages: MuiPage[] = [ | |||
| { pathname: `/x/introduction/roadmap` }, | |||
| ], | |||
| }, | |||
| { | |||
| pathname: '/x/common-features-group', | |||
There was a problem hiding this comment.
Do we have other pages to move here?
It felt weird to me to put this in "Introduction", which is why I chose to create a new folder
There was a problem hiding this comment.
Maybe the loacalization. Even if it's not yet supported for chart
There was a problem hiding this comment.
Might make sense at some point indeed
I was thinking about existing pages, but for new pages it's definitely a good candidate once we have at least 3 sets of components supporting it.
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
slots concept introduction page
slots concept introduction pageslots concept introduction page
Co-authored-by: Lukas Tyla <[email protected]> Signed-off-by: Flavien DELANGLE <[email protected]>
Co-authored-by: Lukas Tyla <[email protected]> Signed-off-by: Flavien DELANGLE <[email protected]>
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
|
|
||
| <p class="description">Learn how to override parts of the MUI X components.</p> | ||
|
|
||
| ## What is a slot? |
There was a problem hiding this comment.
@flaviendelangle I think we could use a deeper explanation here. Have you seen this piece on overriding component structure from the Core docs? I really like the "mental model" section for explaining what a slot is. I think we could repurpose some of the content there and update it to make sense in the X context.
There was a problem hiding this comment.
Good idea
But some of the content there do not apply well for component of the size of the one in X.
For instance:
Slots are most commonly filled by HTML tags, but may also be filled by React components.
This is wrong for X, very few slots in X are filled by HTML tags.
The vast majority are filled by React components which have several HTML tags.
All components contain a root slot that defines their primary node in the DOM tree; more complex components also contain additional interior slots named after the elements they represent.
I think every single X component has internal slots.
And I'm not 100% sure that every single X component has a root slot (but they probably should).
I'll try to re-work the section to keep the good parts of the core doc without putting things that don't make sense for X.
There was a problem hiding this comment.
@samuelsycamore I expended a bit the "What is a slot" section.
I don't think there is a lot of info in the core section that are relevant here tbh.
d706fac
to
1be9063
Compare
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
Closes #13354
Doc preview
Todo
PropsFromSlotto charts and tree view