search

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.56k stars 1.33k forks source link

[data grid] Insufficient top padding in toolbarContainer Component When Displaying Filter Badge #15550

Closed michGreg closed 11 hours ago

michGreg commented 3 days ago

Steps to reproduce

Steps:

  1. Open this link to live example: https://mui.com/x/react-data-grid/filtering/
  2. Set any filter

image

Current behavior

No response

Expected behavior

Display the entire badge component in the default setting

Context

No response

Your environment

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: datagrid, toolbarContainer, toolbar, filter, badge

michelengelen commented 3 days ago

@KenanYusuf aren't you currently working on a toolbar rebrush?

For a workaround you can use this:

slotProps={{ baseBadge: { overlap: 'circular' } }}
KenanYusuf commented 3 days ago

Yes, this won't be a problem with the redesigned toolbar. I've created a PR #15556 which will allow you to override the props for the filter badge in the meantime.

github-actions[bot] commented 11 hours ago

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] @michGreg How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.