diff --git a/docs/data/data-grid/filtering/CustomFilterPanelContent.js b/docs/data/data-grid/filtering/CustomFilterPanelContent.js index 9174b2e52c0d7..590515f382b22 100644 --- 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 index 9174b2e52c0d7..590515f382b22 100644 --- 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 index 2c42eb0d955c6..d9e96fb0a9460 100644 --- 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(' - 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 index 5752ca1371cc7..86be6cf62453c 100644 --- 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(' - 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(' - 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(' - 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(' - 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 index 1509cae0844dc..7eef86a97dea5 100644 --- 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, )} > - - {apiRef.current.getLocaleText('filterPanelOperators')} - = { // 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 index 727724c729bd2..fdf38630a03ec 100644 --- 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 = { // 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 index 6d41999d8340d..151f579bf8980 100644 --- 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 = { // 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 index 81be9fe6feee5..1b4c6cbb3aa60 100644 --- 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 = { // 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 index 46c31892db51b..1f2e191f41bc9 100644 --- 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 = { // 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 index 9f1d315136556..a0e499c59b38c 100644 --- 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 = { // 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 index 88d6c460cbd22..cbd93e051e972 100644 --- 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 = { // 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 index 23e285c54822a..e1710a597851e 100644 --- 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 = { // 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 index 6fe5b63394f9f..05e4fe513964a 100644 --- 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 = { // 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 index fdf9e915d18bb..150271c74fd7d 100644 --- 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 = { // 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 index 7b3daf7e0bb30..3b8b8f97f9476 100644 --- 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 = { // 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 index 898f5b8a142dc..4d30f1619c5da 100644 --- 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 = { // 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 index f5018814bb0a7..1d01820b901c6 100644 --- 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 = { // 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 index c55be18d52a8d..98473e1390f0f 100644 --- 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 = { // 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 index dcea99aab2371..3386bef95f367 100644 --- 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 = { // 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 index 67105f7e149d2..62c63978406f0 100644 --- 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 = { // 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 index 89c34a921d0d5..3ef22153bd6c8 100644 --- 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 = { // 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 index 5eb01ca4744ec..a403c65edf965 100644 --- 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 = { // 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 index ae138ceed84c2..4ab24554cf5e9 100644 --- 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 = { // 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 index 346fe1f950964..9f32011273cf3 100644 --- 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 = { // 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 index e3b47878cb214..949bc75ae9b43 100644 --- 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 = { // 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 index 387c872b77d38..caa64cfe0fee3 100644 --- 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 = { // 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 index 77cc095bf77bf..355eff24d22ec 100644 --- 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 = { // 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/models/api/gridLocaleTextApi.ts b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts index a13c3c6ffe172..9c38763330018 100644 --- a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts +++ b/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; diff --git a/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx index 542e8f86bff4a..ba6c3fd363d5d 100644 --- a/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx +++ b/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(' - 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(' - 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(' - 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(' - 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', () => { diff --git a/scripts/performance.js b/scripts/performance.js index 4273453e12d3b..a4e9801861e5a 100644 --- a/scripts/performance.js +++ b/scripts/performance.js @@ -70,7 +70,7 @@ async function testFilter100kRows(page) { await page.goto(baseUrl); await page.selectOption('label=Columns', 'currencyPair'); - await page.selectOption('label=Operators >> nth=1', 'startsWith'); + await page.selectOption('label=Operator', 'startsWith'); const t0 = await page.evaluate(() => performance.now()); await page.type('label=Value', 'usd');