[SvgIcon] Fix passing an ownerState to SvgIcon changes the font size (m…

…ui#34429)
alexfauquette · Oct 14, 2022 · b737509 · b737509
1 parent 81dc8f0
commit b737509
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 3 deletions.
diff --git a/docs/pages/material-ui/api/svg-icon.json b/docs/pages/material-ui/api/svg-icon.json
@@ -40,6 +40,7 @@
       "colorDisabled",
       "fontSizeInherit",
       "fontSizeSmall",
+      "fontSizeMedium",
       "fontSizeLarge"
     ],
     "globalClasses": {},

diff --git a/docs/translations/api-docs/svg-icon/svg-icon.json b/docs/translations/api-docs/svg-icon/svg-icon.json
@@ -50,6 +50,11 @@
       "nodeName": "the root element",
       "conditions": "<code>fontSize=\"small\"</code>"
     },
+    "fontSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fontSize=\"medium\"</code>"
+    },
     "fontSizeLarge": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.test.js b/packages/mui-joy/src/SvgIcon/SvgIcon.test.js
@@ -129,4 +129,13 @@ describe('<SvgIcon />', () => {
       expect(container.firstChild).to.have.attribute('viewBox', '-4 -4 24 24');
     });
   });
+
+  it('should not override internal ownerState with the ownerState passed to the icon', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    const { container } = render(<SvgIcon ownerState={{ fontSize: 'sm' }}>{path}</SvgIcon>);
+    expect(container.firstChild).toHaveComputedStyle({ fontSize: '20px' }); // fontSize: xl -> 1.25rem = 20px
+  });
 });
diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
@@ -89,14 +89,14 @@ const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
     <SvgIconRoot
       as={component}
       className={clsx(classes.root, className)}
-      ownerState={ownerState}
       focusable="false"
       color={htmlColor}
       aria-hidden={titleAccess ? undefined : true}
       role={titleAccess ? 'img' : undefined}
       ref={ref}
       {...other}
       {...(!inheritViewBox && { viewBox })}
+      ownerState={ownerState}
     >
       {children}
       {titleAccess ? <title>{titleAccess}</title> : null}

diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.js b/packages/mui-material/src/SvgIcon/SvgIcon.js
@@ -47,7 +47,7 @@ const SvgIconRoot = styled('svg', {
     inherit: 'inherit',
     small: theme.typography?.pxToRem?.(20) || '1.25rem',
     medium: theme.typography?.pxToRem?.(24) || '1.5rem',
-    large: theme.typography?.pxToRem?.(35) || '2.1875',
+    large: theme.typography?.pxToRem?.(35) || '2.1875rem',
   }[ownerState.fontSize],
   // TODO v5 deprecate, v6 remove for sx
   color:
@@ -96,14 +96,14 @@ const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
     <SvgIconRoot
       as={component}
       className={clsx(classes.root, className)}
-      ownerState={ownerState}
       focusable="false"
       color={htmlColor}
       aria-hidden={titleAccess ? undefined : true}
       role={titleAccess ? 'img' : undefined}
       ref={ref}
       {...more}
       {...other}
+      ownerState={ownerState}
     >
       {children}
       {titleAccess ? <title>{titleAccess}</title> : null}

diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.test.js b/packages/mui-material/src/SvgIcon/SvgIcon.test.js
@@ -119,4 +119,13 @@ describe('<SvgIcon />', () => {
       expect(container.firstChild).to.have.attribute('viewBox', '-4 -4 24 24');
     });
   });
+
+  it('should not override internal ownerState with the ownerState passed to the icon', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    const { container } = render(<SvgIcon ownerState={{ fontSize: 'large' }}>{path}</SvgIcon>);
+    expect(container.firstChild).toHaveComputedStyle({ fontSize: '24px' }); // fontSize: medium -> 1.5rem = 24px
+  });
 });
diff --git a/packages/mui-material/src/SvgIcon/svgIconClasses.ts b/packages/mui-material/src/SvgIcon/svgIconClasses.ts
@@ -17,6 +17,8 @@ export interface SvgIconClasses {
   fontSizeInherit: string;
   /** Styles applied to the root element if `fontSize="small"`. */
   fontSizeSmall: string;
+  /** Styles applied to the root element if `fontSize="medium"`. */
+  fontSizeMedium: string;
   /** Styles applied to the root element if `fontSize="large"`. */
   fontSizeLarge: string;
 }