Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] Remove makeStyles dependency on @material-ui/core/styles #1627

Merged
merged 15 commits into from
May 18, 2021
Merged

[core] Remove makeStyles dependency on @material-ui/core/styles #1627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
5938bdd
init
mnajdova May 11, 2021
15816c4
Merge remote-tracking branch 'upstream/master' into feat/makeStyles-u…
mnajdova May 11, 2021
b363e95
more changes
mnajdova May 11, 2021
6814c38
import
mnajdova May 11, 2021
3113a87
Theme update
mnajdova May 11, 2021
7d8024f
move createStyles too
mnajdova May 11, 2021
0200537
createTheme correct method based on version
mnajdova May 12, 2021
7081fe5
typo
mnajdova May 12, 2021
780c2b2
Merge branch 'upstream-master' into feat/makeStyles-updates
mnajdova May 13, 2021
0bb6d6f
prettier
mnajdova May 13, 2021
6070aff
Merge branch 'master' into feat/makeStyles-updates
mnajdova May 17, 2021
168c705
more changes
mnajdova May 17, 2021
2b8f2a8
Merge branch 'master' into feat/makeStyles-updates
mnajdova May 18, 2021
25732d9
merge conflicts
mnajdova May 18, 2021
df11fa8
merge conflicts
mnajdova May 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/modules/XWrapper.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -1,4 +1,4 @@
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles';


const useStyles = makeStyles({ const useStyles = makeStyles({
'@global': { '@global': {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react'; 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 { DataGrid } from '@material-ui/data-grid';
import { import {
randomStatusOptions, randomStatusOptions,
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles';
import { DataGrid, GridColTypeDef } from '@material-ui/data-grid'; import { DataGrid, GridColTypeDef } from '@material-ui/data-grid';
import { import {
randomStatusOptions, randomStatusOptions,
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Popper from '@material-ui/core/Popper'; 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'; import { DataGrid, isOverflown } from '@material-ui/data-grid';


const useStyles = makeStyles(() => ({ const useStyles = makeStyles(() => ({
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Popper from '@material-ui/core/Popper'; import Popper from '@material-ui/core/Popper';
import { createStyles, makeStyles } from '@material-ui/core/styles'; import { createStyles, makeStyles } from '@material-ui/styles';
import { import {
DataGrid, DataGrid,
GridColDef, GridColDef,
Expand Down
11 changes: 8 additions & 3 deletions docs/src/pages/components/data-grid/components/CustomColumnMenu.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import PropTypes from 'prop-types'; 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 Button from '@material-ui/core/Button';
import { import {
GridColumnMenu, GridColumnMenu,
Expand All @@ -12,7 +13,9 @@ import {
} from '@material-ui/x-grid'; } from '@material-ui/x-grid';
import StarOutlineIcon from '@material-ui/icons/StarOutline'; import StarOutlineIcon from '@material-ui/icons/StarOutline';


const useStyles = makeStyles((theme) => ({ const defaultTheme = createMuiTheme();
const useStyles = makeStyles(
(theme) => ({
primary: { primary: {
background: theme.palette.primary.main, background: theme.palette.primary.main,
color: theme.palette.primary.contrastText, color: theme.palette.primary.contrastText,
Expand All @@ -21,7 +24,9 @@ const useStyles = makeStyles((theme) => ({
background: theme.palette.secondary.main, background: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText, color: theme.palette.secondary.contrastText,
}, },
})); }),
{ defaultTheme },
);


function CustomColumnMenuComponent(props) { function CustomColumnMenuComponent(props) {
const classes = useStyles(); const classes = useStyles();
Expand Down
11 changes: 8 additions & 3 deletions docs/src/pages/components/data-grid/components/CustomColumnMenu.tsx
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react'; 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 Button from '@material-ui/core/Button';
import { import {
GridColumnMenu, GridColumnMenu,
Expand All @@ -12,7 +13,9 @@ import {
} from '@material-ui/x-grid'; } from '@material-ui/x-grid';
import StarOutlineIcon from '@material-ui/icons/StarOutline'; import StarOutlineIcon from '@material-ui/icons/StarOutline';


const useStyles = makeStyles((theme) => ({ const defaultTheme = createMuiTheme();
const useStyles = makeStyles(
(theme: Theme) => ({
primary: { primary: {
background: theme.palette.primary.main, background: theme.palette.primary.main,
color: theme.palette.primary.contrastText, color: theme.palette.primary.contrastText,
Expand All @@ -21,7 +24,9 @@ const useStyles = makeStyles((theme) => ({
background: theme.palette.secondary.main, background: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText, color: theme.palette.secondary.contrastText,
}, },
})); }),
{ defaultTheme },
);


export function CustomColumnMenuComponent( export function CustomColumnMenuComponent(
props: GridColumnMenuProps & { color: string }, props: GridColumnMenuProps & { color: string },
Expand Down
11 changes: 8 additions & 3 deletions docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -1,9 +1,12 @@
import * as React from 'react'; import * as React from 'react';
import { GridOverlay, DataGrid } from '@material-ui/data-grid'; import { GridOverlay, DataGrid } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator'; 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) => ({ const defaultTheme = createMuiTheme();
const useStyles = makeStyles(
(theme) => ({
root: { root: {
flexDirection: 'column', flexDirection: 'column',
'& .ant-empty-img-1': { '& .ant-empty-img-1': {
Expand All @@ -26,7 +29,9 @@ const useStyles = makeStyles((theme) => ({
label: { label: {
marginTop: theme.spacing(1), marginTop: theme.spacing(1),
}, },
})); }),
{ defaultTheme },
);


function CustomNoRowsOverlay() { function CustomNoRowsOverlay() {
const classes = useStyles(); const classes = useStyles();
Expand Down
8 changes: 6 additions & 2 deletions docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.tsx
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -1,9 +1,12 @@
import * as React from 'react'; import * as React from 'react';
import { GridOverlay, DataGrid } from '@material-ui/data-grid'; import { GridOverlay, DataGrid } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator'; import { useDemoData } from '@material-ui/x-grid-data-generator';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; import { createMuiTheme, Theme } from '@material-ui/core/styles';
import { createStyles, makeStyles } from '@material-ui/styles';


const useStyles = makeStyles((theme: Theme) => const defaultTheme = createMuiTheme();
const useStyles = makeStyles(
(theme: Theme) =>
createStyles({ createStyles({
root: { root: {
flexDirection: 'column', flexDirection: 'column',
Expand All @@ -28,6 +31,7 @@ const useStyles = makeStyles((theme: Theme) =>
marginTop: theme.spacing(1), marginTop: theme.spacing(1),
}, },
}), }),
{ defaultTheme },
); );


function CustomNoRowsOverlay() { function CustomNoRowsOverlay() {
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/data-grid/components/CustomFooter.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from 'react'; import * as React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button'; 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 { useDemoData } from '@material-ui/x-grid-data-generator';
import { DataGrid } from '@material-ui/data-grid'; import { DataGrid } from '@material-ui/data-grid';
import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';


const useStyles = makeStyles(() => ({ const useStyles = makeStyles({
root: { root: {
padding: 10, padding: 10,
display: 'flex', display: 'flex',
Expand All @@ -19,7 +19,7 @@ const useStyles = makeStyles(() => ({
marginRight: 2, marginRight: 2,
color: '#d9182e', color: '#d9182e',
}, },
})); });


function CustomFooterStatusComponent(props) { function CustomFooterStatusComponent(props) {
const classes = useStyles(); const classes = useStyles();
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/data-grid/components/CustomFooter.tsx
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -1,11 +1,11 @@
import * as React from 'react'; import * as React from 'react';
import Button from '@material-ui/core/Button'; 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 { useDemoData } from '@material-ui/x-grid-data-generator';
import { DataGrid } from '@material-ui/data-grid'; import { DataGrid } from '@material-ui/data-grid';
import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';


const useStyles = makeStyles(() => ({ const useStyles = makeStyles({
root: { root: {
padding: 10, padding: 10,
display: 'flex', display: 'flex',
Expand All @@ -18,7 +18,7 @@ const useStyles = makeStyles(() => ({
marginRight: 2, marginRight: 2,
color: '#d9182e', color: '#d9182e',
}, },
})); });


export function CustomFooterStatusComponent(props: { export function CustomFooterStatusComponent(props: {
status: 'connected' | 'disconnected'; status: 'connected' | 'disconnected';
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/components/CustomPaginationGrid.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles';
import { DataGrid, useGridSlotComponentProps } from '@material-ui/data-grid'; import { DataGrid, useGridSlotComponentProps } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator'; import { useDemoData } from '@material-ui/x-grid-data-generator';
import Pagination from '@material-ui/lab/Pagination'; import Pagination from '@material-ui/lab/Pagination';
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/components/CustomPaginationGrid.tsx
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles';
Copy link
Member

@oliviertassinari oliviertassinari May 11, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the docs for v4, this change is borderline but it can fly. Alternatives are probably worse.

import { DataGrid, useGridSlotComponentProps } from '@material-ui/data-grid'; import { DataGrid, useGridSlotComponentProps } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator'; import { useDemoData } from '@material-ui/x-grid-data-generator';
import Pagination from '@material-ui/lab/Pagination'; import Pagination from '@material-ui/lab/Pagination';
Expand Down
58 changes: 52 additions & 6 deletions docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -3,19 +3,24 @@ import PropTypes from 'prop-types';
import { XGrid, GridToolbar } from '@material-ui/x-grid'; import { XGrid, GridToolbar } from '@material-ui/x-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator'; import { useDemoData } from '@material-ui/x-grid-data-generator';
import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'; 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 FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup'; import FormGroup from '@material-ui/core/FormGroup';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import InputLabel from '@material-ui/core/InputLabel'; import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select'; import Select from '@material-ui/core/Select';


const useStylesAntDesign = makeStyles((theme) => ({ const defaultTheme = createMuiTheme();
const useStylesAntDesign = makeStyles(
(theme) => ({
root: { root: {
border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`, border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`,
color: color:
theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)', theme.palette.type === 'light'
? 'rgba(0,0,0,.85)'
: 'rgba(255,255,255,0.85)',
fontFamily: [ fontFamily: [
'-apple-system', '-apple-system',
'BlinkMacSystemFont', 'BlinkMacSystemFont',
Expand Down Expand Up @@ -46,6 +51,41 @@ const useStylesAntDesign = makeStyles((theme) => ({
theme.palette.type === 'light' ? '#f0f0f0' : '#303030' theme.palette.type === 'light' ? '#f0f0f0' : '#303030'
}`, }`,
}, },
'& .MuiDataGrid-cell': {
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': { '& .MuiDataGrid-cell': {
color: color:
theme.palette.type === 'light' theme.palette.type === 'light'
Expand Down Expand Up @@ -95,9 +135,13 @@ const useStylesAntDesign = makeStyles((theme) => ({
border: 0, border: 0,
}, },
}, },
})); },
}),
{ defaultTheme },
);


const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles(
(theme) => ({
root: { root: {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
Expand All @@ -112,7 +156,9 @@ const useStyles = makeStyles((theme) => ({
}, },
}, },
}, },
})); }),
{ defaultTheme },
);


function SettingsPanel(props) { function SettingsPanel(props) {
const { onApply, type, size, theme } = props; const { onApply, type, size, theme } = props;
Expand Down
Loading