[ListItemText] Detect and avoid re-wrapping Typography (mui#11849)

* fix(ListItemText): detect and avoid re-wrapping passed <Typography> * fix(ListItemText.test.js): fix eslint errors * simpler test case :)
FluentSynergyDW · Jun 14, 2018 · a0aaba3 · a0aaba3
1 parent 4e08a57
commit a0aaba3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js
@@ -48,7 +48,7 @@ function ListItemText(props, context) {
   const { dense } = context;
 
   let primary = primaryProp != null ? primaryProp : children;
-  if (primary != null && !disableTypography) {
+  if (primary != null && primary.type !== Typography && !disableTypography) {
     primary = (
       <Typography
         variant="subheading"
@@ -61,7 +61,7 @@ function ListItemText(props, context) {
   }
 
   let secondary = secondaryProp;
-  if (secondary != null && !disableTypography) {
+  if (secondary != null && secondary.type !== Typography && !disableTypography) {
     secondary = (
       <Typography
         variant="body1"

diff --git a/packages/material-ui/src/ListItemText/ListItemText.test.js b/packages/material-ui/src/ListItemText/ListItemText.test.js
@@ -205,4 +205,12 @@ describe('<ListItemText />', () => {
       'should have the secondary text class',
     );
   });
+
+  it('should not re-wrap the <Typography> element', () => {
+    const primary = <Typography>This is the primary text</Typography>;
+    const secondary = <Typography>This is the secondary text</Typography>;
+    const wrapper = shallow(<ListItemText primary={primary} secondary={secondary} />);
+    assert.strictEqual(wrapper.childAt(0).props().children, primary.props.children);
+    assert.strictEqual(wrapper.childAt(1).props().children, secondary.props.children);
+  });
 });