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 0440b496599b5f..ed4210d44bd0f1 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 @@ -559,3 +559,33 @@ If you were already using the `surplus` key via `componentsProps`, move it to `s - + ``` + +#### Typography deprecated CSS classes removed + +The deprecated `paragraph` CSS class has been removed. +Use CSS `.MuiTypography-root:where(p)` to apply custom styles for the paragraph element instead: + +```diff +-.MuiTypography-paragraph { +- margin-bottom: 16px; +-} ++.MuiTypography-root:where(p) { ++ margin-bottom: 16px; ++} +``` + +#### Typography deprecated props removed + +Use the [typography-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#typography-props) below to migrate the code as described in the following section: + +```bash +npx @mui/codemod@latest deprecations/typography-props +``` + +The deprecated `paragraph` prop has been removed. +Use `sx` prop to add the margin bottom instead: + +```diff +- ++ +``` diff --git a/docs/pages/material-ui/api/typography.json b/docs/pages/material-ui/api/typography.json index dfe8317c91bcd9..e1a8f567c6ca44 100644 --- a/docs/pages/material-ui/api/typography.json +++ b/docs/pages/material-ui/api/typography.json @@ -18,12 +18,6 @@ "component": { "type": { "name": "elementType" } }, "gutterBottom": { "type": { "name": "bool" }, "default": "false" }, "noWrap": { "type": { "name": "bool" }, "default": "false" }, - "paragraph": { - "type": { "name": "bool" }, - "default": "false", - "deprecated": true, - "deprecationInfo": "Use the component prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "sx": { "type": { "name": "union", @@ -157,13 +151,6 @@ "description": "Styles applied to the root element if `variant=\"overline\"`.", "isGlobal": false }, - { - "key": "paragraph", - "className": "MuiTypography-paragraph", - "description": "Styles applied to the root element if `paragraph={true}`.", - "isGlobal": false, - "isDeprecated": true - }, { "key": "root", "className": "MuiTypography-root", diff --git a/docs/translations/api-docs/typography/typography.json b/docs/translations/api-docs/typography/typography.json index 39506c3f3df3d2..49bf953515f73a 100644 --- a/docs/translations/api-docs/typography/typography.json +++ b/docs/translations/api-docs/typography/typography.json @@ -14,9 +14,6 @@ "noWrap": { "description": "If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.
Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow)." }, - "paragraph": { - "description": "If true, the element will be a paragraph element." - }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, @@ -116,11 +113,6 @@ "nodeName": "the root element", "conditions": "variant=\"overline\"" }, - "paragraph": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "paragraph={true}" - }, "root": { "description": "Styles applied to the root element." }, "subtitle1": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", diff --git a/packages/mui-material/src/Typography/Typography.d.ts b/packages/mui-material/src/Typography/Typography.d.ts index bed665a1cac70b..c9659133af7be9 100644 --- a/packages/mui-material/src/Typography/Typography.d.ts +++ b/packages/mui-material/src/Typography/Typography.d.ts @@ -55,12 +55,6 @@ export interface TypographyOwnProps extends Omit, 'color'> { * @default false */ noWrap?: boolean | undefined; - /** - * If `true`, the element will be a paragraph element. - * @default false - * @deprecated Use the `component` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - paragraph?: boolean | undefined; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js index 08483f91a34157..a342b4b22d2d33 100644 --- a/packages/mui-material/src/Typography/Typography.js +++ b/packages/mui-material/src/Typography/Typography.js @@ -25,7 +25,7 @@ const v6Colors = { const extendSxProp = internal_createExtendSxProp(); const useUtilityClasses = (ownerState) => { - const { align, gutterBottom, noWrap, paragraph, variant, classes } = ownerState; + const { align, gutterBottom, noWrap, variant, classes } = ownerState; const slots = { root: [ @@ -34,7 +34,6 @@ const useUtilityClasses = (ownerState) => { ownerState.align !== 'inherit' && `align${capitalize(align)}`, gutterBottom && 'gutterBottom', noWrap && 'noWrap', - paragraph && 'paragraph', ], }; @@ -53,7 +52,6 @@ export const TypographyRoot = styled('span', { ownerState.align !== 'inherit' && styles[`align${capitalize(ownerState.align)}`], ownerState.noWrap && styles.noWrap, ownerState.gutterBottom && styles.gutterBottom, - ownerState.paragraph && styles.paragraph, ]; }, })( @@ -113,12 +111,6 @@ export const TypographyRoot = styled('span', { marginBottom: '0.35em', }, }, - { - props: ({ ownerState }) => ownerState.paragraph, - style: { - marginBottom: 16, - }, - }, ], })), ); @@ -152,7 +144,6 @@ const Typography = React.forwardRef(function Typography(inProps, ref) { component, gutterBottom = false, noWrap = false, - paragraph = false, variant = 'body1', variantMapping = defaultVariantMapping, ...other @@ -166,15 +157,12 @@ const Typography = React.forwardRef(function Typography(inProps, ref) { component, gutterBottom, noWrap, - paragraph, variant, variantMapping, }; const Component = - component || - (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || - 'span'; + component || variantMapping[variant] || defaultVariantMapping[variant] || 'span'; const classes = useUtilityClasses(ownerState); @@ -252,12 +240,6 @@ Typography.propTypes /* remove-proptypes */ = { * @default false */ noWrap: PropTypes.bool, - /** - * If `true`, the element will be a paragraph element. - * @default false - * @deprecated Use the `component` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - paragraph: PropTypes.bool, /** * @ignore */ diff --git a/packages/mui-material/src/Typography/Typography.test.js b/packages/mui-material/src/Typography/Typography.test.js index 07abc984f91ee3..7ceb426ff33ede 100644 --- a/packages/mui-material/src/Typography/Typography.test.js +++ b/packages/mui-material/src/Typography/Typography.test.js @@ -70,12 +70,6 @@ describe('', () => { expect(screen.getByText(/hello/i).tagName).to.equal('SPAN'); }); - it('should render a p with a paragraph', () => { - render(Hello); - - expect(screen.getByText(/hello/i).tagName).to.equal('P'); - }); - it('should render the mapped headline', () => { render(Hello); diff --git a/packages/mui-material/src/Typography/typographyClasses.ts b/packages/mui-material/src/Typography/typographyClasses.ts index 731974a802fd97..04c7cb39142d03 100644 --- a/packages/mui-material/src/Typography/typographyClasses.ts +++ b/packages/mui-material/src/Typography/typographyClasses.ts @@ -44,11 +44,6 @@ export interface TypographyClasses { noWrap: string; /** Styles applied to the root element if `gutterBottom={true}`. */ gutterBottom: string; - /** - * Styles applied to the root element if `paragraph={true}`. - * @deprecated - */ - paragraph: string; } export type TypographyClassKey = keyof TypographyClasses; @@ -79,7 +74,6 @@ const typographyClasses: TypographyClasses = generateUtilityClasses('MuiTypograp 'alignJustify', 'noWrap', 'gutterBottom', - 'paragraph', ]); export default typographyClasses;