[DataGrid] New column management panel design

[MBilalShafi]

Closes #8754

TODOs:

• Fix failing tests
• Fix broken demos
• Update migration guide and (or) documentation
• Add new tests
• Localize no columns UI

Changelog

Extract columns management component

The columns management component (previously part of Columns Panel) has now been extracted as a separate component and slot with its dedicated slotProps. The motivation behind the change is to allow it to be reused in the newly proposed pivoting design (on the right side of the grid, in its dedicated space)

Design changes

The design of the columns management component now uses the new checkboxes-based design rather than the previous toggle button-based design.

Component API

The component API is almost the same as that of Columns Panel, with a few exceptions like:

• Introduction of a new Reset button and its functionality, a new prop disableResetButton has been introduced.
• Show all and Hide all are combined into one Show/Hide All checkbox, related props are also updated.

Breaking changes

• The columns management component has been redesigned and the component is extracted from the ColumnsPanel which now only serves as a wrapper to display the component over the headers as a panel. As a result, a new slot columnsManagement, and corresponding prop slotProps.columnsManagement have been introduced. The props corresponding to the columns management component which were previously passed to the prop slotProps.columnsPanel should now be passed to slotProps.columnsManagement. slotProps.columnsPanel could still be used to override props corresponding to the Panel component used in ColumnsPanel which uses Popper component under the hood.

  <DataGrid
    slotProps={{
  -   columnsPanel: {
  +   columnsManagement: {
        sort: 'asc',
        autoFocusSearchField: false,
      },
    }}

• Show all and Hide all buttons in the ColumnsPanel have been combined into one Show/Hide All checkbox in the new columns management component. The related props disableShowAllButton and disableHideAllButton have been replaced with a new prop disableShowHideToggle.

[mui-bot]

Localization writing tips ✍️

Seems you are updating localization 🌍 files.

Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️

• Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

  [l10n] Improve Swedish (sv-SE) locale
  [l10n] Add Danish (da-DK) locale

• Update the documentation of supported locales by running yarn l10n
• Clean files with yarn prettier.

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

Updated pages:

• docs/data/data-grid/column-visibility/column-visibility.md
• docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md

Generated by 🚫 dangerJS against becff43

[joserodolfofreitas]

Great work, Bilal!