From 135a39669d228b3d8a786db997151536f52483bf Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Wed, 24 Nov 2021 16:33:57 -0300 Subject: [PATCH 1/2] [DataGrid] Add support for `sx` prop --- .../api-docs/data-grid/data-grid-pro.json | 6 ++++ docs/pages/api-docs/data-grid/data-grid.json | 6 ++++ .../api/buildComponentDocumentation.ts | 2 ++ .../components/data-grid/style/SxProp.js | 27 ++++++++++++++ .../components/data-grid/style/SxProp.tsx | 27 ++++++++++++++ .../data-grid/style/SxProp.tsx.preview | 11 ++++++ .../pages/components/data-grid/style/style.md | 13 +++++++ .../api-docs/data-grid/data-grid-pro-pt.json | 1 + .../api-docs/data-grid/data-grid-pro-zh.json | 1 + .../api-docs/data-grid/data-grid-pro.json | 1 + .../api-docs/data-grid/data-grid-pt.json | 3 +- .../api-docs/data-grid/data-grid-zh.json | 3 +- .../api-docs/data-grid/data-grid.json | 3 +- .../grid/_modules_/grid/GridComponentProps.ts | 17 +++++---- .../grid/components/containers/GridRoot.tsx | 35 +++++++++++++++---- packages/grid/x-data-grid-pro/package.json | 1 + .../grid/x-data-grid-pro/src/DataGridPro.tsx | 14 ++++---- .../src/tests/DataGridPro.spec.tsx | 6 ++++ .../src/tests/layout.DataGridPro.test.tsx | 25 ++++++++++++- packages/grid/x-data-grid/package.json | 1 + packages/grid/x-data-grid/src/DataGrid.tsx | 14 ++++---- .../x-data-grid/src/tests/DataGrid.spec.tsx | 4 +++ .../src/tests/layout.DataGrid.test.tsx | 23 ++++++++++++ scripts/exportsSnapshot.json | 2 +- 24 files changed, 211 insertions(+), 35 deletions(-) create mode 100644 docs/src/pages/components/data-grid/style/SxProp.js create mode 100644 docs/src/pages/components/data-grid/style/SxProp.tsx create mode 100644 docs/src/pages/components/data-grid/style/SxProp.tsx.preview create mode 100644 packages/grid/x-data-grid-pro/src/tests/DataGridPro.spec.tsx diff --git a/docs/pages/api-docs/data-grid/data-grid-pro.json b/docs/pages/api-docs/data-grid/data-grid-pro.json index 49fc49d3b43a..039005da4c4b 100644 --- a/docs/pages/api-docs/data-grid/data-grid-pro.json +++ b/docs/pages/api-docs/data-grid/data-grid-pro.json @@ -172,6 +172,12 @@ "description": "Array<{ field: string, sort?: 'asc'
| 'desc' }>" } }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object>
| func
| object" + } + }, "throttleRowsMs": { "type": { "name": "number" }, "default": "0" }, "treeData": { "type": { "name": "bool" } } }, diff --git a/docs/pages/api-docs/data-grid/data-grid.json b/docs/pages/api-docs/data-grid/data-grid.json index c45afe69ad9f..af869d7cb3b5 100644 --- a/docs/pages/api-docs/data-grid/data-grid.json +++ b/docs/pages/api-docs/data-grid/data-grid.json @@ -141,6 +141,12 @@ "name": "arrayOf", "description": "Array<{ field: string, sort?: 'asc'
| 'desc' }>" } + }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object>
| func
| object" + } } }, "slots": { diff --git a/docs/scripts/api/buildComponentDocumentation.ts b/docs/scripts/api/buildComponentDocumentation.ts index 67b63d555c31..5cf457d00daf 100644 --- a/docs/scripts/api/buildComponentDocumentation.ts +++ b/docs/scripts/api/buildComponentDocumentation.ts @@ -264,6 +264,8 @@ export default async function buildComponentDocumentation( if (propName === 'classes') { description += ' See CSS API below for more details.'; + } else if (propName === 'sx') { + description += ' See the `sx` page for more details.'; } componentApi.propDescriptions[propName] = linkify(description, documentedInterfaces, 'html'); diff --git a/docs/src/pages/components/data-grid/style/SxProp.js b/docs/src/pages/components/data-grid/style/SxProp.js new file mode 100644 index 000000000000..4d2afca44ce2 --- /dev/null +++ b/docs/src/pages/components/data-grid/style/SxProp.js @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +export default function SxProp() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/src/pages/components/data-grid/style/SxProp.tsx b/docs/src/pages/components/data-grid/style/SxProp.tsx new file mode 100644 index 000000000000..4d2afca44ce2 --- /dev/null +++ b/docs/src/pages/components/data-grid/style/SxProp.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +export default function SxProp() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/src/pages/components/data-grid/style/SxProp.tsx.preview b/docs/src/pages/components/data-grid/style/SxProp.tsx.preview new file mode 100644 index 000000000000..d2740fdec8ce --- /dev/null +++ b/docs/src/pages/components/data-grid/style/SxProp.tsx.preview @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/docs/src/pages/components/data-grid/style/style.md b/docs/src/pages/components/data-grid/style/style.md index 735319d10809..0a6d1a48eae7 100644 --- a/docs/src/pages/components/data-grid/style/style.md +++ b/docs/src/pages/components/data-grid/style/style.md @@ -6,6 +6,19 @@ title: Data Grid - Styling

The grid CSS can be easily overwritten.

+## Using the `sx` prop + +For one-off styles, the `sx` prop can be used. +It allows to apply simple to complex customizations directly onto the `DataGrid` element. +The keys accepted can be any CSS property as well as the custom properties provided by MUI. +For more details, visit the [`sx` prop page](/system/the-sx-prop/). + +```tsx + // Sets the margin to 2 times the spacing unit = 16px +``` + +{{"demo": "pages/components/data-grid/style/SxProp.js", "bg": "inline"}} + ## Styling column headers The `GridColDef` type has properties to apply class names and custom CSS on the header. diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json index 99c841bace23..ff9edba16b57 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json @@ -106,6 +106,7 @@ "sortingMode": "Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.", "sortingOrder": "The order of the sorting sequence.", "sortModel": "Set the sort model of the grid.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "throttleRowsMs": "If positive, the Grid will throttle updates coming from apiRef.current.updateRows and apiRef.current.setRows. It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each individual update.", "treeData": "If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop." }, diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json index 99c841bace23..ff9edba16b57 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json @@ -106,6 +106,7 @@ "sortingMode": "Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.", "sortingOrder": "The order of the sorting sequence.", "sortModel": "Set the sort model of the grid.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "throttleRowsMs": "If positive, the Grid will throttle updates coming from apiRef.current.updateRows and apiRef.current.setRows. It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each individual update.", "treeData": "If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop." }, diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index 99c841bace23..ff9edba16b57 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -106,6 +106,7 @@ "sortingMode": "Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.", "sortingOrder": "The order of the sorting sequence.", "sortModel": "Set the sort model of the grid.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "throttleRowsMs": "If positive, the Grid will throttle updates coming from apiRef.current.updateRows and apiRef.current.setRows. It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each individual update.", "treeData": "If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop." }, diff --git a/docs/translations/api-docs/data-grid/data-grid-pt.json b/docs/translations/api-docs/data-grid/data-grid-pt.json index 975b5690c2f2..9e746cb288ff 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pt.json +++ b/docs/translations/api-docs/data-grid/data-grid-pt.json @@ -89,7 +89,8 @@ "showColumnRightBorder": "If true, the right border of the column headers are displayed.", "sortingMode": "Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.", "sortingOrder": "The order of the sorting sequence.", - "sortModel": "Set the sort model of the grid." + "sortModel": "Set the sort model of the grid.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." }, "classDescriptions": { "autoHeight": { diff --git a/docs/translations/api-docs/data-grid/data-grid-zh.json b/docs/translations/api-docs/data-grid/data-grid-zh.json index 975b5690c2f2..9e746cb288ff 100644 --- a/docs/translations/api-docs/data-grid/data-grid-zh.json +++ b/docs/translations/api-docs/data-grid/data-grid-zh.json @@ -89,7 +89,8 @@ "showColumnRightBorder": "If true, the right border of the column headers are displayed.", "sortingMode": "Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.", "sortingOrder": "The order of the sorting sequence.", - "sortModel": "Set the sort model of the grid." + "sortModel": "Set the sort model of the grid.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." }, "classDescriptions": { "autoHeight": { diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index 975b5690c2f2..9e746cb288ff 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -89,7 +89,8 @@ "showColumnRightBorder": "If true, the right border of the column headers are displayed.", "sortingMode": "Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.", "sortingOrder": "The order of the sorting sequence.", - "sortModel": "Set the sort model of the grid." + "sortModel": "Set the sort model of the grid.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." }, "classDescriptions": { "autoHeight": { diff --git a/packages/grid/_modules_/grid/GridComponentProps.ts b/packages/grid/_modules_/grid/GridComponentProps.ts index e6ac14c909f6..b08b5a16f0d7 100644 --- a/packages/grid/_modules_/grid/GridComponentProps.ts +++ b/packages/grid/_modules_/grid/GridComponentProps.ts @@ -1,4 +1,7 @@ import * as React from 'react'; +import { CommonProps } from '@mui/material/OverridableComponent'; +import { SxProps } from '@mui/system'; +import { Theme } from '@mui/material/styles'; import { GridInitialState, GridState } from './models/gridState'; import { GridApiRef } from './models/api/gridApiRef'; import { @@ -51,7 +54,7 @@ export interface GridComponentProps GridProcessedMergedOptions, GridComponentOtherProps {} -interface GridComponentOtherProps { +interface GridComponentOtherProps extends CommonProps { /** * The ref object that allows grid manipulation. Can be instantiated with [[useGridApiRef()]]. */ @@ -459,10 +462,6 @@ interface GridComponentOtherProps { * The id of the element containing a label for the grid. */ 'aria-labelledby'?: string; - /** - * @ignore - do not document - */ - className?: string; /** * Set of columns of type [[GridColumns]]. */ @@ -493,10 +492,6 @@ interface GridComponentOtherProps { * If one of the data in `initialState` is also being controlled, then the control state wins. */ initialState?: GridInitialState; - /** - * @ignore - do not document - */ - style?: React.CSSProperties; /** * Overrideable components props dynamically passed to the component at rendering. */ @@ -507,4 +502,8 @@ interface GridComponentOtherProps { groupingColDef?: | GridColDefOverride<'field' | 'editable'> | GridColDefOverrideCallback<'field' | 'editable'>; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; } diff --git a/packages/grid/_modules_/grid/components/containers/GridRoot.tsx b/packages/grid/_modules_/grid/components/containers/GridRoot.tsx index 5c636a65df3d..44f68b595148 100644 --- a/packages/grid/_modules_/grid/components/containers/GridRoot.tsx +++ b/packages/grid/_modules_/grid/components/containers/GridRoot.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import clsx from 'clsx'; import { useForkRef } from '@mui/material/utils'; +import { SxProps } from '@mui/system'; +import { Theme } from '@mui/material/styles'; import NoSsr from '@mui/material/NoSsr'; import { GridRootContainerRef } from '../../models/gridRootContainerRef'; import { GridRootStyles } from './GridRootStyles'; @@ -11,12 +14,14 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import { gridClasses } from '../../gridClasses'; import { gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector'; -export type GridRootProps = React.HTMLAttributes; +export interface GridRootProps extends React.HTMLAttributes { + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} -export const GridRoot = React.forwardRef(function GridRoot( - props, - ref, -) { +const GridRoot = React.forwardRef(function GridRoot(props, ref) { const rootProps = useGridRootProps(); const { children, className, ...other } = props; const apiRef = useGridApiContext(); @@ -31,7 +36,7 @@ export const GridRoot = React.forwardRef(function (function aria-multiselectable={!rootProps.disableMultipleSelection} aria-label={rootProps['aria-label']} aria-labelledby={rootProps['aria-labelledby']} - style={rootProps.style} {...other} > {children} @@ -48,3 +52,20 @@ export const GridRoot = React.forwardRef(function ); }); + +GridRoot.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), + PropTypes.func, + PropTypes.object, + ]), +} as any; + +export { GridRoot }; diff --git a/packages/grid/x-data-grid-pro/package.json b/packages/grid/x-data-grid-pro/package.json index c18eacbfd3e6..77deef9d0114 100644 --- a/packages/grid/x-data-grid-pro/package.json +++ b/packages/grid/x-data-grid-pro/package.json @@ -45,6 +45,7 @@ }, "peerDependencies": { "@mui/material": "^5.1.1", + "@mui/system": "^5.1.1", "react": "^17.0.2" }, "setupFiles": [ diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro.tsx index 474be1a5c005..0ad988bfcc14 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro.tsx @@ -40,7 +40,7 @@ const DataGridProRaw = React.forwardRef(functi return ( - + ; +} diff --git a/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx index f9c63c90eb29..d4fef257ee55 100644 --- a/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer } from '@material-ui/monorepo/test/utils'; +import { createRenderer, screen } from '@material-ui/monorepo/test/utils'; import { expect } from 'chai'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import { GridApiRef, useGridApiRef, DataGridPro, ptBR } from '@mui/x-data-grid-pro'; @@ -147,4 +147,27 @@ describe(' - Layout', () => { ); expect(document.querySelector('[title="Ordenar"]')).not.to.equal(null); }); + + it('should support the sx prop', () => { + const theme = createTheme({ + palette: { + primary: { + main: 'rgb(0, 0, 255)', + }, + }, + }); + + render( + +
+ +
+ , + ); + + // @ts-expect-error need to migrate helpers to TypeScript + expect(screen.getByRole('grid')).toHaveComputedStyle({ + color: 'rgb(0, 0, 255)', + }); + }); }); diff --git a/packages/grid/x-data-grid/package.json b/packages/grid/x-data-grid/package.json index c7212c6d558c..65234086906a 100644 --- a/packages/grid/x-data-grid/package.json +++ b/packages/grid/x-data-grid/package.json @@ -44,6 +44,7 @@ }, "peerDependencies": { "@mui/material": "^5.1.1", + "@mui/system": "^5.1.1", "react": "^17.0.2" }, "setupFiles": [ diff --git a/packages/grid/x-data-grid/src/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid.tsx index 64b6579e7a31..b97071e9d9a8 100644 --- a/packages/grid/x-data-grid/src/DataGrid.tsx +++ b/packages/grid/x-data-grid/src/DataGrid.tsx @@ -26,7 +26,7 @@ const DataGridRaw = React.forwardRef(function Dat return ( - + ); } + +function SxTest() { + ; +} diff --git a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx index 0bca15d7fc1e..95c38acf7df6 100644 --- a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -800,4 +800,27 @@ describe(' - Layout & Warnings', () => { expect(window.getComputedStyle(getRow(0)).backgroundColor).to.equal('rgb(128, 0, 128)'); expect(window.getComputedStyle(getCell(0, 0)).backgroundColor).to.equal('rgb(0, 128, 0)'); }); + + it('should support the sx prop', () => { + const theme = createTheme({ + palette: { + primary: { + main: 'rgb(0, 0, 255)', + }, + }, + }); + + render( + +
+ +
+ , + ); + + // @ts-expect-error need to migrate helpers to TypeScript + expect(screen.getByRole('grid')).toHaveComputedStyle({ + color: 'rgb(0, 0, 255)', + }); + }); }); diff --git a/scripts/exportsSnapshot.json b/scripts/exportsSnapshot.json index f6a94e707dd5..79395686e942 100644 --- a/scripts/exportsSnapshot.json +++ b/scripts/exportsSnapshot.json @@ -107,6 +107,7 @@ { "name": "GridRenderEditCellParams", "kind": "Interface" }, { "name": "GridRenderPaginationProps", "kind": "Interface" }, { "name": "GridRenderRowProps", "kind": "Interface" }, + { "name": "GridRootProps", "kind": "Interface" }, { "name": "GridRowApi", "kind": "Interface" }, { "name": "GridRowModelUpdate", "kind": "Interface" }, { "name": "GridRowParams", "kind": "Interface" }, @@ -175,7 +176,6 @@ { "name": "GridPreferencePanelInitialState", "kind": "Type alias" }, { "name": "GridRenderContextProps", "kind": "Type alias" }, { "name": "GridRootContainerRef", "kind": "Type alias" }, - { "name": "GridRootProps", "kind": "Type alias" }, { "name": "GridRowData", "kind": "Type alias" }, { "name": "GridRowEntry", "kind": "Type alias" }, { "name": "GridRowId", "kind": "Type alias" }, From c6212c1d2f4d4eea72107dc54160c0c1165eb9a6 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Wed, 24 Nov 2021 17:34:53 -0300 Subject: [PATCH 2/2] rerun ci