From a63ef35138e86b85c6d72eec992e91ef6b0c8644 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 24 Mar 2026 10:04:13 +0700 Subject: [PATCH] [Divider] Remove deprecated CSS classes --- .../material/migration/upgrade-to-v9/upgrade-to-v9.md | 11 +++++++++++ docs/pages/material-ui/api/divider.json | 7 ------- docs/translations/api-docs/divider/divider.json | 6 ------ packages/mui-material/src/Divider/Divider.js | 2 -- packages/mui-material/src/Divider/Divider.test.js | 3 ++- packages/mui-material/src/Divider/dividerClasses.ts | 5 ----- 6 files changed, 13 insertions(+), 21 deletions(-) diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md index 0b279e951266a0..e25327843deb0d 100644 --- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md +++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md @@ -1016,6 +1016,17 @@ Use `sx={{ opacity : "0.6" }}` (or any opacity): /> ``` +#### Divider deprecated classes removed + +The following deprecated class has been removed: + +- `withChildrenVertical` — combine the `.MuiDivider-withChildren` and `.MuiDivider-vertical` classes instead + +```diff +-.MuiDivider-withChildrenVertical ++.MuiDivider-withChildren.MuiDivider-vertical +``` + #### ImageListItemBar deprecated CSS classes removed Use the [image-list-item-bar-classes codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#image-list-item-bar-classes) below to migrate the code as described in the following section: diff --git a/docs/pages/material-ui/api/divider.json b/docs/pages/material-ui/api/divider.json index a57caed5c8cdde..eab427487cfa44 100644 --- a/docs/pages/material-ui/api/divider.json +++ b/docs/pages/material-ui/api/divider.json @@ -97,13 +97,6 @@ "description": "Styles applied to the root element if divider have text.", "isGlobal": false }, - { - "key": "withChildrenVertical", - "className": "MuiDivider-withChildrenVertical", - "description": "Styles applied to the root element if divider have text and `orientation=\"vertical\"`.", - "isGlobal": false, - "isDeprecated": true - }, { "key": "wrapper", "className": "MuiDivider-wrapper", diff --git a/docs/translations/api-docs/divider/divider.json b/docs/translations/api-docs/divider/divider.json index 22e87cef7a45ce..3652349b2e5263 100644 --- a/docs/translations/api-docs/divider/divider.json +++ b/docs/translations/api-docs/divider/divider.json @@ -64,12 +64,6 @@ "nodeName": "the root element", "conditions": "divider have text" }, - "withChildrenVertical": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "divider have text and orientation=\"vertical\"", - "deprecationInfo": "Combine the .MuiDivider-withChildren and .MuiDivider-vertical classes instead." - }, "wrapper": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the span children element", diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js index 229880fac30abc..94d49c1de673e1 100644 --- a/packages/mui-material/src/Divider/Divider.js +++ b/packages/mui-material/src/Divider/Divider.js @@ -19,7 +19,6 @@ const useUtilityClasses = (ownerState) => { orientation === 'vertical' && 'vertical', flexItem && 'flexItem', children && 'withChildren', - children && orientation === 'vertical' && 'withChildrenVertical', textAlign === 'right' && orientation !== 'vertical' && 'textAlignRight', textAlign === 'left' && orientation !== 'vertical' && 'textAlignLeft', ], @@ -42,7 +41,6 @@ const DividerRoot = styled('div', { ownerState.orientation === 'vertical' && styles.vertical, ownerState.flexItem && styles.flexItem, ownerState.children && styles.withChildren, - ownerState.children && ownerState.orientation === 'vertical' && styles.withChildrenVertical, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && styles.textAlignRight, diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js index 4a7dc599a01481..6e427d3b9a7156 100644 --- a/packages/mui-material/src/Divider/Divider.test.js +++ b/packages/mui-material/src/Divider/Divider.test.js @@ -44,7 +44,8 @@ describe('', () => { describe('prop: orientation', () => { it('should set the textVertical class', () => { const { container } = render(content); - expect(container.querySelectorAll(`.${classes.withChildrenVertical}`).length).to.equal(1); + expect(container.querySelectorAll(`.${classes.withChildren}`).length).to.equal(1); + expect(container.querySelectorAll(`.${classes.vertical}`).length).to.equal(1); expect(container.querySelectorAll(`.${classes.wrapperVertical}`).length).to.equal(1); }); }); diff --git a/packages/mui-material/src/Divider/dividerClasses.ts b/packages/mui-material/src/Divider/dividerClasses.ts index 089a56701b0bd2..2d6da415eef0cb 100644 --- a/packages/mui-material/src/Divider/dividerClasses.ts +++ b/packages/mui-material/src/Divider/dividerClasses.ts @@ -18,10 +18,6 @@ export interface DividerClasses { flexItem: string; /** Styles applied to the root element if divider have text. */ withChildren: string; - /** Styles applied to the root element if divider have text and `orientation="vertical"`. - * @deprecated Combine the [.MuiDivider-withChildren](/material-ui/api/divider/#divider-classes-MuiDivider-withChildren) and [.MuiDivider-vertical](/material-ui/api/divider/#divider-classes-MuiDivider-vertical) classes instead. - */ - withChildrenVertical: string; /** Styles applied to the root element if `textAlign="right" orientation="horizontal"`. */ textAlignRight: string; /** Styles applied to the root element if `textAlign="left" orientation="horizontal"`. */ @@ -47,7 +43,6 @@ const dividerClasses: DividerClasses = generateUtilityClasses('MuiDivider', [ 'flexItem', 'vertical', 'withChildren', - 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper',