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

[sai6855]

Bug

According to docs, styles applied passed to iconWrapper should be applied to wrapper element of icon, in this case it is TabRoot component. But styles are not getting applied as we can see in below before sandbox

Before: https://stackblitz.com/edit/react-kgd9jj?file=Demo.tsx (background color should be red according theme but that's not the case)

After: Replace code in this demo with below code to see effects of fix

import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';
import { ThemeProvider, createTheme } from '@mui/material/styles';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function CustomTabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
    </div>
  );
}

function a11yProps(index: number) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

export default function BasicTabs() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };
  const theme = createTheme({
    components: {
      MuiTab: {
        styleOverrides: {
          iconWrapper: {
            background: 'red',
          },
        },
      },
    },
  });
  return (
    <ThemeProvider theme={theme}>
      <Box sx={{ width: '100%' }}>
        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
            <Tab icon="icon   " label="Item One" {...a11yProps(0)} />
            <Tab label="Item Two" {...a11yProps(1)} />
            <Tab label="Item Three" {...a11yProps(2)} />
          </Tabs>
        </Box>
        <CustomTabPanel value={value} index={0}>
          Item One
        </CustomTabPanel>
        <CustomTabPanel value={value} index={1}>
          Item Two
        </CustomTabPanel>
        <CustomTabPanel value={value} index={2}>
          Item Three
        </CustomTabPanel>
      </Box>
    </ThemeProvider>
  );
}

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-42549--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against fe9a07c

[ZeeshanTamboli]

This is incorrect. In the code, the iconWrapper class is applied to the icon itself when both icon (as a valid React element, not a string) and label props are present. You can also verify this in the second demo of this section in the docs.

This logic was added in #28982 to replace the extra span element wrapper with React.cloneElement and then apply the className to fix :first-child warnings.

I understand the name iconWrapper is confusing indicating a "wrapper", but we can't change the class name in v5 only in v6. What we can do is update the style class description to:

Styles applied to the `icon` HTML element if both `icon` and `label` are provided.

What do you think about changing the style class name from iconWrapper to icon for v6 in this PR? cc @DiegoAndai

[sai6855]

Agree on changing description of iconWrapper class, but what should be way forward about styles passed for iconWrapper in theme not being applied to icon.

I don't think we can access styles.iconWrapper here, so i'm not sure how to fix this.

For now, i've just updated description in this PR, we can update iconWrapper to icon in different PR if we decided to update

[ZeeshanTamboli]

but what should be way forward about styles passed for iconWrapper in theme not being applied to icon.

We can do this:

--- a/packages/mui-material/src/Tab/Tab.js
+++ b/packages/mui-material/src/Tab/Tab.js
@@ -42,6 +42,9 @@ const TabRoot = styled(ButtonBase, {
       styles[`textColor${capitalize(ownerState.textColor)}`],
       ownerState.fullWidth && styles.fullWidth,
       ownerState.wrapped && styles.wrapped,
+      {
+        [`& .${tabClasses.iconWrapper}`]: styles.iconWrapper,
+      },
     ];
   },
 })(({ theme }) => ({

Make sure to add a test.

we can update iconWrapper to icon in different PR if we decided to update

Agree with you. And first create a new issue so that it is tracked.

[sai6855]

We can do this:

Added in these commits 988bf86 e692070, intresting solution BTW, thanks!!

[ZeeshanTamboli]

Looks good.

[DiegoAndai]

Sorry I missed this

What do you think about changing the style class name from iconWrapper to icon for v6 in this PR?

I agree, but let's deprecate iconWrapper and add icon. They will be the same. @sai6855 may I ask you to open a PR for this?

[sai6855]

@sai6855 may I ask you to open a PR for this?

opened PR -> #42647