[core] Copy getClasses from the core (removed in v5) (#2140)

mui · Jul 14, 2021 · ac5b29a · ac5b29a
1 parent a4df486
commit ac5b29a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 18 deletions.
diff --git a/packages/grid/_modules_/grid/components/panel/GridPanel.test.tsx b/packages/grid/_modules_/grid/components/panel/GridPanel.test.tsx
@@ -2,22 +2,20 @@ import * as React from 'react';
 import {
   createClientRenderStrictMode,
   // @ts-expect-error JS
-  createMount,
-  // @ts-expect-error JS
-  getClasses,
-  // @ts-expect-error JS
   describeConformance,
 } from 'test/utils';
-import { GridPanel, useGridApiRef, GridApiContext } from '@material-ui/data-grid';
+import {
+  GridPanel,
+  gridPanelClasses as classes,
+  useGridApiRef,
+  GridApiContext,
+} from '@material-ui/data-grid';
 import { Popper } from '@material-ui/core';
 
 describe('<GridPanel />', () => {
-  const mount = createMount();
   // TODO v5: replace with createClientRender
   const render = createClientRenderStrictMode();
 
-  let classes;
-
   function Wrapper(props) {
     const apiRef = useGridApiRef();
     apiRef.current.columnHeadersContainerElementRef = {
@@ -28,16 +26,12 @@ describe('<GridPanel />', () => {
     return <GridApiContext.Provider value={apiRef} {...props} />;
   }
 
-  before(() => {
-    classes = getClasses(<GridPanel open={false} />);
-  });
-
   describeConformance(<GridPanel disablePortal open />, () => ({
     classes,
     inheritComponent: Popper,
     render: (node) => render(<Wrapper>{node}</Wrapper>),
-    mount: (node) => {
-      const wrapper = mount(
+    wrapMount: (baseMount) => (node) => {
+      const wrapper = baseMount(
         <Wrapper>
           <span>{node}</span>
         </Wrapper>,

diff --git a/packages/grid/_modules_/grid/components/panel/GridPanel.tsx b/packages/grid/_modules_/grid/components/panel/GridPanel.tsx
@@ -7,7 +7,10 @@ import Paper from '@material-ui/core/Paper';
 import Popper, { PopperProps } from '@material-ui/core/Popper';
 import { useGridApiContext } from '../../hooks/root/useGridApiContext';
 import { isEscapeKey, isMuiV5, createTheme } from '../../utils';
-import { InternalStandardProps as StandardProps } from '../../utils/material-ui-utils';
+import {
+  InternalStandardProps as StandardProps,
+  generateUtilityClasses,
+} from '../../utils/material-ui-utils';
 
 export interface GridPanelClasses {
   /** Styles applied to the root element. */
@@ -41,6 +44,8 @@ const useStyles = makeStyles(
   { name: 'MuiGridPanel', defaultTheme },
 );
 
+export const gridPanelClasses = generateUtilityClasses('MuiGridPanel', ['root', 'paper']);
+
 export const GridPanel = React.forwardRef<HTMLDivElement, GridPanelProps>(function GridPanel(
   props,
   ref,
@@ -103,6 +108,3 @@ export const GridPanel = React.forwardRef<HTMLDivElement, GridPanelProps>(functi
     </Popper>
   );
 }) as (props: GridPanelProps) => JSX.Element;
-
-// @ts-ignore TODO migrate to v5 gridPanelClasses pattern, this is only for tests
-GridPanel.useStyles = useStyles;
diff --git a/packages/grid/_modules_/grid/utils/material-ui-utils.ts b/packages/grid/_modules_/grid/utils/material-ui-utils.ts
@@ -104,3 +104,17 @@ export function generateUtilityClass(componentName: string, slot: string): strin
   const globalPseudoClass = globalPseudoClassesMapping[slot];
   return globalPseudoClass || `${componentName}-${slot}`;
 }
+
+// TODO replace with { generateUtilityClasses } from '@material-ui/unstyled';
+export function generateUtilityClasses<T extends string>(
+  componentName: string,
+  slots: T[],
+): Record<T, string> {
+  const result: Record<string, string> = {};
+
+  slots.forEach((slot) => {
+    result[slot] = generateUtilityClass(componentName, slot);
+  });
+
+  return result;
+}