From 5938bdd39459ce612df7b7a85e73e69226177055 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 11 May 2021 16:43:21 +0200 Subject: [PATCH 01/11] init --- docs/src/modules/XWrapper.js | 2 +- .../columns/CustomColumnTypesGrid.js | 2 +- .../columns/CustomColumnTypesGrid.tsx | 2 +- .../filtering/CustomRatingFilterOperator.js | 2 +- .../filtering/CustomRatingFilterOperator.tsx | 2 +- .../data-grid/rendering/AntDesignGrid.js | 95 +++++++++--------- .../data-grid/rendering/AntDesignGrid.tsx | 98 ++++++++++--------- .../rendering/CustomEmptyOverlayGrid.js | 51 +++++----- .../rendering/CustomEmptyOverlayGrid.tsx | 52 +++++----- .../rendering/CustomPaginationGrid.js | 2 +- .../rendering/CustomPaginationGrid.tsx | 2 +- .../data-grid/rendering/StylingCellsGrid.js | 2 +- .../data-grid/rendering/StylingCellsGrid.tsx | 2 +- .../data-grid/rendering/StylingHeaderGrid.js | 2 +- .../data-grid/rendering/StylingHeaderGrid.tsx | 2 +- packages/demo-app/src/app/app-bar.tsx | 21 ++-- packages/demo-app/src/app/app-drawer.tsx | 2 +- packages/demo-app/src/app/app-footer.tsx | 85 ++++++++-------- .../_modules_/grid/components/Pagination.tsx | 37 ++++--- .../components/containers/GridRootStyles.ts | 6 +- .../grid/components/panel/ColumnsPanel.tsx | 2 +- .../_modules_/grid/components/panel/Panel.tsx | 6 +- .../panel/filterPanel/FilterForm.tsx | 6 +- .../src/stories/grid-filter.stories.tsx | 2 +- .../src/renderer/renderCountry.tsx | 2 +- .../src/renderer/renderIncoterm.tsx | 2 +- .../src/renderer/renderLink.tsx | 2 +- .../src/renderer/renderPnl.tsx | 44 +++++---- .../src/renderer/renderProgress.tsx | 60 ++++++------ .../src/renderer/renderRating.tsx | 28 +++--- .../src/renderer/renderStatus.tsx | 54 +++++----- .../src/renderer/renderTotalPrice.tsx | 34 ++++--- 32 files changed, 385 insertions(+), 326 deletions(-) diff --git a/docs/src/modules/XWrapper.js b/docs/src/modules/XWrapper.js index 63674d1e87eda..376d9f694fd06 100644 --- a/docs/src/modules/XWrapper.js +++ b/docs/src/modules/XWrapper.js @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles({ '@global': { diff --git a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js index 59c72cc96865f..ad6a874fba60b 100644 --- a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js +++ b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid } from '@material-ui/data-grid'; import { randomStatusOptions, diff --git a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx index d02e4e12f515c..4714aeecaa858 100644 --- a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx +++ b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, ColTypeDef } from '@material-ui/data-grid'; import { randomStatusOptions, diff --git a/docs/src/pages/components/data-grid/filtering/CustomRatingFilterOperator.js b/docs/src/pages/components/data-grid/filtering/CustomRatingFilterOperator.js index c84ef56878479..4bc9b83a5073a 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomRatingFilterOperator.js +++ b/docs/src/pages/components/data-grid/filtering/CustomRatingFilterOperator.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { Rating } from '@material-ui/lab'; import { DataGrid, getNumericColumnOperators } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; diff --git a/docs/src/pages/components/data-grid/filtering/CustomRatingFilterOperator.tsx b/docs/src/pages/components/data-grid/filtering/CustomRatingFilterOperator.tsx index 5118509f58374..5347e2a707cfa 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomRatingFilterOperator.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomRatingFilterOperator.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { Rating } from '@material-ui/lab'; import { DataGrid, diff --git a/docs/src/pages/components/data-grid/rendering/AntDesignGrid.js b/docs/src/pages/components/data-grid/rendering/AntDesignGrid.js index dc6575397d929..39654377a844b 100644 --- a/docs/src/pages/components/data-grid/rendering/AntDesignGrid.js +++ b/docs/src/pages/components/data-grid/rendering/AntDesignGrid.js @@ -2,7 +2,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { DataGrid } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import Pagination from '@material-ui/lab/Pagination'; import PaginationItem from '@material-ui/lab/PaginationItem'; @@ -50,53 +51,59 @@ function customCheckbox(theme) { }; } -const useStyles = makeStyles((theme) => ({ - root: { - border: 0, - color: - theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => ({ + root: { + border: 0, color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.65)', + }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + ...customCheckbox(theme), }, - ...customCheckbox(theme), - }, -})); + }), + { defaultTheme }, +); function CustomPagination(props) { const { state, api } = props; diff --git a/docs/src/pages/components/data-grid/rendering/AntDesignGrid.tsx b/docs/src/pages/components/data-grid/rendering/AntDesignGrid.tsx index 34f2e9a7c36ff..c1c7353c6ef55 100644 --- a/docs/src/pages/components/data-grid/rendering/AntDesignGrid.tsx +++ b/docs/src/pages/components/data-grid/rendering/AntDesignGrid.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { DataGrid, BaseComponentProps } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; +import { createStyles, Theme, createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import Pagination from '@material-ui/lab/Pagination'; import PaginationItem from '@material-ui/lab/PaginationItem'; @@ -49,56 +50,59 @@ function customCheckbox(theme: Theme) { }; } -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - border: 0, - color: - theme.palette.type === 'light' - ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + border: 0, color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.65)', + }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + ...customCheckbox(theme), }, - ...customCheckbox(theme), - }, - }), + }), + { defaultTheme }, ); function CustomPagination(props: BaseComponentProps) { diff --git a/docs/src/pages/components/data-grid/rendering/CustomEmptyOverlayGrid.js b/docs/src/pages/components/data-grid/rendering/CustomEmptyOverlayGrid.js index 1a5bf1d9386de..2c36b22007345 100644 --- a/docs/src/pages/components/data-grid/rendering/CustomEmptyOverlayGrid.js +++ b/docs/src/pages/components/data-grid/rendering/CustomEmptyOverlayGrid.js @@ -1,32 +1,37 @@ import * as React from 'react'; import { GridOverlay, DataGrid } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme) => ({ - root: { - flexDirection: 'column', - '& .ant-empty-img-1': { - fill: theme.palette.type === 'light' ? '#aeb8c2' : '#262626', +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => ({ + root: { + flexDirection: 'column', + '& .ant-empty-img-1': { + fill: theme.palette.type === 'light' ? '#aeb8c2' : '#262626', + }, + '& .ant-empty-img-2': { + fill: theme.palette.type === 'light' ? '#f5f5f7' : '#595959', + }, + '& .ant-empty-img-3': { + fill: theme.palette.type === 'light' ? '#dce0e6' : '#434343', + }, + '& .ant-empty-img-4': { + fill: theme.palette.type === 'light' ? '#fff' : '#1c1c1c', + }, + '& .ant-empty-img-5': { + fillOpacity: theme.palette.type === 'light' ? '0.8' : '0.08', + fill: theme.palette.type === 'light' ? '#f5f5f5' : '#fff', + }, }, - '& .ant-empty-img-2': { - fill: theme.palette.type === 'light' ? '#f5f5f7' : '#595959', + label: { + marginTop: theme.spacing(1), }, - '& .ant-empty-img-3': { - fill: theme.palette.type === 'light' ? '#dce0e6' : '#434343', - }, - '& .ant-empty-img-4': { - fill: theme.palette.type === 'light' ? '#fff' : '#1c1c1c', - }, - '& .ant-empty-img-5': { - fillOpacity: theme.palette.type === 'light' ? '0.8' : '0.08', - fill: theme.palette.type === 'light' ? '#f5f5f5' : '#fff', - }, - }, - label: { - marginTop: theme.spacing(1), - }, -})); + }), + { defaultTheme }, +); function CustomNoRowsOverlay() { const classes = useStyles(); diff --git a/docs/src/pages/components/data-grid/rendering/CustomEmptyOverlayGrid.tsx b/docs/src/pages/components/data-grid/rendering/CustomEmptyOverlayGrid.tsx index b5eccbfb61a2d..3ac85eb87f950 100644 --- a/docs/src/pages/components/data-grid/rendering/CustomEmptyOverlayGrid.tsx +++ b/docs/src/pages/components/data-grid/rendering/CustomEmptyOverlayGrid.tsx @@ -1,33 +1,37 @@ import * as React from 'react'; import { GridOverlay, DataGrid } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; +import { createStyles, Theme, createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - flexDirection: 'column', - '& .ant-empty-img-1': { - fill: theme.palette.type === 'light' ? '#aeb8c2' : '#262626', +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + flexDirection: 'column', + '& .ant-empty-img-1': { + fill: theme.palette.type === 'light' ? '#aeb8c2' : '#262626', + }, + '& .ant-empty-img-2': { + fill: theme.palette.type === 'light' ? '#f5f5f7' : '#595959', + }, + '& .ant-empty-img-3': { + fill: theme.palette.type === 'light' ? '#dce0e6' : '#434343', + }, + '& .ant-empty-img-4': { + fill: theme.palette.type === 'light' ? '#fff' : '#1c1c1c', + }, + '& .ant-empty-img-5': { + fillOpacity: theme.palette.type === 'light' ? '0.8' : '0.08', + fill: theme.palette.type === 'light' ? '#f5f5f5' : '#fff', + }, }, - '& .ant-empty-img-2': { - fill: theme.palette.type === 'light' ? '#f5f5f7' : '#595959', + label: { + marginTop: theme.spacing(1), }, - '& .ant-empty-img-3': { - fill: theme.palette.type === 'light' ? '#dce0e6' : '#434343', - }, - '& .ant-empty-img-4': { - fill: theme.palette.type === 'light' ? '#fff' : '#1c1c1c', - }, - '& .ant-empty-img-5': { - fillOpacity: theme.palette.type === 'light' ? '0.8' : '0.08', - fill: theme.palette.type === 'light' ? '#f5f5f5' : '#fff', - }, - }, - label: { - marginTop: theme.spacing(1), - }, - }), + }), + { defaultTheme }, ); function CustomNoRowsOverlay() { diff --git a/docs/src/pages/components/data-grid/rendering/CustomPaginationGrid.js b/docs/src/pages/components/data-grid/rendering/CustomPaginationGrid.js index 9ba6ff1e51a31..d99006abe7a4f 100644 --- a/docs/src/pages/components/data-grid/rendering/CustomPaginationGrid.js +++ b/docs/src/pages/components/data-grid/rendering/CustomPaginationGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; import Pagination from '@material-ui/lab/Pagination'; diff --git a/docs/src/pages/components/data-grid/rendering/CustomPaginationGrid.tsx b/docs/src/pages/components/data-grid/rendering/CustomPaginationGrid.tsx index 68f632feafc22..78e696eecd90b 100644 --- a/docs/src/pages/components/data-grid/rendering/CustomPaginationGrid.tsx +++ b/docs/src/pages/components/data-grid/rendering/CustomPaginationGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, BaseComponentProps } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; import Pagination from '@material-ui/lab/Pagination'; diff --git a/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.js b/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.js index a8edc1496dfd4..e4bf66494fd6e 100644 --- a/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.js +++ b/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.js @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; import { DataGrid } from '@material-ui/data-grid'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const columns = [ { diff --git a/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.tsx b/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.tsx index 42332c581aa9f..f07d69d83554a 100644 --- a/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.tsx +++ b/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; import { Columns, DataGrid, CellClassParams } from '@material-ui/data-grid'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const columns: Columns = [ { diff --git a/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.js b/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.js index 46c597be43554..cf785c7ef55a1 100644 --- a/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.js +++ b/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { DataGrid } from '@material-ui/data-grid'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const columns = [ { diff --git a/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.tsx b/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.tsx index 1d5ef40ccd653..6e44a5a92e778 100644 --- a/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.tsx +++ b/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Columns, DataGrid } from '@material-ui/data-grid'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const columns: Columns = [ { diff --git a/packages/demo-app/src/app/app-bar.tsx b/packages/demo-app/src/app/app-bar.tsx index 5c7738ed62172..16dd53848a2be 100644 --- a/packages/demo-app/src/app/app-bar.tsx +++ b/packages/demo-app/src/app/app-bar.tsx @@ -4,7 +4,8 @@ import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; import Typography from '@material-ui/core/Typography'; import AppBar from '@material-ui/core/AppBar'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, createStyles, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import Link from '@material-ui/core/Link'; import Brightness7Icon from '@material-ui/icons/Brightness7'; import Brightness4Icon from '@material-ui/icons/Brightness4'; @@ -40,13 +41,17 @@ const DemoAppBarStyled = styled(AppBar)` } `; -const useStyles = makeStyles((theme: Theme) => { - return createStyles({ - menuButton: { - marginRight: theme.spacing(2), - }, - }); -}); +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => { + return createStyles({ + menuButton: { + marginRight: theme.spacing(2), + }, + }); + }, + { defaultTheme }, +); export interface DemoAppBarProps { onMenuButtonClick: () => void; diff --git a/packages/demo-app/src/app/app-drawer.tsx b/packages/demo-app/src/app/app-drawer.tsx index f3e9d54b1bec2..fea62cd149606 100644 --- a/packages/demo-app/src/app/app-drawer.tsx +++ b/packages/demo-app/src/app/app-drawer.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; diff --git a/packages/demo-app/src/app/app-footer.tsx b/packages/demo-app/src/app/app-footer.tsx index 48d35ae7df70a..69dc28a05bc15 100644 --- a/packages/demo-app/src/app/app-footer.tsx +++ b/packages/demo-app/src/app/app-footer.tsx @@ -5,52 +5,57 @@ import Grid from '@material-ui/core/Grid'; import Container from '@material-ui/core/Container'; import Divider from '@material-ui/core/Divider'; import Link from '@material-ui/core/Link'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, createStyles, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme: Theme) => { - return createStyles({ - root: { - marginTop: 20, - }, - section: { - color: theme.palette.secondary.contrastText, - }, - footer: { - padding: 0, - [theme.breakpoints.up('sm')]: { - padding: '15px 0', +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => { + return createStyles({ + root: { + marginTop: 20, }, - }, - logo: { - display: 'flex', - alignItems: 'center', - marginBottom: theme.spacing(4), - '& img': { - width: 28, - height: 22, - marginRight: theme.spacing(1.5), + section: { + color: theme.palette.secondary.contrastText, }, - }, - list: { - marginBottom: theme.spacing(4), - '& h3': { - fontWeight: theme.typography.fontWeightMedium, - }, - '& ul': { - margin: 0, + footer: { padding: 0, - listStyle: 'none', + [theme.breakpoints.up('sm')]: { + padding: '15px 0', + }, + }, + logo: { + display: 'flex', + alignItems: 'center', + marginBottom: theme.spacing(4), + '& img': { + width: 28, + height: 22, + marginRight: theme.spacing(1.5), + }, + }, + list: { + marginBottom: theme.spacing(4), + '& h3': { + fontWeight: theme.typography.fontWeightMedium, + }, + '& ul': { + margin: 0, + padding: 0, + listStyle: 'none', + }, + '& li': { + padding: '6px 0', + color: theme.palette.text.secondary, + }, }, - '& li': { - padding: '6px 0', - color: theme.palette.text.secondary, + version: { + marginTop: theme.spacing(3), }, - }, - version: { - marginTop: theme.spacing(3), - }, - }); -}); + }); + }, + { defaultTheme }, +); function AppFooter() { const classes = useStyles(); diff --git a/packages/grid/_modules_/grid/components/Pagination.tsx b/packages/grid/_modules_/grid/components/Pagination.tsx index 8e408bd94ce02..6d9409265f3b0 100644 --- a/packages/grid/_modules_/grid/components/Pagination.tsx +++ b/packages/grid/_modules_/grid/components/Pagination.tsx @@ -1,30 +1,35 @@ import * as React from 'react'; import TablePagination from '@material-ui/core/TablePagination'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { useGridSelector } from '../hooks/features/core/useGridSelector'; import { paginationSelector } from '../hooks/features/pagination/paginationSelector'; import { optionsSelector } from '../hooks/utils/optionsSelector'; import { ApiContext } from './api-context'; import { isMuiV5 } from '../utils'; +const defaultTheme = createMuiTheme(); // Used to hide the drop down select from the TablePaginagion -const useStyles = makeStyles((theme: Theme) => ({ - caption: { - display: 'none', - [theme.breakpoints.up('md')]: { - display: 'block', +const useStyles = makeStyles( + (theme: Theme) => ({ + caption: { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'block', + }, + '& ~ &': { + display: 'block', + }, }, - '& ~ &': { - display: 'block', + input: { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'block', + }, }, - }, - input: { - display: 'none', - [theme.breakpoints.up('md')]: { - display: 'block', - }, - }, -})); + }), + { defaultTheme }, +); export function Pagination() { const classes = useStyles(); diff --git a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts index 2518ccc9afdc6..69a6f0e783a7a 100644 --- a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts +++ b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts @@ -1,6 +1,8 @@ -import { darken, lighten, makeStyles, Theme } from '@material-ui/core/styles'; +import { darken, lighten, createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { getThemePaletteMode, muiStyleAlpha } from '../../utils'; +const defaultTheme = createMuiTheme(); export const useStyles = makeStyles( (theme: Theme) => { const borderColor = @@ -317,5 +319,5 @@ export const useStyles = makeStyles( } return gridStyle; }, - { name: 'MuiDataGrid' }, + { name: 'MuiDataGrid', defaultTheme }, ); diff --git a/packages/grid/_modules_/grid/components/panel/ColumnsPanel.tsx b/packages/grid/_modules_/grid/components/panel/ColumnsPanel.tsx index 19c0044557b9f..425dc52bba271 100644 --- a/packages/grid/_modules_/grid/components/panel/ColumnsPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/ColumnsPanel.tsx @@ -4,7 +4,7 @@ import Switch from '@material-ui/core/Switch'; import Button from '@material-ui/core/Button'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import TextField from '@material-ui/core/TextField'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { allColumnsSelector } from '../../hooks/features/columns/columnsSelector'; import { useGridSelector } from '../../hooks/features/core/useGridSelector'; import { optionsSelector } from '../../hooks/utils/optionsSelector'; diff --git a/packages/grid/_modules_/grid/components/panel/Panel.tsx b/packages/grid/_modules_/grid/components/panel/Panel.tsx index b01dea50f7bee..7a4dd91347a00 100644 --- a/packages/grid/_modules_/grid/components/panel/Panel.tsx +++ b/packages/grid/_modules_/grid/components/panel/Panel.tsx @@ -2,10 +2,12 @@ import * as React from 'react'; import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import Paper from '@material-ui/core/Paper'; import Popper from '@material-ui/core/Popper'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { ApiContext } from '../api-context'; import { isMuiV5 } from '../../utils'; +const defaultTheme = createMuiTheme(); const useStyles = makeStyles( (theme: Theme) => ({ root: { @@ -31,7 +33,7 @@ const useStyles = makeStyles( }, }, }), - { name: 'MuiDataGridPanel' }, + { name: 'MuiDataGridPanel', defaultTheme }, ); export interface PanelProps { diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/FilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/FilterForm.tsx index 0fc0d129f9f9d..7cf7325072035 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/FilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/FilterForm.tsx @@ -3,7 +3,7 @@ import FormControl from '@material-ui/core/FormControl'; import IconButton from '@material-ui/core/IconButton'; import InputLabel from '@material-ui/core/InputLabel'; import Select from '@material-ui/core/Select'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { filterableColumnsSelector } from '../../../hooks/features/columns/columnsSelector'; import { useGridSelector } from '../../../hooks/features/core/useGridSelector'; import { ColDef } from '../../../models/colDef/colDef'; @@ -24,7 +24,7 @@ export interface FilterFormProps { } const useStyles = makeStyles( - () => ({ + { root: { display: 'flex', justifyContent: 'space-around', @@ -48,7 +48,7 @@ const useStyles = makeStyles( marginRight: 6, marginBottom: 2, }, - }), + }, { name: 'MuiDataGridFilterForm' }, ); diff --git a/packages/storybook/src/stories/grid-filter.stories.tsx b/packages/storybook/src/stories/grid-filter.stories.tsx index c4d24c1a60c41..ff7ad3ff059cd 100644 --- a/packages/storybook/src/stories/grid-filter.stories.tsx +++ b/packages/storybook/src/stories/grid-filter.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid } from '@material-ui/data-grid'; import Rating from '@material-ui/lab/Rating'; import Button from '@material-ui/core/Button'; diff --git a/packages/x-grid-data-generator/src/renderer/renderCountry.tsx b/packages/x-grid-data-generator/src/renderer/renderCountry.tsx index 14bf3462bb3b7..c19316a2382bb 100644 --- a/packages/x-grid-data-generator/src/renderer/renderCountry.tsx +++ b/packages/x-grid-data-generator/src/renderer/renderCountry.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { CellParams } from '@material-ui/x-grid'; // ISO 3166-1 alpha-2 diff --git a/packages/x-grid-data-generator/src/renderer/renderIncoterm.tsx b/packages/x-grid-data-generator/src/renderer/renderIncoterm.tsx index 7ebe71821b99a..cc0d05f8f276b 100644 --- a/packages/x-grid-data-generator/src/renderer/renderIncoterm.tsx +++ b/packages/x-grid-data-generator/src/renderer/renderIncoterm.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Tooltip from '@material-ui/core/Tooltip'; import InfoIcon from '@material-ui/icons/Info'; import { CellParams, CellValue } from '@material-ui/x-grid'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles({ root: { diff --git a/packages/x-grid-data-generator/src/renderer/renderLink.tsx b/packages/x-grid-data-generator/src/renderer/renderLink.tsx index 1fd8f404c57c2..831d5a7c1c746 100644 --- a/packages/x-grid-data-generator/src/renderer/renderLink.tsx +++ b/packages/x-grid-data-generator/src/renderer/renderLink.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { CellParams } from '@material-ui/x-grid'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles({ root: { diff --git a/packages/x-grid-data-generator/src/renderer/renderPnl.tsx b/packages/x-grid-data-generator/src/renderer/renderPnl.tsx index c881c8006838b..2651eb68a66fe 100644 --- a/packages/x-grid-data-generator/src/renderer/renderPnl.tsx +++ b/packages/x-grid-data-generator/src/renderer/renderPnl.tsx @@ -1,27 +1,31 @@ import * as React from 'react'; import clsx from 'clsx'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { createStyles, Theme, createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { CellParams, getThemePaletteMode } from '@material-ui/x-grid'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: '100%', - fontVariantNumeric: 'tabular-nums', - }, - positive: { - color: - getThemePaletteMode(theme.palette) === 'light' - ? theme.palette.success.dark - : theme.palette.success.light, - }, - negative: { - color: - getThemePaletteMode(theme.palette) === 'light' - ? theme.palette.error.dark - : theme.palette.error.light, - }, - }), +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + width: '100%', + fontVariantNumeric: 'tabular-nums', + }, + positive: { + color: + getThemePaletteMode(theme.palette) === 'light' + ? theme.palette.success.dark + : theme.palette.success.light, + }, + negative: { + color: + getThemePaletteMode(theme.palette) === 'light' + ? theme.palette.error.dark + : theme.palette.error.light, + }, + }), + { defaultTheme }, ); function pnlFormatter(value: number) { diff --git a/packages/x-grid-data-generator/src/renderer/renderProgress.tsx b/packages/x-grid-data-generator/src/renderer/renderProgress.tsx index 72a022e7790e8..7c56a9bf947b9 100644 --- a/packages/x-grid-data-generator/src/renderer/renderProgress.tsx +++ b/packages/x-grid-data-generator/src/renderer/renderProgress.tsx @@ -1,38 +1,42 @@ import * as React from 'react'; import clsx from 'clsx'; import { CellParams } from '@material-ui/x-grid'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { createMuiTheme, Theme, createStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - border: `1px solid ${theme.palette.divider}`, - position: 'relative', - overflow: 'hidden', - width: '100%', - height: 26, - borderRadius: 2, - }, - value: { - position: 'absolute', - lineHeight: '24px', - width: '100%', - display: 'flex', - justifyContent: 'center', - }, - bar: { - height: '100%', - '&.low': { - backgroundColor: '#f44336', +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + border: `1px solid ${theme.palette.divider}`, + position: 'relative', + overflow: 'hidden', + width: '100%', + height: 26, + borderRadius: 2, }, - '&.medium': { - backgroundColor: '#efbb5aa3', + value: { + position: 'absolute', + lineHeight: '24px', + width: '100%', + display: 'flex', + justifyContent: 'center', }, - '&.high': { - backgroundColor: '#088208a3', + bar: { + height: '100%', + '&.low': { + backgroundColor: '#f44336', + }, + '&.medium': { + backgroundColor: '#efbb5aa3', + }, + '&.high': { + backgroundColor: '#088208a3', + }, }, - }, - }), + }), + { defaultTheme }, ); interface ProgressBarProps { diff --git a/packages/x-grid-data-generator/src/renderer/renderRating.tsx b/packages/x-grid-data-generator/src/renderer/renderRating.tsx index b2b0f85e2d109..6f690a03f8ca4 100644 --- a/packages/x-grid-data-generator/src/renderer/renderRating.tsx +++ b/packages/x-grid-data-generator/src/renderer/renderRating.tsx @@ -1,20 +1,24 @@ import * as React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Theme, createStyles, createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { CellParams } from '@material-ui/x-grid'; import Rating from '@material-ui/lab/Rating'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - display: 'flex', - alignItems: 'center', - lineHeight: '24px', - color: theme.palette.text.secondary, - '& .MuiRating-root': { - marginRight: theme.spacing(1), +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + display: 'flex', + alignItems: 'center', + lineHeight: '24px', + color: theme.palette.text.secondary, + '& .MuiRating-root': { + marginRight: theme.spacing(1), + }, }, - }, - }), + }), + { defaultTheme }, ); interface RatingValueProps { diff --git a/packages/x-grid-data-generator/src/renderer/renderStatus.tsx b/packages/x-grid-data-generator/src/renderer/renderStatus.tsx index 125462fdb87db..d5b0ce2691f7c 100644 --- a/packages/x-grid-data-generator/src/renderer/renderStatus.tsx +++ b/packages/x-grid-data-generator/src/renderer/renderStatus.tsx @@ -6,33 +6,37 @@ import AutorenewIcon from '@material-ui/icons/Autorenew'; import DoneIcon from '@material-ui/icons/Done'; import Chip from '@material-ui/core/Chip'; import { CellParams } from '@material-ui/x-grid'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Theme, createStyles, createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - justifyContent: 'left', - '& .icon': { - color: 'inherit', +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + justifyContent: 'left', + '& .icon': { + color: 'inherit', + }, }, - }, - Open: { - color: theme.palette.info.dark, - border: `1px solid ${theme.palette.info.main}`, - }, - Filled: { - color: theme.palette.success.dark, - border: `1px solid ${theme.palette.success.main}`, - }, - PartiallyFilled: { - color: theme.palette.warning.dark, - border: `1px solid ${theme.palette.warning.main}`, - }, - Rejected: { - color: theme.palette.error.dark, - border: `1px solid ${theme.palette.error.main}`, - }, - }), + Open: { + color: theme.palette.info.dark, + border: `1px solid ${theme.palette.info.main}`, + }, + Filled: { + color: theme.palette.success.dark, + border: `1px solid ${theme.palette.success.main}`, + }, + PartiallyFilled: { + color: theme.palette.warning.dark, + border: `1px solid ${theme.palette.warning.main}`, + }, + Rejected: { + color: theme.palette.error.dark, + border: `1px solid ${theme.palette.error.main}`, + }, + }), + { defaultTheme }, ); interface StatusProps { diff --git a/packages/x-grid-data-generator/src/renderer/renderTotalPrice.tsx b/packages/x-grid-data-generator/src/renderer/renderTotalPrice.tsx index 6e21a9653e7ee..ffa5c6b4a5cfd 100644 --- a/packages/x-grid-data-generator/src/renderer/renderTotalPrice.tsx +++ b/packages/x-grid-data-generator/src/renderer/renderTotalPrice.tsx @@ -1,22 +1,26 @@ import * as React from 'react'; import clsx from 'clsx'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { createStyles, Theme, createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { CellParams, muiStyleAlpha } from '@material-ui/x-grid'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: '100%', - paddingRight: 8, - fontVariantNumeric: 'tabular-nums', - }, - good: { - backgroundColor: muiStyleAlpha(theme.palette.success.main, 0.3), - }, - bad: { - backgroundColor: muiStyleAlpha(theme.palette.error.main, 0.3), - }, - }), +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + width: '100%', + paddingRight: 8, + fontVariantNumeric: 'tabular-nums', + }, + good: { + backgroundColor: muiStyleAlpha(theme.palette.success.main, 0.3), + }, + bad: { + backgroundColor: muiStyleAlpha(theme.palette.error.main, 0.3), + }, + }), + { defaultTheme }, ); interface TotalPriceProps { From b363e95c74f26f6325251dd7325ee5c596d5cc25 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 11 May 2021 17:29:36 +0200 Subject: [PATCH 02/11] more changes --- .../data-grid/columns/RenderExpandCellGrid.js | 3 +- .../columns/RenderExpandCellGrid.tsx | 3 +- .../data-grid/demo/FullFeaturedDemo.js | 202 +++++++++--------- .../data-grid/demo/FullFeaturedDemo.tsx | 202 +++++++++--------- .../data-grid/editing/IsCellEditableGrid.js | 27 ++- .../data-grid/editing/IsCellEditableGrid.tsx | 27 ++- .../editing/RenderRatingEditCellGrid.js | 2 +- .../editing/RenderRatingEditCellGrid.tsx | 2 +- .../data-grid/editing/StartEditButtonGrid.js | 21 +- .../data-grid/editing/StartEditButtonGrid.tsx | 21 +- .../editing/ValidateCellApiRefGrid.js | 35 +-- .../editing/ValidateCellApiRefGrid.tsx | 35 +-- .../editing/ValidateRowModelControlGrid.js | 35 +-- .../editing/ValidateRowModelControlGrid.tsx | 35 +-- .../editing/ValidateServerNameGrid.js | 33 +-- .../editing/ValidateServerNameGrid.tsx | 33 +-- .../filtering/CustomRatingOperator.js | 2 +- .../filtering/CustomRatingOperator.tsx | 2 +- .../data-grid/rows/StylingRowsGrid.js | 73 ++++--- .../data-grid/rows/StylingRowsGrid.tsx | 73 ++++--- .../grid/components/GridPagination.tsx | 37 ++-- .../grid/components/menu/GridMenu.tsx | 6 +- .../components/panel/GridPanelContent.tsx | 2 +- .../grid/components/panel/GridPanelFooter.tsx | 2 +- .../grid/components/panel/GridPanelHeader.tsx | 6 +- .../components/panel/GridPanelWrapper.tsx | 2 +- .../toolbar/GridFilterToolbarButton.tsx | 6 +- .../src/stories/grid-rows.stories.tsx | 42 ++-- .../stories/playground/RecipeReviewCard.tsx | 52 ++--- 29 files changed, 560 insertions(+), 461 deletions(-) diff --git a/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js b/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js index 427ebeb62fb5b..7de5d2c655f6f 100644 --- a/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js +++ b/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js @@ -3,7 +3,8 @@ import PropTypes from 'prop-types'; import Typography from '@material-ui/core/Typography'; import Paper from '@material-ui/core/Paper'; import Popper from '@material-ui/core/Popper'; -import { makeStyles } from '@material-ui/core/styles'; + +import { makeStyles } from '@material-ui/styles'; import { DataGrid, isOverflown } from '@material-ui/data-grid'; const useStyles = makeStyles(() => ({ diff --git a/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx b/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx index f57f9e53d46d1..14260b30f88c4 100644 --- a/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx +++ b/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import Typography from '@material-ui/core/Typography'; import Paper from '@material-ui/core/Paper'; import Popper from '@material-ui/core/Popper'; -import { createStyles, makeStyles } from '@material-ui/core/styles'; +import { createStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, GridColDef, diff --git a/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js b/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js index 051dbff7fe31b..f6470478b44b8 100644 --- a/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js +++ b/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js @@ -3,7 +3,8 @@ import PropTypes from 'prop-types'; import { XGrid, GridToolbar } from '@material-ui/x-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; import FormControl from '@material-ui/core/FormControl'; import FormGroup from '@material-ui/core/FormGroup'; import Button from '@material-ui/core/Button'; @@ -11,108 +12,117 @@ import InputLabel from '@material-ui/core/InputLabel'; import MenuItem from '@material-ui/core/MenuItem'; import Select from '@material-ui/core/Select'; -const useStylesAntDesign = makeStyles((theme) => ({ - root: { - border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`, - color: - theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { +const defaultTheme = createMuiTheme(); +const useStylesAntDesign = makeStyles( + (theme) => ({ + root: { + border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`, color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, - }, - '& .MuiCheckbox-root svg': { - width: 16, - height: 16, - backgroundColor: 'transparent', - border: `1px solid ${ - theme.palette.type === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)' - }`, - borderRadius: 2, - }, - '& .MuiCheckbox-root svg path': { - display: 'none', - }, - '& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': { - backgroundColor: '#1890ff', - borderColor: '#1890ff', - }, - '& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': { - position: 'absolute', - display: 'table', - border: '2px solid #fff', - borderTop: 0, - borderLeft: 0, - transform: 'rotate(45deg) translate(-50%,-50%)', - opacity: 1, - transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s', - content: '""', - top: '50%', - left: '39%', - width: 5.71428571, - height: 9.14285714, - }, - '& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': { - width: 8, - height: 8, - backgroundColor: '#1890ff', - transform: 'none', - top: '39%', - border: 0, + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.65)', + }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + '& .MuiCheckbox-root svg': { + width: 16, + height: 16, + backgroundColor: 'transparent', + border: `1px solid ${ + theme.palette.type === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)' + }`, + borderRadius: 2, + }, + '& .MuiCheckbox-root svg path': { + display: 'none', + }, + '& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': { + backgroundColor: '#1890ff', + borderColor: '#1890ff', + }, + '& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': { + position: 'absolute', + display: 'table', + border: '2px solid #fff', + borderTop: 0, + borderLeft: 0, + transform: 'rotate(45deg) translate(-50%,-50%)', + opacity: 1, + transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s', + content: '""', + top: '50%', + left: '39%', + width: 5.71428571, + height: 9.14285714, + }, + '& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': { + width: 8, + height: 8, + backgroundColor: '#1890ff', + transform: 'none', + top: '39%', + border: 0, + }, }, - }, -})); + }), + { defaultTheme }, +); -const useStyles = makeStyles((theme) => ({ - root: { - display: 'flex', - flexDirection: 'column', - height: 600, - width: '100%', - '& .MuiFormGroup-options': { - alignItems: 'center', - paddingBottom: theme.spacing(1), - '& > div': { - minWidth: 100, - margin: theme.spacing(2, 2, 2, 0), +const useStyles = makeStyles( + (theme) => ({ + root: { + display: 'flex', + flexDirection: 'column', + height: 600, + width: '100%', + '& .MuiFormGroup-options': { + alignItems: 'center', + paddingBottom: theme.spacing(1), + '& > div': { + minWidth: 100, + margin: theme.spacing(2, 2, 2, 0), + }, }, }, - }, -})); + }), + { defaultTheme }, +); function SettingsPanel(props) { const { onApply, type, size, theme } = props; diff --git a/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx b/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx index 294993ffffbbe..9b27c51d3ca5f 100644 --- a/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx +++ b/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { XGrid, GridToolbar } from '@material-ui/x-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; import FormControl from '@material-ui/core/FormControl'; import FormGroup from '@material-ui/core/FormGroup'; import Button from '@material-ui/core/Button'; @@ -10,108 +11,117 @@ import InputLabel from '@material-ui/core/InputLabel'; import MenuItem from '@material-ui/core/MenuItem'; import Select from '@material-ui/core/Select'; -const useStylesAntDesign = makeStyles((theme) => ({ - root: { - border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`, - color: - theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { +const defaultTheme = createMuiTheme(); +const useStylesAntDesign = makeStyles( + (theme: Theme) => ({ + root: { + border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`, color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, - }, - '& .MuiCheckbox-root svg': { - width: 16, - height: 16, - backgroundColor: 'transparent', - border: `1px solid ${ - theme.palette.type === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)' - }`, - borderRadius: 2, - }, - '& .MuiCheckbox-root svg path': { - display: 'none', - }, - '& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': { - backgroundColor: '#1890ff', - borderColor: '#1890ff', - }, - '& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': { - position: 'absolute', - display: 'table', - border: '2px solid #fff', - borderTop: 0, - borderLeft: 0, - transform: 'rotate(45deg) translate(-50%,-50%)', - opacity: 1, - transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s', - content: '""', - top: '50%', - left: '39%', - width: 5.71428571, - height: 9.14285714, - }, - '& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': { - width: 8, - height: 8, - backgroundColor: '#1890ff', - transform: 'none', - top: '39%', - border: 0, + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.65)', + }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + '& .MuiCheckbox-root svg': { + width: 16, + height: 16, + backgroundColor: 'transparent', + border: `1px solid ${ + theme.palette.type === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)' + }`, + borderRadius: 2, + }, + '& .MuiCheckbox-root svg path': { + display: 'none', + }, + '& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': { + backgroundColor: '#1890ff', + borderColor: '#1890ff', + }, + '& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': { + position: 'absolute', + display: 'table', + border: '2px solid #fff', + borderTop: 0, + borderLeft: 0, + transform: 'rotate(45deg) translate(-50%,-50%)', + opacity: 1, + transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s', + content: '""', + top: '50%', + left: '39%', + width: 5.71428571, + height: 9.14285714, + }, + '& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': { + width: 8, + height: 8, + backgroundColor: '#1890ff', + transform: 'none', + top: '39%', + border: 0, + }, }, - }, -})); + }), + { defaultTheme }, +); -const useStyles = makeStyles((theme) => ({ - root: { - display: 'flex', - flexDirection: 'column', - height: 600, - width: '100%', - '& .MuiFormGroup-options': { - alignItems: 'center', - paddingBottom: theme.spacing(1), - '& > div': { - minWidth: 100, - margin: theme.spacing(2, 2, 2, 0), +const useStyles = makeStyles( + (theme: Theme) => ({ + root: { + display: 'flex', + flexDirection: 'column', + height: 600, + width: '100%', + '& .MuiFormGroup-options': { + alignItems: 'center', + paddingBottom: theme.spacing(1), + '& > div': { + minWidth: 100, + margin: theme.spacing(2, 2, 2, 0), + }, }, }, - }, -})); + }), + { defaultTheme }, +); type GridDataType = 'Employee' | 'Commodity'; type GridDataThemeOption = 'default' | 'ant'; diff --git a/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.js b/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.js index d234df2b75638..aa6180b54c379 100644 --- a/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.js +++ b/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.js @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, getThemePaletteMode } from '@material-ui/data-grid'; import { randomCreatedDate, @@ -8,17 +9,21 @@ import { randomUpdatedDate, } from '@material-ui/x-grid-data-generator'; -const useStyles = makeStyles((theme) => { - const backgroundColor = - getThemePaletteMode(theme.palette) === 'dark' ? '#376331' : 'rgb(217 243 190)'; - return { - root: { - '& .MuiDataGrid-cellEditable': { - backgroundColor, +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => { + const backgroundColor = + getThemePaletteMode(theme.palette) === 'dark' ? '#376331' : 'rgb(217 243 190)'; + return { + root: { + '& .MuiDataGrid-cellEditable': { + backgroundColor, + }, }, - }, - }; -}); + }; + }, + { defaultTheme }, +); export default function IsCellEditableGrid() { const classes = useStyles(); diff --git a/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.tsx b/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.tsx index 9e7f53bbcf612..85b239b410d13 100644 --- a/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.tsx +++ b/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, getThemePaletteMode, @@ -13,17 +14,21 @@ import { randomUpdatedDate, } from '@material-ui/x-grid-data-generator'; -const useStyles = makeStyles((theme: Theme) => { - const backgroundColor = - getThemePaletteMode(theme.palette) === 'dark' ? '#376331' : 'rgb(217 243 190)'; - return { - root: { - '& .MuiDataGrid-cellEditable': { - backgroundColor, +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => { + const backgroundColor = + getThemePaletteMode(theme.palette) === 'dark' ? '#376331' : 'rgb(217 243 190)'; + return { + root: { + '& .MuiDataGrid-cellEditable': { + backgroundColor, + }, }, - }, - }; -}); + }; + }, + { defaultTheme }, +); export default function IsCellEditableGrid() { const classes = useStyles(); diff --git a/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.js b/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.js index 271af33de5814..06cdb4b3b7798 100644 --- a/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.js +++ b/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.js @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import Rating from '@material-ui/lab/Rating'; import { DataGrid } from '@material-ui/data-grid'; diff --git a/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.tsx b/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.tsx index 660d823632e26..4e5973af1bb53 100644 --- a/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.tsx +++ b/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import Rating from '@material-ui/lab/Rating'; import { DataGrid, GridCellParams } from '@material-ui/data-grid'; diff --git a/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.js b/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.js index aa09399d29e51..f54ee71bea3a6 100644 --- a/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.js +++ b/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.js @@ -8,15 +8,20 @@ import { randomTraderName, randomUpdatedDate, } from '@material-ui/x-grid-data-generator'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme) => ({ - root: { - justifyContent: 'center', - display: 'flex', - borderBottom: `1px solid ${theme.palette.divider}`, - }, -})); +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => ({ + root: { + justifyContent: 'center', + display: 'flex', + borderBottom: `1px solid ${theme.palette.divider}`, + }, + }), + { defaultTheme }, +); function EditToolbar(props) { const { selectedCellParams, apiRef, setSelectedCellParams } = props; diff --git a/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.tsx b/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.tsx index 4f37e2d8966b6..79a356bfda026 100644 --- a/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.tsx +++ b/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.tsx @@ -14,15 +14,20 @@ import { randomTraderName, randomUpdatedDate, } from '@material-ui/x-grid-data-generator'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme) => ({ - root: { - justifyContent: 'center', - display: 'flex', - borderBottom: `1px solid ${theme.palette.divider}`, - }, -})); +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => ({ + root: { + justifyContent: 'center', + display: 'flex', + borderBottom: `1px solid ${theme.palette.divider}`, + }, + }), + { defaultTheme }, +); interface EditToolbarProps { apiRef: GridApiRef; diff --git a/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.js b/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.js index 1f8059e6fbef4..73416694698a8 100644 --- a/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.js +++ b/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.js @@ -1,25 +1,30 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { getThemePaletteMode, useGridApiRef, XGrid } from '@material-ui/x-grid'; import { randomEmail, randomTraderName } from '@material-ui/x-grid-data-generator'; -const useStyles = makeStyles((theme) => { - const isDark = getThemePaletteMode(theme.palette) === 'dark'; +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => { + const isDark = getThemePaletteMode(theme.palette) === 'dark'; - return { - root: { - '& .MuiDataGrid-cellEditing': { - backgroundColor: 'rgb(255,215,115, 0.19)', - color: '#1a3e72', + return { + root: { + '& .MuiDataGrid-cellEditing': { + backgroundColor: 'rgb(255,215,115, 0.19)', + color: '#1a3e72', + }, + '& .Mui-error': { + backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, + color: isDark ? '#ff4343' : '#750f0f', + }, }, - '& .Mui-error': { - backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, - color: isDark ? '#ff4343' : '#750f0f', - }, - }, - }; -}); + }; + }, + { defaultTheme }, +); function validateEmail(email) { const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; diff --git a/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.tsx b/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.tsx index 6cbb9d14614f2..36257d592ff64 100644 --- a/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.tsx +++ b/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { getThemePaletteMode, GridColumns, @@ -11,22 +12,26 @@ import { } from '@material-ui/x-grid'; import { randomEmail, randomTraderName } from '@material-ui/x-grid-data-generator'; -const useStyles = makeStyles((theme: Theme) => { - const isDark = getThemePaletteMode(theme.palette) === 'dark'; +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => { + const isDark = getThemePaletteMode(theme.palette) === 'dark'; - return { - root: { - '& .MuiDataGrid-cellEditing': { - backgroundColor: 'rgb(255,215,115, 0.19)', - color: '#1a3e72', + return { + root: { + '& .MuiDataGrid-cellEditing': { + backgroundColor: 'rgb(255,215,115, 0.19)', + color: '#1a3e72', + }, + '& .Mui-error': { + backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, + color: isDark ? '#ff4343' : '#750f0f', + }, }, - '& .Mui-error': { - backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, - color: isDark ? '#ff4343' : '#750f0f', - }, - }, - }; -}); + }; + }, + { defaultTheme }, +); function validateEmail(email) { const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; diff --git a/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.js b/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.js index 1525afc9514bf..3a906e55b702c 100644 --- a/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.js +++ b/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.js @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, getThemePaletteMode } from '@material-ui/data-grid'; import { randomCreatedDate, @@ -9,22 +10,26 @@ import { randomUpdatedDate, } from '@material-ui/x-grid-data-generator'; -const useStyles = makeStyles((theme) => { - const isDark = getThemePaletteMode(theme.palette) === 'dark'; +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => { + const isDark = getThemePaletteMode(theme.palette) === 'dark'; - return { - root: { - '& .MuiDataGrid-cellEditing': { - backgroundColor: 'rgb(255,215,115, 0.19)', - color: '#1a3e72', + return { + root: { + '& .MuiDataGrid-cellEditing': { + backgroundColor: 'rgb(255,215,115, 0.19)', + color: '#1a3e72', + }, + '& .Mui-error': { + backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, + color: isDark ? '#ff4343' : '#750f0f', + }, }, - '& .Mui-error': { - backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, - color: isDark ? '#ff4343' : '#750f0f', - }, - }, - }; -}); + }; + }, + { defaultTheme }, +); function validateEmail(email) { const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; diff --git a/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.tsx b/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.tsx index ef68467d87f58..d552db17a3a14 100644 --- a/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.tsx +++ b/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, getThemePaletteMode, @@ -16,22 +17,26 @@ import { randomUpdatedDate, } from '@material-ui/x-grid-data-generator'; -const useStyles = makeStyles((theme: Theme) => { - const isDark = getThemePaletteMode(theme.palette) === 'dark'; +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => { + const isDark = getThemePaletteMode(theme.palette) === 'dark'; - return { - root: { - '& .MuiDataGrid-cellEditing': { - backgroundColor: 'rgb(255,215,115, 0.19)', - color: '#1a3e72', + return { + root: { + '& .MuiDataGrid-cellEditing': { + backgroundColor: 'rgb(255,215,115, 0.19)', + color: '#1a3e72', + }, + '& .Mui-error': { + backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, + color: isDark ? '#ff4343' : '#750f0f', + }, }, - '& .Mui-error': { - backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, - color: isDark ? '#ff4343' : '#750f0f', - }, - }, - }; -}); + }; + }, + { defaultTheme }, +); function validateEmail(email) { const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; diff --git a/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.js b/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.js index 054d5029b317b..ffe89a69202e7 100644 --- a/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.js +++ b/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.js @@ -1,23 +1,28 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { useGridApiRef, getThemePaletteMode, XGrid } from '@material-ui/x-grid'; -const useStyles = makeStyles((theme) => { - const isDark = getThemePaletteMode(theme.palette) === 'dark'; +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => { + const isDark = getThemePaletteMode(theme.palette) === 'dark'; - return { - root: { - '& .MuiDataGrid-cellEditable': { - backgroundColor: isDark ? '#376331' : 'rgb(217 243 190)', + return { + root: { + '& .MuiDataGrid-cellEditable': { + backgroundColor: isDark ? '#376331' : 'rgb(217 243 190)', + }, + '& .Mui-error': { + backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, + color: isDark ? '#ff4343' : '#750f0f', + }, }, - '& .Mui-error': { - backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, - color: isDark ? '#ff4343' : '#750f0f', - }, - }, - }; -}); + }; + }, + { defaultTheme }, +); let promiseTimeout; function validateName(username) { diff --git a/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.tsx b/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.tsx index 75d7d63e16d1a..b118ae96501b1 100644 --- a/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.tsx +++ b/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { GridColumns, GridEditCellPropsParams, @@ -10,21 +11,25 @@ import { XGrid, } from '@material-ui/x-grid'; -const useStyles = makeStyles((theme: Theme) => { - const isDark = getThemePaletteMode(theme.palette) === 'dark'; +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => { + const isDark = getThemePaletteMode(theme.palette) === 'dark'; - return { - root: { - '& .MuiDataGrid-cellEditable': { - backgroundColor: isDark ? '#376331' : 'rgb(217 243 190)', + return { + root: { + '& .MuiDataGrid-cellEditable': { + backgroundColor: isDark ? '#376331' : 'rgb(217 243 190)', + }, + '& .Mui-error': { + backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, + color: isDark ? '#ff4343' : '#750f0f', + }, }, - '& .Mui-error': { - backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, - color: isDark ? '#ff4343' : '#750f0f', - }, - }, - }; -}); + }; + }, + { defaultTheme }, +); let promiseTimeout: any; function validateName(username: string): Promise { diff --git a/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.js b/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.js index 0eccea10bbc21..505486749f4c2 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.js +++ b/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { Rating } from '@material-ui/lab'; import { DataGrid } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; diff --git a/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.tsx b/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.tsx index 7c9475187735b..f40ef202b630d 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { Rating } from '@material-ui/lab'; import { GridFilterInputValueProps, diff --git a/docs/src/pages/components/data-grid/rows/StylingRowsGrid.js b/docs/src/pages/components/data-grid/rows/StylingRowsGrid.js index 1578f397b6eb4..4e89c6ac7d8ff 100644 --- a/docs/src/pages/components/data-grid/rows/StylingRowsGrid.js +++ b/docs/src/pages/components/data-grid/rows/StylingRowsGrid.js @@ -1,48 +1,53 @@ import * as React from 'react'; import { DataGrid, getThemePaletteMode } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { makeStyles, darken, lighten } from '@material-ui/core/styles'; +import { createMuiTheme, darken, lighten } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme) => { - const getBackgroundColor = (color) => - getThemePaletteMode(theme.palette) === 'dark' - ? darken(color, 0.6) - : lighten(color, 0.6); +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => { + const getBackgroundColor = (color) => + getThemePaletteMode(theme.palette) === 'dark' + ? darken(color, 0.6) + : lighten(color, 0.6); - const getHoverBackgroundColor = (color) => - getThemePaletteMode(theme.palette) === 'dark' - ? darken(color, 0.5) - : lighten(color, 0.5); + const getHoverBackgroundColor = (color) => + getThemePaletteMode(theme.palette) === 'dark' + ? darken(color, 0.5) + : lighten(color, 0.5); - return { - root: { - '& .super-app-theme--Open': { - backgroundColor: getBackgroundColor(theme.palette.info.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.info.main), + return { + root: { + '& .super-app-theme--Open': { + backgroundColor: getBackgroundColor(theme.palette.info.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.info.main), + }, }, - }, - '& .super-app-theme--Filled': { - backgroundColor: getBackgroundColor(theme.palette.success.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.success.main), + '& .super-app-theme--Filled': { + backgroundColor: getBackgroundColor(theme.palette.success.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.success.main), + }, }, - }, - '& .super-app-theme--PartiallyFilled': { - backgroundColor: getBackgroundColor(theme.palette.warning.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.warning.main), + '& .super-app-theme--PartiallyFilled': { + backgroundColor: getBackgroundColor(theme.palette.warning.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.warning.main), + }, }, - }, - '& .super-app-theme--Rejected': { - backgroundColor: getBackgroundColor(theme.palette.error.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.error.main), + '& .super-app-theme--Rejected': { + backgroundColor: getBackgroundColor(theme.palette.error.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.error.main), + }, }, }, - }, - }; -}); + }; + }, + { defaultTheme }, +); export default function StylingRowsGrid() { const classes = useStyles(); diff --git a/docs/src/pages/components/data-grid/rows/StylingRowsGrid.tsx b/docs/src/pages/components/data-grid/rows/StylingRowsGrid.tsx index 1578f397b6eb4..0cda613ce81fc 100644 --- a/docs/src/pages/components/data-grid/rows/StylingRowsGrid.tsx +++ b/docs/src/pages/components/data-grid/rows/StylingRowsGrid.tsx @@ -1,48 +1,53 @@ import * as React from 'react'; import { DataGrid, getThemePaletteMode } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { makeStyles, darken, lighten } from '@material-ui/core/styles'; +import { createMuiTheme, darken, lighten, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme) => { - const getBackgroundColor = (color) => - getThemePaletteMode(theme.palette) === 'dark' - ? darken(color, 0.6) - : lighten(color, 0.6); +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => { + const getBackgroundColor = (color) => + getThemePaletteMode(theme.palette) === 'dark' + ? darken(color, 0.6) + : lighten(color, 0.6); - const getHoverBackgroundColor = (color) => - getThemePaletteMode(theme.palette) === 'dark' - ? darken(color, 0.5) - : lighten(color, 0.5); + const getHoverBackgroundColor = (color) => + getThemePaletteMode(theme.palette) === 'dark' + ? darken(color, 0.5) + : lighten(color, 0.5); - return { - root: { - '& .super-app-theme--Open': { - backgroundColor: getBackgroundColor(theme.palette.info.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.info.main), + return { + root: { + '& .super-app-theme--Open': { + backgroundColor: getBackgroundColor(theme.palette.info.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.info.main), + }, }, - }, - '& .super-app-theme--Filled': { - backgroundColor: getBackgroundColor(theme.palette.success.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.success.main), + '& .super-app-theme--Filled': { + backgroundColor: getBackgroundColor(theme.palette.success.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.success.main), + }, }, - }, - '& .super-app-theme--PartiallyFilled': { - backgroundColor: getBackgroundColor(theme.palette.warning.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.warning.main), + '& .super-app-theme--PartiallyFilled': { + backgroundColor: getBackgroundColor(theme.palette.warning.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.warning.main), + }, }, - }, - '& .super-app-theme--Rejected': { - backgroundColor: getBackgroundColor(theme.palette.error.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.error.main), + '& .super-app-theme--Rejected': { + backgroundColor: getBackgroundColor(theme.palette.error.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.error.main), + }, }, }, - }, - }; -}); + }; + }, + { defaultTheme }, +); export default function StylingRowsGrid() { const classes = useStyles(); diff --git a/packages/grid/_modules_/grid/components/GridPagination.tsx b/packages/grid/_modules_/grid/components/GridPagination.tsx index ec5696284928c..1452b97902d94 100644 --- a/packages/grid/_modules_/grid/components/GridPagination.tsx +++ b/packages/grid/_modules_/grid/components/GridPagination.tsx @@ -10,29 +10,32 @@ import { isMuiV5 } from '../utils'; const defaultTheme = createMuiTheme(); // Used to hide the Rows per page selector on small devices -const useStyles = makeStyles((theme: Theme) => ({ - selectLabel: { - display: 'none', - [theme.breakpoints.up('md')]: { - display: 'block', - }, - }, - caption: { - // input label - '&[id]': { +const useStyles = makeStyles( + (theme: Theme) => ({ + selectLabel: { display: 'none', [theme.breakpoints.up('md')]: { display: 'block', }, }, - }, - input: { - display: 'none', - [theme.breakpoints.up('md')]: { - display: 'inline-flex', + caption: { + // input label + '&[id]': { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'block', + }, + }, + }, + input: { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'inline-flex', + }, }, - }, -})); + }), + { defaultTheme }, +); export const GridPagination = React.forwardRef< HTMLDivElement, diff --git a/packages/grid/_modules_/grid/components/menu/GridMenu.tsx b/packages/grid/_modules_/grid/components/menu/GridMenu.tsx index 35ad2c9920423..97e06c2e09814 100644 --- a/packages/grid/_modules_/grid/components/menu/GridMenu.tsx +++ b/packages/grid/_modules_/grid/components/menu/GridMenu.tsx @@ -3,7 +3,8 @@ import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import Grow from '@material-ui/core/Grow'; import Paper from '@material-ui/core/Paper'; import Popper, { PopperProps } from '@material-ui/core/Popper'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; type MenuPosition = | 'bottom-end' @@ -20,6 +21,7 @@ type MenuPosition = | 'top' | undefined; +const defaultTheme = createMuiTheme(); const useStyles = makeStyles( (theme: Theme) => ({ root: { @@ -29,7 +31,7 @@ const useStyles = makeStyles( }, }, }), - { name: 'MuiDataGridMenu' }, + { name: 'MuiDataGridMenu', defaultTheme }, ); export interface GridMenuProps extends Omit { diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelContent.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelContent.tsx index feec2ed5bd55b..6f13a68a7136c 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelContent.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelContent.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { classnames } from '../../utils/classnames'; const useStyles = makeStyles( diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelFooter.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelFooter.tsx index 6e99f10ac8385..38f38d84fa04d 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelFooter.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelFooter.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { classnames } from '../../utils/classnames'; const useStyles = makeStyles( diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx index 506dd4de79b79..109606499d20b 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx @@ -1,14 +1,16 @@ import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { classnames } from '../../utils/classnames'; +const defaultTheme = createMuiTheme(); const useStyles = makeStyles( (theme: Theme) => ({ root: { padding: theme.spacing(1), }, }), - { name: 'MuiDataGridPanelHeader' }, + { name: 'MuiDataGridPanelHeader', defaultTheme }, ); export function GridPanelHeader( diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx index 24a58155708d9..681463cc98d38 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import TrapFocus from '@material-ui/core/Unstable_TrapFocus'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { classnames } from '../../utils/classnames'; const useStyles = makeStyles( diff --git a/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx b/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx index 303c1a8093d0c..10537e287455f 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import Badge from '@material-ui/core/Badge'; import Button, { ButtonProps } from '@material-ui/core/Button'; import Tooltip from '@material-ui/core/Tooltip'; @@ -17,6 +18,7 @@ import { GridTranslationKeys } from '../../models/api/gridLocaleTextApi'; import { GridFilterItem } from '../../models/gridFilterItem'; import { GridApiContext } from '../GridApiContext'; +const defaultTheme = createMuiTheme(); const useStyles = makeStyles( (theme) => ({ list: { @@ -24,7 +26,7 @@ const useStyles = makeStyles( padding: theme.spacing(0, 1), }, }), - { name: 'MuiDataGridFilterToolbarButton' }, + { name: 'MuiDataGridFilterToolbarButton', defaultTheme }, ); export const GridFilterToolbarButton = React.forwardRef( diff --git a/packages/storybook/src/stories/grid-rows.stories.tsx b/packages/storybook/src/stories/grid-rows.stories.tsx index 27ee55b9d085d..81382d8224028 100644 --- a/packages/storybook/src/stories/grid-rows.stories.tsx +++ b/packages/storybook/src/stories/grid-rows.stories.tsx @@ -4,7 +4,8 @@ import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; import Popper from '@material-ui/core/Popper'; import Paper from '@material-ui/core/Paper'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, createStyles, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { GridCellValue, GridCellParams, @@ -188,25 +189,28 @@ interface GridCellExpandProps { width: number; } -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - alignItems: 'center', - lineHeight: '24px', - width: '100%', - height: '100%', - position: 'relative', - display: 'flex', - '& .MuiRating-root': { - marginRight: theme.spacing(1), - }, - '& .cellValue': { - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + alignItems: 'center', + lineHeight: '24px', + width: '100%', + height: '100%', + position: 'relative', + display: 'flex', + '& .MuiRating-root': { + marginRight: theme.spacing(1), + }, + '& .cellValue': { + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, }, - }, - }), + }), + { defaultTheme }, ); const GridCellExpand = React.memo(function CellExpand(props: GridCellExpandProps) { const { width, value } = props; diff --git a/packages/storybook/src/stories/playground/RecipeReviewCard.tsx b/packages/storybook/src/stories/playground/RecipeReviewCard.tsx index 7d5fd56566b8f..7081eab5a4e4c 100644 --- a/packages/storybook/src/stories/playground/RecipeReviewCard.tsx +++ b/packages/storybook/src/stories/playground/RecipeReviewCard.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Theme, createStyles, createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import clsx from 'clsx'; import Card from '@material-ui/core/Card'; import CardHeader from '@material-ui/core/CardHeader'; @@ -16,29 +17,32 @@ import ShareIcon from '@material-ui/icons/Share'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import MoreVertIcon from '@material-ui/icons/MoreVert'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - maxWidth: 345, - }, - media: { - height: 0, - paddingTop: '56.25%', // 16:9 - }, - expand: { - transform: 'rotate(0deg)', - marginLeft: 'auto', - transition: theme.transitions.create('transform', { - duration: theme.transitions.duration.shortest, - }), - }, - expandOpen: { - transform: 'rotate(180deg)', - }, - avatar: { - backgroundColor: red[500], - }, - }), +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + maxWidth: 345, + }, + media: { + height: 0, + paddingTop: '56.25%', // 16:9 + }, + expand: { + transform: 'rotate(0deg)', + marginLeft: 'auto', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shortest, + }), + }, + expandOpen: { + transform: 'rotate(180deg)', + }, + avatar: { + backgroundColor: red[500], + }, + }), + { defaultTheme }, ); export default function RecipeReviewCard() { From 6814c389cebb10a7c9a72b3b4480c2efa7afc7a2 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 11 May 2021 17:38:20 +0200 Subject: [PATCH 03/11] import --- .../grid/_modules_/grid/components/containers/GridRootStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts index 4f4003c436829..aa61bd3e0bdb5 100644 --- a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts +++ b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts @@ -1,4 +1,4 @@ -import { darken, lighten, Theme } from '@material-ui/core/styles'; +import { darken, lighten, Theme, createMuiTheme } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles'; import { getThemePaletteMode, muiStyleAlpha } from '../../utils/utils'; From 3113a8743f6b08b5ab002f1a074f947e9c325c76 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 11 May 2021 17:53:47 +0200 Subject: [PATCH 04/11] Theme update --- .../grid/components/toolbar/GridFilterToolbarButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx b/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx index 10537e287455f..fad7a639d0d86 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx @@ -20,7 +20,7 @@ import { GridApiContext } from '../GridApiContext'; const defaultTheme = createMuiTheme(); const useStyles = makeStyles( - (theme) => ({ + (theme: Theme) => ({ list: { margin: theme.spacing(1, 1, 0.5), padding: theme.spacing(0, 1), From 7d8024fcb7cdcf5bb76a780b27de6c3975befd14 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 11 May 2021 20:21:57 +0200 Subject: [PATCH 05/11] move createStyles too --- .../components/data-grid/columns/RenderExpandCellGrid.js | 1 - .../components/data-grid/columns/RenderExpandCellGrid.tsx | 3 +-- .../data-grid/components/CustomEmptyOverlayGrid.tsx | 4 ++-- docs/src/pages/components/data-grid/style/AntDesignGrid.tsx | 4 ++-- .../grid/x-grid-data-generator/src/renderer/renderPnl.tsx | 4 ++-- .../x-grid-data-generator/src/renderer/renderProgress.tsx | 4 ++-- .../grid/x-grid-data-generator/src/renderer/renderRating.tsx | 4 ++-- .../grid/x-grid-data-generator/src/renderer/renderStatus.tsx | 4 ++-- .../x-grid-data-generator/src/renderer/renderTotalPrice.tsx | 4 ++-- packages/storybook/src/stories/grid-rows.stories.tsx | 4 ++-- .../storybook/src/stories/playground/RecipeReviewCard.tsx | 4 ++-- 11 files changed, 19 insertions(+), 21 deletions(-) diff --git a/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js b/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js index 7de5d2c655f6f..54a4a43fd2648 100644 --- a/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js +++ b/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import Typography from '@material-ui/core/Typography'; import Paper from '@material-ui/core/Paper'; import Popper from '@material-ui/core/Popper'; - import { makeStyles } from '@material-ui/styles'; import { DataGrid, isOverflown } from '@material-ui/data-grid'; diff --git a/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx b/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx index 14260b30f88c4..4b7da4ddb7ae7 100644 --- a/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx +++ b/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import Typography from '@material-ui/core/Typography'; import Paper from '@material-ui/core/Paper'; import Popper from '@material-ui/core/Popper'; -import { createStyles } from '@material-ui/core/styles'; -import { makeStyles } from '@material-ui/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import { DataGrid, GridColDef, diff --git a/docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.tsx b/docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.tsx index 3ac85eb87f950..25e8ba784b875 100644 --- a/docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.tsx +++ b/docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { GridOverlay, DataGrid } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { createStyles, Theme, createMuiTheme } from '@material-ui/core/styles'; -import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; const defaultTheme = createMuiTheme(); const useStyles = makeStyles( diff --git a/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx b/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx index 4bac2748c8f37..825a807fdd145 100644 --- a/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx +++ b/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { DataGrid, useGridSlotComponentProps } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { createStyles, Theme, createMuiTheme } from '@material-ui/core/styles'; -import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import Pagination from '@material-ui/lab/Pagination'; import PaginationItem from '@material-ui/lab/PaginationItem'; diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx index e0b5578859e82..c4005486b90c2 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; -import { createMuiTheme, createStyles, Theme } from '@material-ui/core/styles'; -import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import { GridCellParams, getThemePaletteMode } from '../../../_modules_/grid'; const defaultTheme = createMuiTheme(); diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx index c6283443b6ee8..d89820fcc4926 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import clsx from 'clsx'; import { GridCellParams } from '@material-ui/x-grid'; -import { createMuiTheme, Theme, createStyles } from '@material-ui/core/styles'; -import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; const defaultTheme = createMuiTheme(); const useStyles = makeStyles( diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx index 56a8f6c13520c..335f9e8f71b2f 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { createMuiTheme, Theme, createStyles } from '@material-ui/core/styles'; -import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import { GridCellParams } from '@material-ui/x-grid'; import Rating from '@material-ui/lab/Rating'; diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx index 708e518ac7409..89ed43d6a43c8 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx @@ -6,8 +6,8 @@ import AutorenewIcon from '@material-ui/icons/Autorenew'; import DoneIcon from '@material-ui/icons/Done'; import Chip from '@material-ui/core/Chip'; import { GridCellParams } from '@material-ui/x-grid'; -import { createMuiTheme, Theme, createStyles } from '@material-ui/core/styles'; -import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; const defaultTheme = createMuiTheme(); const useStyles = makeStyles( diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx index 0fbcd903f3e9f..78ba00e1abc11 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; -import { createMuiTheme, createStyles, Theme } from '@material-ui/core/styles'; -import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import { GridCellParams, muiStyleAlpha } from '../../../_modules_/grid'; const defaultTheme = createMuiTheme(); diff --git a/packages/storybook/src/stories/grid-rows.stories.tsx b/packages/storybook/src/stories/grid-rows.stories.tsx index 81382d8224028..e5b4beacb55c4 100644 --- a/packages/storybook/src/stories/grid-rows.stories.tsx +++ b/packages/storybook/src/stories/grid-rows.stories.tsx @@ -4,8 +4,8 @@ import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; import Popper from '@material-ui/core/Popper'; import Paper from '@material-ui/core/Paper'; -import { createMuiTheme, createStyles, Theme } from '@material-ui/core/styles'; -import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import { GridCellValue, GridCellParams, diff --git a/packages/storybook/src/stories/playground/RecipeReviewCard.tsx b/packages/storybook/src/stories/playground/RecipeReviewCard.tsx index 7081eab5a4e4c..ad5a39f1bc943 100644 --- a/packages/storybook/src/stories/playground/RecipeReviewCard.tsx +++ b/packages/storybook/src/stories/playground/RecipeReviewCard.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Theme, createStyles, createMuiTheme } from '@material-ui/core/styles'; -import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import clsx from 'clsx'; import Card from '@material-ui/core/Card'; import CardHeader from '@material-ui/core/CardHeader'; From 020053795066e2358691d7467a7e714d5b505304 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 12 May 2021 13:47:26 +0200 Subject: [PATCH 06/11] createTheme correct method based on version --- .../grid/_modules_/grid/components/GridPagination.tsx | 7 ++++--- .../grid/components/containers/GridRootStyles.ts | 6 +++--- packages/grid/_modules_/grid/components/menu/GridMenu.tsx | 5 +++-- .../grid/_modules_/grid/components/panel/GridPanel.tsx | 6 +++--- .../_modules_/grid/components/panel/GridPanelHeader.tsx | 5 +++-- .../grid/components/toolbar/GridFilterToolbarButton.tsx | 5 +++-- packages/grid/_modules_/grid/utils/utils.ts | 8 ++++++++ .../grid/x-grid-data-generator/src/renderer/renderPnl.tsx | 5 +++-- .../x-grid-data-generator/src/renderer/renderProgress.tsx | 5 +++-- .../x-grid-data-generator/src/renderer/renderRating.tsx | 5 +++-- .../x-grid-data-generator/src/renderer/renderStatus.tsx | 5 +++-- .../src/renderer/renderTotalPrice.tsx | 5 +++-- 12 files changed, 42 insertions(+), 25 deletions(-) diff --git a/packages/grid/_modules_/grid/components/GridPagination.tsx b/packages/grid/_modules_/grid/components/GridPagination.tsx index 1452b97902d94..80a4488d70066 100644 --- a/packages/grid/_modules_/grid/components/GridPagination.tsx +++ b/packages/grid/_modules_/grid/components/GridPagination.tsx @@ -1,14 +1,15 @@ import * as React from 'react'; import TablePagination from '@material-ui/core/TablePagination'; -import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles'; import { useGridSelector } from '../hooks/features/core/useGridSelector'; import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginationSelector'; import { optionsSelector } from '../hooks/utils/optionsSelector'; import { GridApiContext } from './GridApiContext'; -import { isMuiV5 } from '../utils'; +import { isMuiV5, createTheme } from '../utils'; -const defaultTheme = createMuiTheme(); + +const defaultTheme = crateTheme(); // Used to hide the Rows per page selector on small devices const useStyles = makeStyles( (theme: Theme) => ({ diff --git a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts index aa61bd3e0bdb5..1c4fbf90b2464 100644 --- a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts +++ b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts @@ -1,8 +1,8 @@ -import { darken, lighten, Theme, createMuiTheme } from '@material-ui/core/styles'; +import { darken, lighten, Theme } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles'; -import { getThemePaletteMode, muiStyleAlpha } from '../../utils/utils'; +import { getThemePaletteMode, muiStyleAlpha, createTheme } from '../../utils/utils'; -const defaultTheme = createMuiTheme(); +const defaultTheme = crateTheme(); export const useStyles = makeStyles( (theme: Theme) => { const borderColor = diff --git a/packages/grid/_modules_/grid/components/menu/GridMenu.tsx b/packages/grid/_modules_/grid/components/menu/GridMenu.tsx index 97e06c2e09814..aac4e0f6299e3 100644 --- a/packages/grid/_modules_/grid/components/menu/GridMenu.tsx +++ b/packages/grid/_modules_/grid/components/menu/GridMenu.tsx @@ -3,8 +3,9 @@ import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import Grow from '@material-ui/core/Grow'; import Paper from '@material-ui/core/Paper'; import Popper, { PopperProps } from '@material-ui/core/Popper'; -import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles'; +import { createTheme } from '../../utils/utils' type MenuPosition = | 'bottom-end' @@ -21,7 +22,7 @@ type MenuPosition = | 'top' | undefined; -const defaultTheme = createMuiTheme(); + const defaultTheme = crateTheme(); const useStyles = makeStyles( (theme: Theme) => ({ root: { diff --git a/packages/grid/_modules_/grid/components/panel/GridPanel.tsx b/packages/grid/_modules_/grid/components/panel/GridPanel.tsx index 9b347d71580a2..aabcf3646d21c 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanel.tsx @@ -1,18 +1,18 @@ import * as React from 'react'; -import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles'; import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import Paper from '@material-ui/core/Paper'; import Popper from '@material-ui/core/Popper'; import { GridApiContext } from '../GridApiContext'; -import { isEscapeKey, isMuiV5 } from '../../utils'; +import { isEscapeKey, isMuiV5, createTheme } from '../../utils'; export interface GridPanelProps extends React.HTMLAttributes { children?: React.ReactNode; open: boolean; } -const defaultTheme = createMuiTheme(); +const defaultTheme = createTheme(); const useStyles = makeStyles( (theme: Theme) => ({ root: { diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx index 109606499d20b..fa4c67801b19b 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; -import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles'; import { classnames } from '../../utils/classnames'; +import { createTheme } from '../../utils/utils' -const defaultTheme = createMuiTheme(); +const defaultTheme = createTheme(); const useStyles = makeStyles( (theme: Theme) => ({ root: { diff --git a/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx b/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx index fad7a639d0d86..94d9ff08ab4a8 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles'; import Badge from '@material-ui/core/Badge'; import Button, { ButtonProps } from '@material-ui/core/Button'; @@ -16,9 +16,10 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel import { optionsSelector } from '../../hooks/utils/optionsSelector'; import { GridTranslationKeys } from '../../models/api/gridLocaleTextApi'; import { GridFilterItem } from '../../models/gridFilterItem'; +import { createTheme } from '../../utils/utils' import { GridApiContext } from '../GridApiContext'; -const defaultTheme = createMuiTheme(); +const defaultTheme = createTheme(); const useStyles = makeStyles( (theme: Theme) => ({ list: { diff --git a/packages/grid/_modules_/grid/utils/utils.ts b/packages/grid/_modules_/grid/utils/utils.ts index 6d79bb1c83e8e..6b8269d9e7a35 100644 --- a/packages/grid/_modules_/grid/utils/utils.ts +++ b/packages/grid/_modules_/grid/utils/utils.ts @@ -50,6 +50,7 @@ export function getThemePaletteMode(palette: any): string { return palette.type || palette.mode; } + export function isMuiV5(): boolean { return 'alpha' in styles; } @@ -61,6 +62,13 @@ export function muiStyleAlpha(color: string, value: number): string { return (styles as any)?.fade(color, value); } +export function createTheme(): styles.Theme { + if (isMuiV5()) { + return (styles as any)?.createTheme(); + } + return (styles as any)?.createMuiTheme(); +} + export function localStorageAvailable() { try { // Incognito mode might reject access to the localStorage for security reasons. diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx index c4005486b90c2..2f9bf783fbf6f 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import clsx from 'clsx'; -import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; import { createStyles, makeStyles } from '@material-ui/styles'; import { GridCellParams, getThemePaletteMode } from '../../../_modules_/grid'; +import { createTheme } from '../../../_modules_/grid/utils/utils'; -const defaultTheme = createMuiTheme(); +const defaultTheme = createTheme(); const useStyles = makeStyles( (theme: Theme) => createStyles({ diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx index d89820fcc4926..7874d1b31c933 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import clsx from 'clsx'; import { GridCellParams } from '@material-ui/x-grid'; -import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; import { createStyles, makeStyles } from '@material-ui/styles'; +import { createTheme } from '../../../_modules_/grid/utils/utils'; -const defaultTheme = createMuiTheme(); +const defaultTheme = createTheme(); const useStyles = makeStyles( (theme: Theme) => createStyles({ diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx index 335f9e8f71b2f..a1e0af4e68740 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; -import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; import { createStyles, makeStyles } from '@material-ui/styles'; import { GridCellParams } from '@material-ui/x-grid'; import Rating from '@material-ui/lab/Rating'; +import { createTheme } from '../../../_modules_/grid/utils/utils'; -const defaultTheme = createMuiTheme(); +const defaultTheme = createTheme(); const useStyles = makeStyles( (theme: Theme) => createStyles({ diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx index 89ed43d6a43c8..692d015b5343b 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx @@ -6,10 +6,11 @@ import AutorenewIcon from '@material-ui/icons/Autorenew'; import DoneIcon from '@material-ui/icons/Done'; import Chip from '@material-ui/core/Chip'; import { GridCellParams } from '@material-ui/x-grid'; -import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; import { createStyles, makeStyles } from '@material-ui/styles'; +import { createTheme } from '../../../_modules_/grid/utils/utils'; -const defaultTheme = createMuiTheme(); +const defaultTheme = createTheme(); const useStyles = makeStyles( (theme: Theme) => createStyles({ diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx index 78ba00e1abc11..61831aeb71598 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import clsx from 'clsx'; -import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; import { createStyles, makeStyles } from '@material-ui/styles'; import { GridCellParams, muiStyleAlpha } from '../../../_modules_/grid'; +import { createTheme } from '../../../_modules_/grid/utils/utils'; -const defaultTheme = createMuiTheme(); +const defaultTheme = createTheme(); const useStyles = makeStyles( (theme: Theme) => createStyles({ From 7081fe50c02ae4e07777a8aa6723b1a91bd410d3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 12 May 2021 13:51:19 +0200 Subject: [PATCH 07/11] typo --- packages/grid/_modules_/grid/components/GridPagination.tsx | 2 +- .../grid/_modules_/grid/components/containers/GridRootStyles.ts | 2 +- packages/grid/_modules_/grid/components/menu/GridMenu.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/grid/_modules_/grid/components/GridPagination.tsx b/packages/grid/_modules_/grid/components/GridPagination.tsx index 80a4488d70066..f31cafdd5f399 100644 --- a/packages/grid/_modules_/grid/components/GridPagination.tsx +++ b/packages/grid/_modules_/grid/components/GridPagination.tsx @@ -9,7 +9,7 @@ import { GridApiContext } from './GridApiContext'; import { isMuiV5, createTheme } from '../utils'; -const defaultTheme = crateTheme(); +const defaultTheme = createTheme(); // Used to hide the Rows per page selector on small devices const useStyles = makeStyles( (theme: Theme) => ({ diff --git a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts index 1c4fbf90b2464..b7307110156a4 100644 --- a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts +++ b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts @@ -2,7 +2,7 @@ import { darken, lighten, Theme } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles'; import { getThemePaletteMode, muiStyleAlpha, createTheme } from '../../utils/utils'; -const defaultTheme = crateTheme(); +const defaultTheme = createTheme(); export const useStyles = makeStyles( (theme: Theme) => { const borderColor = diff --git a/packages/grid/_modules_/grid/components/menu/GridMenu.tsx b/packages/grid/_modules_/grid/components/menu/GridMenu.tsx index aac4e0f6299e3..7d30551a5083a 100644 --- a/packages/grid/_modules_/grid/components/menu/GridMenu.tsx +++ b/packages/grid/_modules_/grid/components/menu/GridMenu.tsx @@ -22,7 +22,7 @@ type MenuPosition = | 'top' | undefined; - const defaultTheme = crateTheme(); + const defaultTheme = createTheme(); const useStyles = makeStyles( (theme: Theme) => ({ root: { From 0bb6d6fb4711993462d18546731a0fe7aebdf3ad Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 13 May 2021 08:44:34 +0200 Subject: [PATCH 08/11] prettier --- packages/grid/_modules_/grid/components/GridPagination.tsx | 1 - packages/grid/_modules_/grid/components/menu/GridMenu.tsx | 4 ++-- .../grid/_modules_/grid/components/panel/GridPanelHeader.tsx | 2 +- .../grid/components/toolbar/GridFilterToolbarButton.tsx | 2 +- packages/grid/_modules_/grid/utils/utils.ts | 1 - 5 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/grid/_modules_/grid/components/GridPagination.tsx b/packages/grid/_modules_/grid/components/GridPagination.tsx index f31cafdd5f399..22d872d16eb29 100644 --- a/packages/grid/_modules_/grid/components/GridPagination.tsx +++ b/packages/grid/_modules_/grid/components/GridPagination.tsx @@ -8,7 +8,6 @@ import { optionsSelector } from '../hooks/utils/optionsSelector'; import { GridApiContext } from './GridApiContext'; import { isMuiV5, createTheme } from '../utils'; - const defaultTheme = createTheme(); // Used to hide the Rows per page selector on small devices const useStyles = makeStyles( diff --git a/packages/grid/_modules_/grid/components/menu/GridMenu.tsx b/packages/grid/_modules_/grid/components/menu/GridMenu.tsx index 7d30551a5083a..e028a85a4bb78 100644 --- a/packages/grid/_modules_/grid/components/menu/GridMenu.tsx +++ b/packages/grid/_modules_/grid/components/menu/GridMenu.tsx @@ -5,7 +5,7 @@ import Paper from '@material-ui/core/Paper'; import Popper, { PopperProps } from '@material-ui/core/Popper'; import { Theme } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles'; -import { createTheme } from '../../utils/utils' +import { createTheme } from '../../utils/utils'; type MenuPosition = | 'bottom-end' @@ -22,7 +22,7 @@ type MenuPosition = | 'top' | undefined; - const defaultTheme = createTheme(); +const defaultTheme = createTheme(); const useStyles = makeStyles( (theme: Theme) => ({ root: { diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx index fa4c67801b19b..468d56865b9b9 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Theme } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles'; import { classnames } from '../../utils/classnames'; -import { createTheme } from '../../utils/utils' +import { createTheme } from '../../utils/utils'; const defaultTheme = createTheme(); const useStyles = makeStyles( diff --git a/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx b/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx index 94d9ff08ab4a8..db03cb200240a 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx @@ -16,7 +16,7 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel import { optionsSelector } from '../../hooks/utils/optionsSelector'; import { GridTranslationKeys } from '../../models/api/gridLocaleTextApi'; import { GridFilterItem } from '../../models/gridFilterItem'; -import { createTheme } from '../../utils/utils' +import { createTheme } from '../../utils/utils'; import { GridApiContext } from '../GridApiContext'; const defaultTheme = createTheme(); diff --git a/packages/grid/_modules_/grid/utils/utils.ts b/packages/grid/_modules_/grid/utils/utils.ts index 6b8269d9e7a35..36fc635bec9b7 100644 --- a/packages/grid/_modules_/grid/utils/utils.ts +++ b/packages/grid/_modules_/grid/utils/utils.ts @@ -50,7 +50,6 @@ export function getThemePaletteMode(palette: any): string { return palette.type || palette.mode; } - export function isMuiV5(): boolean { return 'alpha' in styles; } From 168c705cad99a249daf5da8b917e6166a8c4af09 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 17 May 2021 13:22:27 +0200 Subject: [PATCH 09/11] more changes --- .../data-grid/components/CustomColumnMenu.js | 27 +++++++++++-------- .../data-grid/components/CustomColumnMenu.tsx | 27 +++++++++++-------- .../data-grid/components/CustomFooter.js | 6 ++--- .../data-grid/components/CustomFooter.tsx | 6 ++--- 4 files changed, 38 insertions(+), 28 deletions(-) diff --git a/docs/src/pages/components/data-grid/components/CustomColumnMenu.js b/docs/src/pages/components/data-grid/components/CustomColumnMenu.js index f3cc78e1b0741..8bdaffc6869b6 100644 --- a/docs/src/pages/components/data-grid/components/CustomColumnMenu.js +++ b/docs/src/pages/components/data-grid/components/CustomColumnMenu.js @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import { GridColumnMenu, @@ -12,16 +13,20 @@ import { } from '@material-ui/x-grid'; import StarOutlineIcon from '@material-ui/icons/StarOutline'; -const useStyles = makeStyles((theme) => ({ - primary: { - background: theme.palette.primary.main, - color: theme.palette.primary.contrastText, - }, - secondary: { - background: theme.palette.secondary.main, - color: theme.palette.secondary.contrastText, - }, -})); +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => ({ + primary: { + background: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + }, + secondary: { + background: theme.palette.secondary.main, + color: theme.palette.secondary.contrastText, + }, + }), + { defaultTheme }, +); function CustomColumnMenuComponent(props) { const classes = useStyles(); diff --git a/docs/src/pages/components/data-grid/components/CustomColumnMenu.tsx b/docs/src/pages/components/data-grid/components/CustomColumnMenu.tsx index 28a40df82b8d0..c4619a6b91a5d 100644 --- a/docs/src/pages/components/data-grid/components/CustomColumnMenu.tsx +++ b/docs/src/pages/components/data-grid/components/CustomColumnMenu.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import { GridColumnMenu, @@ -12,16 +13,20 @@ import { } from '@material-ui/x-grid'; import StarOutlineIcon from '@material-ui/icons/StarOutline'; -const useStyles = makeStyles((theme) => ({ - primary: { - background: theme.palette.primary.main, - color: theme.palette.primary.contrastText, - }, - secondary: { - background: theme.palette.secondary.main, - color: theme.palette.secondary.contrastText, - }, -})); +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => ({ + primary: { + background: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + }, + secondary: { + background: theme.palette.secondary.main, + color: theme.palette.secondary.contrastText, + }, + }), + { defaultTheme }, +); export function CustomColumnMenuComponent( props: GridColumnMenuProps & { color: string }, diff --git a/docs/src/pages/components/data-grid/components/CustomFooter.js b/docs/src/pages/components/data-grid/components/CustomFooter.js index 0df325f7a520f..6563bd4c8d761 100644 --- a/docs/src/pages/components/data-grid/components/CustomFooter.js +++ b/docs/src/pages/components/data-grid/components/CustomFooter.js @@ -1,12 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Button from '@material-ui/core/Button'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { useDemoData } from '@material-ui/x-grid-data-generator'; import { DataGrid } from '@material-ui/data-grid'; import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles({ root: { padding: 10, display: 'flex', @@ -22,7 +22,7 @@ const useStyles = makeStyles(() => ({ disconnected: { color: '#d9182e', }, -})); +}); function CustomFooterStatusComponent(props) { const classes = useStyles(); diff --git a/docs/src/pages/components/data-grid/components/CustomFooter.tsx b/docs/src/pages/components/data-grid/components/CustomFooter.tsx index 7277845a22caf..15c46b92d54ae 100644 --- a/docs/src/pages/components/data-grid/components/CustomFooter.tsx +++ b/docs/src/pages/components/data-grid/components/CustomFooter.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import Button from '@material-ui/core/Button'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { useDemoData } from '@material-ui/x-grid-data-generator'; import { DataGrid } from '@material-ui/data-grid'; import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles({ root: { padding: 10, display: 'flex', @@ -21,7 +21,7 @@ const useStyles = makeStyles(() => ({ disconnected: { color: '#d9182e', }, -})); +}); export function CustomFooterStatusComponent(props: { status: 'connected' | 'disconnected'; From 25732d92449e2e317cc9a719d2c5b9fb1dd0cd3b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 18 May 2021 10:50:51 +0200 Subject: [PATCH 10/11] merge conflicts --- .../data-grid/demo/FullFeaturedDemo.js | 164 +++++++++--------- .../data-grid/demo/FullFeaturedDemo.tsx | 164 +++++++++--------- .../data-grid/style/AntDesignGrid.js | 88 +++++----- .../data-grid/style/AntDesignGrid.tsx | 92 +++++----- 4 files changed, 261 insertions(+), 247 deletions(-) diff --git a/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js b/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js index eef6658b0df0e..81b1aae4d1ccb 100644 --- a/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js +++ b/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js @@ -13,42 +13,10 @@ import MenuItem from '@material-ui/core/MenuItem'; import Select from '@material-ui/core/Select'; const defaultTheme = createMuiTheme(); -const useStylesAntDesign = makeStyles((theme) => ({ - root: { - border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`, - color: - theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { +const useStylesAntDesign = makeStyles( + (theme) => ({ + root: { + border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`, color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' @@ -73,7 +41,7 @@ const useStylesAntDesign = makeStyles((theme) => ({ '& .MuiDataGrid-iconSeparator': { display: 'none', }, - '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { borderRight: `1px solid ${ theme.palette.type === 'light' ? '#f0f0f0' : '#303030' }`, @@ -87,49 +55,85 @@ const useStylesAntDesign = makeStyles((theme) => ({ color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, - }, - '& .MuiCheckbox-root svg': { - width: 16, - height: 16, - backgroundColor: 'transparent', - border: `1px solid ${ - theme.palette.type === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)' - }`, - borderRadius: 2, - }, - '& .MuiCheckbox-root svg path': { - display: 'none', - }, - '& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': { - backgroundColor: '#1890ff', - borderColor: '#1890ff', - }, - '& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': { - position: 'absolute', - display: 'table', - border: '2px solid #fff', - borderTop: 0, - borderLeft: 0, - transform: 'rotate(45deg) translate(-50%,-50%)', - opacity: 1, - transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s', - content: '""', - top: '50%', - left: '39%', - width: 5.71428571, - height: 9.14285714, - }, - '& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': { - width: 8, - height: 8, - backgroundColor: '#1890ff', - transform: 'none', - top: '39%', - border: 0, + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.65)', + }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + '& .MuiCheckbox-root svg': { + width: 16, + height: 16, + backgroundColor: 'transparent', + border: `1px solid ${ + theme.palette.type === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)' + }`, + borderRadius: 2, + }, + '& .MuiCheckbox-root svg path': { + display: 'none', + }, + '& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': { + backgroundColor: '#1890ff', + borderColor: '#1890ff', + }, + '& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': { + position: 'absolute', + display: 'table', + border: '2px solid #fff', + borderTop: 0, + borderLeft: 0, + transform: 'rotate(45deg) translate(-50%,-50%)', + opacity: 1, + transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s', + content: '""', + top: '50%', + left: '39%', + width: 5.71428571, + height: 9.14285714, + }, + '& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': { + width: 8, + height: 8, + backgroundColor: '#1890ff', + transform: 'none', + top: '39%', + border: 0, + }, }, }, }), diff --git a/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx b/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx index 6488bb1e84c78..ed3587223a186 100644 --- a/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx +++ b/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx @@ -12,42 +12,10 @@ import MenuItem from '@material-ui/core/MenuItem'; import Select from '@material-ui/core/Select'; const defaultTheme = createMuiTheme(); -const useStylesAntDesign = makeStyles((theme) => ({ - root: { - border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`, - color: - theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { +const useStylesAntDesign = makeStyles( + (theme) => ({ + root: { + border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`, color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' @@ -72,7 +40,7 @@ const useStylesAntDesign = makeStyles((theme) => ({ '& .MuiDataGrid-iconSeparator': { display: 'none', }, - '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { borderRight: `1px solid ${ theme.palette.type === 'light' ? '#f0f0f0' : '#303030' }`, @@ -86,49 +54,85 @@ const useStylesAntDesign = makeStyles((theme) => ({ color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, - }, - '& .MuiCheckbox-root svg': { - width: 16, - height: 16, - backgroundColor: 'transparent', - border: `1px solid ${ - theme.palette.type === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)' - }`, - borderRadius: 2, - }, - '& .MuiCheckbox-root svg path': { - display: 'none', - }, - '& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': { - backgroundColor: '#1890ff', - borderColor: '#1890ff', - }, - '& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': { - position: 'absolute', - display: 'table', - border: '2px solid #fff', - borderTop: 0, - borderLeft: 0, - transform: 'rotate(45deg) translate(-50%,-50%)', - opacity: 1, - transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s', - content: '""', - top: '50%', - left: '39%', - width: 5.71428571, - height: 9.14285714, - }, - '& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': { - width: 8, - height: 8, - backgroundColor: '#1890ff', - transform: 'none', - top: '39%', - border: 0, + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.65)', + }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + '& .MuiCheckbox-root svg': { + width: 16, + height: 16, + backgroundColor: 'transparent', + border: `1px solid ${ + theme.palette.type === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)' + }`, + borderRadius: 2, + }, + '& .MuiCheckbox-root svg path': { + display: 'none', + }, + '& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': { + backgroundColor: '#1890ff', + borderColor: '#1890ff', + }, + '& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': { + position: 'absolute', + display: 'table', + border: '2px solid #fff', + borderTop: 0, + borderLeft: 0, + transform: 'rotate(45deg) translate(-50%,-50%)', + opacity: 1, + transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s', + content: '""', + top: '50%', + left: '39%', + width: 5.71428571, + height: 9.14285714, + }, + '& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': { + width: 8, + height: 8, + backgroundColor: '#1890ff', + transform: 'none', + top: '39%', + border: 0, + }, }, }, }), diff --git a/docs/src/pages/components/data-grid/style/AntDesignGrid.js b/docs/src/pages/components/data-grid/style/AntDesignGrid.js index 1dc2903827e1a..de5743c470e6c 100644 --- a/docs/src/pages/components/data-grid/style/AntDesignGrid.js +++ b/docs/src/pages/components/data-grid/style/AntDesignGrid.js @@ -51,42 +51,10 @@ function customCheckbox(theme) { } const defaultTheme = createMuiTheme(); -const useStyles = makeStyles((theme) => ({ - root: { - border: 0, - color: - theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { +const useStyles = makeStyles( + (theme) => ({ + root: { + border: 0, color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' @@ -111,7 +79,7 @@ const useStyles = makeStyles((theme) => ({ '& .MuiDataGrid-iconSeparator': { display: 'none', }, - '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { borderRight: `1px solid ${ theme.palette.type === 'light' ? '#f0f0f0' : '#303030' }`, @@ -125,12 +93,48 @@ const useStyles = makeStyles((theme) => ({ color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.65)', + }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + ...customCheckbox(theme), }, - ...customCheckbox(theme), }, }), { defaultTheme }, diff --git a/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx b/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx index 9ca19672740f1..6bbc748022ed0 100644 --- a/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx +++ b/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx @@ -51,45 +51,11 @@ function customCheckbox(theme: Theme) { } const defaultTheme = createMuiTheme(); -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - border: 0, - color: - theme.palette.type === 'light' - ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + border: 0, color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' @@ -114,7 +80,7 @@ const useStyles = makeStyles((theme: Theme) => '& .MuiDataGrid-iconSeparator': { display: 'none', }, - '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { borderRight: `1px solid ${ theme.palette.type === 'light' ? '#f0f0f0' : '#303030' }`, @@ -128,12 +94,48 @@ const useStyles = makeStyles((theme: Theme) => color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.65)', + }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + ...customCheckbox(theme), }, - ...customCheckbox(theme), }, }), { defaultTheme }, From df11fa850d086d46013455cace4d3bd25d15d2a1 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 18 May 2021 11:15:17 +0200 Subject: [PATCH 11/11] merge conflicts --- .../data-grid/style/AntDesignGrid.js | 46 ++----------------- .../data-grid/style/AntDesignGrid.tsx | 46 ++----------------- 2 files changed, 10 insertions(+), 82 deletions(-) diff --git a/docs/src/pages/components/data-grid/style/AntDesignGrid.js b/docs/src/pages/components/data-grid/style/AntDesignGrid.js index de5743c470e6c..4942ae266b064 100644 --- a/docs/src/pages/components/data-grid/style/AntDesignGrid.js +++ b/docs/src/pages/components/data-grid/style/AntDesignGrid.js @@ -93,48 +93,12 @@ const useStyles = makeStyles( color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { - color: - theme.palette.type === 'light' - ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, - }, - ...customCheckbox(theme), + : 'rgba(255,255,255,0.65)', }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + ...customCheckbox(theme), }, }), { defaultTheme }, diff --git a/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx b/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx index 6bbc748022ed0..93efd8ba6e9fa 100644 --- a/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx +++ b/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx @@ -94,48 +94,12 @@ const useStyles = makeStyles( color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { - color: - theme.palette.type === 'light' - ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, - }, - ...customCheckbox(theme), + : 'rgba(255,255,255,0.65)', }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + ...customCheckbox(theme), }, }), { defaultTheme },