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

[Table, TableRow] Add support for CSS variables #32614

Merged
merged 3 commits into from
May 4, 2022
Merged

[Table, TableRow] Add support for CSS variables #32614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9c03ded
Add support CSS variables
vicasas May 4, 2022
95f3223
yarn prettier
vicasas May 4, 2022
fcd464d
fix
vicasas May 4, 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
96 changes: 96 additions & 0 deletions docs/pages/experiments/material-ui/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import * as React from 'react';
import {
Experimental_CssVarsProvider as CssVarsProvider,
useColorScheme,
} from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import Moon from '@mui/icons-material/DarkMode';
import Sun from '@mui/icons-material/LightMode';
import Table from '@mui/material/Table';
import { TableBody, TableHead, TableRow } from '@mui/material';

const ColorSchemePicker = () => {
const { mode, setMode } = useColorScheme();
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}

return (
<Button
variant="outlined"
onClick={() => {
if (mode === 'light') {
setMode('dark');
} else {
setMode('light');
}
}}
>
{mode === 'light' ? <Moon /> : <Sun />}
</Button>
);
};

export default function CssVarsTemplate() {
return (
<CssVarsProvider>
<CssBaseline />
<Container sx={{ my: 5 }}>
<Box sx={{ pb: 2 }}>
<ColorSchemePicker />
</Box>
<Box
sx={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))',
gridAutoRows: 'minmax(160px, auto)',
gap: 2,
'& > div': {
placeSelf: 'center',
},
}}
>
<Box sx={{ width: '100%' }}>
<Table aria-label="simple table">
<TableHead>
<TableRow>Hi, I am a row</TableRow>
</TableHead>
<TableBody>
<TableRow>Hi, I am a row</TableRow>
</TableBody>
</Table>
</Box>
<Box sx={{ width: '100%' }}>
<Table aria-label="simple table">
<TableHead>
<TableRow>Hello, I am row</TableRow>
</TableHead>
<TableBody>
<TableRow selected>Hello, I am a selected row</TableRow>
</TableBody>
</Table>
</Box>
<Box sx={{ width: '100%' }}>
<Table aria-label="simple table">
<TableHead>
<TableRow>Hello, I am a row</TableRow>
</TableHead>
<TableBody>
<TableRow selected hover>
Hello, I am a selected and hover row
</TableRow>
</TableBody>
</Table>
</Box>
</Box>
</Container>
</CssVarsProvider>
);
}
2 changes: 1 addition & 1 deletion packages/mui-material/src/Table/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const TableRoot = styled('table', {
'& caption': {
...theme.typography.body2,
padding: theme.spacing(2),
color: theme.palette.text.secondary,
color: (theme.vars || theme).palette.text.secondary,
textAlign: 'left',
captionSide: 'bottom',
},
Expand Down
16 changes: 10 additions & 6 deletions packages/mui-material/src/TableRow/TableRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,19 @@ const TableRowRoot = styled('tr', {
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
[`&.${tableRowClasses.hover}:hover`]: {
backgroundColor: theme.palette.action.hover,
backgroundColor: (theme.vars || theme).palette.action.hover,
},
[`&.${tableRowClasses.selected}`]: {
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
'&:hover': {
backgroundColor: alpha(
theme.palette.primary.main,
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
),
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
: alpha(
theme.palette.primary.main,
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
),
},
},
}));
Expand Down