fix typography scale mapping

mui · Jun 9, 2022 · 6b2a040 · 6b2a040
1 parent 2f0c076
commit 6b2a040
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/docs/data/joy/components/typography/TypographyScales.js b/docs/data/joy/components/typography/TypographyScales.js
@@ -5,15 +5,19 @@ import Typography from '@mui/joy/Typography';
 export default function TypographyScales() {
   return (
     <Box>
+      <Typography level="display1">display1</Typography>
+      <Typography level="display2">display2</Typography>
       <Typography level="h1">h1</Typography>
       <Typography level="h2">h2</Typography>
       <Typography level="h3">h3</Typography>
       <Typography level="h4">h4</Typography>
       <Typography level="h5">h5</Typography>
       <Typography level="h6">h6</Typography>
-      <Typography level="body1">body1: paragraph</Typography>
-      <Typography level="body2">body2: paragraph</Typography>
-      <Typography level="body3">body3: paragraph</Typography>
+      <Typography level="body1">body1</Typography>
+      <Typography level="body2">body2</Typography>
+      <Typography level="body3">body3</Typography>
+      <Typography level="body4">body4</Typography>
+      <Typography level="body5">body5</Typography>
     </Box>
   );
 }
diff --git a/docs/data/joy/components/typography/typography.md b/docs/data/joy/components/typography/typography.md
@@ -38,6 +38,8 @@ const theme = extendTheme({
     JoyTypography: {
       defaultProps: {
         levelMapping: {
+          display1: 'h1',
+          display2: 'h1',
           h1: 'h2',
           h2: 'h2',
           h3: 'h3',
@@ -47,6 +49,8 @@ const theme = extendTheme({
           body1: 'p',
           body2: 'span',
           body3: 'span',
+          body4: 'span',
+          body5: 'span',
         },
       },
     },
@@ -87,7 +91,7 @@ By doing that, you'll be able to use those levels from the `level` prop:
 ```
 
 :::info
-If using **TypeScript** you need module augmentation to add those values to the theme:
+If using **TypeScript**, you need module augmentation to add those values to the theme:
 
 ```ts
 // in your theme or index file
@@ -128,6 +132,8 @@ If you use **TypeScript**, you have to remove them from the types as well:
 // in your theme or index file
 declare module '@mui/joy/styles' {
   interface TypographySystemOverrides {
+    display1: false;
+    display2: false;
     h1: false;
     h2: false;
     h3: false;
@@ -137,6 +143,8 @@ declare module '@mui/joy/styles' {
     body1: false;
     body2: false;
     body3: false;
+    body4: false;
+    body5: false;
   }
 }
 ```

diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx
@@ -103,13 +103,13 @@ const defaultVariantMapping: Record<string, string> = {
   h4: 'h4',
   h5: 'h5',
   h6: 'h6',
-  display1: 'p',
-  display2: 'p',
+  display1: 'h1',
+  display2: 'h2',
   body1: 'p',
   body2: 'p',
-  body3: 'p',
-  body4: 'p',
-  body5: 'p',
+  body3: 'span',
+  body4: 'span',
+  body5: 'span',
   inherit: 'p',
 };