Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 6 commits into from
Mar 4, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b80e376
make material-icons integration works by default
siriwatknp Mar 2, 2022
06e948a
add comment
siriwatknp Mar 2, 2022
712ffef
use css var for SvgIcon fontSize
siriwatknp Mar 2, 2022
6523930
update Button and IconButton to adjust icon
siriwatknp Mar 2, 2022
9da7a6a
rename to Icon-fontSize for generic
siriwatknp Mar 2, 2022
354b3a1
makes theme default props configurable
siriwatknp Mar 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 1 addition & 23 deletions docs/pages/experiments/joy/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
24 changes: 1 addition & 23 deletions docs/pages/experiments/joy/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
24 changes: 1 addition & 23 deletions docs/pages/experiments/joy/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}>
Expand Down
19 changes: 0 additions & 19 deletions docs/pages/experiments/joy/list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
24 changes: 1 addition & 23 deletions docs/pages/experiments/joy/sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)' } }}
/>
Expand Down
24 changes: 1 addition & 23 deletions docs/pages/experiments/joy/switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
24 changes: 1 addition & 23 deletions docs/pages/experiments/joy/typography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
24 changes: 1 addition & 23 deletions docs/pages/experiments/joy/variant-overrides.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
24 changes: 1 addition & 23 deletions docs/pages/experiments/joy/variant.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 4 additions & 2 deletions packages/mui-joy/src/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions packages/mui-joy/src/IconButton/IconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' && {
Expand Down
29 changes: 28 additions & 1 deletion packages/mui-joy/src/styles/CssVarsProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions packages/mui-material/src/SvgIcon/SvgIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
color,
component,
fontSize,
instanceFontSize: inProps.fontSize,
inheritViewBox,
viewBox,
};
Expand Down