Skip to content

Commit 847d3d6

Browse files
joshwoodingjoshwooding
committed
Experiment with simplifying styling
1 parent 52f526a commit 847d3d6

File tree

5 files changed

+55
-54
lines changed

5 files changed

+55
-54
lines changed

‎docs/src/pages/components/tree-view/GmailTreeView.js‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,26 +17,23 @@ import ArrowRightIcon from '@material-ui/icons/ArrowRight';
1717
const useTreeItemStyles = makeStyles((theme) => ({
1818
root: {
1919
color: theme.palette.text.secondary,
20-
'&:hover > $content': {
21-
backgroundColor: theme.palette.action.hover,
22-
},
23-
'&:focus > $content, &$selected > $content': {
24-
backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
25-
color: 'var(--tree-view-color)',
26-
},
27-
'&:focus > $content $label, &:hover > $content $label, &$selected > $content $label': {
28-
backgroundColor: 'transparent',
29-
},
3020
},
3121
content: {
3222
color: theme.palette.text.secondary,
3323
borderTopRightRadius: theme.spacing(2),
3424
borderBottomRightRadius: theme.spacing(2),
3525
paddingRight: theme.spacing(1),
3626
fontWeight: theme.typography.fontWeightMedium,
37-
'$expanded > &': {
27+
'&$expanded': {
3828
fontWeight: theme.typography.fontWeightRegular,
3929
},
30+
'&:hover': {
31+
backgroundColor: theme.palette.action.hover,
32+
},
33+
'&$focused, &$selected': {
34+
backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
35+
color: 'var(--tree-view-color)',
36+
},
4037
},
4138
group: {
4239
marginLeft: 0,
@@ -46,14 +43,15 @@ const useTreeItemStyles = makeStyles((theme) => ({
4643
},
4744
expanded: {},
4845
selected: {},
46+
focused: {},
4947
label: {
5048
fontWeight: 'inherit',
5149
color: 'inherit',
5250
},
5351
labelRoot: {
5452
display: 'flex',
5553
alignItems: 'center',
56-
padding: theme.spacing(0.5, 0),
54+
padding: theme.spacing(0.5, 0, 0.5, 0.5),
5755
},
5856
labelIcon: {
5957
marginRight: theme.spacing(1),
@@ -97,6 +95,7 @@ function StyledTreeItem(props) {
9795
content: classes.content,
9896
expanded: classes.expanded,
9997
selected: classes.selected,
98+
focused: classes.focused,
10099
group: classes.group,
101100
label: classes.label,
102101
}}

‎docs/src/pages/components/tree-view/GmailTreeView.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,26 +33,23 @@ const useTreeItemStyles = makeStyles((theme: Theme) =>
3333
createStyles({
3434
root: {
3535
color: theme.palette.text.secondary,
36-
'&:hover > $content': {
37-
backgroundColor: theme.palette.action.hover,
38-
},
39-
'&:focus > $content, &$selected > $content': {
40-
backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
41-
color: 'var(--tree-view-color)',
42-
},
43-
'&:focus > $content $label, &:hover > $content $label, &$selected > $content $label': {
44-
backgroundColor: 'transparent',
45-
},
4636
},
4737
content: {
4838
color: theme.palette.text.secondary,
4939
borderTopRightRadius: theme.spacing(2),
5040
borderBottomRightRadius: theme.spacing(2),
5141
paddingRight: theme.spacing(1),
5242
fontWeight: theme.typography.fontWeightMedium,
53-
'$expanded > &': {
43+
'&$expanded': {
5444
fontWeight: theme.typography.fontWeightRegular,
5545
},
46+
'&:hover': {
47+
backgroundColor: theme.palette.action.hover,
48+
},
49+
'&$focused, &$selected': {
50+
backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
51+
color: 'var(--tree-view-color)',
52+
},
5653
},
5754
group: {
5855
marginLeft: 0,
@@ -62,6 +59,7 @@ const useTreeItemStyles = makeStyles((theme: Theme) =>
6259
},
6360
expanded: {},
6461
selected: {},
62+
focused: {},
6563
label: {
6664
fontWeight: 'inherit',
6765
color: 'inherit',
@@ -114,6 +112,7 @@ function StyledTreeItem(props: StyledTreeItemProps) {
114112
content: classes.content,
115113
expanded: classes.expanded,
116114
selected: classes.selected,
115+
focused: classes.focused,
117116
group: classes.group,
118117
label: classes.label,
119118
}}

‎packages/material-ui-lab/src/TreeItem/TreeItem.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export type TreeItemClassKey =
5555
| 'root'
5656
| 'expanded'
5757
| 'selected'
58+
| 'focused'
5859
| 'group'
5960
| 'content'
6061
| 'iconContainer'

‎packages/material-ui-lab/src/TreeItem/TreeItem.js‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,34 @@ export const styles = (theme) => ({
1515
margin: 0,
1616
padding: 0,
1717
outline: 0,
18+
},
19+
/* Styles applied to the `role="group"` element. */
20+
group: {
21+
margin: 0,
22+
padding: 0,
23+
marginLeft: 17,
24+
},
25+
/* Styles applied to the tree node content. */
26+
content: {
27+
width: '100%',
28+
display: 'flex',
29+
alignItems: 'center',
30+
cursor: 'pointer',
1831
WebkitTapHighlightColor: 'transparent',
19-
'&:focus > $content $label': {
32+
'&:hover': {
33+
backgroundColor: theme.palette.action.hover,
34+
// Reset on touch devices, it doesn't add specificity
35+
'@media (hover: none)': {
36+
backgroundColor: 'transparent',
37+
},
38+
},
39+
'&$focused': {
2040
backgroundColor: theme.palette.action.hover,
2141
},
22-
'&$selected > $content $label': {
42+
'&$selected': {
2343
backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
2444
},
25-
'&$selected > $content $label:hover, &$selected:focus > $content $label': {
45+
'&$selected:hover, &$selected$focused': {
2646
backgroundColor: fade(
2747
theme.palette.primary.main,
2848
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
@@ -33,23 +53,12 @@ export const styles = (theme) => ({
3353
},
3454
},
3555
},
36-
/* Pseudo-class applied to the root element when expanded. */
56+
/* Pseudo-class applied to the content element when expanded. */
3757
expanded: {},
38-
/* Pseudo-class applied to the root element when selected. */
58+
/* Pseudo-class applied to the content element when selected. */
3959
selected: {},
40-
/* Styles applied to the `role="group"` element. */
41-
group: {
42-
margin: 0,
43-
padding: 0,
44-
marginLeft: 17,
45-
},
46-
/* Styles applied to the tree node content. */
47-
content: {
48-
width: '100%',
49-
display: 'flex',
50-
alignItems: 'center',
51-
cursor: 'pointer',
52-
},
60+
/* Pseudo-class applied to the content element when focused. */
61+
focused: {},
5362
/* Styles applied to the tree node icon and collapse/expand icon. */
5463
iconContainer: {
5564
marginRight: 4,
@@ -66,13 +75,6 @@ export const styles = (theme) => ({
6675
width: '100%',
6776
paddingLeft: 4,
6877
position: 'relative',
69-
'&:hover': {
70-
backgroundColor: theme.palette.action.hover,
71-
// Reset on touch devices, it doesn't add specificity
72-
'@media (hover: none)': {
73-
backgroundColor: 'transparent',
74-
},
75-
},
7678
},
7779
});
7880

@@ -375,10 +377,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
375377

376378
return (
377379
<li
378-
className={clsx(classes.root, className, {
379-
[classes.expanded]: expanded,
380-
[classes.selected]: selected,
381-
})}
380+
className={clsx(classes.root, className)}
382381
role="treeitem"
383382
onKeyDown={handleKeyDown}
384383
onFocus={handleFocus}
@@ -389,7 +388,11 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
389388
{...other}
390389
>
391390
<div
392-
className={classes.content}
391+
className={clsx(classes.content, {
392+
[classes.expanded]: expanded,
393+
[classes.selected]: selected,
394+
[classes.focused]: focused,
395+
})}
393396
onClick={handleClick}
394397
onMouseDown={handleMouseDown}
395398
ref={contentRef}

‎packages/material-ui-lab/src/TreeItem/TreeItem.test.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -928,7 +928,6 @@ describe('<TreeItem />', () => {
928928
fireEvent.keyDown(getByTestId('one'), { key: ' ' });
929929

930930
expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
931-
expect(getByTestId('one')).to.have.class('Mui-selected');
932931
});
933932

934933
it('should not select a node when space is pressed and disableSelection', () => {

0 commit comments

Comments
 (0)