[DataGrid] GridFilterPanel UI Issue

[Hameezr]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Outlined variant doesn't work correctly.

While setting the variant of linkOperatorInputProps in FilterPanel, as outlined, the label cuts the outlined border.

Expected behavior 🤔

The variant outlined should not cut the border for the grid Filter Panel.

Steps to reproduce 🕹

Steps:

1. Override componentProps for filter Panel
2. Set variant as outlined for linkOperatorInputProps
3. The label will cut the border

componentsProps={{
filterPanel: {
              filterFormProps: {
                linkOperatorInputProps: {
                  variant: 'outlined',
                  size: 'small',
                  sx: {mt: 'auto'},
                },
              },
           }
     }}

https://codesandbox.io/s/customfilterpanelcontent-material-demo-forked-948jwd?file=/demo.js:1865-1887

Context 🔦

I am trying to keep my theme consistent and use outlined textfields all over my app.

Your environment 🌎

`npx @mui/envinfo`

System:
    OS: macOS 12.0.1
  Binaries:
    Node: 14.17.2 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 98.0.4758.109
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.1

Order ID 💳 (optional)

No response

[flaviendelangle]

@alexfauquette it is probably related to #3497

[Hameezr]

@alexfauquette it is probably related to #3497
A screenshot to elaborate the issue

[alexfauquette]

This should be solved with #3915 Notice that "Operators" is used twice. To be exact we should write "logic operator" on the left one which is more disturbing than helping.

So the PR is about hiding the label and using arial-label to keep accessibility.

@Hameezr Does it solves your problem?

[Hameezr]

Hiding the Label would do the trick! I was curious is there any way to change the icons in the filter panel as well? If not, maybe I can add a contribution for it!

Thank you for your timely response! @alexfauquette @flaviendelangle

[alexfauquette]

To update icons, you have the slot which allows overriding components (including icons)

See the doc about overriding icons

If you encounter bugs with icons overriding, please open another issue, such that we can keep this one only about filter panel labels