Skip to content

[Divider] Remove deprecated CSS classes #48075

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siriwatknp merged 1 commit into from
Mar 24, 2026
Merged

[Divider] Remove deprecated CSS classes #48075

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,17 @@ Use `sx={{ opacity : "0.6" }}` (or any opacity):
/>
```

#### Divider deprecated classes removed
Copy link
Copy Markdown
Member

@silviuaavram silviuaavram Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there is actually a codemod, it's just not added in the readme. we can do it here, not sure why claude did not find it in the PR I created for some missing codemods.

Copy link
Copy Markdown
Member

@ZeeshanTamboli ZeeshanTamboli Mar 24, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Claude didn't add because there was no divider-classes codemod, it's divider-props codemod which is different.


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:
Expand Down
7 changes: 0 additions & 7 deletions docs/pages/material-ui/api/divider.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
6 changes: 0 additions & 6 deletions docs/translations/api-docs/divider/divider.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <code>orientation=\"vertical\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/divider/#divider-classes-MuiDivider-withChildren\">.MuiDivider-withChildren</a> and <a href=\"/material-ui/api/divider/#divider-classes-MuiDivider-vertical\">.MuiDivider-vertical</a> classes instead."
},
"wrapper": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the span children element",
Expand Down
2 changes: 0 additions & 2 deletions packages/mui-material/src/Divider/Divider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
],
Expand All @@ -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,
Expand Down
3 changes: 2 additions & 1 deletion packages/mui-material/src/Divider/Divider.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ describe('<Divider />', () => {
describe('prop: orientation', () => {
it('should set the textVertical class', () => {
const { container } = render(<Divider orientation="vertical">content</Divider>);
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);
});
});
Expand Down
5 changes: 0 additions & 5 deletions packages/mui-material/src/Divider/dividerClasses.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"`. */
Expand All @@ -47,7 +43,6 @@ const dividerClasses: DividerClasses = generateUtilityClasses('MuiDivider', [
'flexItem',
'vertical',
'withChildren',
'withChildrenVertical',
'textAlignRight',
'textAlignLeft',
'wrapper',
Expand Down
Loading