[DataGrid] Export ToolbarRoot - #23322
Draft
JCQuintas wants to merge 2 commits into
Draft
Conversation
Allows reusing the toolbar styles outside of the toolbar, for example in the header of a drawer displayed alongside the Data Grid. Closes mui#23314
The toolbar styles referenced the Data Grid CSS variables directly, which are only defined on the Data Grid root element. Rendered anywhere else, ToolbarRoot lost its padding, gap and bottom border. Declare those references with a fallback resolved from the theme, so the component can be used standalone while still preferring the variables when they are defined. Replaces the drawer demo with a simpler one that no longer needs GridPortalWrapper.
JCQuintas
added
type: enhancement
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #23314
ToolbarRoot, the styled<div />rendered by<Toolbar />, was module-private, so there was no way to reuse the toolbar styles elsewhere without copy-pasting them and keeping them in sync by hand.Export
ToolbarRootis now exported from@mui/x-data-grid(and, through the usual re-export, from the Pro and Premium packages).Making it usable outside of the Data Grid
Exporting it alone was not enough. The styles reference the
--DataGrid-t-*CSS variables, which are only defined on the Data Grid root element, so aToolbarRootrendered anywhere else lost its padding, gap and bottom border.The two variables it uses are now declared with a fallback resolved from the theme:
Inside a Data Grid the variables are defined and win, so nothing changes. Outside, the theme values are used and the element matches the real toolbar.
getBorderColorwas already there and is now exported;getSpacingUnitis the expression that was already inline intransformTheme, extracted so both call sites stay in sync.Docs
New "Reusing the toolbar styles" section on the Toolbar page, with a demo using
<ToolbarRoot />as the header of a card containing a Data Grid.Notes for reviewers
Toolbar.tsxnow imports frommaterial/variables. It is the first component in the generic layer to depend on the Material adapter, so a standaloneToolbarRootfalls back to the Material theme rather than to a customuseCSSVariablesadapter. Happy to move the indirection if you would rather keep that boundary clean.ToolbarRootdeliberately does not provide the toolbar context, soToolbarButtonand the other subcomponents cannot be used inside it. This is documented.