[typography] remove deprecated props

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
 -<AvatarGroup componentsProps={{ surplus: { className: 'my-class' } }}>
 +<AvatarGroup slotProps={{ surplus: { className: 'my-class' } }}>
 ```
+
+#### 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 <path>
+```
+
+The deprecated `paragraph` prop has been removed.
+Use `sx` prop to add the margin bottom instead:
+
+```diff
+-<Typography paragraph />
++<Typography sx={{ marginBottom: '16px' }} />
+```

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 <code>component</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> 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",

docs/translations/api-docs/typography/typography.json

@@ -14,9 +14,6 @@
     "noWrap": {
       "description": "If <code>true</code>, the text will not wrap, but instead will truncate with a text overflow ellipsis.<br>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 <code>true</code>, 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": "<code>variant=\"overline\"</code>"
     },
-    "paragraph": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>paragraph={true}</code>"
-    },
     "root": { "description": "Styles applied to the root element." },
     "subtitle1": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",

packages/mui-material/src/Typography/Typography.d.ts

@@ -55,12 +55,6 @@ export interface TypographyOwnProps extends Omit<SystemProps<Theme>, '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.
    */

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
    */

packages/mui-material/src/Typography/Typography.test.js

@@ -70,12 +70,6 @@ describe('<Typography />', () => {
       expect(screen.getByText(/hello/i).tagName).to.equal('SPAN');
     });
 
-    it('should render a p with a paragraph', () => {
-      render(<Typography paragraph>Hello</Typography>);
-
-      expect(screen.getByText(/hello/i).tagName).to.equal('P');
-    });
-
     it('should render the mapped headline', () => {
       render(<Typography variant="h6">Hello</Typography>);
 

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;