-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe the loacalization. Even if it's not yet supported for chart
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. |
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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. |
7dbfb6d
to
4cba94a
Compare
Signed-off-by: Flavien DELANGLE <flaviendelangle@gmail.com> Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com> Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com>
Closes #13354
Doc preview
Todo
PropsFromSlot
to charts and tree view