[DataGrid] New Toolbar component

[KenanYusuf]

Adds a redesigned Toolbar component through a new composition API, documented here:

• Data Grid - Components

There are several related components that users can use to build a custom toolbar:

• Toolbar
• Columns Panel Trigger
• Filter Panel Trigger
• Export
• Quick Filter

Note

This PR only adds the building blocks to create custom toolbars, and documentation for those components. I'm hoping we can release these in v7 for users to try out. There will be a follow up to update the default grid toolbar for v8 to use the new components. #15823

Closes #11584

---

Follow-up tasks:

• Explore having an "overflow menu" for items that do not fit on the toolbar
• Replace custom toolbar with the new experimental toolbar in the list view demo [DataGrid] List View #14393
• Add toolbar-specific background color theme override/css variable
• Anchor filter panel and columns panel to triggers
• Row grouping toolbar demo
• [data grid] Add indication (badge) to GridToolbarColumnsButton #8765

[mui-bot]

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

Updated pages:

• docs/data/data-grid/components/columns-panel/columns-panel.md
• docs/data/data-grid/components/export/export.md
• docs/data/data-grid/components/filter-panel/filter-panel.md
• docs/data/data-grid/components/quick-filter/quick-filter.md
• docs/data/data-grid/components/toolbar/toolbar.md

Generated by 🚫 dangerJS against 7380c84

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[mj12albert]

Interesting 🧐

In mui/base-ui#1349 the API is the opposite:

<Toolbar.Button render={<Select.Trigger />} />

(I stumbled onto this PR while searching for my own Toolbar doc in Notion 😅)

[KenanYusuf]

Does the inverse work, also?

Either is valid in our case, but the outcome is different due to our parts rendering different Material UI components:

<Toolbar.Root>
  <ColumnsPanel.Trigger render={<Toolbar.Button />}>
    <ViewColumnIcon fontSize="small" />
  </ColumnsPanel.Trigger>

  <Toolbar.Button
    render={
      <ColumnsPanel.Trigger startIcon={<ViewColumnIcon fontSize="small" />}>
        Columns
      </ColumnsPanel.Trigger>
    }
  />
</Toolbar.Root>

Toolbar.Button renders an IconButton, and ColumnsPanel.Trigger renders a Button.

[mj12albert]

This turned out to be complicated, in my case Toolbar.Button has to come first so the focusableWhenDisabled prop/ability it provides can override the default "not focusable when disabled" of the inner Trigger/button-like thing it's rendering

I think toolbar is the first component where we really render a Base UI component as another Base UI component a lot, before we just focused on <BaseUIComponent render={<MyDesignSystemComponent />} />

Now toolbar opens up possibilities like this 😅

<Tooltip.Trigger
  render={
    <Toolbar.Button
      render={
        <Select.Trigger
          render={
            <Toggle render={<MyDesignSystemToggle />} />
          }
        />
      }
    />
  }
/>

[romgrk]

Would it make sense to use the header background color for the toolbar as well?

[KenanYusuf]

Added a follow-up action for this, I would like to add a toolbar-specific override.

[romgrk]

Does not look good on dark theme. Dark theme often receives less love :/

[KenanYusuf]

Good spot—I've fixed the button styles, and the light toolbars will be fixed by mui/material-ui#45406

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[mapache-salvaje]

this is mostly repetitive and minor style stuff—the bulk of the content is in great shape.

[mapache-salvaje]

solid example of the component case in action - this text could be harder to understand if it was plain text 👍

[mapache-salvaje]

Suggested change

	"description": "If <code>true</code>, the keyboard focus ripple is disabled."
	"description": "If <code>true</code>, the keyboard focus ripple is disabled."

[mapache-salvaje]

Suggested change

	"description": "Callback fired when the component is focused with a keyboard. We trigger a <code>onFocus</code> callback too."
	"description": "Callback fired when the component is focused with a keyboard. Also triggers an <code>onFocus</code> callback."

[mapache-salvaje]

Suggested change

	"description": "The system prop that allows defining system overrides as well as additional CSS styles."
	"description": "The system prop for defining system overrides and additional CSS styles."

[mapache-salvaje]

Suggested change

	"description": "Callback fired when the component is focused with a keyboard. We trigger a <code>onFocus</code> callback too."
	"description": "Callback fired when the component is focused with a keyboard. Also triggers an <code>onFocus</code> callback."