[DataGrid] Fix CSS footer spacing

packages/grid/x-grid-modules/src/GridComponent.tsx

@@ -11,9 +11,9 @@ import {
 } from './hooks/features';
 import { DEFAULT_GRID_OPTIONS, ElementSize, RootContainerRef } from './models';
 import { COMPONENT_ERROR, DATA_CONTAINER_CSS_CLASS } from './constants';
-import { GridRoot } from './components/styled-wrappers/grid-root';
-import { DataContainer } from './components/styled-wrappers/data-container';
-import { ColumnsContainer } from './components/styled-wrappers/columns-container';
+import { GridRoot } from './components/styled-wrappers/GridRoot';
+import { GridDataContainer } from './components/styled-wrappers/GridDataContainer';
+import { GridColumnsContainer } from './components/styled-wrappers/GridColumnsContainer';
 import { useVirtualRows } from './hooks/virtualization';
 import {
   ApiContext,
@@ -25,7 +25,7 @@ import {
   RenderContext,
   Viewport,
   Watermark,
-  Window,
+  GridWindow,
 } from './components';
 import { useApi, useColumns, useKeyboard, useRows } from './hooks/root';
 import { useLogger, useLoggerFactory } from './hooks/utils';
@@ -190,19 +190,22 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
                 {customComponents.headerComponent}
                 <div className="MuiDataGrid-mainGridContainer">
                   <Watermark licenseStatus={props.licenseStatus} />
-                  <ColumnsContainer ref={columnsContainerRef} height={internalOptions.headerHeight}>
+                  <GridColumnsContainer
+                    ref={columnsContainerRef}
+                    height={internalOptions.headerHeight}
+                  >
                     <ColumnsHeader
                       ref={columnsHeaderRef}
                       columns={internalColumns.visible || []}
                       hasScrollX={!!renderCtx?.hasScrollX}
                       onResizeColumn={onResizeColumn}
                       renderCtx={renderCtx}
                     />
-                  </ColumnsContainer>
+                  </GridColumnsContainer>
                   {!props.loading && internalRows.length === 0 && customComponents.noRowsComponent}
                   {props.loading && customComponents.loadingComponent}
-                  <Window ref={windowRef}>
-                    <DataContainer
+                  <GridWindow ref={windowRef}>
+                    <GridDataContainer
                       ref={gridRef}
                       className={DATA_CONTAINER_CSS_CLASS}
                       style={{
@@ -220,8 +223,8 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
                           />
                         </RenderContext.Provider>
                       )}
-                    </DataContainer>
-                  </Window>
+                    </GridDataContainer>
+                  </GridWindow>
                 </div>
                 {customComponents.footerComponent || (
                   <DefaultFooter

packages/grid/x-grid-modules/src/components/default-footer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridOptions } from '../models';
-import { Footer } from './styled-wrappers';
+import { GridFooter } from './styled-wrappers/GridFooter';
 import { RowCount } from './row-count';
 import { SelectedRowCount } from './selected-row-count';
 import { ApiContext } from './api-context';
@@ -29,13 +29,13 @@ export const DefaultFooter = React.forwardRef<HTMLDivElement, DefaultFooterProps
     }
 
     return (
-      <Footer ref={ref}>
+      <GridFooter ref={ref}>
         {!options.hideFooterRowCount && <RowCount rowCount={rowCount} />}
         {!options.hideFooterSelectedRowCount && (
           <SelectedRowCount selectedRowCount={selectedRowCount} />
         )}
         {paginationComponent}
-      </Footer>
+      </GridFooter>
     );
   },
 );

packages/grid/x-grid-modules/src/components/error-message.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridOverlay } from './styled-wrappers/window-overlay';
+import { GridOverlay } from './styled-wrappers/GridOverlay';
 
 export interface ErrorMessageProps {
   message?: string;

packages/grid/x-grid-modules/src/components/index.ts

@@ -1,26 +1,25 @@
-export * from './icons';
-export * from './styled-wrappers';
-
 export * from './api-context';
 export * from './autosizer';
 export * from './cell';
 export * from './checkbox-renderer';
 export * from './column-header-item';
+export * from './column-header-separator';
 export * from './column-header-sort-icon';
 export * from './column-header-title';
-export * from './column-header-separator';
 export * from './column-headers';
 export * from './default-footer';
+export * from './icons';
 export * from './loading-overlay';
 export * from './no-row-message';
 export * from './options-context';
 export * from './pagination';
 export * from './render-context';
 export * from './rendering-zone';
-export * from './row';
 export * from './row-cells';
 export * from './row-count';
+export * from './row';
 export * from './selected-row-count';
 export * from './sticky-container';
+export * from './styled-wrappers';
 export * from './viewport';
 export * from './watermark';

packages/grid/x-grid-modules/src/components/loading-overlay.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { GridOverlay } from './styled-wrappers';
+import { GridOverlay } from './styled-wrappers/GridOverlay';
 
 export function LoadingOverlay() {
   return (

packages/grid/x-grid-modules/src/components/no-row-message.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridOverlay } from './styled-wrappers/window-overlay';
+import { GridOverlay } from './styled-wrappers/GridOverlay';
 
 export function NoRowMessage() {
   return <GridOverlay>No Rows</GridOverlay>;

packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx → packages/grid/x-grid-modules/src/components/styled-wrappers/GridColumnsContainer.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { DivProps } from './grid-root';
 import { classnames } from '../../utils';
 
-export const ColumnsContainer = React.forwardRef<HTMLDivElement, DivProps & { height: number }>(
-  (props, ref) => {
+type GridColumnsContainerProps = React.HTMLAttributes<HTMLDivElement> & { height: number };
+
+export const GridColumnsContainer = React.forwardRef<HTMLDivElement, GridColumnsContainerProps>(
+  function GridColumnsContainer(props, ref) {
     const { className, height, style, ...other } = props;
     return (
       <div
@@ -15,4 +16,3 @@ export const ColumnsContainer = React.forwardRef<HTMLDivElement, DivProps & { he
     );
   },
 );
-ColumnsContainer.displayName = 'ColumnsContainer';

packages/grid/x-grid-modules/src/components/styled-wrappers/GridDataContainer.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { classnames } from '../../utils';
+
+type GridDataContainerProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const GridDataContainer = React.forwardRef<HTMLDivElement, GridDataContainerProps>(
+  function GridDataContainer(props, ref) {
+    const { className, ...other } = props;
+    return (
+      <div ref={ref} className={classnames('MuiDataGrid-dataContainer', className)} {...other} />
+    );
+  },
+);

packages/grid/x-grid-modules/src/components/styled-wrappers/footer.tsx → packages/grid/x-grid-modules/src/components/styled-wrappers/GridFooter.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
-import { DivProps } from './grid-root';
 import { classnames } from '../../utils';
 
-export const Footer = React.forwardRef<HTMLDivElement, DivProps>((props, ref) => {
+type GridFooterProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const GridFooter = React.forwardRef<HTMLDivElement, GridFooterProps>(function GridFooter(
+  props,
+  ref,
+) {
   const { className, ...other } = props;
   return <div ref={ref} className={classnames('MuiDataGrid-footer', className)} {...other} />;
 });
-Footer.displayName = 'Footer';

packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx → packages/grid/x-grid-modules/src/components/styled-wrappers/GridOverlay.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { classnames } from '../../utils';
-import { DivProps } from './grid-root';
 import { OptionsContext } from '../options-context';
 
-export function GridOverlay(props: DivProps) {
+type GridOverlayProps = React.HTMLAttributes<HTMLDivElement>;
+
+export function GridOverlay(props: GridOverlayProps) {
   const { className, children, ...other } = props;
   const options = React.useContext(OptionsContext);
   return (
@@ -16,4 +17,3 @@ export function GridOverlay(props: DivProps) {
     </div>
   );
 }
-GridOverlay.displayName = 'GridOverlay';

packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx → packages/grid/x-grid-modules/src/components/styled-wrappers/GridRoot.tsx

@@ -2,9 +2,12 @@ import * as React from 'react';
 import { classnames } from '../../utils';
 import { useStyles } from './GridRootStyles';
 
-export type DivProps = React.HTMLAttributes<HTMLDivElement>;
+type GridRootProps = React.HTMLAttributes<HTMLDivElement>;
 
-export const GridRoot = React.forwardRef<HTMLDivElement, DivProps>(function GridRoot(props, ref) {
+export const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function GridRoot(
+  props,
+  ref,
+) {
   const { className, ...other } = props;
   const classes = useStyles();
 

packages/grid/x-grid-modules/src/components/styled-wrappers/GridRootStyles.ts

@@ -195,7 +195,7 @@ export const useStyles = makeStyles(
           alignItems: 'center',
           ...theme.typography.body2,
           display: 'none',
-          paddingLeft: theme.spacing(2),
+          margin: theme.spacing(0, 2),
           [theme.breakpoints.up('md')]: {
             minHeight: 52, // Match TablePagination min height
             display: 'flex',

packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx → packages/grid/x-grid-modules/src/components/styled-wrappers/GridWindow.tsx

@@ -1,11 +1,15 @@
 import * as React from 'react';
-import { DivProps } from './grid-root';
 import { classnames } from '../../utils';
 import { OptionsContext } from '../options-context';
 
-export const Window = React.forwardRef<HTMLDivElement, DivProps>((props, ref) => {
-  const { headerHeight, autoHeight } = React.useContext(OptionsContext);
+type GridWindowProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const GridWindow = React.forwardRef<HTMLDivElement, GridWindowProps>(function GridWindow(
+  props,
+  ref,
+) {
   const { className, ...other } = props;
+  const { headerHeight, autoHeight } = React.useContext(OptionsContext);
   return (
     <div
       ref={ref}
@@ -15,4 +19,3 @@ export const Window = React.forwardRef<HTMLDivElement, DivProps>((props, ref) =>
     />
   );
 });
-Window.displayName = 'Window';

packages/grid/x-grid-modules/src/components/styled-wrappers/index.ts

@@ -1,6 +1,6 @@
-export * from './columns-container';
-export * from './data-container';
-export * from './footer';
-export * from './grid-root';
-export * from './window';
-export * from './window-overlay';
+export * from './GridColumnsContainer';
+export * from './GridDataContainer';
+export * from './GridFooter';
+export * from './GridOverlay';
+export * from './GridRoot';
+export * from './GridWindow';

packages/storybook/src/stories/playground/customize-components.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ColDef, XGrid, GridOverlay, Footer, useApiRef, ApiRef } from '@material-ui/x-grid';
+import { ColDef, XGrid, GridOverlay, GridFooter, useApiRef, ApiRef } from '@material-ui/x-grid';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import CodeIcon from '@material-ui/icons/Code';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -139,7 +139,7 @@ export function CustomPagination() {
 function FooterComponent(props) {
   const { paginationProps } = props;
   return (
-    <Footer className="my-custom-footer">
+    <GridFooter className="my-custom-footer">
       <span style={{ display: 'flex', alignItems: 'center' }}>
         This is my custom footer and pagination here!{' '}
       </span>
@@ -149,7 +149,7 @@ function FooterComponent(props) {
         count={paginationProps.pageCount}
         onChange={(event, value) => paginationProps.setPage(value)}
       />
-    </Footer>
+    </GridFooter>
   );
 }