[Tabs] Alternative way to disable ":first-child is unsafe" error (#28982

)
mui · Oct 12, 2021 · 3b406df · 3b406df
1 parent 297cfbd
commit 3b406df
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 18 deletions.
diff --git a/packages/mui-material/src/Tab/Tab.js b/packages/mui-material/src/Tab/Tab.js
@@ -22,7 +22,7 @@ const useUtilityClasses = (ownerState) => {
       selected && 'selected',
       disabled && 'disabled',
     ],
-    icon: [icon && 'iconWrapper'],
+    iconWrapper: ['iconWrapper'],
   };
 
   return composeClasses(slots, getTabUtilityClass, classes);
@@ -55,19 +55,13 @@ const TabRoot = styled(ButtonBase, {
   textAlign: 'center',
   flexDirection: 'column',
   lineHeight: 1.25,
-  ...(ownerState.icon && {
-    [`& > .${tabClasses.iconWrapper}`]: {
-      display: 'inherit',
-    },
-  }),
   ...(ownerState.icon &&
     ownerState.label && {
       minHeight: 72,
       paddingTop: 9,
       paddingBottom: 9,
       [`& > .${tabClasses.iconWrapper}`]: {
         marginBottom: 6,
-        display: 'inherit',
       },
     }),
   ...(ownerState.textColor === 'inherit' && {
@@ -117,7 +111,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
     disableFocusRipple = false,
     // eslint-disable-next-line react/prop-types
     fullWidth,
-    icon,
+    icon: iconProp,
     // eslint-disable-next-line react/prop-types
     indicator,
     label,
@@ -140,15 +134,20 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
     disabled,
     disableFocusRipple,
     selected,
-    icon: !!icon,
+    icon: !!iconProp,
     label: !!label,
     fullWidth,
     textColor,
     wrapped,
   };
 
   const classes = useUtilityClasses(ownerState);
-
+  const icon =
+    iconProp && label && React.isValidElement(iconProp)
+      ? React.cloneElement(iconProp, {
+          className: clsx(classes.iconWrapper, iconProp.props.className),
+        })
+      : iconProp;
   const handleClick = (event) => {
     if (!selected && onChange) {
       onChange(event, value);
@@ -183,8 +182,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
       tabIndex={selected ? 0 : -1}
       {...other}
     >
-      {icon && <span className={classes.icon}>{icon}</span>}
-
+      {icon}
       {label}
       {indicator}
     </TabRoot>

diff --git a/packages/mui-material/src/Tab/Tab.test.js b/packages/mui-material/src/Tab/Tab.test.js
@@ -121,16 +121,16 @@ describe('<Tab />', () => {
       expect(getByTestId('icon')).not.to.equal(null);
     });
 
-    it('should create a wrapper', () => {
-      const { getByRole } = render(<Tab icon={<div data-testid="icon" />} />);
+    it('should add a classname when passed together with label', () => {
+      const { getByRole } = render(<Tab icon={<div className="test-icon" />} label="foo" />);
       const wrapper = getByRole('tab').children[0];
-      expect(wrapper.tagName).to.equal('SPAN');
+      expect(wrapper).to.have.class(classes.iconWrapper);
+      expect(wrapper).to.have.class('test-icon');
     });
 
-    it('should create a wrapper with bottom margin when passed together with label', () => {
-      const { getByRole } = render(<Tab icon={<div data-testid="icon" />} label="foo" />);
+    it('should have bottom margin when passed together with label', () => {
+      const { getByRole } = render(<Tab icon={<div />} label="foo" />);
       const wrapper = getByRole('tab').children[0];
-      expect(wrapper.tagName).to.equal('SPAN');
       expect(wrapper).toHaveComputedStyle({ marginBottom: '6px' });
     });
   });