[DataGrid] Add xxxClasses API

[oliviertassinari]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

The global class names added to the DOM by the core components are available through this API:

import SliderUnstyled, {
  sliderUnstyledClasses
} from "@material-ui/unstyled/SliderUnstyled";

https://codesandbox.io/s/unstyledslider-material-demo-forked-mql3p?file=/demo.tsx:90-185

This issue is about proposing that we do the same.

Motivation 🔦

For consistency and simplicity, I would encourage us to do the same here. For instance, we would remove this constant

https://github.com/mui-org/material-ui-x/blob/2f61504f49e0b269279fa00b5e971b2a26267ddf/packages/grid/_modules_/grid/constants/cssClassesConstants.ts#L9

and use dataGridClasses.row.

diff --git a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts
index 784380e8..eabd7b82 100644
--- a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts
+++ b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts
@@ -214,7 +214,7 @@ export const useStyles = makeStyles(
           flexDirection: 'column',
           overflow: 'hidden',
         },
-        '& .MuiDataGrid-row': {
+        [`& .${dataGridClasses.row}`]: {
           display: 'flex',
           width: 'fit-content',
           '&:hover': {

diff --git a/packages/grid/_modules_/grid/constants/cssClassesConstants.ts b/packages/grid/_modules_/grid/constants/cssClassesConstants.ts
index f79b283f..1d59a1ed 100644
--- a/packages/grid/_modules_/grid/constants/cssClassesConstants.ts
+++ b/packages/grid/_modules_/grid/constants/cssClassesConstants.ts
@@ -2,11 +2,9 @@
 export const GRID_CSS_CLASS_PREFIX = 'MuiDataGrid';
 export const GRID_ROOT_CSS_CLASS_SUFFIX = 'root';
 export const GRID_COLUMN_HEADER_CSS_CLASS_SUFFIX = 'columnHeader';
-export const GRID_ROW_CSS_CLASS_SUFFIX = 'row';
 export const GRID_CELL_CSS_CLASS_SUFFIX = 'cell';

 export const GRID_COLUMN_HEADER_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_COLUMN_HEADER_CSS_CLASS_SUFFIX}`;
-export const GRID_ROW_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_ROW_CSS_CLASS_SUFFIX}`;
 export const GRID_CELL_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_CELL_CSS_CLASS_SUFFIX}`;
 export const GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-columnSeparator--resizable`;
 export const GRID_COLUMN_HEADER_TITLE_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-columnHeaderTitleContainer`;
diff --git a/packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboard.ts b/packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboard.ts
index 6e6cd254..55878621 100644
--- a/packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboard.ts
+++ b/packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboard.ts
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { GRID_ROW_CSS_CLASS } from '../../../constants/cssClassesConstants';
 import {
   GRID_CELL_KEYDOWN,
   GRID_CELL_NAVIGATION_KEYDOWN,
@@ -29,7 +28,7 @@ export const useGridKeyboard = (apiRef: GridApiRef): void => {
     (params: GridCellParams, event: React.KeyboardEvent) => {
       const rowEl = findParentElementFromClassName(
         event.target as HTMLDivElement,
-        GRID_ROW_CSS_CLASS,
+        dataGridClasses.row,
       )! as HTMLElement;

       const currentRowIndex = Number(rowEl.getAttribute('data-rowindex'));
diff --git a/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts b/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts
index 38ee7ba3..d2232368 100644
--- a/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts
+++ b/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts
@@ -12,7 +12,6 @@ import {
   GRID_CELL_CSS_CLASS_SUFFIX,
   GRID_COLUMN_HEADER_CSS_CLASS_SUFFIX,
   GRID_ROOT_CSS_CLASS_SUFFIX,
-  GRID_ROW_CSS_CLASS_SUFFIX,
 } from '../../constants/cssClassesConstants';

 // REDUCER
@@ -37,7 +36,7 @@ export function useOptionsProp(apiRef: GridApiRef, props: GridComponentProps): G
         {
           root: [GRID_ROOT_CSS_CLASS_SUFFIX],
           columnHeader: [GRID_COLUMN_HEADER_CSS_CLASS_SUFFIX],
-          row: [GRID_ROW_CSS_CLASS_SUFFIX],
+          row: ['row'],
           cell: [GRID_CELL_CSS_CLASS_SUFFIX],
         },
         getDataGridUtilityClass,
diff --git a/packages/grid/_modules_/grid/utils/domUtils.ts b/packages/grid/_modules_/grid/utils/domUtils.ts
index 8e18daaa..207d7a2f 100644
--- a/packages/grid/_modules_/grid/utils/domUtils.ts
+++ b/packages/grid/_modules_/grid/utils/domUtils.ts
@@ -1,7 +1,6 @@
 import {
   GRID_CELL_CSS_CLASS,
   GRID_COLUMN_HEADER_CSS_CLASS,
-  GRID_ROW_CSS_CLASS,
 } from '../constants/cssClassesConstants';
 import { GridRowId } from '../models/gridRows';

@@ -17,7 +16,7 @@ export function getRowEl(cell?: Element | null): HTMLElement | null {
   if (!cell) {
     return null;
   }
-  return findParentElementFromClassName(cell as HTMLDivElement, GRID_ROW_CSS_CLASS)! as HTMLElement;
+  return findParentElementFromClassName(cell as HTMLDivElement, dataGridClasses.row)! as HTMLElement;
 }

 export function isGridCellRoot(elem: Element | null): boolean {
@@ -55,7 +54,7 @@ export function getGridColumnHeaderElement(root: Element, field: string) {
 }

 export function getGridRowElement(root: Element, id: GridRowId) {
-  return root.querySelector(`:scope .${GRID_ROW_CSS_CLASS}[data-id='${id}']`) as HTMLDivElement;
+  return root.querySelector(`:scope .${dataGridClasses.row}[data-id='${id}']`) as HTMLDivElement;
 }

 export function getGridCellElement(root: Element, { id, field }: { id: GridRowId; field: string }) {

Context

#408