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

Jump to bottom

[website] Migrate X page to use CSS theme variables #34922

Merged
merged 25 commits into from
Dec 12, 2022
Merged

[website] Migrate X page to use CSS theme variables #34922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
07302ba
refac: change Branding provider
jesrodri Oct 28, 2022
6b364e3
refac: apply theme vars on AppHeaderBanner component
jesrodri Oct 28, 2022
ac6ffff
refac: apply theme vars on XHero component
jesrodri Oct 28, 2022
a8d9332
refac: apply theme vars on FolderTreeView component
jesrodri Oct 28, 2022
3b61f4b
refac: apply theme vars on XDataGrid component
jesrodri Oct 28, 2022
5cbefcc
refac: apply theme vars on XTheming component
jesrodri Oct 28, 2022
3f081d3
refac: apply theme vars on XPlans component
jesrodri Oct 28, 2022
421da50
fix: prettier code
jesrodri Oct 28, 2022
559952c
fix: lint errors
jesrodri Oct 28, 2022
d516852
fix: lint error
jesrodri Oct 28, 2022
d4ba023
Merge branch 'master' of https://github.com/mui/material-ui into docs…
siriwatknp Nov 1, 2022
553c655
remove ThemeProvider
siriwatknp Nov 1, 2022
761b9af
update XComponents
siriwatknp Nov 1, 2022
c60d967
update XThemeing
siriwatknp Nov 1, 2022
4260cdf
update GridFullDemo
siriwatknp Nov 1, 2022
0094eca
Merge branch 'master' of https://github.com/mui/material-ui into docs…
siriwatknp Dec 6, 2022
7c95f64
update x components
siriwatknp Dec 6, 2022
23e530d
update x to latest
siriwatknp Dec 6, 2022
a111464
migrate
siriwatknp Dec 6, 2022
05241a7
yarn deduplicate
siriwatknp Dec 6, 2022
86d9c99
Merge branch 'master' of https://github.com/mui/material-ui into docs…
siriwatknp Dec 9, 2022
94ad81c
yarn
siriwatknp Dec 9, 2022
f617d62
Trigger Build
siriwatknp Dec 11, 2022
aeb34f1
yarn deduplicate
siriwatknp Dec 11, 2022
d1aa8ad
Merge branch 'master' of https://github.com/mui/material-ui into docs…
siriwatknp Dec 11, 2022
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
12 changes: 6 additions & 6 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@
"@mui/styles": "^5.10.16",
"@mui/system": "^5.10.17",
"@mui/types": "^7.2.2",
"@mui/x-data-grid": "^5.17.14",
"@mui/x-data-grid-generator": "^5.17.14",
"@mui/x-data-grid-pro": "^5.17.14",
"@mui/x-date-pickers": "^5.0.9",
"@mui/x-date-pickers-pro": "^5.0.9",
"@mui/x-license-pro": "^5.17.12",
"@mui/x-data-grid": "6.0.0-alpha.11",
"@mui/x-data-grid-generator": "6.0.0-alpha.11",
"@mui/x-data-grid-pro": "6.0.0-alpha.11",
"@mui/x-date-pickers": "6.0.0-alpha.11",
"@mui/x-date-pickers-pro": "6.0.0-alpha.11",
"@mui/x-license-pro": "6.0.0-alpha.9",
"@trendmicro/react-interpolate": "^0.5.5",
"@types/autosuggest-highlight": "^3.2.0",
"@types/css-mediaquery": "^0.1.1",
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import Head from 'docs/src/modules/components/Head';
import BrandingProvider from 'docs/src/BrandingProvider';
import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
import AppHeader from 'docs/src/layouts/AppHeader';
import XHero from 'docs/src/components/productX/XHero';
import XComponents from 'docs/src/components/productX/XComponents';
Expand All @@ -14,7 +14,7 @@ import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';

export default function X() {
return (
<BrandingProvider>
<BrandingCssVarsProvider>
<Head
title="MUI X: Performant advanced components"
description="Build data-rich applications using a growing list of advanced React components. We're kicking it off with the most powerful Data Grid on the market."
Expand All @@ -32,6 +32,6 @@ export default function X() {
<XRoadmap />
</main>
<AppFooter />
</BrandingProvider>
</BrandingCssVarsProvider>
);
}
8 changes: 1 addition & 7 deletions docs/src/components/home/AdvancedShowcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1710,13 +1710,7 @@ export default function DataTable() {
</Typography>
</Box>
<Box sx={{ height: 200 }}>
<DataGrid
rows={rows}
columns={columns}
hideFooter
density="compact"
experimentalFeatures={{ newEditingApi: true }}
/>
<DataGrid rows={rows} columns={columns} hideFooter density="compact" />
</Box>
</Paper>
}
Expand Down
277 changes: 142 additions & 135 deletions docs/src/components/home/XGridGlobalStyles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import { useTheme, alpha } from '@mui/material/styles';
import { CSSObject, Keyframes } from '@emotion/react';
import { alpha } from '@mui/material/styles';
import GlobalStyles from '@mui/material/GlobalStyles';

export default function XGridGlobalStyles({
Expand All @@ -9,157 +10,163 @@ export default function XGridGlobalStyles({
selector?: string;
pro?: boolean;
}) {
const theme = useTheme();
return (
<GlobalStyles
styles={{
[selector]: {
'& .MuiDataGrid-root': {
border: 'none',
fontSize: '0.75rem',
borderRadius: '0px',
// toolbar
// style GridToolbar
'& .MuiDataGrid-toolbarContainer': {
padding: theme.spacing(1, 1, 0.5, 1),
overflow: 'auto',
'& > button': {
flexShrink: 0,
border: '1px solid',
padding: theme.spacing(0, 1),
borderColor:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[600]
: theme.palette.grey[200],
'& svg': {
fontSize: '1.125rem',
styles={(theme) => [
{
[selector]: {
'& .MuiDataGrid-root': {
border: 'none',
fontSize: '0.75rem',
borderRadius: '0px',
// toolbar
// style GridToolbar
'& .MuiDataGrid-toolbarContainer': {
padding: theme.spacing(1, 1, 0.5, 1),
overflow: 'auto',
'& > button': {
flexShrink: 0,
border: '1px solid',
padding: theme.spacing(0, 1),
borderColor: (theme.vars || theme).palette.grey[200],
'& svg': {
fontSize: '1.125rem',
},
},
'& > button:not(:last-of-type)': {
marginRight: theme.spacing(0.5),
},
},
'& > button:not(:last-of-type)': {
marginRight: theme.spacing(0.5),
'& .MuiCheckbox-root': {
color: (theme.vars || theme).palette.grey[600],
padding: theme.spacing(0.5),
'& > svg': {
fontSize: '1.2rem',
},
},
},
'& .MuiCheckbox-root': {
color:
theme.palette.mode === 'dark'
? theme.palette.primary[400]
: theme.palette.grey[600],
padding: theme.spacing(0.5),
'& > svg': {
fontSize: '1.2rem',
'& .MuiIconButton-root:not(.Mui-disabled)': {
color: (theme.vars || theme).palette.primary.main,
opacity: 1,
},
},
'& .MuiIconButton-root:not(.Mui-disabled)': {
color:
theme.palette.mode === 'dark'
? theme.palette.primary[300]
: theme.palette.primary.main,
opacity: 1,
},
// table head elements
'& .MuiDataGrid-menuIcon svg': {
fontSize: '1rem',
},
'& .MuiDataGrid-columnHeaders': {
borderBottom: `1px solid ${
theme.palette.mode === 'dark'
? theme.palette.primaryDark[500]
: theme.palette.grey[200]
}`,
},
'& .MuiDataGrid-columnsContainer': {
bgcolor: theme.palette.mode === 'dark' ? theme.palette.primaryDark[800] : '#fff',
},
'& .MuiDataGrid-columnHeaderTitleContainer': {
padding: 0,
},
'& .MuiDataGrid-columnSeparator': {
color:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[400]
: theme.palette.grey[200],
'&:hover': {
color:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[100]
: theme.palette.grey[800],
},
...(!pro && { display: 'none' }),
},
'& .MuiDataGrid-columnHeaderTitle': {
flexGrow: 1,
},
// -------------------------------
// table body elements
'& .MuiDataGrid-viewport': {
backgroundColor:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[900]
: theme.palette.grey[50],
},
'& .MuiDataGrid-cell': {
borderBottom: `1px solid ${
theme.palette.mode === 'dark'
? alpha(theme.palette.primaryDark[500], 0.5)
: theme.palette.grey[200]
}`,
},
'& .MuiDataGrid-editInputCell': {
fontSize: '0.75rem',
'& > input': {
padding: theme.spacing(0, 1),
// table head elements
'& .MuiDataGrid-menuIcon svg': {
fontSize: '1rem',
},
},
'& .MuiDataGrid-cell--editing': {
'& .MuiSelect-root': {
'& .MuiListItemIcon-root': {
display: 'none',
},
'& .MuiTypography-root': {
fontSize: '0.75rem',
'& .MuiDataGrid-columnHeaders': {
borderBottom: '1px solid',
borderColor: (theme.vars || theme).palette.grey[200],
},
'& .MuiDataGrid-columnHeaderTitleContainer': {
padding: 0,
},
'& .MuiDataGrid-columnSeparator': {
color: (theme.vars || theme).palette.grey[200],
'&:hover': {
color: (theme.vars || theme).palette.grey[800],
},
...(!pro && { display: 'none' }),
},
},
'& .MuiTablePagination-root': {
marginRight: theme.spacing(1),
'& .MuiIconButton-root': {
'&:not([disabled])': {
color:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[100]
: theme.palette.primary.main,
borderColor:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[300]
: theme.palette.grey[400],
'& .MuiDataGrid-columnHeaderTitle': {
flexGrow: 1,
},
// -------------------------------
// table body elements
'& .MuiDataGrid-viewport': {
backgroundColor: (theme.vars || theme).palette.grey[50],
},
'& .MuiDataGrid-cell': {
borderBottom: '1px solid',
borderColor: (theme.vars || theme).palette.grey[200],
},
'& .MuiDataGrid-editInputCell': {
fontSize: '0.75rem',
'& > input': {
padding: theme.spacing(0, 1),
},
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(0.5),
border: '1px solid',
bgcolor:
theme.palette.mode === 'dark' ? theme.palette.primaryDark[600] : 'transparent',
borderColor:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[500]
: theme.palette.grey[200],
'&:last-of-type': {
marginLeft: theme.spacing(1),
},
'& .MuiDataGrid-cell--editing': {
'& .MuiSelect-root': {
'& .MuiListItemIcon-root': {
display: 'none',
},
'& .MuiTypography-root': {
fontSize: '0.75rem',
},
},
'& > svg': {
fontSize: '1rem',
},
'& .MuiTablePagination-root': {
marginRight: theme.spacing(1),
'& .MuiIconButton-root': {
'&:not([disabled])': {
color: (theme.vars || theme).palette.primary.main,
borderColor: (theme.vars || theme).palette.grey[400],
},
borderRadius: (theme.vars || theme).shape.borderRadius,
padding: theme.spacing(0.5),
border: '1px solid',
borderColor: (theme.vars || theme).palette.grey[200],
'&:last-of-type': {
marginLeft: theme.spacing(1),
},
'& > svg': {
fontSize: '1rem',
},
},
},
},
},
'& .MuiDataGrid-gridMenuList': {
boxShadow: '0px 4px 20px rgb(61 71 82 / 25%)',
borderRadius: '10px',
'& .MuiMenuItem-root': {
fontSize: '0.75rem',
'& .MuiDataGrid-gridMenuList': {
boxShadow: '0px 4px 20px rgb(61 71 82 / 25%)',
borderRadius: '10px',
'& .MuiMenuItem-root': {
fontSize: '0.75rem',
},
},
},
},
}}
theme.applyDarkStyles({
[selector]: {
'& .MuiDataGrid-root': {
'& .MuiDataGrid-toolbarContainer': {
'& > button': {
borderColor: (theme.vars || theme).palette.primaryDark[600],
},
},
'& .MuiCheckbox-root': {
color: (theme.vars || theme).palette.primary[400],
},
'& .MuiIconButton-root:not(.Mui-disabled)': {
color: (theme.vars || theme).palette.primary[300],
},
'& .MuiDataGrid-columnHeaders': {
borderColor: (theme.vars || theme).palette.primaryDark[500],
},
'& .MuiDataGrid-columnSeparator': {
color: (theme.vars || theme).palette.primaryDark[400],
'&:hover': {
color: (theme.vars || theme).palette.primaryDark[100],
},
},
// -------------------------------
// table body elements
'& .MuiDataGrid-viewport': {
backgroundColor: (theme.vars || theme).palette.primaryDark[900],
},
'& .MuiDataGrid-cell': {
borderColor: alpha(theme.palette.primaryDark[500], 0.5),
},
'& .MuiTablePagination-root': {
'& .MuiIconButton-root': {
'&:not([disabled])': {
color: (theme.vars || theme).palette.primaryDark[100],
borderColor: (theme.vars || theme).palette.primaryDark[300],
},
borderColor: (theme.vars || theme).palette.primaryDark[500],
},
},
},
},
}) as CSSObject | Keyframes,
]}
/>
);
}
Loading