Use backgroundColour instead of overlay

mui · Feb 18, 2020 · 423199b · 423199b
1 parent 36411d1
commit 423199b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 28 deletions.
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
 import Collapse from '@material-ui/core/Collapse';
-import { withStyles, useTheme } from '@material-ui/core/styles';
+import { fade, withStyles, useTheme } from '@material-ui/core/styles';
 import { useForkRef } from '@material-ui/core/utils';
 import TreeViewContext from '../TreeView/TreeViewContext';
 
@@ -16,26 +16,23 @@ export const styles = theme => ({
     padding: 0,
     outline: 0,
     WebkitTapHighlightColor: 'transparent',
-    '&:focus > $content $overlay, & > $content $overlay:hover': {
-      opacity: theme.palette.action.hoverOpacity,
+    '&:focus > $content $label': {
+      backgroundColor: theme.palette.action.hover,
     },
-    '&$selected > $content $overlay': {
-      opacity: theme.palette.action.selectedOpacity,
+    '&$selected > $content $label': {
+      backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     },
-    '&$selected > $content $overlay:hover, &$selected:focus > $content $overlay, &:focus > $content $overlay:hover': {
-      opacity: theme.palette.action.hoverOpacity + theme.palette.action.selectedOpacity,
+    '&$selected > $content $label:hover, &$selected:focus > $content $label': {
+      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',
+      },
     },
   },
-  /* Styles applied to the overlay element. */
-  overlay: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    top: 0,
-    left: 0,
-    backgroundColor: theme.palette.type === 'light' ? '#000000' : '#ffffff',
-    opacity: 0,
-  },
   /* Pseudo-class applied to the root element when expanded. */
   expanded: {},
   /* Pseudo-class applied to the root element when selected. */
@@ -69,6 +66,13 @@ export const styles = theme => ({
     width: '100%',
     paddingLeft: 4,
     position: 'relative',
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    },
   },
 });
 
@@ -387,7 +391,6 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
         <div className={classes.iconContainer}>{icon}</div>
         <Typography component="div" className={classes.label}>
           {label}
-          <div className={classes.overlay} />
         </Typography>
       </div>
       {children && (

diff --git a/packages/material-ui-lab/src/TreeView/TreeView.js b/packages/material-ui-lab/src/TreeView/TreeView.js
@@ -2,8 +2,8 @@ import React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import TreeViewContext from './TreeViewContext';
-import {withStyles} from '@material-ui/core/styles';
-import {useControlled} from '@material-ui/core/utils';
+import { withStyles } from '@material-ui/core/styles';
+import { useControlled } from '@material-ui/core/utils';
 
 export const styles = {
   /* Styles applied to the root element. */
@@ -329,11 +329,11 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
 
   const addNodeToNodeMap = (id, childrenIds) => {
     const currentMap = nodeMap.current[id];
-    nodeMap.current[id] = {...currentMap, children: childrenIds, id};
+    nodeMap.current[id] = { ...currentMap, children: childrenIds, id };
 
     childrenIds.forEach(childId => {
       const currentChildMap = nodeMap.current[childId];
-      nodeMap.current[childId] = {...currentChildMap, parent: id, id: childId};
+      nodeMap.current[childId] = { ...currentChildMap, parent: id, id: childId };
     });
   };
 
@@ -344,7 +344,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
         const parentMap = nodeMap.current[map.parent];
         if (parentMap && parentMap.children) {
           const parentChildren = parentMap.children.filter(c => c !== id);
-          nodeMap.current[map.parent] = {...parentMap, children: parentChildren};
+          nodeMap.current[map.parent] = { ...parentMap, children: parentChildren };
         }
       }
 
@@ -361,17 +361,17 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
   React.useEffect(() => {
     const childIds = React.Children.map(children, child => child.props.nodeId) || [];
     if (arrayDiff(prevChildIds.current, childIds)) {
-      nodeMap.current[-1] = {parent: null, children: childIds};
+      nodeMap.current[-1] = { parent: null, children: childIds };
 
       childIds.forEach((id, index) => {
         if (index === 0) {
           setTabbable(id);
         }
-        nodeMap.current[id] = {parent: null};
+        nodeMap.current[id] = { parent: null };
       });
       visibleNodes.current = nodeMap.current[-1].children;
       prevChildIds.current = childIds;
-      setChildrenCalculated(true)
+      setChildrenCalculated(true);
     }
   }, [children]);
 
@@ -397,7 +397,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
   return (
     <TreeViewContext.Provider
       value={{
-        icons: {defaultCollapseIcon, defaultExpandIcon, defaultParentIcon, defaultEndIcon},
+        icons: { defaultCollapseIcon, defaultExpandIcon, defaultParentIcon, defaultEndIcon },
         focus,
         focusFirstNode,
         focusLastNode,
@@ -516,4 +516,4 @@ TreeView.propTypes = {
   selected: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
 };
 
-export default withStyles(styles, {name: 'MuiTreeView'})(TreeView);
+export default withStyles(styles, { name: 'MuiTreeView' })(TreeView);