[Joy] Make Icon fontSize adaptable to its parent (#31268)

mui · Mar 4, 2022 · 63fbc87 · 63fbc87
1 parent 7a82312
commit 63fbc87
Show file tree

Hide file tree

Showing 13 changed files with 43 additions and 206 deletions.
diff --git a/docs/pages/experiments/joy/button.tsx b/docs/pages/experiments/joy/button.tsx
@@ -46,29 +46,7 @@ export default function JoyButton() {
     size: ['sm', 'md', 'lg'],
   } as const;
   return (
-    <CssVarsProvider
-      theme={{
-        components: {
-          MuiSvgIcon: {
-            defaultProps: {
-              fontSize: 'xl',
-            },
-            styleOverrides: {
-              root: ({ ownerState, theme }) => ({
-                ...(ownerState.fontSize &&
-                  ownerState.fontSize !== 'inherit' && {
-                    fontSize: theme.vars.fontSize[ownerState.fontSize],
-                  }),
-                ...(ownerState.color &&
-                  ownerState.color !== 'inherit' && {
-                    color: theme.vars.palette[ownerState.color].textColor,
-                  }),
-              }),
-            },
-          },
-        },
-      }}
-    >
+    <CssVarsProvider>
       <Box sx={{ py: 5, maxWidth: { md: 1152, xl: 1536 }, mx: 'auto' }}>
         <Box sx={{ px: 3, pb: 4 }}>
           <ColorSchemePicker />

diff --git a/docs/pages/experiments/joy/components.tsx b/docs/pages/experiments/joy/components.tsx
@@ -477,29 +477,7 @@ export default function JoyComponents() {
   }, []);
 
   return (
-    <CssVarsProvider
-      theme={{
-        components: {
-          MuiSvgIcon: {
-            defaultProps: {
-              fontSize: 'xl',
-            },
-            styleOverrides: {
-              root: ({ ownerState, theme }) => ({
-                ...(ownerState.fontSize &&
-                  ownerState.fontSize !== 'inherit' && {
-                    fontSize: theme.vars.fontSize[ownerState.fontSize],
-                  }),
-                ...(ownerState.color &&
-                  ownerState.color !== 'inherit' && {
-                    color: theme.vars.palette[ownerState.color].textColor,
-                  }),
-              }),
-            },
-          },
-        },
-      }}
-    >
+    <CssVarsProvider>
       <GlobalStyles styles={{ body: { margin: 0 } }} />
       {mounted && <Playground initialName={router.query.name as string} />}
     </CssVarsProvider>

diff --git a/docs/pages/experiments/joy/input.tsx b/docs/pages/experiments/joy/input.tsx
@@ -43,29 +43,7 @@ const ColorSchemePicker = () => {
 
 export default function JoyTypography() {
   return (
-    <CssVarsProvider
-      theme={{
-        components: {
-          MuiSvgIcon: {
-            defaultProps: {
-              fontSize: 'xl',
-            },
-            styleOverrides: {
-              root: ({ ownerState, theme }) => ({
-                ...(ownerState.fontSize &&
-                  ownerState.fontSize !== 'inherit' && {
-                    fontSize: theme.vars.fontSize[ownerState.fontSize],
-                  }),
-                ...(ownerState.color &&
-                  ownerState.color !== 'inherit' && {
-                    color: theme.vars.palette[ownerState.color].textColor,
-                  }),
-              }),
-            },
-          },
-        },
-      }}
-    >
+    <CssVarsProvider>
       <GlobalStyles styles={{ body: { margin: 0 } }} />
       <Box sx={{ py: 5, maxWidth: { md: 1152, xl: 1536 }, mx: 'auto' }}>
         <Box sx={{ px: 2 }}>

diff --git a/docs/pages/experiments/joy/list.tsx b/docs/pages/experiments/joy/list.tsx
@@ -726,25 +726,6 @@ export default function JoyTypography() {
             },
           },
         },
-        components: {
-          MuiSvgIcon: {
-            defaultProps: {
-              fontSize: 'xl',
-            },
-            styleOverrides: {
-              root: ({ ownerState, theme }) => ({
-                ...(ownerState.fontSize &&
-                  ownerState.fontSize !== 'inherit' && {
-                    fontSize: theme.vars.fontSize[ownerState.fontSize],
-                  }),
-                ...(ownerState.color &&
-                  ownerState.color !== 'inherit' && {
-                    color: theme.vars.palette[ownerState.color].textColor,
-                  }),
-              }),
-            },
-          },
-        },
       }}
     >
       <GlobalStyles

diff --git a/docs/pages/experiments/joy/sheet.tsx b/docs/pages/experiments/joy/sheet.tsx
@@ -44,29 +44,7 @@ export default function JoySheet() {
   } as const;
 
   return (
-    <CssVarsProvider
-      theme={{
-        components: {
-          MuiSvgIcon: {
-            defaultProps: {
-              fontSize: 'xl',
-            },
-            styleOverrides: {
-              root: ({ ownerState, theme }) => ({
-                ...(ownerState.fontSize &&
-                  ownerState.fontSize !== 'inherit' && {
-                    fontSize: theme.vars.fontSize[ownerState.fontSize],
-                  }),
-                ...(ownerState.color &&
-                  ownerState.color !== 'inherit' && {
-                    color: theme.vars.palette[ownerState.color].textColor,
-                  }),
-              }),
-            },
-          },
-        },
-      }}
-    >
+    <CssVarsProvider>
       <GlobalStyles
         styles={{ body: { backgroundColor: 'var(--joy-palette-background-level2)' } }}
       />

diff --git a/docs/pages/experiments/joy/switch.tsx b/docs/pages/experiments/joy/switch.tsx
@@ -42,29 +42,7 @@ const props = {
 
 export default function JoySwitch() {
   return (
-    <CssVarsProvider
-      theme={{
-        components: {
-          MuiSvgIcon: {
-            defaultProps: {
-              fontSize: 'xl',
-            },
-            styleOverrides: {
-              root: ({ ownerState, theme }) => ({
-                ...(ownerState.fontSize &&
-                  ownerState.fontSize !== 'inherit' && {
-                    fontSize: theme.vars.fontSize[ownerState.fontSize],
-                  }),
-                ...(ownerState.color &&
-                  ownerState.color !== 'inherit' && {
-                    color: theme.vars.palette[ownerState.color].textColor,
-                  }),
-              }),
-            },
-          },
-        },
-      }}
-    >
+    <CssVarsProvider>
       <Box sx={{ py: 5, maxWidth: { md: 1152, xl: 1536 }, mx: 'auto' }}>
         <Box sx={{ px: 3 }}>
           <ColorSchemePicker />

diff --git a/docs/pages/experiments/joy/typography.tsx b/docs/pages/experiments/joy/typography.tsx
@@ -35,29 +35,7 @@ const ColorSchemePicker = () => {
 
 export default function JoyTypography() {
   return (
-    <CssVarsProvider
-      theme={{
-        components: {
-          MuiSvgIcon: {
-            defaultProps: {
-              fontSize: 'xl',
-            },
-            styleOverrides: {
-              root: ({ ownerState, theme }) => ({
-                ...(ownerState.fontSize &&
-                  ownerState.fontSize !== 'inherit' && {
-                    fontSize: theme.vars.fontSize[ownerState.fontSize],
-                  }),
-                ...(ownerState.color &&
-                  ownerState.color !== 'inherit' && {
-                    color: theme.vars.palette[ownerState.color].textColor,
-                  }),
-              }),
-            },
-          },
-        },
-      }}
-    >
+    <CssVarsProvider>
       <Box sx={{ py: 5, maxWidth: { md: 1152, xl: 1536 }, mx: 'auto' }}>
         <Box sx={{ px: 3, pb: 4 }}>
           <ColorSchemePicker />

diff --git a/docs/pages/experiments/joy/variant-overrides.tsx b/docs/pages/experiments/joy/variant-overrides.tsx
@@ -114,29 +114,7 @@ export default function JoyVariant() {
     </React.Fragment>
   );
   return (
-    <CssVarsProvider
-      theme={{
-        components: {
-          MuiSvgIcon: {
-            defaultProps: {
-              fontSize: 'xl',
-            },
-            styleOverrides: {
-              root: ({ ownerState, theme }) => ({
-                ...(ownerState.fontSize &&
-                  ownerState.fontSize !== 'inherit' && {
-                    fontSize: theme.vars.fontSize[ownerState.fontSize],
-                  }),
-                ...(ownerState.color &&
-                  ownerState.color !== 'inherit' && {
-                    color: theme.vars.palette[ownerState.color].textColor,
-                  }),
-              }),
-            },
-          },
-        },
-      }}
-    >
+    <CssVarsProvider>
       <GlobalStyles styles={{ body: { margin: 0 } }} />
       <Box sx={{ px: 3, pb: 4 }}>
         <ColorSchemePicker />

diff --git a/docs/pages/experiments/joy/variant.tsx b/docs/pages/experiments/joy/variant.tsx
@@ -81,29 +81,7 @@ export default function JoyVariant() {
       }}
     >
       <GlobalStyles styles={{ body: { margin: 0 } }} />
-      <CssVarsProvider
-        theme={{
-          components: {
-            MuiSvgIcon: {
-              defaultProps: {
-                fontSize: 'xl',
-              },
-              styleOverrides: {
-                root: ({ ownerState, theme }) => ({
-                  ...(ownerState.fontSize &&
-                    ownerState.fontSize !== 'inherit' && {
-                      fontSize: theme.vars.fontSize[ownerState.fontSize],
-                    }),
-                  ...(ownerState.color &&
-                    ownerState.color !== 'inherit' && {
-                      color: theme.vars.palette[ownerState.color].textColor,
-                    }),
-                }),
-              },
-            },
-          },
-        }}
-      >
+      <CssVarsProvider>
         <Box sx={{ p: 2 }}>
           <Typography component="h1" level="h3" gutterBottom>
             Variant demonstration

diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
@@ -64,16 +64,18 @@ const ButtonRoot = styled('button', {
     {
       '--Button-minHeight': '2.5rem', // use min-height instead of height to make the button resilient to its content
       '--Button-gutter': '1.5rem', // gutter is the padding-x
-      '--Button-iconOffsetStep': 2, // negative margin of the start/end icon
-      '--Button-gap': 'clamp(0.25rem, var(--Button-gutter) * 0.5, 0.5rem)', // gap between start/end icon and content [0.25rem, x, 0.5rem]
       ...(ownerState.size === 'sm' && {
         '--Button-minHeight': '2rem',
         '--Button-gutter': '1rem',
+        '--Icon-fontSize': '1.25rem',
       }),
       ...(ownerState.size === 'lg' && {
         '--Button-minHeight': '3rem',
         '--Button-gutter': '2rem',
+        '--Icon-fontSize': '1.75rem',
       }),
+      '--Button-iconOffsetStep': 2, // negative margin of the start/end icon
+      '--Button-gap': 'clamp(0.25rem, var(--Button-gutter) * 0.5, 0.5rem)', // gap between start/end icon and content [0.25rem, x, 0.5rem]
     },
     {
       padding: '0.25rem var(--Button-gutter)', // the padding-top, bottom act as a minimum spacing between content and root element

diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -41,10 +41,12 @@ const IconButtonRoot = styled('button', {
     '--IconButton-padding': '0.25rem',
     ...(ownerState.size === 'sm' && {
       '--IconButton-size': '2rem',
+      '--Icon-fontSize': '1.25rem',
     }),
     ...(ownerState.size === 'lg' && {
       '--IconButton-size': '3rem',
       '--IconButton-padding': '0.5rem',
+      '--Icon-fontSize': '1.75rem',
     }),
     padding: 'var(--IconButton-padding)',
     ...(ownerState.variant === 'outlined' && {

diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx
@@ -14,7 +14,7 @@ import defaultTheme, {
 import { DefaultColorScheme, ExtendedColorScheme } from './types/colorScheme';
 import { Variants } from './types/variants';
 import { ColorSystem } from './types/colorSystem';
-import { TypographySystem } from './types/typography';
+import { TypographySystem, FontSize } from './types/typography';
 import { Components } from './components';
 import { createVariant, createTextOverrides, createContainedOverrides } from './variantUtils';
 
@@ -61,6 +61,33 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV
       light: lightColorSystem,
       dark: darkColorSystem,
     },
+    components: {
+      // TODO: find a way to abstract SvgIcon out of @mui/material
+      MuiSvgIcon: {
+        defaultProps: {
+          fontSize: 'xl',
+        },
+        styleOverrides: {
+          root: ({ ownerState, theme }) => {
+            const instanceFontSize = ownerState.instanceFontSize as 'inherit' | keyof FontSize;
+            return {
+              ...(ownerState.fontSize &&
+                ownerState.fontSize !== 'inherit' && {
+                  fontSize: `var(--Icon-fontSize, ${theme.fontSize[ownerState.fontSize]})`,
+                }),
+              ...(ownerState.color &&
+                ownerState.color !== 'inherit' && {
+                  color: theme.vars.palette[ownerState.color].textColor,
+                }),
+              ...(instanceFontSize &&
+                instanceFontSize !== 'inherit' && {
+                  '--Icon-fontSize': theme.vars.fontSize[instanceFontSize],
+                }),
+            };
+          },
+        },
+      },
+    } as Components<JoyTheme>,
   },
   defaultColorScheme: {
     light: 'light',

diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.js b/packages/mui-material/src/SvgIcon/SvgIcon.js
@@ -79,6 +79,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
     color,
     component,
     fontSize,
+    instanceFontSize: inProps.fontSize,
     inheritViewBox,
     viewBox,
   };