[DataGridPro] Improve compact density UI for header filters

[MBilalShafi]

Fixes #13048

The current UI of the inputs being used in filter input components doesn't leave much room for the label to be shown on the top, this PR hides the top label when density="compact"

Before Preview: https://stackblitz.com/edit/react-jre9au?file=Demo.tsx
After Preview: https://codesandbox.io/p/sandbox/vibrant-neumann-wnvjpx

[mui-bot]

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

Generated by 🚫 dangerJS against b22d23d

[KenanYusuf]

@MBilalShafi definitely an improvement over the current design, however, I worry that we're impacting usability by removing the label as there is no other way to tell which operator is selected without removing the value or opening the operator menu.

What do you think of modifying the control styles slightly so that they take up the whole column header cell? We could drop the font-size to 14px, and adjust the floating label position so that it's closer to the input value. Here's a quick mockup:

Let me know what you think.

[MBilalShafi]

@KenanYusuf Thank you for creating the mockup. So much crammed-up space previously didn't seem nice to me which is why I was inclined to remove the label altogether instead of reducing the font sizes. But in the mockup, it looks kinda decent. 👍

[arminmeh]

The position of the filter operator icon feels off.

With the default density it is aligned with the content and the input reset icon

For compact density it is centered

[MBilalShafi]

Thanks @arminmeh for pointing it out. We are having an active discussion around updating the header filters UI (around the text underline) and UX (around keyboard navigation), due to which the current PR is kind-of stale, I'll mark it as a Draft until then.

Feel free to check or jump into the conversation.