[DataGrid] Use new toolbar by default

[KenanYusuf]

Part of #15823

• Adds a new GridToolbar component for internal use only
• Update the GridToolbarQuickFilter component to use the new QuickFilter components
• Update the docs to use the new toolbar everywhere

Follow-up

• showQuickFilter is now true by default—we can remove where this is set explicitly in demos
• Use toolbar on other demos with buttons to interact with grid [DataGrid] Use new toolbar by default #16814 (comment)

Changelog

Breaking changes

• The density selector has been removed from the toolbar. It is still possible to set the density programmatically via the density prop. A density selector can be added to a custom toolbar passed to slots.toolbar. See Toolbar component—Settings menu for an example.
• The quick filter is now shown in the toolbar by default. Use slotProps={{ toolbar: { showQuickFilter: false } }} to hide it.
• The <GridSaveAltIcon /> icon is not exported anymore. Import SaveAlt from @mui/icons-material instead.

[mui-bot]

Deploy preview: https://deploy-preview-16814--material-ui-x.netlify.app/

Updated pages:

• docs/data/data-grid/accessibility/accessibility.md
• docs/data/data-grid/components/components.md
• docs/data/data-grid/export/export.md
• docs/data/data-grid/filtering/quick-filter.md
• docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md

Generated by 🚫 dangerJS against 20dfe8a

[KenanYusuf]

Don't think it makes sense to list a default component if it's only available internally

[joserodolfofreitas]

Breaking changes

• The density selector has been removed from the toolbar. It is still possible to set the density programmatically via the density prop. A density selector can be added to a custom toolbar passed to slots.toolbar. See Toolbar component—Settings menu for an example.
• The quick filter is now shown in the toolbar by default. Use slotProps={{ toolbar: { showQuickFilter: false } }} to hide it.

Love the new defaults.

• The <GridSaveAltIcon /> icon is not exported anymore.

I wonder if we must stop exporting GridSaveAltIcon, since I suppose we should still support the old custom toolbars?

[KenanYusuf]

I wonder if we must stop exporting GridSaveAltIcon, since I suppose we should still support the old custom toolbars?

This one is mainly a design decision because I don't think that icon fits with the other, much heavier, icons used in the toolbar.

Users using the old <GridToolbarExport /> component will get the updated icon without having to change anything. Users who were importing the GridSaveAltIcon icon directly can still import it from @mui/icons-material if they want to restore it—I will update the migration guide to suggest this.

[arminmeh]

Update to the examples show how things are getting simpler for the end users 🙂

I found a small issue on some examples. Clicking on the toolbar button changes the scroll position

First demo on this page
https://deploy-preview-16814--material-ui-x.netlify.app/x/react-data-grid/filtering/

or this demo
https://deploy-preview-16814--material-ui-x.netlify.app/x/react-data-grid/filtering/multi-filters/#disable-action-buttons

[KenanYusuf]

Update to the examples show how things are getting simpler for the end users 🙂

I found a small issue on some examples. Clicking on the toolbar button changes the scroll position

First demo on this page deploy-preview-16814--material-ui-x.netlify.app/x/react-data-grid/filtering

or this demo deploy-preview-16814--material-ui-x.netlify.app/x/react-data-grid/filtering/multi-filters#disable-action-buttons

@arminmeh I think this might be a bug with the focus trap used here: https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/material/index.tsx#L497-L506

I can replicate it on: https://next.mui.com/x/react-data-grid/filtering/multi-filters/#disable-action-buttons

[arminmeh]

@arminmeh I think this might be a bug with the focus trap used here: master/packages/x-data-grid/src/material/index.tsx#L497-L506

I can replicate it on: next.mui.com/x/react-data-grid/filtering/multi-filters#disable-action-buttons

OK. Then this can be fixed outside of the scope of this PR
Do we have issue for this already?

[KenanYusuf]

@arminmeh I think this might be a bug with the focus trap used here: master/packages/x-data-grid/src/material/index.tsx#L497-L506
I can replicate it on: next.mui.com/x/react-data-grid/filtering/multi-filters#disable-action-buttons

OK. Then this can be fixed outside of the scope of this PR Do we have issue for this already?

I haven't seen one specific to the data grid, just found these issues which seem to be related:

• [FocusTrap] Option to preventScroll when focusing material-ui#36508
• FocusTrap should not scroll the page material-ui#43299

[arminmeh]

There are a lot of other examples that are having custom buttons on top
Does it make sense to have a follow up to align all of those and put them in the toolbar, now that it can be easily customized

some examples
https://deploy-preview-16814--material-ui-x.netlify.app/x/react-data-grid/state/#direct-selector-access
https://deploy-preview-16814--material-ui-x.netlify.app/x/react-data-grid/state/#restore-the-state-with-initialstate (this one might even be updated now)
https://deploy-preview-16814--material-ui-x.netlify.app/x/react-data-grid/row-updates/#the-rows-prop