[DataGrid] Add specific label for linkOperator (#3915)

Co-authored-by: Matheus Wichman <[email protected]>
mui · Mar 2, 2022 · 995ea7d · 995ea7d
1 parent 91b975a
commit 995ea7d
Show file tree

Hide file tree

Showing 32 changed files with 102 additions and 31 deletions.
diff --git a/docs/data/data-grid/filtering/CustomFilterPanelContent.js b/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' },

diff --git a/docs/data/data-grid/filtering/CustomFilterPanelContent.tsx b/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' },

diff --git a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/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([]);

diff --git a/packages/grid/x-data-grid-pro/src/tests/rowGrouping.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowGrouping.DataGridPro.test.tsx
@@ -2063,7 +2063,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' }), {
@@ -2090,7 +2090,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' }), {
@@ -2183,7 +2183,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' }), {
@@ -2210,7 +2210,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' }), {

diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
@@ -78,7 +78,9 @@ const FilterFormLinkOperatorInput = styled(FormControl, {
   slot: 'FilterFormLinkOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormLinkOperatorInput,
 })({
-  minWidth: 60,
+  minWidth: 55,
+  marginRight: 5,
+  justifyContent: 'end',
 });
 
 const FilterFormColumnInput = styled(FormControl, {
@@ -135,8 +137,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();
@@ -295,7 +295,7 @@ function GridFilterForm(props: GridFilterFormProps) {
         {...baseFormControlProps}
         {...linkOperatorInputProps}
         sx={{
-          display: hasLinkOperatorColumn ? 'block' : 'none',
+          display: hasLinkOperatorColumn ? 'flex' : 'none',
           visibility: showMultiFilterOperators ? 'visible' : 'hidden',
           ...(baseFormControlProps.sx || {}),
           ...(linkOperatorInputProps.sx || {}),
@@ -306,12 +306,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}

diff --git a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts b/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', // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'And',
   filterPanelOperatorOr: 'Or',
   filterPanelColumns: 'Columns',

diff --git a/packages/grid/x-data-grid/src/locales/arSD.ts b/packages/grid/x-data-grid/src/locales/arSD.ts
@@ -43,7 +43,10 @@ const arSDGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'اضف فلتر',
   filterPanelDeleteIconLabel: 'حذف',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'العاملين',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'و',
   filterPanelOperatorOr: 'او',
   filterPanelColumns: 'الأعمدة',

diff --git a/packages/grid/x-data-grid/src/locales/bgBG.ts b/packages/grid/x-data-grid/src/locales/bgBG.ts
@@ -42,7 +42,10 @@ const bgBGGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Добави Филтър',
   filterPanelDeleteIconLabel: 'Изтрий',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Оператори',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'И',
   filterPanelOperatorOr: 'Или',
   filterPanelColumns: 'Колони',

diff --git a/packages/grid/x-data-grid/src/locales/csCZ.ts b/packages/grid/x-data-grid/src/locales/csCZ.ts
@@ -52,7 +52,10 @@ const csCZGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Přidat filtr',
   filterPanelDeleteIconLabel: 'Odstranit',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operátory',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'A',
   filterPanelOperatorOr: 'Nebo',
   filterPanelColumns: 'Sloupce',

diff --git a/packages/grid/x-data-grid/src/locales/daDK.ts b/packages/grid/x-data-grid/src/locales/daDK.ts
@@ -43,7 +43,10 @@ const daDKGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Tilføj filter',
   filterPanelDeleteIconLabel: 'Slet',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operatorer',
+
+  // TODO v6: rename to filterPanelOperator
   // filterPanelOperatorAnd: 'And',
   // filterPanelOperatorOr: 'Or',
   filterPanelColumns: 'Kolonne',

diff --git a/packages/grid/x-data-grid/src/locales/deDE.ts b/packages/grid/x-data-grid/src/locales/deDE.ts
@@ -43,7 +43,10 @@ const deDEGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Filter hinzufügen',
   filterPanelDeleteIconLabel: 'Löschen',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operatoren',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'Und',
   filterPanelOperatorOr: 'Oder',
   filterPanelColumns: 'Spalten',

diff --git a/packages/grid/x-data-grid/src/locales/elGR.ts b/packages/grid/x-data-grid/src/locales/elGR.ts
@@ -42,7 +42,10 @@ const elGRGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Προσθήκη φίλτρου',
   filterPanelDeleteIconLabel: 'Διαγραφή',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Τελεστές',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'Καί',
   filterPanelOperatorOr: 'Ή',
   filterPanelColumns: 'Στήλες',

diff --git a/packages/grid/x-data-grid/src/locales/esES.ts b/packages/grid/x-data-grid/src/locales/esES.ts
@@ -43,7 +43,10 @@ const esESGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Agregar filtro',
   filterPanelDeleteIconLabel: 'Borrar',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operadores',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'Y',
   filterPanelOperatorOr: 'O',
   filterPanelColumns: 'Columnas',

diff --git a/packages/grid/x-data-grid/src/locales/faIR.ts b/packages/grid/x-data-grid/src/locales/faIR.ts
@@ -43,7 +43,10 @@ const faIRGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'افزودن فیلتر',
   filterPanelDeleteIconLabel: 'حذف',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'عملگرها',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'و',
   filterPanelOperatorOr: 'یا',
   filterPanelColumns: 'ستون‌ها',

diff --git a/packages/grid/x-data-grid/src/locales/fiFI.ts b/packages/grid/x-data-grid/src/locales/fiFI.ts
@@ -43,7 +43,10 @@ const fiFIGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Lisää suodatin',
   filterPanelDeleteIconLabel: 'Poista',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operaattorit',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'Ja',
   filterPanelOperatorOr: 'Tai',
   filterPanelColumns: 'Sarakkeet',

diff --git a/packages/grid/x-data-grid/src/locales/frFR.ts b/packages/grid/x-data-grid/src/locales/frFR.ts
@@ -43,7 +43,10 @@ const frFRGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Ajouter un filtre',
   filterPanelDeleteIconLabel: 'Supprimer',
-  filterPanelOperators: 'Opérateurs',
+  filterPanelLinkOperator: 'Opérateur logique',
+  filterPanelOperators: 'Opérateur',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'Et',
   filterPanelOperatorOr: 'Ou',
   filterPanelColumns: 'Colonnes',

diff --git a/packages/grid/x-data-grid/src/locales/heIL.ts b/packages/grid/x-data-grid/src/locales/heIL.ts
@@ -43,7 +43,10 @@ const heILGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'הוסף מסנן',
   filterPanelDeleteIconLabel: 'מחק',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'אופרטור',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'וגם',
   filterPanelOperatorOr: 'או',
   filterPanelColumns: 'עמודות',

diff --git a/packages/grid/x-data-grid/src/locales/itIT.ts b/packages/grid/x-data-grid/src/locales/itIT.ts
@@ -43,7 +43,10 @@ const itITGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Aggiungi un filtro',
   filterPanelDeleteIconLabel: 'Rimuovi',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operatori',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'E (and)',
   filterPanelOperatorOr: 'O (or)',
   filterPanelColumns: 'Colonne',

diff --git a/packages/grid/x-data-grid/src/locales/jaJP.ts b/packages/grid/x-data-grid/src/locales/jaJP.ts
@@ -42,7 +42,10 @@ const jaJPGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'フィルター追加',
   filterPanelDeleteIconLabel: '削除',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'オペレータ',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'And',
   filterPanelOperatorOr: 'Or',
   filterPanelColumns: '列',

diff --git a/packages/grid/x-data-grid/src/locales/koKR.ts b/packages/grid/x-data-grid/src/locales/koKR.ts
@@ -42,7 +42,10 @@ const koKRGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: '필터 추가',
   filterPanelDeleteIconLabel: '삭제',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: '연산자',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: '그리고',
   filterPanelOperatorOr: '또는',
   filterPanelColumns: '목록',

diff --git a/packages/grid/x-data-grid/src/locales/nlNL.ts b/packages/grid/x-data-grid/src/locales/nlNL.ts
@@ -43,7 +43,10 @@ const nlNLGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Filter toevoegen',
   filterPanelDeleteIconLabel: 'Verwijderen',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operatoren',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'En',
   filterPanelOperatorOr: 'Of',
   filterPanelColumns: 'Kolommen',

diff --git a/packages/grid/x-data-grid/src/locales/plPL.ts b/packages/grid/x-data-grid/src/locales/plPL.ts
@@ -42,7 +42,10 @@ const plPLGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Dodaj filtr',
   filterPanelDeleteIconLabel: 'Usuń',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operator',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'I',
   filterPanelOperatorOr: 'Lub',
   filterPanelColumns: 'Kolumny',

diff --git a/packages/grid/x-data-grid/src/locales/ptBR.ts b/packages/grid/x-data-grid/src/locales/ptBR.ts
@@ -43,7 +43,10 @@ const ptBRGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Adicionar filtro',
   filterPanelDeleteIconLabel: 'Excluir',
-  filterPanelOperators: 'Operadores',
+  filterPanelLinkOperator: 'Operador lógico',
+  filterPanelOperators: 'Operador',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'E',
   filterPanelOperatorOr: 'Ou',
   filterPanelColumns: 'Colunas',

diff --git a/packages/grid/x-data-grid/src/locales/ruRU.ts b/packages/grid/x-data-grid/src/locales/ruRU.ts
@@ -53,7 +53,10 @@ const ruRUGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Добавить фильтр',
   filterPanelDeleteIconLabel: 'Удалить',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Операторы',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'И',
   filterPanelOperatorOr: 'Или',
   filterPanelColumns: 'Столбцы',

diff --git a/packages/grid/x-data-grid/src/locales/skSK.ts b/packages/grid/x-data-grid/src/locales/skSK.ts
@@ -52,7 +52,10 @@ const skSKGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Pridať filter',
   filterPanelDeleteIconLabel: 'Odstrániť',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operátory',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'A',
   filterPanelOperatorOr: 'Alebo',
   filterPanelColumns: 'Stĺpce',

diff --git a/packages/grid/x-data-grid/src/locales/trTR.ts b/packages/grid/x-data-grid/src/locales/trTR.ts
@@ -42,7 +42,10 @@ const trTRGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Filtre Ekle',
   filterPanelDeleteIconLabel: 'Kaldır',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Operatör',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'Ve',
   filterPanelOperatorOr: 'Veya',
   filterPanelColumns: 'Sütunlar',

diff --git a/packages/grid/x-data-grid/src/locales/ukUA.ts b/packages/grid/x-data-grid/src/locales/ukUA.ts
@@ -66,7 +66,10 @@ const ukUAGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Додати фільтр',
   filterPanelDeleteIconLabel: 'Видалити',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Оператори',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'І',
   filterPanelOperatorOr: 'Або',
   filterPanelColumns: 'Стовпці',

diff --git a/packages/grid/x-data-grid/src/locales/viVN.ts b/packages/grid/x-data-grid/src/locales/viVN.ts
@@ -43,7 +43,10 @@ const viVNGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: 'Thêm bộ lọc',
   filterPanelDeleteIconLabel: 'Xóa',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: 'Toán tử',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'Và',
   filterPanelOperatorOr: 'Hoặc',
   filterPanelColumns: 'Cột',

diff --git a/packages/grid/x-data-grid/src/locales/zhCN.ts b/packages/grid/x-data-grid/src/locales/zhCN.ts
@@ -42,7 +42,10 @@ const zhCNGrid: Partial<GridLocaleText> = {
   // Filter panel text
   filterPanelAddFilter: '添加筛选器',
   filterPanelDeleteIconLabel: '删除',
+  // filterPanelLinkOperator: 'Logic operator',
   filterPanelOperators: '操作器',
+
+  // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: '与',
   filterPanelOperatorOr: '或',
   filterPanelColumns: '列',