Skip to content
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

[core] Add toolbarActions and toolbarAccount slots to DashboardLayout #3984

Merged
merged 13 commits into from
Aug 29, 2024

Conversation

apedroferreira
Copy link
Member

@apedroferreira apedroferreira commented Aug 22, 2024

Closes #3983

Adds 2 new slots to the DashboardLayout component:

  • toolbarActions: for customizing toolbar actions to the left of the theme switcher;
  • toolbarAccount: to be able to replace/customize the Account component to the right of the theme switcher.

Tried to follow how some other MUI libraries do things and the slots we already have in the SignInPage component.

Also adds a "Slots" section in the API docs pages for DashboardLayout and SignInPage by exporting Slots type interfaces in the respective components (they just needed to be named DashboardLayoutSlots, for example, to work automatically).

The docs for DashboardLayout now include a simple example of how to add a search bar to the toolbar actions.

https://deploy-preview-3984--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout/
https://deploy-preview-3984--mui-toolpad-docs.netlify.app/toolpad/core/api/dashboard-layout/
https://deploy-preview-3984--mui-toolpad-docs.netlify.app/toolpad/core/api/sign-in-page/

@apedroferreira apedroferreira added the feature: Components Button, input, table, etc. label Aug 22, 2024
@apedroferreira apedroferreira self-assigned this Aug 22, 2024
@apedroferreira apedroferreira marked this pull request as ready for review August 23, 2024 16:28
@apedroferreira apedroferreira requested a review from a team August 23, 2024 16:31
Copy link
Member

@bharatkashyap bharatkashyap left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! I thought it would improve the feature if we added a section in the DashboardLayout docs page with an example on how to use this prop with a custom component - what do you think?

Not a blocker and can be done in a follow up

@apedroferreira
Copy link
Member Author

Looks good! I thought it would improve the feature if we added a section in the DashboardLayout docs page with an example on how to use this prop with a custom component - what do you think?

Not a blocker and can be done in a follow up

I took a look at the MUI X docs and I think they usually cover this kind of things just with the API reference pages.
Not sure if showing demos for every single feature like this isn't overkill as opposed to just the most common use cases - could be something up for discussion.

@Janpot
Copy link
Member

Janpot commented Aug 26, 2024

I took a look at the MUI X docs and I think they usually cover this kind of things just with the API reference pages.
Not sure if showing demos for every single feature like this isn't overkill as opposed to just the most common use cases - could be something up for discussion.

I believe the components pages are also about guiding people towards the right solution for their problem, rather than only demoing our features. If there's a specific use-case that is well solved by this slot then it would make sense to show that as a demo.

@apedroferreira

This comment was marked as resolved.

@apedroferreira apedroferreira changed the title [core] Add toolbarActions slot to DashboardLayout [core] Add toolbarActions and toolbarAccount slots to DashboardLayout Aug 27, 2024
@apedroferreira
Copy link
Member Author

apedroferreira commented Aug 27, 2024

Ended up adding 2 new separate slots actually: toolbarActions and toolbarAccount, as these are visually separated by the theme switcher and anyway logically it seems to make sense.

/**
* @ignore - internal component.
*/
function ToolbarActions() {
Copy link
Member Author

@apedroferreira apedroferreira Aug 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Placeholder component for later, but could just be null directly too.

@apedroferreira
Copy link
Member Author

Gonna merge this one, lmk if you have any further feedback!

@apedroferreira apedroferreira merged commit d1838c4 into mui:master Aug 29, 2024
14 checks passed
@apedroferreira apedroferreira deleted the add-toolpad-actions-slot branch August 29, 2024 15:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature: Components Button, input, table, etc.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DashboardLayout slot for Toolbar/Actions area
3 participants