From 7bff52112cf88e38e4be7986752285f7b5f972bd Mon Sep 17 00:00:00 2001
From: iamxukai <85668115+iamxukai@users.noreply.github.com>
Date: Thu, 8 Sep 2022 13:51:36 +0800
Subject: [PATCH] [ListItemText] Fix variant mapping in `primaryTypography`
 (#33880)

* [ListItemText] fix variant mapping

* prettier

* improve readability in test

Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
---
 .../src/ListItemText/ListItemText.js          |  2 +-
 .../src/ListItemText/ListItemText.test.js     | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/mui-material/src/ListItemText/ListItemText.js b/packages/mui-material/src/ListItemText/ListItemText.js
index 29b4f5a768c22b..247ee8078aca44 100644
--- a/packages/mui-material/src/ListItemText/ListItemText.js
+++ b/packages/mui-material/src/ListItemText/ListItemText.js
@@ -84,7 +84,7 @@ const ListItemText = React.forwardRef(function ListItemText(inProps, ref) {
       <Typography
         variant={dense ? 'body2' : 'body1'}
         className={classes.primary}
-        component="span"
+        component={primaryTypographyProps?.variant ? undefined : 'span'}
         display="block"
         {...primaryTypographyProps}
       >
diff --git a/packages/mui-material/src/ListItemText/ListItemText.test.js b/packages/mui-material/src/ListItemText/ListItemText.test.js
index e97b2f148494ff..74c763665191f8 100644
--- a/packages/mui-material/src/ListItemText/ListItemText.test.js
+++ b/packages/mui-material/src/ListItemText/ListItemText.test.js
@@ -155,6 +155,27 @@ describe('<ListItemText />', () => {
     expect(texts[1]).have.text('This is the secondary text');
   });
 
+  it('should use variant if provided', () => {
+    const { getByText } = render(
+      <ListItemText
+        primary="This is the primary text"
+        primaryTypographyProps={{ variant: 'h3' }}
+        secondary="This is the secondary text"
+        secondaryTypographyProps={{ variant: 'h4' }}
+      />,
+    );
+    expect(getByText('This is the primary text')).to.have.tagName('h3');
+    expect(getByText('This is the secondary text')).to.have.tagName('h4');
+  });
+
+  it('should fall back to the default tag name if no variant provided', () => {
+    const { getByText } = render(
+      <ListItemText primary="This is the primary text" secondary="This is the secondary text" />,
+    );
+    expect(getByText('This is the primary text')).to.have.tagName('span');
+    expect(getByText('This is the secondary text')).to.have.tagName('p');
+  });
+
   it('should pass primaryTypographyProps to primary Typography component', () => {
     const { container } = render(
       <ListItemText