[Joy] Add --Icon-fontSize to components (#31360)

mui · Mar 10, 2022 · 5a2936e · 5a2936e
1 parent f148aa2
commit 5a2936e
Show file tree

Hide file tree

Showing 17 changed files with 134 additions and 43 deletions.
diff --git a/docs/pages/experiments/joy/input.tsx b/docs/pages/experiments/joy/input.tsx
@@ -59,9 +59,9 @@ export default function JoyTypography() {
           }}
         >
           <Input placeholder="Placeholder" />
-          <Input placeholder="Placeholder" startAdornment={<Mail fontSize="lg" />} size="sm" />
+          <Input placeholder="Placeholder" startAdornment={<Mail />} size="sm" />
           <Input placeholder="Placeholder" startAdornment={<Mail />} />
-          <Input placeholder="Placeholder" startAdornment={<Mail fontSize="xl2" />} size="lg" />
+          <Input placeholder="Placeholder" startAdornment={<Mail />} size="lg" />
           <Input
             placeholder="Placeholder"
             color="primary"

diff --git a/docs/pages/experiments/joy/link.tsx b/docs/pages/experiments/joy/link.tsx
@@ -1,11 +1,14 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import * as React from 'react';
 import Moon from '@mui/icons-material/DarkMode';
 import Sun from '@mui/icons-material/LightMode';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Link from '@mui/joy/Link';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
 import Typography from '@mui/joy/Typography';
-import * as React from 'react';
+import LocationOn from '@mui/icons-material/LocationOn';
+import Groups from '@mui/icons-material/Groups';
 
 const ColorSchemePicker = () => {
   const { mode, setMode } = useColorScheme();
@@ -42,33 +45,48 @@ export default function JoyButton() {
     underline: ['hover', 'always', 'none'],
   } 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 />
         </Box>
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, minmax(300px, 1fr))',
+            gap: 2,
+            mt: 4,
+            '& > div': {
+              display: 'flex',
+              flexDirection: 'column',
+            },
+          }}
+        >
+          <Box>
+            <Link component="button" level="body2">
+              <LocationOn sx={{ mr: '0.25em' }} /> Miami, Florida
+            </Link>
+            <Link component="button" level="body2">
+              <Groups fontSize="lg" sx={{ mr: '0.25em' }} /> 5 - 10 people
+            </Link>
+          </Box>
+          <Box>
+            <Link component="button">
+              <LocationOn sx={{ mr: '0.25em' }} /> Miami, Florida
+            </Link>
+            <Link component="button">
+              <Groups fontSize="xl" sx={{ mr: '0.25em' }} /> 5 - 10 people
+            </Link>
+          </Box>
+          <Box>
+            <Link component="button" level="h5">
+              <LocationOn sx={{ mr: '0.25em' }} /> Miami, Florida
+            </Link>
+            <Link component="button" level="h5">
+              <Groups fontSize="xl2" sx={{ mr: '0.25em' }} /> 5 - 10 people
+            </Link>
+          </Box>
+        </Box>
         <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
           {Object.entries(buttonProps).map(([propName, propValue]) => (
             <Box

diff --git a/docs/pages/experiments/joy/list.tsx b/docs/pages/experiments/joy/list.tsx
@@ -762,7 +762,7 @@ export default function JoyTypography() {
           <List sx={{ '--List-insetStart': '20px' }}>
             <ListItem>
               <ListItemDecorator>
-                <InboxIcon fontSize="lg" />
+                <InboxIcon />
               </ListItemDecorator>
               Inbox
             </ListItem>
@@ -782,15 +782,15 @@ export default function JoyTypography() {
             <ListItem>
               <ListItemButton color="primary">
                 <ListItemDecorator>
-                  <InboxIcon fontSize="lg" />
+                  <InboxIcon />
                 </ListItemDecorator>
                 Inbox
               </ListItemButton>
             </ListItem>
             <ListItem>
               <ListItemButton color="success">
                 <ListItemDecorator>
-                  <DraftsIcon fontSize="lg" />
+                  <DraftsIcon />
                 </ListItemDecorator>
                 Drafts
               </ListItemButton>
@@ -1079,19 +1079,19 @@ export default function JoyTypography() {
               </ListItem>
               <ListItem>
                 <ListItemDecorator>
-                  <Star fontSize="lg" />
+                  <Star />
                 </ListItemDecorator>
                 <ListItemButton>This is a small list</ListItemButton>
               </ListItem>
               <ListItem>
                 <ListItemDecorator>
-                  <Star fontSize="lg" />
+                  <Star />
                 </ListItemDecorator>
                 <ListItemButton>This is a small list</ListItemButton>
               </ListItem>
               <ListItem>
                 <ListItemDecorator>
-                  <Star fontSize="lg" />
+                  <Star />
                 </ListItemDecorator>
                 <ListItemButton>This is a small list</ListItemButton>
               </ListItem>

diff --git a/docs/pages/experiments/joy/typography.tsx b/docs/pages/experiments/joy/typography.tsx
@@ -5,6 +5,8 @@ import Button from '@mui/joy/Button';
 import Typography from '@mui/joy/Typography';
 import Moon from '@mui/icons-material/DarkMode';
 import Sun from '@mui/icons-material/LightMode';
+import LocationOn from '@mui/icons-material/LocationOn';
+import Groups from '@mui/icons-material/Groups';
 
 const ColorSchemePicker = () => {
   const { mode, setMode } = useColorScheme();
@@ -45,6 +47,39 @@ export default function JoyTypography() {
             {`${level} - typography`}
           </Typography>
         ))}
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, minmax(300px, 1fr))',
+            gap: 2,
+            mt: 4,
+          }}
+        >
+          <Box>
+            <Typography level="body2">
+              <LocationOn sx={{ mr: '0.25em' }} /> Miami, Florida
+            </Typography>
+            <Typography level="body2">
+              <Groups fontSize="lg" sx={{ mr: '0.25em' }} /> 5 - 10 people
+            </Typography>
+          </Box>
+          <Box>
+            <Typography>
+              <LocationOn sx={{ mr: '0.25em' }} /> Miami, Florida
+            </Typography>
+            <Typography>
+              <Groups fontSize="xl" sx={{ mr: '0.25em' }} /> 5 - 10 people
+            </Typography>
+          </Box>
+          <Box>
+            <Typography level="h5">
+              <LocationOn sx={{ mr: '0.25em' }} /> Miami, Florida
+            </Typography>
+            <Typography level="h5">
+              <Groups fontSize="xl2" sx={{ mr: '0.25em' }} /> 5 - 10 people
+            </Typography>
+          </Box>
+        </Box>
       </Box>
     </CssVarsProvider>
   );

diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
@@ -62,13 +62,16 @@ const ButtonRoot = styled('button', {
 })<{ ownerState: ButtonProps }>(({ theme, ownerState }) => {
   return [
     {
-      '--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
       ...(ownerState.size === 'sm' && {
         '--Button-minHeight': '2rem',
         '--Button-gutter': '1rem',
         '--Icon-fontSize': '1.25rem',
       }),
+      ...(ownerState.size === 'md' && {
+        '--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
+        '--Icon-fontSize': '1.5rem', // control the SvgIcon font-size
+      }),
       ...(ownerState.size === 'lg' && {
         '--Button-minHeight': '3rem',
         '--Button-gutter': '2rem',

diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -37,12 +37,15 @@ const IconButtonRoot = styled('button', {
   overridesResolver: (props, styles) => styles.root,
 })<{ ownerState: IconButtonProps }>(({ theme, ownerState }) => [
   {
-    '--IconButton-size': '2.5rem', // for defining width x height
-    '--IconButton-padding': '0.25rem',
     ...(ownerState.size === 'sm' && {
       '--IconButton-size': '2rem',
       '--Icon-fontSize': '1.25rem',
     }),
+    ...(ownerState.size === 'md' && {
+      '--IconButton-size': '2.5rem', // for defining width x height
+      '--IconButton-padding': '0.25rem',
+      '--Icon-fontSize': '1.5rem', // control the SvgIcon font-size
+    }),
     ...(ownerState.size === 'lg' && {
       '--IconButton-size': '3rem',
       '--IconButton-padding': '0.5rem',

diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
@@ -36,22 +36,27 @@ const InputRoot = styled('div', {
   overridesResolver: (props, styles) => styles.root,
 })<{ ownerState: InputProps & InputOwnerState }>(({ theme, ownerState }) => [
   {
-    '--Input-radius': theme.vars.radius.sm, // radius is used by
-    '--Input-gutter': '0.75rem', // gutter is the padding-x
-    '--Input-height': '40px',
-    '--Input-gap': '0.5rem',
-    '--Input-placeholderOpacity': 0.5,
-    '--Input-adornment-offset': 'calc(var(--Input-gutter) / 4)', // negative margin of the start/end adornment
-    '--Input-focusedThickness': 'calc(var(--variant-outlinedBorderWidth, 1px) + 1px)',
     ...(ownerState.size === 'sm' && {
       '--Input-gutter': '0.5rem',
       '--Input-height': '32px',
+      '--Icon-fontSize': '1.25rem',
+    }),
+    ...(ownerState.size === 'md' && {
+      '--Input-gutter': '0.75rem', // gutter is the padding-x
+      '--Input-height': '40px',
+      '--Icon-fontSize': '1.5rem',
     }),
     ...(ownerState.size === 'lg' && {
       '--Input-gutter': '1rem',
       '--Input-height': '48px',
       '--Input-gap': '0.75rem',
+      '--Icon-fontSize': '1.75rem',
     }),
+    '--Input-radius': theme.vars.radius.sm, // radius is used by
+    '--Input-gap': '0.5rem',
+    '--Input-placeholderOpacity': 0.5,
+    '--Input-adornment-offset': 'calc(var(--Input-gutter) / 4)', // negative margin of the start/end adornment
+    '--Input-focusedThickness': 'calc(var(--variant-outlinedBorderWidth, 1px) + 1px)',
     boxSizing: 'border-box',
     height: `var(--Input-height)`,
     minWidth: 0, // forces the Input to stay inside a container by default
@@ -192,6 +197,7 @@ const Input = React.forwardRef(function Input(inProps, ref) {
     required,
     type = 'text',
     startAdornment,
+    size = 'md',
     value,
     variant = 'outlined',
     ...other
@@ -228,6 +234,7 @@ const Input = React.forwardRef(function Input(inProps, ref) {
     focused,
     formControl: formControlContext!,
     type,
+    size,
     variant,
   };
 
@@ -440,6 +447,11 @@ Input.propTypes /* remove-proptypes */ = {
    * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
   required: PropTypes.bool,
+  /**
+   * The size of the component.
+   * @default 'md'
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
    * Leading adornment for this input.
    */

diff --git a/packages/mui-joy/src/Input/InputProps.ts b/packages/mui-joy/src/Input/InputProps.ts
@@ -98,6 +98,7 @@ export interface InputTypeMap<P = {}, D extends React.ElementType = 'div'> {
       startAdornment?: React.ReactNode;
       /**
        * The size of the component.
+       * @default 'md'
        */
       size?: OverridableStringUnion<'sm' | 'md' | 'lg', InputPropsSizeOverrides>;
       /**

diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
@@ -39,6 +39,7 @@ const LinkRoot = styled(Typography, {
 })<{ ownerState: LinkProps }>(({ theme, ownerState }) => {
   return [
     {
+      '--Icon-fontSize': '1.25em',
       ...(ownerState.level && ownerState.level !== 'inherit' && theme.typography[ownerState.level]),
       ...(ownerState.underline === 'none' && {
         textDecoration: 'none',
@@ -55,6 +56,8 @@ const LinkRoot = styled(Typography, {
           textDecorationColor: 'inherit',
         },
       }),
+      display: 'inline-flex',
+      alignItems: 'center',
       position: 'relative',
       WebkitTapHighlightColor: 'transparent',
       backgroundColor: 'transparent', // Reset default value

diff --git a/packages/mui-joy/src/List/List.tsx b/packages/mui-joy/src/List/List.tsx
@@ -34,6 +34,7 @@ const ListRoot = styled('ul', {
           '--List-item-paddingRight': '0.25rem',
           '--List-item-fontSize': theme.vars.fontSize.sm,
           '--List-decorator-width': '2rem',
+          '--Icon-fontSize': '1.125rem',
         };
       }
       if (size === 'md') {
@@ -45,6 +46,7 @@ const ListRoot = styled('ul', {
           '--List-item-paddingRight': '0.75rem',
           '--List-item-fontSize': theme.vars.fontSize.md,
           '--List-decorator-width': '2.5rem',
+          '--Icon-fontSize': '1.25rem',
         };
       }
       if (size === 'lg') {
@@ -56,6 +58,7 @@ const ListRoot = styled('ul', {
           '--List-item-paddingRight': '0.5rem',
           '--List-item-fontSize': theme.vars.fontSize.md,
           '--List-decorator-width': '3rem',
+          '--Icon-fontSize': '1.5rem',
         };
       }
       return {};

diff --git a/packages/mui-joy/src/List/index.ts b/packages/mui-joy/src/List/index.ts
@@ -1,3 +1,4 @@
 export { default } from './List';
 export { default as listClasses } from './listClasses';
+export * from './listClasses';
 export * from './ListProps';
diff --git a/packages/mui-joy/src/ListDivider/index.ts b/packages/mui-joy/src/ListDivider/index.ts
@@ -1,3 +1,4 @@
 export { default } from './ListDivider';
 export { default as listDividerClasses } from './listDividerClasses';
+export * from './listDividerClasses';
 export * from './ListDividerProps';
diff --git a/packages/mui-joy/src/ListItem/index.ts b/packages/mui-joy/src/ListItem/index.ts
@@ -1,3 +1,4 @@
 export { default } from './ListItem';
 export { default as listItemClasses } from './listItemClasses';
+export * from './listItemClasses';
 export * from './ListItemProps';
diff --git a/packages/mui-joy/src/ListItemButton/index.ts b/packages/mui-joy/src/ListItemButton/index.ts
@@ -1,3 +1,4 @@
 export { default } from './ListItemButton';
 export { default as listItemButtonClasses } from './listItemButtonClasses';
+export * from './listItemButtonClasses';
 export * from './ListItemButtonProps';
diff --git a/packages/mui-joy/src/ListItemContent/index.ts b/packages/mui-joy/src/ListItemContent/index.ts
@@ -1,3 +1,4 @@
 export { default } from './ListItemContent';
 export { default as listItemContentClasses } from './listItemContentClasses';
+export * from './listItemContentClasses';
 export * from './ListItemContentProps';
diff --git a/packages/mui-joy/src/ListItemDecorator/index.ts b/packages/mui-joy/src/ListItemDecorator/index.ts
@@ -1,3 +1,4 @@
 export { default } from './ListItemDecorator';
 export { default as listItemDecoratorClasses } from './listItemDecoratorClasses';
+export * from './listItemDecoratorClasses';
 export * from './ListItemDecoratorProps';
diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx
@@ -24,7 +24,14 @@ export const TypographyRoot = styled('span', {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
 })<{ ownerState: TypographyProps }>(({ theme, ownerState }) => ({
+  '--Icon-fontSize': '1.25em',
   margin: 0,
+  display: 'flex',
+  alignItems: 'center',
+  fontFamily: theme.vars.fontFamily.body,
+  ...(ownerState.component === 'span' && {
+    display: 'inline-flex',
+  }),
   ...(ownerState.level && ownerState.level !== 'inherit' && theme.typography[ownerState.level]),
   ...(ownerState.noWrap && {
     overflow: 'hidden',