From 1c7d01f38c448a121e0013a7e41f5cbbabe17baa Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 17 Jun 2021 09:50:15 +0700 Subject: [PATCH 1/3] remove span from IconButton --- docs/pages/api-docs/icon-button.json | 3 +-- .../api-docs/icon-button/icon-button.json | 4 ---- .../material-ui/src/IconButton/IconButton.js | 17 +---------------- .../src/IconButton/IconButton.test.js | 15 --------------- .../src/IconButton/iconButtonClasses.ts | 3 --- 5 files changed, 2 insertions(+), 40 deletions(-) diff --git a/docs/pages/api-docs/icon-button.json b/docs/pages/api-docs/icon-button.json index 867c25e9aa9b51..11faaf72180cc2 100644 --- a/docs/pages/api-docs/icon-button.json +++ b/docs/pages/api-docs/icon-button.json @@ -40,8 +40,7 @@ "disabled", "sizeSmall", "sizeMedium", - "sizeLarge", - "label" + "sizeLarge" ], "globalClasses": { "disabled": "Mui-disabled" }, "name": "MuiIconButton" diff --git a/docs/translations/api-docs/icon-button/icon-button.json b/docs/translations/api-docs/icon-button/icon-button.json index 46966efa172fb9..9e0373dc2129cd 100644 --- a/docs/translations/api-docs/icon-button/icon-button.json +++ b/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": "size=\"large\"" - }, - "label": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the children container element" } } } diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index a128d375f30801..2e4344d9b1e2e1 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/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} > - - {children} - + {children} ); }); diff --git a/packages/material-ui/src/IconButton/IconButton.test.js b/packages/material-ui/src/IconButton/IconButton.test.js index b45b251603c4cd..24180d01878fc5 100644 --- a/packages/material-ui/src/IconButton/IconButton.test.js +++ b/packages/material-ui/src/IconButton/IconButton.test.js @@ -22,21 +22,6 @@ describe('', () => { skip: ['componentProp', 'componentsProp'], })); - it('should render an inner label span (bloody safari)', () => { - const { getByText } = render(book); - 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 =

H

; - const { container } = render({child}); - 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 = ; diff --git a/packages/material-ui/src/IconButton/iconButtonClasses.ts b/packages/material-ui/src/IconButton/iconButtonClasses.ts index 6e3541821f5958..520ad8254d2092 100644 --- a/packages/material-ui/src/IconButton/iconButtonClasses.ts +++ b/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; From c06320f812f8885fa9cc17fe0b47c034a39d1506 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 17 Jun 2021 09:59:28 +0700 Subject: [PATCH 2/3] update migration --- docs/src/pages/guides/migration-v4/migration-v4.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index d3e88fd8f95583..cfc25d2e529ec0 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/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. Read more about [span removal](https://github.com/mui-org/material-ui/pull/26666). ```diff + ``` + ### Menu - The onE\* transition props were removed. Use TransitionProps instead. From a082950727ee6d3190b6a8fec07d80a833858566 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 17 Jun 2021 10:10:01 +0700 Subject: [PATCH 3/3] remove testDeepOverrides --- docs/src/pages/guides/migration-v4/migration-v4.md | 4 ++-- packages/material-ui/src/IconButton/IconButton.test.js | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index cfc25d2e529ec0..247f2e0b7c23e5 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/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. Read more about [span removal](https://github.com/mui-org/material-ui/pull/26666). +- `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