From 14ce69ebe872a775428e8ecd11d21fdef3f920d8 Mon Sep 17 00:00:00 2001 From: Ryan Krueger Date: Fri, 1 May 2020 13:32:14 -0400 Subject: [PATCH 1/4] Update Custom Table Example The current "Custom Table" example in the documentation shows how to do a zebra pattern. However, when used with a table header it contains two dark rows next to each other. This resolves it by making even rows (counting the header) darker. --- docs/src/pages/components/tables/CustomizedTables.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/tables/CustomizedTables.js b/docs/src/pages/components/tables/CustomizedTables.js index c30237047fd256..1726dfd00c6989 100644 --- a/docs/src/pages/components/tables/CustomizedTables.js +++ b/docs/src/pages/components/tables/CustomizedTables.js @@ -20,7 +20,7 @@ const StyledTableCell = withStyles((theme) => ({ const StyledTableRow = withStyles((theme) => ({ root: { - '&:nth-of-type(odd)': { + '&:nth-child(even)': { backgroundColor: theme.palette.background.default, }, }, From f30f8d98594a57b14279307b375da6b543dc567a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 2 May 2020 22:29:34 +0200 Subject: [PATCH 2/4] fix demo --- docs/src/pages/components/tables/CustomizedTables.js | 4 ++-- docs/src/pages/components/tables/CustomizedTables.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/components/tables/CustomizedTables.js b/docs/src/pages/components/tables/CustomizedTables.js index 1726dfd00c6989..6af777e07efd5d 100644 --- a/docs/src/pages/components/tables/CustomizedTables.js +++ b/docs/src/pages/components/tables/CustomizedTables.js @@ -20,8 +20,8 @@ const StyledTableCell = withStyles((theme) => ({ const StyledTableRow = withStyles((theme) => ({ root: { - '&:nth-child(even)': { - backgroundColor: theme.palette.background.default, + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.action.selected, }, }, }))(TableRow); diff --git a/docs/src/pages/components/tables/CustomizedTables.tsx b/docs/src/pages/components/tables/CustomizedTables.tsx index b601786ea9e8ce..1b83ea37b32e7e 100644 --- a/docs/src/pages/components/tables/CustomizedTables.tsx +++ b/docs/src/pages/components/tables/CustomizedTables.tsx @@ -24,7 +24,7 @@ const StyledTableRow = withStyles((theme: Theme) => createStyles({ root: { '&:nth-of-type(odd)': { - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.action.selected, }, }, }), From 14a3bc6b0f9e2200e0d1888e1930916857bee166 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 3 May 2020 14:12:42 +0200 Subject: [PATCH 3/4] learn from our past mistake, make it resilient to v5 MD changes --- docs/src/pages/components/tables/CustomizedTables.js | 3 ++- docs/src/pages/components/tables/CustomizedTables.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/tables/CustomizedTables.js b/docs/src/pages/components/tables/CustomizedTables.js index 6af777e07efd5d..957478beb95194 100644 --- a/docs/src/pages/components/tables/CustomizedTables.js +++ b/docs/src/pages/components/tables/CustomizedTables.js @@ -21,7 +21,8 @@ const StyledTableCell = withStyles((theme) => ({ const StyledTableRow = withStyles((theme) => ({ root: { '&:nth-of-type(odd)': { - backgroundColor: theme.palette.action.selected, + backgroundColor: + theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.16)', }, }, }))(TableRow); diff --git a/docs/src/pages/components/tables/CustomizedTables.tsx b/docs/src/pages/components/tables/CustomizedTables.tsx index 1b83ea37b32e7e..a4bf30e81a9fe0 100644 --- a/docs/src/pages/components/tables/CustomizedTables.tsx +++ b/docs/src/pages/components/tables/CustomizedTables.tsx @@ -24,7 +24,8 @@ const StyledTableRow = withStyles((theme: Theme) => createStyles({ root: { '&:nth-of-type(odd)': { - backgroundColor: theme.palette.action.selected, + backgroundColor: + theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.16)', }, }, }), From 309591d9e0e9f3e701943824562ac7d6fd21e672 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 3 May 2020 14:19:35 +0200 Subject: [PATCH 4/4] third trade-off --- docs/src/pages/components/tables/CustomizedTables.js | 3 +-- docs/src/pages/components/tables/CustomizedTables.tsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/components/tables/CustomizedTables.js b/docs/src/pages/components/tables/CustomizedTables.js index 957478beb95194..5e47c53bdacdfe 100644 --- a/docs/src/pages/components/tables/CustomizedTables.js +++ b/docs/src/pages/components/tables/CustomizedTables.js @@ -21,8 +21,7 @@ const StyledTableCell = withStyles((theme) => ({ const StyledTableRow = withStyles((theme) => ({ root: { '&:nth-of-type(odd)': { - backgroundColor: - theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.16)', + backgroundColor: theme.palette.action.hover, }, }, }))(TableRow); diff --git a/docs/src/pages/components/tables/CustomizedTables.tsx b/docs/src/pages/components/tables/CustomizedTables.tsx index a4bf30e81a9fe0..5e5152fec43535 100644 --- a/docs/src/pages/components/tables/CustomizedTables.tsx +++ b/docs/src/pages/components/tables/CustomizedTables.tsx @@ -24,8 +24,7 @@ const StyledTableRow = withStyles((theme: Theme) => createStyles({ root: { '&:nth-of-type(odd)': { - backgroundColor: - theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.16)', + backgroundColor: theme.palette.action.hover, }, }, }),