Experiment with simplifying styling

mui · Jun 20, 2020 · 847d3d6 · 847d3d6
1 parent 52f526a
commit 847d3d6
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 54 deletions.
diff --git a/docs/src/pages/components/tree-view/GmailTreeView.js b/docs/src/pages/components/tree-view/GmailTreeView.js
@@ -17,26 +17,23 @@ import ArrowRightIcon from '@material-ui/icons/ArrowRight';
 const useTreeItemStyles = makeStyles((theme) => ({
   root: {
     color: theme.palette.text.secondary,
-    '&:hover > $content': {
-      backgroundColor: theme.palette.action.hover,
-    },
-    '&:focus > $content, &$selected > $content': {
-      backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
-      color: 'var(--tree-view-color)',
-    },
-    '&:focus > $content $label, &:hover > $content $label, &$selected > $content $label': {
-      backgroundColor: 'transparent',
-    },
   },
   content: {
     color: theme.palette.text.secondary,
     borderTopRightRadius: theme.spacing(2),
     borderBottomRightRadius: theme.spacing(2),
     paddingRight: theme.spacing(1),
     fontWeight: theme.typography.fontWeightMedium,
-    '$expanded > &': {
+    '&$expanded': {
       fontWeight: theme.typography.fontWeightRegular,
     },
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
+    },
+    '&$focused, &$selected': {
+      backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
+      color: 'var(--tree-view-color)',
+    },
   },
   group: {
     marginLeft: 0,
@@ -46,14 +43,15 @@ const useTreeItemStyles = makeStyles((theme) => ({
   },
   expanded: {},
   selected: {},
+  focused: {},
   label: {
     fontWeight: 'inherit',
     color: 'inherit',
   },
   labelRoot: {
     display: 'flex',
     alignItems: 'center',
-    padding: theme.spacing(0.5, 0),
+    padding: theme.spacing(0.5, 0, 0.5, 0.5),
   },
   labelIcon: {
     marginRight: theme.spacing(1),
@@ -97,6 +95,7 @@ function StyledTreeItem(props) {
         content: classes.content,
         expanded: classes.expanded,
         selected: classes.selected,
+        focused: classes.focused,
         group: classes.group,
         label: classes.label,
       }}

diff --git a/docs/src/pages/components/tree-view/GmailTreeView.tsx b/docs/src/pages/components/tree-view/GmailTreeView.tsx
@@ -33,26 +33,23 @@ const useTreeItemStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       color: theme.palette.text.secondary,
-      '&:hover > $content': {
-        backgroundColor: theme.palette.action.hover,
-      },
-      '&:focus > $content, &$selected > $content': {
-        backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
-        color: 'var(--tree-view-color)',
-      },
-      '&:focus > $content $label, &:hover > $content $label, &$selected > $content $label': {
-        backgroundColor: 'transparent',
-      },
     },
     content: {
       color: theme.palette.text.secondary,
       borderTopRightRadius: theme.spacing(2),
       borderBottomRightRadius: theme.spacing(2),
       paddingRight: theme.spacing(1),
       fontWeight: theme.typography.fontWeightMedium,
-      '$expanded > &': {
+      '&$expanded': {
         fontWeight: theme.typography.fontWeightRegular,
       },
+      '&:hover': {
+        backgroundColor: theme.palette.action.hover,
+      },
+      '&$focused, &$selected': {
+        backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
+        color: 'var(--tree-view-color)',
+      },
     },
     group: {
       marginLeft: 0,
@@ -62,6 +59,7 @@ const useTreeItemStyles = makeStyles((theme: Theme) =>
     },
     expanded: {},
     selected: {},
+    focused: {},
     label: {
       fontWeight: 'inherit',
       color: 'inherit',
@@ -114,6 +112,7 @@ function StyledTreeItem(props: StyledTreeItemProps) {
         content: classes.content,
         expanded: classes.expanded,
         selected: classes.selected,
+        focused: classes.focused,
         group: classes.group,
         label: classes.label,
       }}

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts b/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts
@@ -55,6 +55,7 @@ export type TreeItemClassKey =
   | 'root'
   | 'expanded'
   | 'selected'
+  | 'focused'
   | 'group'
   | 'content'
   | 'iconContainer'

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -15,14 +15,34 @@ export const styles = (theme) => ({
     margin: 0,
     padding: 0,
     outline: 0,
+  },
+  /* Styles applied to the `role="group"` element. */
+  group: {
+    margin: 0,
+    padding: 0,
+    marginLeft: 17,
+  },
+  /* Styles applied to the tree node content. */
+  content: {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
     WebkitTapHighlightColor: 'transparent',
-    '&:focus > $content $label': {
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    },
+    '&$focused': {
       backgroundColor: theme.palette.action.hover,
     },
-    '&$selected > $content $label': {
+    '&$selected': {
       backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     },
-    '&$selected > $content $label:hover, &$selected:focus > $content $label': {
+    '&$selected:hover, &$selected$focused': {
       backgroundColor: fade(
         theme.palette.primary.main,
         theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
@@ -33,23 +53,12 @@ export const styles = (theme) => ({
       },
     },
   },
-  /* Pseudo-class applied to the root element when expanded. */
+  /* Pseudo-class applied to the content element when expanded. */
   expanded: {},
-  /* Pseudo-class applied to the root element when selected. */
+  /* Pseudo-class applied to the content element when selected. */
   selected: {},
-  /* Styles applied to the `role="group"` element. */
-  group: {
-    margin: 0,
-    padding: 0,
-    marginLeft: 17,
-  },
-  /* Styles applied to the tree node content. */
-  content: {
-    width: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-  },
+  /* Pseudo-class applied to the content element when focused. */
+  focused: {},
   /* Styles applied to the tree node icon and collapse/expand icon. */
   iconContainer: {
     marginRight: 4,
@@ -66,13 +75,6 @@ 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',
-      },
-    },
   },
 });
 
@@ -375,10 +377,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
 
   return (
     <li
-      className={clsx(classes.root, className, {
-        [classes.expanded]: expanded,
-        [classes.selected]: selected,
-      })}
+      className={clsx(classes.root, className)}
       role="treeitem"
       onKeyDown={handleKeyDown}
       onFocus={handleFocus}
@@ -389,7 +388,11 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
       {...other}
     >
       <div
-        className={classes.content}
+        className={clsx(classes.content, {
+          [classes.expanded]: expanded,
+          [classes.selected]: selected,
+          [classes.focused]: focused,
+        })}
         onClick={handleClick}
         onMouseDown={handleMouseDown}
         ref={contentRef}

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
@@ -928,7 +928,6 @@ describe('<TreeItem />', () => {
           fireEvent.keyDown(getByTestId('one'), { key: ' ' });
 
           expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
-          expect(getByTestId('one')).to.have.class('Mui-selected');
         });
 
         it('should not select a node when space is pressed and disableSelection', () => {