[Button] Remove label span (#26666)

siriwatknp · web-flow · commit edfaadcf7c4d · 2021-06-11T10:41:18.000+07:00
diff --git a/docs/pages/api-docs/button.json b/docs/pages/api-docs/button.json
@@ -38,7 +38,6 @@
   "styles": {
     "classes": [
       "root",
-      "label",
       "text",
       "textInherit",
       "textPrimary",
diff --git a/docs/pages/api-docs/loading-button.json b/docs/pages/api-docs/loading-button.json
@@ -21,7 +21,6 @@
   "styles": {
     "classes": [
       "root",
-      "label",
       "text",
       "textInherit",
       "textPrimary",
@@ -62,8 +61,7 @@
       "loadingIndicatorStart",
       "loadingIndicatorEnd",
       "endIconLoadingEnd",
-      "startIconLoadingStart",
-      "labelLoadingCenter"
+      "startIconLoadingStart"
     ],
     "globalClasses": { "focusVisible": "Mui-focusVisible", "disabled": "Mui-disabled" },
     "name": "MuiLoadingButton"
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -598,6 +598,16 @@ 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.
+
+  ```diff
+  <button class="MuiButton-root">
+  - <span class="MuiButton-label">
+      children
+  - </span>
+  </button>
+  ```
+
 ### Chip
 
 - Rename `default` variant to `filled` for consistency.
diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js
@@ -66,7 +66,7 @@ theme = {
     },
     MuiButton: {
       styleOverrides: {
-        label: {
+        root: {
           textTransform: 'none',
         },
         contained: {
diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx
@@ -65,7 +65,7 @@ theme = {
     },
     MuiButton: {
       styleOverrides: {
-        label: {
+        root: {
           textTransform: 'none',
         },
         contained: {
diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json
@@ -19,10 +19,6 @@
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },
-    "label": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the span element that wraps the children"
-    },
     "text": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json
@@ -11,10 +11,6 @@
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },
-    "label": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the span element that wraps the children"
-    },
     "text": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -218,11 +214,6 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the startIcon element",
       "conditions": "<code>loading={true}</code> and <code>loadingPosition=\"start\"</code>"
-    },
-    "labelLoadingCenter": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the label element",
-      "conditions": "<code>loading={true}</code> and <code>loadingPosition=\"center\"</code>"
     }
   }
 }
diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts
@@ -28,8 +28,6 @@ export type LoadingButtonTypeMap<
       endIconLoadingEnd?: string;
       /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */
       startIconLoadingStart?: string;
-      /** Styles applied to the label element if `loading={true}` and `loadingPosition="center"`. */
-      labelLoadingCenter?: string;
     };
     /**
      * If `true`, the loading indicator is shown.
diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js
@@ -4,7 +4,7 @@ import { chainPropTypes } from '@material-ui/utils';
 import { capitalize } from '@material-ui/core/utils';
 import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
 import { styled, unstable_useThemeProps as useThemeProps } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+import Button, { buttonClasses } from '@material-ui/core/Button';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';
 
@@ -15,7 +15,6 @@ const useUtilityClasses = (styleProps) => {
     root: ['root', loading && 'loading'],
     startIcon: [loading && `startIconLoading${capitalize(loadingPosition)}`],
     endIcon: [loading && `endIconLoading${capitalize(loadingPosition)}`],
-    label: [loading && `labelLoading${capitalize(loadingPosition)}`],
     loadingIndicator: [
       'loadingIndicator',
       loading && `loadingIndicator${capitalize(loadingPosition)}`,
@@ -51,22 +50,25 @@ const LoadingButtonRoot = styled(Button, {
       ...(styles.endIconLoadingEnd && {
         [`& .${loadingButtonClasses.endIconLoadingEnd}`]: styles.endIconLoadingEnd,
       }),
-      ...(styles.labelLoadingCenter && {
-        [`& .${loadingButtonClasses.labelLoadingCenter}`]: styles.labelLoadingCenter,
-      }),
     };
   },
-})({
-  [`& .${loadingButtonClasses.startIconLoadingStart}`]: {
-    visibility: 'hidden',
-  },
-  [`& .${loadingButtonClasses.endIconLoadingEnd}`]: {
-    visibility: 'hidden',
-  },
-  [`& .${loadingButtonClasses.labelLoadingCenter}`]: {
-    visibility: 'hidden',
-  },
-});
+})(({ styleProps, theme }) => ({
+  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]:
+    {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short,
+      }),
+      opacity: 0,
+    },
+  ...(styleProps.loadingPosition === 'center' && {
+    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+      duration: theme.transitions.duration.short,
+    }),
+    [`&.${buttonClasses.disabled}`]: {
+      color: 'transparent',
+    },
+  }),
+}));
 
 const LoadingButtonLoadingIndicator = styled('div', {
   name: 'MuiLoadingButton',
@@ -78,7 +80,7 @@ const LoadingButtonLoadingIndicator = styled('div', {
       ...styles[`loadingIndicator${capitalize(styleProps.loadingPosition)}`],
     };
   },
-})(({ styleProps }) => ({
+})(({ theme, styleProps }) => ({
   position: 'absolute',
   visibility: 'visible',
   display: 'flex',
@@ -88,6 +90,7 @@ const LoadingButtonLoadingIndicator = styled('div', {
   ...(styleProps.loadingPosition === 'center' && {
     left: '50%',
     transform: 'translate(-50%)',
+    color: theme.palette.action.disabled,
   }),
   ...(styleProps.loadingPosition === 'end' && {
     right: 14,
diff --git a/packages/material-ui-lab/src/LoadingButton/loadingButtonClasses.ts b/packages/material-ui-lab/src/LoadingButton/loadingButtonClasses.ts
@@ -17,8 +17,6 @@ export interface LoadingButtonClasses {
   endIconLoadingEnd: string;
   /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */
   startIconLoadingStart: string;
-  /** Styles applied to the label element if `loading={true}` and `loadingPosition="center"`. */
-  labelLoadingCenter: string;
 }
 
 export type LoadingButtonClassKey = keyof LoadingButtonClasses;
@@ -36,7 +34,6 @@ const loadingButtonClasses: LoadingButtonClasses = generateUtilityClasses('MuiLo
   'loadingIndicatorEnd',
   'endIconLoadingEnd',
   'startIconLoadingStart',
-  'labelLoadingCenter',
 ]);
 
 export default loadingButtonClasses;
diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
@@ -241,17 +241,6 @@ const ButtonRoot = styled(ButtonBase, {
     },
 );
 
-const ButtonLabel = styled('span', {
-  name: 'MuiButton',
-  slot: 'Label',
-  overridesResolver: (props, styles) => styles.label,
-})({
-  width: '100%', // Ensure the correct width for iOS Safari
-  display: 'inherit',
-  alignItems: 'inherit',
-  justifyContent: 'inherit',
-});
-
 const ButtonStartIcon = styled('span', {
   name: 'MuiButton',
   slot: 'StartIcon',
@@ -352,17 +341,9 @@ const Button = React.forwardRef(function Button(inProps, ref) {
       {...other}
       classes={classes}
     >
-      {/*
-       * The inner <span> is required to vertically align the children.
-       * Browsers don't support `display: flex` on a <button> element.
-       * https://github.com/philipwalton/flexbugs/blob/master/README.md#flexbug-9
-       * TODO v5: evaluate if still required for the supported browsers.
-       */}
-      <ButtonLabel className={classes.label} styleProps={styleProps}>
-        {startIcon}
-        {children}
-        {endIcon}
-      </ButtonLabel>
+      {startIcon}
+      {children}
+      {endIcon}
     </ButtonRoot>
   );
 });
diff --git a/packages/material-ui/src/Button/Button.test.js b/packages/material-ui/src/Button/Button.test.js
@@ -15,14 +15,14 @@ describe('<Button />', () => {
   const render = createClientRender();
   const mount = createMount();
 
-  describeConformanceV5(<Button>Conformance?</Button>, () => ({
+  describeConformanceV5(<Button startIcon="icon">Conformance?</Button>, () => ({
     classes,
     inheritComponent: ButtonBase,
     render,
     mount,
     refInstanceof: window.HTMLButtonElement,
     muiName: 'MuiButton',
-    testDeepOverrides: { slotName: 'label', slotClassName: classes.label },
+    testDeepOverrides: { slotName: 'startIcon', slotClassName: classes.startIcon },
     testVariantProps: { variant: 'contained', fullWidth: true },
     testStateOverrides: { prop: 'size', value: 'small', styleKey: 'sizeSmall' },
     skip: ['componentsProp'],
@@ -272,23 +272,21 @@ describe('<Button />', () => {
   it('should render a button with startIcon', () => {
     const { getByRole } = render(<Button startIcon={<span>icon</span>}>Hello World</Button>);
     const button = getByRole('button');
-    const label = button.querySelector(`.${classes.label}`);
+    const startIcon = button.querySelector(`.${classes.startIcon}`);
 
     expect(button).to.have.class(classes.root);
     expect(button).to.have.class(classes.text);
-    expect(label.firstChild).not.to.have.class(classes.endIcon);
-    expect(label.firstChild).to.have.class(classes.startIcon);
+    expect(startIcon).not.to.have.class(classes.endIcon);
   });
 
   it('should render a button with endIcon', () => {
     const { getByRole } = render(<Button endIcon={<span>icon</span>}>Hello World</Button>);
     const button = getByRole('button');
-    const label = button.querySelector(`.${classes.label}`);
+    const endIcon = button.querySelector(`.${classes.endIcon}`);
 
     expect(button).to.have.class(classes.root);
     expect(button).to.have.class(classes.text);
-    expect(label.lastChild).not.to.have.class(classes.startIcon);
-    expect(label.lastChild).to.have.class(classes.endIcon);
+    expect(endIcon).not.to.have.class(classes.startIcon);
   });
 
   it('should have a ripple by default', () => {
diff --git a/packages/material-ui/src/Button/buttonClasses.ts b/packages/material-ui/src/Button/buttonClasses.ts
@@ -3,8 +3,6 @@ import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unsty
 export interface ButtonClasses {
   /** Styles applied to the root element. */
   root: string;
-  /** Styles applied to the span element that wraps the children. */
-  label: string;
   /** Styles applied to the root element if `variant="text"`. */
   text: string;
   /** Styles applied to the root element if `variant="text"` and `color="inherit"`. */
@@ -83,7 +81,6 @@ export function getButtonUtilityClass(slot: string): string {
 
 const buttonClasses: ButtonClasses = generateUtilityClasses('MuiButton', [
   'root',
-  'label',
   'text',
   'textInherit',
   'textPrimary',
