[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
• Component state documentation [DataGrid] New Toolbar component #14611 (comment)
• Update prop descriptions for extended Material UI components [DataGrid] New Toolbar component #14611 (comment)
• Use QuickFilter components in GridToolbarQuickFilter

[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 98dd066

[github-actions]

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

[cherniavskii]

Are these 2 snippets equal?

<ColumnsPanelTrigger render={<ToolbarButton />}>
  <ViewColumnIcon fontSize="small" />
</ColumnsPanelTrigger>

<ColumnsPanelTrigger render={<ToolbarButton><ViewColumnIcon fontSize="small" /></ToolbarButton>} />

[KenanYusuf]

They are, it comes down to preference. Do you think it's worth documenting this on the usage page?

[cherniavskii]

Yes, I think it's worth clarifying that children are automatically passed to the render element. Otherwise, it might be a bit "magical" for an average user 😅

[KenanYusuf]

Mentioned it here - let me know how that sounds.

[MBilalShafi]

If I understood correctly, it makes more sense to use render prop if there's a need to access props or state.

<ColumnsPanelTrigger render={(props) => <ToolbarButton {...props} />}>
  <ViewColumnIcon fontSize="small" />
</ColumnsPanelTrigger>

Is it possible to skip the render prop for simple use cases?

<ColumnsPanelTrigger>
  <ToolbarButton>
    <ViewColumnIcon fontSize="small" />
  </ToolbarButton>
</ColumnsPanelTrigger>

[KenanYusuf]

If I understood correctly, it makes more sense to use render prop if there's a need to access props or state.

That's a reason to pass a function to the render prop. The other case is to merge functionality and change the element rendered by a component.

Is it possible to skip the render prop for simple use cases?

In this example, no. The <ColumnsPanelTrigger /> and <ToolbarButton /> both render a <button />, so you would end up with this:

<button>
  <button>
     <svg />
  </button>
</button>

By using the render prop like: <ColumnsPanelTrigger render={<ToolbarButton />}><ViewColumnIcon /></ColumnsPanelTrigger>, the styled button element rendered by <ToolbarButton /> is the only element that gets rendered but with the merged attributes from both elements:

<button>
  <svg />
</button>

I will update the usage doc to try to explain this better.

[KenanYusuf]

I've made some updates to the Usage doc. Let me know if there's anything that could be clarified further.

[MBilalShafi]

Thanks for the clarification, I understand it's one DX vs the other.

The other case is to merge functionality and change the element rendered by a component.

Would doing something like the following here avoid creating the nested button elements while supporting the third case below: 🤔

const { children, ...rest } = props;
if (React.isValidElement(children)) {
  return React.cloneElement(children, rest);
}

My point was to skip the default <button /> element if there's no render prop and children are passed. In that case <ColumnsPanelTrigger /> would serve as a logic layer and the view layer would be delegated to the user.

So these would be the possible options for the users rendering the same output.

<ColumnsPanelTrigger render={<ToolbarButton />}>
  <ViewColumnIcon fontSize="small" />
</ColumnsPanelTrigger>

<ColumnsPanelTrigger render={<ToolbarButton><ViewColumnIcon fontSize="small" /></ToolbarButton>} />

<ColumnsPanelTrigger>
  <ToolbarButton>
    <ViewColumnIcon fontSize="small" />
  </ToolbarButton>
</ColumnsPanelTrigger>

I'm fine if we want to stick to the render prop only, it's just that "only with children" use-case could be really nice DX wise and pretty self-explanatory.
Consider this thread unblocking for the PR merge.

[KenanYusuf]

My point was to skip the default element if there's no render prop and children are passed

I agree it might be a nice DX and less verbose, however, with these components we are also trying to ensure that the rendered HTML is using the correct semantics and aria attributes. Users may want to use the <ColumnsPanelTrigger /> outside of the <Toolbar /> and drop the <ToolbarButton />:

<ColumnsPanelTrigger>
  <ViewColumnIcon fontSize="small" />
</ColumnsPanelTrigger>

If we were to use the third option you suggested, it would result in invalid HTML; an <svg /> gets rendered with a bunch of attributes intended for a button.

[MBilalShafi]

Fair enough, let's not risk semantic inconsistencies.

[arminmeh]

Besides the latest open points LGTM
Really like the demos in the docs 💯

[MBilalShafi]

If I understood correctly, it makes more sense to use render prop if there's a need to access props or state.

<ColumnsPanelTrigger render={(props) => <ToolbarButton {...props} />}>
  <ViewColumnIcon fontSize="small" />
</ColumnsPanelTrigger>

Is it possible to skip the render prop for simple use cases?

<ColumnsPanelTrigger>
  <ToolbarButton>
    <ViewColumnIcon fontSize="small" />
  </ToolbarButton>
</ColumnsPanelTrigger>