From 0258c9aab6a1a94b867d33c087fb34d58132159d Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Wed, 25 Mar 2020 16:07:09 -0300
Subject: [PATCH 1/4] [TreeItem] Wrap label with div

---
 docs/pages/api-docs/tree-item.md              |  1 +
 .../material-ui-lab/src/TreeItem/TreeItem.js  | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/docs/pages/api-docs/tree-item.md b/docs/pages/api-docs/tree-item.md
index 325ed695b2032f..1d97f1f2d8f42a 100644
--- a/docs/pages/api-docs/tree-item.md
+++ b/docs/pages/api-docs/tree-item.md
@@ -52,6 +52,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">group</span> | <span class="prop-name">.MuiTreeItem-group</span> | Styles applied to the `role="group"` element.
 | <span class="prop-name">content</span> | <span class="prop-name">.MuiTreeItem-content</span> | Styles applied to the tree node content.
 | <span class="prop-name">iconContainer</span> | <span class="prop-name">.MuiTreeItem-iconContainer</span> | Styles applied to the tree node icon and collapse/expand icon.
+| <span class="prop-name">labelContainer</span> | <span class="prop-name">.MuiTreeItem-labelContainer</span> | Styles applied to the label container.
 | <span class="prop-name">label</span> | <span class="prop-name">.MuiTreeItem-label</span> | Styles applied to the label element.
 
 You can override the style of the component thanks to one of these customization points:
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
index d6f8a835eed085..704e37afc69e72 100644
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -61,11 +61,14 @@ export const styles = (theme) => ({
       fontSize: 18,
     },
   },
+  /* Styles applied to the label container. */
+  labelContainer: {
+    width: '100%',
+    position: 'relative',
+  },
   /* Styles applied to the label element. */
   label: {
-    width: '100%',
     paddingLeft: 4,
-    position: 'relative',
     '&:hover': {
       backgroundColor: theme.palette.action.hover,
       // Reset on touch devices, it doesn't add specificity
@@ -395,9 +398,15 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
         ref={contentRef}
       >
         <div className={classes.iconContainer}>{icon}</div>
-        <Typography component="div" className={classes.label}>
-          {label}
-        </Typography>
+        <div className={classes.labelContainer}>
+          {React.isValidElement(label) ? (
+            label
+          ) : (
+            <Typography component="div" className={classes.label}>
+              {label}
+            </Typography>
+          )}
+        </div>
       </div>
       {children && (
         <TransitionComponent

From 0e10af5e7658d536e4331176c4fc8d1e2ed8026f Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Wed, 25 Mar 2020 16:08:24 -0300
Subject: [PATCH 2/4] [docs] Replace Fragment with Typography

---
 docs/src/pages/customization/default-theme/DefaultTheme.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js
index 69e11452bb7e34..9c0236a8007be2 100644
--- a/docs/src/pages/customization/default-theme/DefaultTheme.js
+++ b/docs/src/pages/customization/default-theme/DefaultTheme.js
@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import { makeStyles, withStyles, createMuiTheme, lighten } from '@material-ui/core/styles';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
+import Typography from '@material-ui/core/Typography';
 
 /**
  * @param {unknown} value
@@ -96,7 +97,7 @@ function ObjectEntryLabel(props) {
   const classes = useObjectEntryLabelStyles();
 
   return (
-    <React.Fragment>
+    <Typography component="div">
       {`${objectKey}: `}
       {type === 'color' ? (
         <span className={classes.color} style={{ borderColor: lighten(label, 0.7) }}>
@@ -104,7 +105,7 @@ function ObjectEntryLabel(props) {
         </span>
       ) : null}
       <span className={clsx('token', tokenType)}>{label}</span>
-    </React.Fragment>
+    </Typography>
   );
 }
 

From b8fb2206ad0d9915759440d8042334c39418e592 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Wed, 25 Mar 2020 16:48:32 -0300
Subject: [PATCH 3/4] [docs] Fix Argos CI

---
 docs/src/pages/components/tree-view/GmailTreeView.js  | 2 +-
 docs/src/pages/components/tree-view/GmailTreeView.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/tree-view/GmailTreeView.js b/docs/src/pages/components/tree-view/GmailTreeView.js
index 19d1101bf3d1b5..8d427a0a374c0f 100644
--- a/docs/src/pages/components/tree-view/GmailTreeView.js
+++ b/docs/src/pages/components/tree-view/GmailTreeView.js
@@ -53,7 +53,7 @@ const useTreeItemStyles = makeStyles((theme) => ({
   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),
diff --git a/docs/src/pages/components/tree-view/GmailTreeView.tsx b/docs/src/pages/components/tree-view/GmailTreeView.tsx
index f1e4ca54b83f27..98e807d411986f 100644
--- a/docs/src/pages/components/tree-view/GmailTreeView.tsx
+++ b/docs/src/pages/components/tree-view/GmailTreeView.tsx
@@ -69,7 +69,7 @@ const useTreeItemStyles = makeStyles((theme: Theme) =>
     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),

From 878fca23c066d72ff64dd679fa463821b2c522af Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Tue, 7 Apr 2020 21:48:45 -0300
Subject: [PATCH 4/4] [docs] Remove unused selector

---
 docs/src/pages/components/tree-view/GmailTreeView.js  | 3 ---
 docs/src/pages/components/tree-view/GmailTreeView.tsx | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/docs/src/pages/components/tree-view/GmailTreeView.js b/docs/src/pages/components/tree-view/GmailTreeView.js
index 8d427a0a374c0f..2b0df4f777901a 100644
--- a/docs/src/pages/components/tree-view/GmailTreeView.js
+++ b/docs/src/pages/components/tree-view/GmailTreeView.js
@@ -24,9 +24,6 @@ const useTreeItemStyles = makeStyles((theme) => ({
       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,
diff --git a/docs/src/pages/components/tree-view/GmailTreeView.tsx b/docs/src/pages/components/tree-view/GmailTreeView.tsx
index 98e807d411986f..3a9143b374aa4b 100644
--- a/docs/src/pages/components/tree-view/GmailTreeView.tsx
+++ b/docs/src/pages/components/tree-view/GmailTreeView.tsx
@@ -40,9 +40,6 @@ const useTreeItemStyles = makeStyles((theme: Theme) =>
         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,