diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index e583aaa31d0fda..5bc47d14755a7a 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -49,3 +49,16 @@ The Accordion's `TransitionProps` was deprecated in favor of `slotProps.transiti + slotProps={{ transition: { unmountOnExit: true } }} /> ``` + +## Divider + +### light + +The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or any opacity). ([Codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#divider-props)): + +```diff + +``` diff --git a/docs/pages/material-ui/api/divider.json b/docs/pages/material-ui/api/divider.json index 2251d7eb40b524..bebce36c2de480 100644 --- a/docs/pages/material-ui/api/divider.json +++ b/docs/pages/material-ui/api/divider.json @@ -9,7 +9,7 @@ "type": { "name": "bool" }, "default": "false", "deprecated": true, - "deprecationInfo": "Use <Divider sx={{ bgcolor: '#eee' }} /> (or any color) instead." + "deprecationInfo": "Use <Divider sx={{ opacity: 0.6 }} /> (or any opacity or color) instead. How to migrate" }, "orientation": { "type": { "name": "enum", "description": "'horizontal'
| 'vertical'" }, diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index acabaf5646f6cc..d16f52d716e9e5 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -91,6 +91,19 @@ A combination of all deprecations. npx @mui/codemod@latest deprecations/accordion-props ``` +#### `divider-props` + +```diff + +``` + +```bash +npx @mui/codemod@latest deprecations/divider-props +``` + ### v5.0.0 #### `base-use-named-exports` diff --git a/packages/mui-codemod/src/deprecations/divider-props/divider-props.js b/packages/mui-codemod/src/deprecations/divider-props/divider-props.js new file mode 100644 index 00000000000000..d392b496ea46c0 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/divider-props/divider-props.js @@ -0,0 +1,82 @@ +import appendAttribute from '../../util/appendAttribute'; +import assignObject from '../../util/assignObject'; +import findComponentJSX from '../../util/findComponentJSX'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + + findComponentJSX(j, { root, componentName: 'Divider' }, (elementPath) => { + elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter( + (attr) => { + if (attr.type === 'JSXAttribute' && attr.name.name === 'light') { + return false; + } + return true; + }, + ); + + const sxIndex = elementPath.node.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'sx', + ); + if (sxIndex === -1) { + appendAttribute(j, { + target: elementPath.node, + attributeName: 'sx', + expression: j.objectExpression([ + j.objectProperty(j.identifier('opacity'), j.literal('0.6')), + ]), + }); + } else { + const opacityIndex = elementPath.node.openingElement.attributes[ + sxIndex + ].value.expression.properties.findIndex((key) => key.key.name === 'opacity'); + + if (opacityIndex === -1) { + assignObject(j, { + target: elementPath.node.openingElement.attributes[sxIndex], + key: 'opacity', + expression: j.literal('0.6'), + }); + } + } + }); + + root.find(j.ObjectProperty, { key: { name: 'MuiDivider' } }).forEach((path) => { + const defaultPropsObject = path.value.value.properties.find( + (key) => key.key.name === 'defaultProps', + ); + + defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter( + (prop) => !['light'].includes(prop?.key?.name), + ); + + const sxIndex = defaultPropsObject.value.properties.findIndex((prop) => prop.key.name === 'sx'); + + if (sxIndex === -1) { + defaultPropsObject.value.properties.push( + j.objectProperty( + j.identifier('sx'), + j.objectExpression([j.objectProperty(j.identifier('opacity'), j.literal('0.6'))]), + ), + ); + } else { + const opacityIndex = defaultPropsObject.value.properties[sxIndex].value.properties.findIndex( + (key) => key.key.name === 'opacity', + ); + + if (opacityIndex === -1) { + defaultPropsObject.value.properties[sxIndex].value.properties.push( + j.objectProperty(j.identifier('opacity'), j.literal('0.6')), + ); + } + } + }); + + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/divider-props/divider-props.test.js b/packages/mui-codemod/src/deprecations/divider-props/divider-props.test.js new file mode 100644 index 00000000000000..ab97658103bf74 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/divider-props/divider-props.test.js @@ -0,0 +1,65 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './divider-props'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('divider-props', () => { + it('transforms props as needed', () => { + const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('actual.js should not be equal to expected.js', () => { + const actual = read('./test-cases/actual.js'); + const expected = read('./test-cases/expected.js'); + expect(actual).to.not.equal(expected); + }); + }); + + describe('[theme] divider-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/theme.actual.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/theme.expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('theme.actual.js should not be equal to theme.expected.js', () => { + const actual = read('./test-cases/theme.actual.js'); + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.not.equal(expected); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/divider-props/index.js b/packages/mui-codemod/src/deprecations/divider-props/index.js new file mode 100644 index 00000000000000..366b6dbcf10207 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/divider-props/index.js @@ -0,0 +1 @@ +export { default } from './divider-props'; diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/actual.js new file mode 100644 index 00000000000000..92db3a700a543d --- /dev/null +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/actual.js @@ -0,0 +1,11 @@ +import Divider from '@mui/material/Divider'; +import { Divider as MyDivider } from '@mui/material'; + +; +; +; +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/expected.js new file mode 100644 index 00000000000000..634419b56eca5f --- /dev/null +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/expected.js @@ -0,0 +1,27 @@ +import Divider from '@mui/material/Divider'; +import { Divider as MyDivider } from '@mui/material'; + +; +; +; +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.actual.js new file mode 100644 index 00000000000000..aaa23a349a3035 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.actual.js @@ -0,0 +1,47 @@ +fn({ + MuiDivider: { + defaultProps: { + light: true, + }, + }, +}); +fn({ + MuiDivider: { + defaultProps: { + light: true, + className: 'my-class', + }, + }, +}); +fn({ + MuiDivider: { + defaultProps: { + light, + className: 'my-class', + }, + }, +}); + +fn({ + MuiDivider: { + defaultProps: { + light, + className: 'my-class', + sx: { + opacity: '0.7', + }, + }, + }, +}); + +fn({ + MuiDivider: { + defaultProps: { + light, + className: 'my-class', + sx: { + bgcolor: 'black', + }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.expected.js new file mode 100644 index 00000000000000..454fa3139ffd9e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.expected.js @@ -0,0 +1,54 @@ +fn({ + MuiDivider: { + defaultProps: { + sx: { + opacity: "0.6" + }, + }, + }, +}); +fn({ + MuiDivider: { + defaultProps: { + className: 'my-class', + sx: { + opacity: "0.6" + }, + }, + }, +}); +fn({ + MuiDivider: { + defaultProps: { + className: 'my-class', + sx: { + opacity: "0.6" + }, + }, + }, +}); + +fn({ + MuiDivider: { + defaultProps: { + className: 'my-class', + + sx: { + opacity: '0.7', + } + }, + }, +}); + +fn({ + MuiDivider: { + defaultProps: { + className: 'my-class', + + sx: { + bgcolor: 'black', + opacity: "0.6" + } + }, + }, +}); diff --git a/packages/mui-material/src/Divider/Divider.d.ts b/packages/mui-material/src/Divider/Divider.d.ts index ff3a6fb7b3abd2..54ae7c06242b00 100644 --- a/packages/mui-material/src/Divider/Divider.d.ts +++ b/packages/mui-material/src/Divider/Divider.d.ts @@ -30,7 +30,7 @@ export interface DividerOwnProps { /** * If `true`, the divider will have a lighter color. * @default false - * @deprecated Use (or any color) instead. + * @deprecated Use (or any opacity or color) instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) */ light?: boolean; /** diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js index 8dc32db3719031..a986b921347550 100644 --- a/packages/mui-material/src/Divider/Divider.js +++ b/packages/mui-material/src/Divider/Divider.js @@ -257,7 +257,7 @@ Divider.propTypes /* remove-proptypes */ = { /** * If `true`, the divider will have a lighter color. * @default false - * @deprecated Use (or any color) instead. + * @deprecated Use (or any opacity or color) instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) */ light: PropTypes.bool, /**