[DataGrid] Add specific label for linkOperator

docs/data/data-grid/filtering/CustomFilterPanelContent.js

@@ -55,6 +55,10 @@ export default function CustomFilterPanelContent() {
             columnsSort: 'asc',
             filterFormProps: {
               // Customize inputs by passing props
+              linkOperatorInputProps: {
+                variant: 'outlined',
+                size: 'small',
+              },
               columnInputProps: {
                 variant: 'outlined',
                 size: 'small',
@@ -65,9 +69,6 @@ export default function CustomFilterPanelContent() {
                 size: 'small',
                 sx: { mt: 'auto' },
               },
-              valueInputProps: {
-                required: true,
-              },
               deleteIconProps: {
                 sx: {
                   '& .MuiSvgIcon-root': { color: '#d32f2f' },

docs/data/data-grid/filtering/CustomFilterPanelContent.tsx

@@ -55,6 +55,10 @@ export default function CustomFilterPanelContent() {
             columnsSort: 'asc',
             filterFormProps: {
               // Customize inputs by passing props
+              linkOperatorInputProps: {
+                variant: 'outlined',
+                size: 'small',
+              },
               columnInputProps: {
                 variant: 'outlined',
                 size: 'small',
@@ -65,9 +69,6 @@ export default function CustomFilterPanelContent() {
                 size: 'small',
                 sx: { mt: 'auto' },
               },
-              valueInputProps: {
-                required: true,
-              },
               deleteIconProps: {
                 sx: {
                   '& .MuiSvgIcon-root': { color: '#d32f2f' },

packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx

@@ -211,7 +211,7 @@ describe('<DataGridPro /> - Filter', () => {
     expect(onFilterModelChange.callCount).to.equal(0);
     expect(getColumnValues()).to.deep.equal([]);
 
-    const select = screen.queryAllByRole('combobox', { name: /Operators/i })[1];
+    const select = screen.queryByRole('combobox', { name: 'Logic operator' });
     fireEvent.change(select, { target: { value: 'or' } });
     expect(onFilterModelChange.callCount).to.equal(1);
     expect(getColumnValues()).to.deep.equal([]);

packages/grid/x-data-grid-pro/src/tests/rowGrouping.DataGridPro.test.tsx

@@ -1937,7 +1937,7 @@ describe('<DataGridPro /> - Group Rows By Column', () => {
           />,
         );
 
-        fireEvent.change(screen.getByRole('combobox', { name: 'Operators' }), {
+        fireEvent.change(screen.getByRole('combobox', { name: 'Operator' }), {
           target: { value: '>' },
         });
         fireEvent.change(screen.getByRole('spinbutton', { name: 'Value' }), {
@@ -1964,7 +1964,7 @@ describe('<DataGridPro /> - Group Rows By Column', () => {
           />,
         );
 
-        fireEvent.change(screen.getByRole('combobox', { name: 'Operators' }), {
+        fireEvent.change(screen.getByRole('combobox', { name: 'Operator' }), {
           target: { value: '>' },
         });
         fireEvent.change(screen.getByRole('spinbutton', { name: 'Value' }), {
@@ -2057,7 +2057,7 @@ describe('<DataGridPro /> - Group Rows By Column', () => {
           />,
         );
 
-        fireEvent.change(screen.getByRole('combobox', { name: 'Operators' }), {
+        fireEvent.change(screen.getByRole('combobox', { name: 'Operator' }), {
           target: { value: '>' },
         });
         fireEvent.change(screen.getByRole('spinbutton', { name: 'Value' }), {
@@ -2084,7 +2084,7 @@ describe('<DataGridPro /> - Group Rows By Column', () => {
           />,
         );
 
-        fireEvent.change(screen.getByRole('combobox', { name: 'Operators' }), {
+        fireEvent.change(screen.getByRole('combobox', { name: 'Operator' }), {
           target: { value: '>' },
         });
         fireEvent.change(screen.getByRole('spinbutton', { name: 'Value' }), {

packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx

@@ -79,7 +79,9 @@ const FilterFormLinkOperatorInput = styled(FormControl, {
   slot: 'FilterFormLinkOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormLinkOperatorInput,
 })({
-  minWidth: 60,
+  minWidth: 55,
+  marginRight: 5,
+  justifyContent: 'end',
 });
 
 const FilterFormColumnInput = styled(FormControl, {
@@ -136,8 +138,6 @@ function GridFilterForm(props: GridFilterFormProps) {
   } = props;
   const apiRef = useGridApiContext();
   const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
-  const linkOperatorSelectId = useId();
-  const linkOperatorSelectLabelId = useId();
   const columnSelectId = useId();
   const columnSelectLabelId = useId();
   const operatorSelectId = useId();
@@ -296,7 +296,7 @@ function GridFilterForm(props: GridFilterFormProps) {
         {...baseFormControlProps}
         {...linkOperatorInputProps}
         sx={{
-          display: hasLinkOperatorColumn ? 'block' : 'none',
+          display: hasLinkOperatorColumn ? 'flex' : 'none',
           visibility: showMultiFilterOperators ? 'visible' : 'hidden',
           ...(baseFormControlProps.sx || {}),
           ...(linkOperatorInputProps.sx || {}),
@@ -307,12 +307,10 @@ function GridFilterForm(props: GridFilterFormProps) {
           linkOperatorInputProps.className,
         )}
       >
-        <InputLabel htmlFor={linkOperatorSelectId} id={linkOperatorSelectLabelId}>
-          {apiRef.current.getLocaleText('filterPanelOperators')}
-        </InputLabel>
         <rootProps.components.BaseSelect
-          labelId={linkOperatorSelectLabelId}
-          id={linkOperatorSelectId}
+          inputProps={{
+            'aria-label': apiRef.current.getLocaleText('filterPanelLinkOperator'),
+          }}
           value={multiFilterOperator}
           onChange={changeLinkOperator}
           disabled={!!disableMultiFilterOperator || linkOperators.length === 1}

packages/grid/x-data-grid/src/constants/localeTextConstants.ts

@@ -41,7 +41,8 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = {
   // Filter panel text
   filterPanelAddFilter: 'Add filter',
   filterPanelDeleteIconLabel: 'Delete',
-  filterPanelOperators: 'Operators',
+  filterPanelLinkOperator: 'Logic operator',
+  filterPanelOperators: 'Operator',
   filterPanelOperatorAnd: 'And',
   filterPanelOperatorOr: 'Or',
   filterPanelColumns: 'Columns',

packages/grid/x-data-grid/src/locales/arSD.ts

@@ -43,6 +43,7 @@ const arSDGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'اضف فلتر',
   filterPanelDeleteIconLabel: 'حذف',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'العاملين',
   filterPanelOperatorAnd: 'و',
   filterPanelOperatorOr: 'او',

packages/grid/x-data-grid/src/locales/bgBG.ts

@@ -42,6 +42,7 @@ const bgBGGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Добави Филтър',
   filterPanelDeleteIconLabel: 'Изтрий',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Оператори',
   filterPanelOperatorAnd: 'И',
   filterPanelOperatorOr: 'Или',

packages/grid/x-data-grid/src/locales/csCZ.ts

@@ -52,6 +52,7 @@ const csCZGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Přidat filtr',
   filterPanelDeleteIconLabel: 'Odstranit',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operátory',
   filterPanelOperatorAnd: 'A',
   filterPanelOperatorOr: 'Nebo',

packages/grid/x-data-grid/src/locales/daDK.ts

@@ -43,6 +43,7 @@ const daDKGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Tilføj filter',
   filterPanelDeleteIconLabel: 'Slet',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operatorer',
   // filterPanelOperatorAnd: 'And',
   // filterPanelOperatorOr: 'Or',

packages/grid/x-data-grid/src/locales/deDE.ts

@@ -43,6 +43,7 @@ const deDEGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Filter hinzufügen',
   filterPanelDeleteIconLabel: 'Löschen',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operatoren',
   filterPanelOperatorAnd: 'Und',
   filterPanelOperatorOr: 'Oder',

packages/grid/x-data-grid/src/locales/elGR.ts

@@ -42,6 +42,7 @@ const elGRGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Προσθήκη φίλτρου',
   filterPanelDeleteIconLabel: 'Διαγραφή',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Τελεστές',
   filterPanelOperatorAnd: 'Καί',
   filterPanelOperatorOr: 'Ή',

packages/grid/x-data-grid/src/locales/esES.ts

@@ -43,6 +43,7 @@ const esESGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Agregar filtro',
   filterPanelDeleteIconLabel: 'Borrar',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operadores',
   filterPanelOperatorAnd: 'Y',
   filterPanelOperatorOr: 'O',

packages/grid/x-data-grid/src/locales/faIR.ts

@@ -43,6 +43,7 @@ const faIRGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'افزودن فیلتر',
   filterPanelDeleteIconLabel: 'حذف',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'عملگرها',
   filterPanelOperatorAnd: 'و',
   filterPanelOperatorOr: 'یا',

packages/grid/x-data-grid/src/locales/fiFI.ts

@@ -43,6 +43,7 @@ const fiFIGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Lisää suodatin',
   filterPanelDeleteIconLabel: 'Poista',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operaattorit',
   filterPanelOperatorAnd: 'Ja',
   filterPanelOperatorOr: 'Tai',

packages/grid/x-data-grid/src/locales/frFR.ts

@@ -43,7 +43,8 @@ const frFRGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Ajouter un filtre',
   filterPanelDeleteIconLabel: 'Supprimer',
-  filterPanelOperators: 'Opérateurs',
+  filterPanelLinkOperator: 'Opérateur logique',
+  filterPanelOperators: 'Opérateur',
   filterPanelOperatorAnd: 'Et',
   filterPanelOperatorOr: 'Ou',
   filterPanelColumns: 'Colonnes',

packages/grid/x-data-grid/src/locales/heIL.ts

@@ -43,6 +43,7 @@ const heILGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'הוסף מסנן',
   filterPanelDeleteIconLabel: 'מחק',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'אופרטור',
   filterPanelOperatorAnd: 'וגם',
   filterPanelOperatorOr: 'או',

packages/grid/x-data-grid/src/locales/itIT.ts

@@ -43,6 +43,7 @@ const itITGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Aggiungi un filtro',
   filterPanelDeleteIconLabel: 'Rimuovi',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operatori',
   filterPanelOperatorAnd: 'E (and)',
   filterPanelOperatorOr: 'O (or)',

packages/grid/x-data-grid/src/locales/jaJP.ts

@@ -42,6 +42,7 @@ const jaJPGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'フィルター追加',
   filterPanelDeleteIconLabel: '削除',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'オペレータ',
   filterPanelOperatorAnd: 'And',
   filterPanelOperatorOr: 'Or',

packages/grid/x-data-grid/src/locales/koKR.ts

@@ -42,6 +42,7 @@ const koKRGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: '필터 추가',
   filterPanelDeleteIconLabel: '삭제',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: '연산자',
   filterPanelOperatorAnd: '그리고',
   filterPanelOperatorOr: '또는',

packages/grid/x-data-grid/src/locales/nlNL.ts

@@ -43,6 +43,7 @@ const nlNLGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Filter toevoegen',
   filterPanelDeleteIconLabel: 'Verwijderen',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operatoren',
   filterPanelOperatorAnd: 'En',
   filterPanelOperatorOr: 'Of',

packages/grid/x-data-grid/src/locales/plPL.ts

@@ -42,6 +42,7 @@ const plPLGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Dodaj filtr',
   filterPanelDeleteIconLabel: 'Usuń',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operator',
   filterPanelOperatorAnd: 'I',
   filterPanelOperatorOr: 'Lub',

packages/grid/x-data-grid/src/locales/ptBR.ts

@@ -43,6 +43,7 @@ const ptBRGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Adicionar filtro',
   filterPanelDeleteIconLabel: 'Excluir',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operadores',
   filterPanelOperatorAnd: 'E',
   filterPanelOperatorOr: 'Ou',

packages/grid/x-data-grid/src/locales/ruRU.ts

@@ -53,6 +53,7 @@ const ruRUGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Добавить фильтр',
   filterPanelDeleteIconLabel: 'Удалить',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Операторы',
   filterPanelOperatorAnd: 'И',
   filterPanelOperatorOr: 'Или',

packages/grid/x-data-grid/src/locales/skSK.ts

@@ -52,6 +52,7 @@ const skSKGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Pridať filter',
   filterPanelDeleteIconLabel: 'Odstrániť',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operátory',
   filterPanelOperatorAnd: 'A',
   filterPanelOperatorOr: 'Alebo',

packages/grid/x-data-grid/src/locales/trTR.ts

@@ -42,6 +42,7 @@ const trTRGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Filtre Ekle',
   filterPanelDeleteIconLabel: 'Kaldır',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operatör',
   filterPanelOperatorAnd: 'Ve',
   filterPanelOperatorOr: 'Veya',

packages/grid/x-data-grid/src/locales/ukUA.ts

@@ -66,6 +66,7 @@ const ukUAGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Додати фільтр',
   filterPanelDeleteIconLabel: 'Видалити',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Оператори',
   filterPanelOperatorAnd: 'І',
   filterPanelOperatorOr: 'Або',

packages/grid/x-data-grid/src/locales/viVN.ts

@@ -43,6 +43,7 @@ const viVNGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Thêm bộ lọc',
   filterPanelDeleteIconLabel: 'Xóa',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Toán tử',
   filterPanelOperatorAnd: 'Và',
   filterPanelOperatorOr: 'Hoặc',

packages/grid/x-data-grid/src/locales/zhCN.ts

@@ -42,6 +42,7 @@ const zhCNGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: '添加筛选器',
   filterPanelDeleteIconLabel: '删除',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: '操作器',
   filterPanelOperatorAnd: '与',
   filterPanelOperatorOr: '或',

packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts

@@ -43,6 +43,7 @@ export interface GridLocaleText {
   // Filter panel text
   filterPanelAddFilter: React.ReactNode;
   filterPanelDeleteIconLabel: string;
+  filterPanelLinkOperator: string;
   filterPanelOperators: React.ReactNode;
   filterPanelOperatorAnd: React.ReactNode;
   filterPanelOperatorOr: React.ReactNode;

packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx

@@ -18,7 +18,7 @@ function setColumnValue(columnValue: string) {
 }
 
 function setOperatorValue(operatorValue: string) {
-  fireEvent.change(screen.getByRole('combobox', { name: 'Operators' }), {
+  fireEvent.change(screen.getByRole('combobox', { name: 'Operator' }), {
     target: { value: operatorValue },
   });
 }
@@ -174,13 +174,13 @@ describe('<DataGrid /> - Filter panel', () => {
       />,
     );
     expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal('Puma');
-    expect(screen.getByRole('combobox', { name: 'Operators' }).value).to.equal('equals');
+    expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal('equals');
     expect(getColumnValues(0)).to.deep.equal(['Puma']);
 
     setColumnValue('slogan');
 
     expect(getColumnValues(0)).to.deep.equal([]);
-    expect(screen.getByRole('combobox', { name: 'Operators' }).value).to.equal('equals');
+    expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal('equals');
     expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal('Puma');
   });
 
@@ -207,13 +207,13 @@ describe('<DataGrid /> - Filter panel', () => {
       />,
     );
     expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal('Pu');
-    expect(screen.getByRole('combobox', { name: 'Operators' }).value).to.equal('contains');
+    expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal('contains');
     expect(getColumnValues(0)).to.deep.equal(['Puma']);
 
     setColumnValue('slogan');
 
     expect(getColumnValues(0)).to.deep.equal([]);
-    expect(screen.getByRole('combobox', { name: 'Operators' }).value).to.equal('from');
+    expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal('from');
     expect(screen.getByTestId('customInput').value).to.equal('');
   });
 
@@ -243,7 +243,7 @@ describe('<DataGrid /> - Filter panel', () => {
       />,
     );
     expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal('Pu');
-    expect(screen.getByRole('combobox', { name: 'Operators' }).value).to.equal('contains');
+    expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal('contains');
     expect(getColumnValues(0)).to.deep.equal(['Puma']);
 
     expect(onFilterModelChange.callCount).to.equal(0);
@@ -253,7 +253,7 @@ describe('<DataGrid /> - Filter panel', () => {
     expect(onFilterModelChange.callCount).to.equal(1);
     expect(onFilterModelChange.lastCall.args[0].items[0].value).to.equal(undefined);
 
-    expect(screen.getByRole('combobox', { name: 'Operators' }).value).to.equal('isEmpty');
+    expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal('isEmpty');
   });
 
   it('should reset filter value if not available in the new valueOptions', () => {