diff --git a/docs/data/data-grid/filtering/CustomFilterPanelContent.js b/docs/data/data-grid/filtering/CustomFilterPanelContent.js index c02188e5232db..657df392287ee 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 c02188e5232db..657df392287ee 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 c8e501ee260a9..c1841aaa779b1 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 6e3321246e62d..7f2cdf56984c0 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 @@ -1937,7 +1937,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' }), { @@ -1964,7 +1964,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' }), { @@ -2057,7 +2057,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' }), { @@ -2084,7 +2084,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 27650531cee6b..68afac83e4900 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 @@ -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, )} > - - {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 5a334e3a049e1..6affbf7157b83 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 dc85061b4409c..cc57eeca7c480 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 38e8d09d43742..921aeeabee8bb 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 770479aa8594a..48a2c0ab01f19 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 5ab3b698da4a3..1e25fa9926751 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 e8c7db7d42027..96af5b6360254 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 3abd8db1843fa..747d769a38541 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 635e7bd656e8d..cfd1c3346d4a3 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 2554c23ca3c96..816c208d5ee40 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 40cf9646fa934..47205da6d5fc4 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 cdca5a89fd99b..ad9bd70e56732 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 09577f70b6665..c757239baa6fd 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 ae57b062d6d50..2ecf9366085de 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 187ab61d76e3a..95c8a3835aa15 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 2fc3def3d1c9d..3dd56256cfc04 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 8648245888159..2f1f1dc88ae86 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 5f3284204ef0f..8e8ddc9eb42bc 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 294c402023ce1..058815d54a521 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 b9dc5a0b1ea38..b6c68a0aa21d1 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 52493042c8e3d..84185d7bd1b48 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 74be5896fb2c8..cf1ec0b421c18 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 17028fe1bc737..e4fb3766d0536 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');