From 23ed08e938fcc5584ef70cbedc53f05ac034bd34 Mon Sep 17 00:00:00 2001
From: sai chand <60743144+sai6855@users.noreply.github.com>
Date: Sat, 8 Jun 2024 13:25:49 +0530
Subject: [PATCH] [material-ui][Tab] Fix applying `iconWrapper` styles from
 theme and update its description (#42549)

Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
---
 docs/pages/material-ui/api/tab.json         |  2 +-
 docs/translations/api-docs/tab/tab.json     |  4 +--
 packages/mui-material/src/Tab/Tab.js        |  3 +++
 packages/mui-material/src/Tab/Tab.test.js   | 29 +++++++++++++++++++++
 packages/mui-material/src/Tab/tabClasses.ts |  2 +-
 5 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/docs/pages/material-ui/api/tab.json b/docs/pages/material-ui/api/tab.json
index 5f78b6fa4a2e7f..623ae2928d01ca 100644
--- a/docs/pages/material-ui/api/tab.json
+++ b/docs/pages/material-ui/api/tab.json
@@ -42,7 +42,7 @@
     {
       "key": "iconWrapper",
       "className": "MuiTab-iconWrapper",
-      "description": "Styles applied to the wrapper element of `icon` if `icon` is provided.",
+      "description": "Styles applied to the `icon` HTML element if both `icon` and `label` are provided.",
       "isGlobal": false
     },
     {
diff --git a/docs/translations/api-docs/tab/tab.json b/docs/translations/api-docs/tab/tab.json
index 3424471260cb84..7a4473a167f03e 100644
--- a/docs/translations/api-docs/tab/tab.json
+++ b/docs/translations/api-docs/tab/tab.json
@@ -38,8 +38,8 @@
     },
     "iconWrapper": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the wrapper element of <code>icon</code>",
-      "conditions": "<code>icon</code> is provided"
+      "nodeName": "the <code>icon</code> HTML element",
+      "conditions": "both <code>icon</code> and <code>label</code> are provided"
     },
     "labelIcon": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
diff --git a/packages/mui-material/src/Tab/Tab.js b/packages/mui-material/src/Tab/Tab.js
index 43d53422a76454..2894c511713c75 100644
--- a/packages/mui-material/src/Tab/Tab.js
+++ b/packages/mui-material/src/Tab/Tab.js
@@ -41,6 +41,9 @@ const TabRoot = styled(ButtonBase, {
       styles[`textColor${capitalize(ownerState.textColor)}`],
       ownerState.fullWidth && styles.fullWidth,
       ownerState.wrapped && styles.wrapped,
+      {
+        [`& .${tabClasses.iconWrapper}`]: styles.iconWrapper,
+      },
     ];
   },
 })(({ theme, ownerState }) => ({
diff --git a/packages/mui-material/src/Tab/Tab.test.js b/packages/mui-material/src/Tab/Tab.test.js
index fdad02650e0918..1481440199894c 100644
--- a/packages/mui-material/src/Tab/Tab.test.js
+++ b/packages/mui-material/src/Tab/Tab.test.js
@@ -4,6 +4,7 @@ import { spy } from 'sinon';
 import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
 import Tab, { tabClasses as classes } from '@mui/material/Tab';
 import ButtonBase from '@mui/material/ButtonBase';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Tab />', () => {
@@ -167,4 +168,32 @@ describe('<Tab />', () => {
       expect(style).to.have.property('alignText', 'center');
     });
   });
+
+  it('should apply iconWrapper styles from theme', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    const theme = createTheme({
+      components: {
+        MuiTab: {
+          styleOverrides: {
+            iconWrapper: {
+              backgroundColor: 'rgb(0, 0, 255)',
+            },
+          },
+        },
+      },
+    });
+
+    const { getByRole } = render(
+      <ThemeProvider theme={theme}>
+        <Tab icon={<div>hello</div>} label="icon" />
+      </ThemeProvider>,
+    );
+    const icon = getByRole('tab').querySelector(`.${classes.iconWrapper}`);
+    expect(icon).toHaveComputedStyle({
+      backgroundColor: 'rgb(0, 0, 255)',
+    });
+  });
 });
diff --git a/packages/mui-material/src/Tab/tabClasses.ts b/packages/mui-material/src/Tab/tabClasses.ts
index fa937a367a8549..a1cffb8022567d 100644
--- a/packages/mui-material/src/Tab/tabClasses.ts
+++ b/packages/mui-material/src/Tab/tabClasses.ts
@@ -20,7 +20,7 @@ export interface TabClasses {
   fullWidth: string;
   /** Styles applied to the root element if `wrapped={true}`. */
   wrapped: string;
-  /** Styles applied to the wrapper element of `icon` if `icon` is provided. */
+  /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided. */
   iconWrapper: string;
 }