Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Header filter design improvements #15991

Open
wants to merge 11 commits into
base: master
Choose a base branch
from

Conversation

KenanYusuf
Copy link
Member

@KenanYusuf KenanYusuf commented Dec 23, 2024

Closes #15486

https://deploy-preview-15991--material-ui-x.netlify.app/x/react-data-grid/filtering/header-filters/

Changelog

Breaking changes

  • The clear button in header filter cells has moved to the header filter menu. Use slotProps={{ headerFilterCell: { showClearIcon: true } }} to restore the clear button in the cell.

@KenanYusuf KenanYusuf added breaking change component: data grid This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer v8.x labels Dec 23, 2024
@mui-bot
Copy link

mui-bot commented Dec 23, 2024

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 pnpm l10n
  • Clean files with pnpm prettier.

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

Generated by 🚫 dangerJS against 85c15f6

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 24, 2024
Copy link

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

(props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor,
const headerFilterHeight = Math.max(
Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor),
MIN_HEADER_FILTER_HEIGHT,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do we think about adding a minimum height for the header filter row? We need at minimum enough space for the inputs to not be clipped. Would fix #13048

Copy link
Member Author

@KenanYusuf KenanYusuf Dec 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(there's a broken test related to this, I'll fix if we want to move forward with this approach)

@KenanYusuf KenanYusuf marked this pull request as ready for review December 24, 2024 15:41
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 24, 2024
@KenanYusuf KenanYusuf requested a review from a team December 24, 2024 16:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change component: data grid This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer v8.x
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[data grid] Change default TextField variant
2 participants