push further

mui · Jun 21, 2020 · 54019eb · 54019eb
1 parent d81c2c0
commit 54019eb
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 23 deletions.
diff --git a/docs/src/pages/components/tree-view/GmailTreeView.js b/docs/src/pages/components/tree-view/GmailTreeView.js
@@ -30,8 +30,8 @@ const useTreeItemStyles = makeStyles((theme) => ({
     '&:hover': {
       backgroundColor: theme.palette.action.hover,
     },
-    '&$focused, &$selected': {
-      backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
+    '&$focused, &$selected, &$selected$focused': {
+      backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`,
       color: 'var(--tree-view-color)',
     },
   },
@@ -65,11 +65,11 @@ const useTreeItemStyles = makeStyles((theme) => ({
 function StyledTreeItem(props) {
   const classes = useTreeItemStyles();
   const {
-    labelText,
+    bgColor,
+    color,
     labelIcon: LabelIcon,
     labelInfo,
-    color,
-    bgColor,
+    labelText,
     ...other
   } = props;
 

diff --git a/docs/src/pages/components/tree-view/GmailTreeView.tsx b/docs/src/pages/components/tree-view/GmailTreeView.tsx
@@ -46,8 +46,8 @@ const useTreeItemStyles = makeStyles((theme: Theme) =>
       '&:hover': {
         backgroundColor: theme.palette.action.hover,
       },
-      '&$focused, &$selected': {
-        backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
+      '&$focused, &$selected, &$selected$focused': {
+        backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`,
         color: 'var(--tree-view-color)',
       },
     },
@@ -82,11 +82,11 @@ const useTreeItemStyles = makeStyles((theme: Theme) =>
 function StyledTreeItem(props: StyledTreeItemProps) {
   const classes = useTreeItemStyles();
   const {
-    labelText,
+    bgColor,
+    color,
     labelIcon: LabelIcon,
     labelInfo,
-    color,
-    bgColor,
+    labelText,
     ...other
   } = props;
 

diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
@@ -39,7 +39,7 @@ export const styles = (theme) => ({
     },
     '&$selected': {
       backgroundColor: theme.palette.action.selected,
-      '&:hover, &$focusVisible': {
+      '&:hover': {
         backgroundColor: fade(
           theme.palette.action.selected,
           theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
@@ -49,6 +49,12 @@ export const styles = (theme) => ({
           backgroundColor: theme.palette.action.selected,
         },
       },
+      '&$focusVisible': {
+        backgroundColor: fade(
+          theme.palette.action.selected,
+          theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
+        ),
+      },
       '&$disabled': {
         opacity: 1,
         color: theme.palette.action.disabled,
@@ -135,7 +141,7 @@ export const styles = (theme) => ({
       '&:hover, &$focusVisible': {
         backgroundColor: fade(
           theme.palette.primary.main,
-          theme.palette.action.activatedOpacity + theme.palette.action.hoverOpacity,
+          theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity,
         ),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
@@ -156,7 +162,7 @@ export const styles = (theme) => ({
       '&:hover, &$focusVisible': {
         backgroundColor: fade(
           theme.palette.secondary.main,
-          theme.palette.action.activatedOpacity + theme.palette.action.hoverOpacity,
+          theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity,
         ),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -37,19 +37,25 @@ export const styles = (theme) => ({
       },
     },
     '&$focused': {
-      backgroundColor: theme.palette.action.hover,
+      backgroundColor: theme.palette.action.focus,
     },
     '&$selected': {
       backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-    },
-    '&$selected:hover, &$selected$focused': {
-      backgroundColor: fade(
-        theme.palette.primary.main,
-        theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
-      ),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
+      '&:hover': {
+        backgroundColor: fade(
+          theme.palette.primary.main,
+          theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
+        ),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+        },
+      },
+      '&$focused': {
+        backgroundColor: fade(
+          theme.palette.primary.main,
+          theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
+        ),
       },
     },
   },