[DataGrid] Remove old string class constants (#2788)

mui · Oct 12, 2021 · 8f9fcc5 · 8f9fcc5
1 parent 4db8ce3
commit 8f9fcc5
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 47 deletions.
diff --git a/packages/grid/_modules_/grid/constants/cssClassesConstants.ts b/packages/grid/_modules_/grid/constants/cssClassesConstants.ts
diff --git a/packages/grid/_modules_/grid/constants/index.ts b/packages/grid/_modules_/grid/constants/index.ts
@@ -1,4 +1,3 @@
 export * from './envConstants';
 export * from './eventsConstants';
-export * from './cssClassesConstants';
 export * from './localeTextConstants';
diff --git a/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx
@@ -9,10 +9,7 @@ import {
   waitFor,
 } from 'test/utils';
 import { expect } from 'chai';
-import {
-  GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS,
-  DataGridPro,
-} from '@mui/x-data-grid-pro';
+import { gridClasses, DataGridPro } from '@mui/x-data-grid-pro';
 import { getColumnHeaderCell } from 'test/utils/helperFn';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
@@ -108,7 +105,7 @@ describe('<DataGridPro /> - Column Headers', () => {
       await waitFor(() => expect(screen.queryByRole('menu')).not.to.equal(null));
 
       const separator = columnToResizeCell.querySelector(
-        `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`,
+        `.${gridClasses['columnSeparator--resizable']}`,
       );
       fireEvent.mouseDown(separator);
       await waitFor(() => expect(screen.queryByRole('menu')).to.equal(null));

diff --git a/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx
@@ -15,7 +15,7 @@ import {
   GridComponentProps,
   useGridApiRef,
   DataGridPro,
-  GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS,
+  gridClasses,
 } from '@mui/x-data-grid-pro';
 import { getColumnHeaderCell, getCell } from 'test/utils/helperFn';
 
@@ -101,9 +101,7 @@ describe('<DataGridPro /> - Columns', () => {
 
     it('should allow to resize columns with the mouse', () => {
       render(<Test columns={columns} />);
-      const separator = document.querySelector(
-        `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`,
-      );
+      const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`);
       fireEvent.mouseDown(separator, { clientX: 100 });
       fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 });
       fireEvent.mouseUp(separator);
@@ -119,9 +117,7 @@ describe('<DataGridPro /> - Columns', () => {
         this.skip();
       }
       render(<Test columns={columns} />);
-      const separator = document.querySelector(
-        `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`,
-      )!;
+      const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
       const now = Date.now();
       fireEvent.touchStart(separator, {
         changedTouches: [new Touch({ identifier: now, target: separator, clientX: 100 })],
@@ -141,9 +137,7 @@ describe('<DataGridPro /> - Columns', () => {
     it('should call onColumnResize during resizing', () => {
       const onColumnResize = spy();
       render(<Test onColumnResize={onColumnResize} columns={columns} />);
-      const separator = document.querySelector(
-        `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`,
-      );
+      const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`);
       fireEvent.mouseDown(separator, { clientX: 100 });
       fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 });
       fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 });
@@ -156,9 +150,7 @@ describe('<DataGridPro /> - Columns', () => {
     it('should call onColumnWidthChange after resizing', () => {
       const onColumnWidthChange = spy();
       render(<Test onColumnWidthChange={onColumnWidthChange} columns={columns} />);
-      const separator = document.querySelector(
-        `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`,
-      );
+      const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`);
       fireEvent.mouseDown(separator, { clientX: 100 });
       fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 });
       fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 });
@@ -212,7 +204,7 @@ describe('<DataGridPro /> - Columns', () => {
         expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' });
 
         const separator = getColumnHeaderCell(1).querySelector(
-          `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`,
+          `.${gridClasses['columnSeparator--resizable']}`,
         );
 
         fireEvent.mouseDown(separator, { clientX: 100 });
@@ -260,7 +252,7 @@ describe('<DataGridPro /> - Columns', () => {
         expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' });
 
         const separator = getColumnHeaderCell(1).querySelector(
-          `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`,
+          `.${gridClasses['columnSeparator--resizable']}`,
         );
 
         fireEvent.mouseDown(separator, { clientX: 100 });
@@ -308,7 +300,7 @@ describe('<DataGridPro /> - Columns', () => {
         expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' });
 
         const separator = getColumnHeaderCell(1).querySelector(
-          `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`,
+          `.${gridClasses['columnSeparator--resizable']}`,
         );
 
         fireEvent.mouseDown(separator, { clientX: 100 });
@@ -333,7 +325,7 @@ describe('<DataGridPro /> - Columns', () => {
         expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' });
 
         const separator = getColumnHeaderCell(0).querySelector(
-          `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`,
+          `.${gridClasses['columnSeparator--resizable']}`,
         );
 
         fireEvent.mouseDown(separator, { clientX: 200 });

diff --git a/packages/grid/x-grid/src/tests/events.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/events.DataGridPro.test.tsx
@@ -19,8 +19,8 @@ import {
   GridRowsProp,
   GridColumns,
   GridEvents,
-  GRID_CELL_CSS_CLASS,
   GridApiRef,
+  gridClasses,
 } from '@mui/x-data-grid-pro';
 import { getCell, getColumnHeaderCell, getRow } from 'test/utils/helperFn';
 import { spy } from 'sinon';
@@ -237,7 +237,7 @@ describe('<DataGridPro /> - Events Params', () => {
       const cell = getCell(1, 1);
       fireEvent.doubleClick(cell);
       expect(handleCellDoubleClick.callCount).to.equal(1);
-      expect(cell).not.to.have.class(`${GRID_CELL_CSS_CLASS}--editing`);
+      expect(cell).not.to.have.class(gridClasses['row--editing']);
     });
 
     it('should allow to prevent the default behavior while allowing the event to propagate', () => {

diff --git a/packages/grid/x-grid/src/tests/reorder.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/reorder.DataGridPro.test.tsx
@@ -15,12 +15,7 @@ import {
   getCell,
   raf,
 } from 'test/utils/helperFn';
-import {
-  GridApiRef,
-  useGridApiRef,
-  DataGridPro,
-  GRID_COLUMN_HEADER_DRAGGING_CSS_CLASS,
-} from '@mui/x-data-grid-pro';
+import { GridApiRef, useGridApiRef, DataGridPro, gridClasses } from '@mui/x-data-grid-pro';
 import { useData } from 'storybook/src/hooks/useData';
 import { spy } from 'sinon';
 
@@ -200,7 +195,7 @@ describe('<DataGridPro /> - Reorder', () => {
     const columnHeaderDraggableContainer = columnHeader.firstChild as HTMLElement;
     fireEvent.dragStart(columnHeaderDraggableContainer.firstChild);
     expect(
-      columnHeaderDraggableContainer.classList.contains(GRID_COLUMN_HEADER_DRAGGING_CSS_CLASS),
+      columnHeaderDraggableContainer.classList.contains(gridClasses['columnHeader--dragging']),
     ).to.equal(false);
   });
 
@@ -331,7 +326,7 @@ describe('<DataGridPro /> - Reorder', () => {
       fireEvent.dragStart(dragCol);
 
       expect(dragCol).to.have.attribute('draggable', 'false');
-      expect(dragCol).not.to.have.class(GRID_COLUMN_HEADER_DRAGGING_CSS_CLASS);
+      expect(dragCol).not.to.have.class(gridClasses['columnHeader--dragging']);
 
       fireEvent.dragEnter(targetCol);
       const dragOverEvent = createDragOverEvent(targetCol);