[DataGrid] Wrap toolbar buttons with tooltip

[MBilalShafi]

Closes #10409
Closes #11413

Changelog

Breaking changes

• The buttons in toolbar composable components GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensity, and GridToolbarExport are now wrapped with a tooltip component and have a consistent interface. To override some props corresponding to the toolbar buttons or their corresponding tooltips, you can use the slotProps prop. Following is an example diff. See Toolbar section for more details.

 function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton
-       title="Custom filter" // 🛑 This was previously forwarded to the tooltip component
+       slotProps={{ tooltip: { title: 'Custom filter' } }} // ✅ This is the correct way now
      />
      <GridToolbarDensitySelector
-       variant="outlined"    // 🛑 This was previously forwarded to the button component
+       slotProps={{ button: { variant: 'outlined' } }} // ✅ This is the correct way now
      />
    </GridToolbarContainer>
  );
 }

[mui-bot]

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

Updated pages:

• docs/data/data-grid/components/components.md
• docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md

Generated by 🚫 dangerJS against 484ef22