[material-ui][Tab] Fix applying iconWrapper styles from theme and update its description (#42549)

Co-authored-by: ZeeshanTamboli <[email protected]>

Author: 2 people

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
     },
     {

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}}.",

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 }) => ({

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)',
+    });
+  });
 });

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;
 }