mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.57k stars 1.34k forks source link

Datagrid toolbar inconsistent default icon size #10739

Closed brownp2k closed 1 year ago

brownp2k commented 1 year ago

Steps to reproduce

The issue is visible here (your own demo): https://codesandbox.io/s/wzl32v?file=/src/Demo.tsx

As well as here (your own custom toolbar demo with an extra MUI icon added): https://codesandbox.io/s/nostalgic-pascal-hqjd47?file=/src/Demo.tsx

There really aren't any steps to reproduce the issue.

The main difference is that the filter button supports a badge, which injects an extra span. It appears that all buttons seem to apply a font size to their first grandchild, which for all non-filter buttons ends up being the svg, but for the filter button it is the extra span.

Current behavior

The filter button/icon is 24x24 while the other icons are 18x18.

When using a custom toolbar that adds in other icons, those icons are 24x24. This leads to an inconsistent looking set of toolbar icons by default. The difference stands out even more when the toolbar labels are removed.

Expected behavior

The default toolbar buttons should all be the same size by default, which looks to be 24x24 since that is what new icons are added as with zero modifications (as shown in the second codesandbox link).

It feels like perhaps the font size "reduction" should be applied to the badge rather than the svg?

Context

The toolbar buttons, default and custom, should all have a consistent size by default.

Your environment

The environment is listed in the codesandbox links. This was tested with the latest versions of Chrome, Firefox and Edge.

Search keywords: toolbar icon size

cherniavskii commented 1 year ago

Thanks @brownp2k I've opened an issue in Material UI repo as it seems to be an issue in the @mui/material package 👍🏻