[IconButton] Remove label span

docs/pages/api-docs/icon-button.json

@@ -40,8 +40,7 @@
       "disabled",
       "sizeSmall",
       "sizeMedium",
-      "sizeLarge",
-      "label"
+      "sizeLarge"
     ],
     "globalClasses": { "disabled": "Mui-disabled" },
     "name": "MuiIconButton"

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -631,7 +631,7 @@ You can use the [`moved-lab-modules` codemod](https://github.com/mui-org/materia
 
   You can use the [`button-color-prop` codemod](https://github.com/mui-org/material-ui/tree/HEAD/packages/material-ui-codemod#button-color-prop) for automatic migration.
 
-- `span` element that wraps children has been removed. `label` classKey is also removed.
+- `span` element that wraps children has been removed. `label` classKey is also removed. More details about [this change](https://github.com/mui-org/material-ui/pull/26666).
 
   ```diff
   <button class="MuiButton-root">
@@ -1019,6 +1019,16 @@ You can use the [`collapse-rename-collapsedheight` codemod](https://github.com/m
   + <IconButton size="large">
   ```
 
+- `span` element that wraps children has been removed. `label` classKey is also removed. More details about [this change](https://github.com/mui-org/material-ui/pull/26666).
+
+  ```diff
+  <button class="MuiIconButton-root">
+  - <span class="MuiIconButton-label">
+      <svg />
+  - </span>
+  </button>
+  ```
+
 ### Menu
 
 - The onE\* transition props were removed. Use TransitionProps instead.

docs/translations/api-docs/icon-button/icon-button.json

@@ -57,10 +57,6 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>size=\"large\"</code>"
-    },
-    "label": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the children container element"
     }
   }
 }

packages/material-ui/src/IconButton/IconButton.js

@@ -21,7 +21,6 @@ const useUtilityClasses = (styleProps) => {
       edge && `edge${capitalize(edge)}`,
       `size${capitalize(size)}`,
     ],
-    label: ['label'],
   };
 
   return composeClasses(slots, getIconButtonUtilityClass, classes);
@@ -113,18 +112,6 @@ const IconButtonRoot = styled(ButtonBase, {
   }),
 );
 
-const IconButtonLabel = styled('span', {
-  name: 'MuiIconButton',
-  slot: 'Label',
-  overridesResolver: (props, styles) => styles.label,
-})({
-  /* Styles applied to the children container element. */
-  width: '100%',
-  display: 'flex',
-  alignItems: 'inherit',
-  justifyContent: 'inherit',
-});
-
 /**
  * Refer to the [Icons](/components/icons/) section of the documentation
  * regarding the available icon options.
@@ -163,9 +150,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
       styleProps={styleProps}
       {...other}
     >
-      <IconButtonLabel className={classes.label} styleProps={styleProps}>
-        {children}
-      </IconButtonLabel>
+      {children}
     </IconButtonRoot>
   );
 });

packages/material-ui/src/IconButton/IconButton.test.js

@@ -18,25 +18,9 @@ describe('<IconButton />', () => {
     refInstanceof: window.HTMLButtonElement,
     muiName: 'MuiIconButton',
     testVariantProps: { edge: 'end', disabled: true },
-    testDeepOverrides: { slotName: 'label', slotClassName: classes.label },
     skip: ['componentProp', 'componentsProp'],
   }));
 
-  it('should render an inner label span (bloody safari)', () => {
-    const { getByText } = render(<IconButton>book</IconButton>);
-    const label = getByText('book');
-    expect(label).to.have.class(classes.label);
-    expect(label).to.have.property('nodeName', 'SPAN');
-  });
-
-  it('should render the child normally inside the label span', () => {
-    const child = <p id="child">H</p>;
-    const { container } = render(<IconButton>{child}</IconButton>);
-    const label = container.querySelector(`.${classes.label}`);
-    const icon = label.firstChild;
-    expect(icon).to.equal(container.querySelector('#child'));
-  });
-
   it('should render Icon children with right classes', () => {
     const childClassName = 'child-woof';
     const iconChild = <Icon data-testid="icon" className={childClassName} />;

packages/material-ui/src/IconButton/iconButtonClasses.ts

@@ -21,8 +21,6 @@ export interface IconButtonClasses {
   sizeMedium: string;
   /** Styles applied to the root element if `size="large"`. */
   sizeLarge: string;
-  /** Styles applied to the children container element. */
-  label: string;
 }
 
 export type IconButtonClassKey = keyof IconButtonClasses;
@@ -42,7 +40,6 @@ const iconButtonClasses: IconButtonClasses = generateUtilityClasses('MuiIconButt
   'sizeSmall',
   'sizeMedium',
   'sizeLarge',
-  'label',
 ]);
 
 export default iconButtonClasses;