From c1a52038a40d8c6f419c5dc55e4c6485c75f9ca0 Mon Sep 17 00:00:00 2001 From: JR99 Date: Tue, 14 Mar 2023 04:01:01 -0500 Subject: [PATCH] [Typography] Apply font properties to typography inherit variant (#33621) --- .../src/styles/CssVarsProvider.test.js | 2 +- .../src/styles/createTypography.js | 7 ++++ .../src/styles/createTypography.test.js | 9 +++++ .../src/styleFunctionSx/defaultSxConfig.js | 36 +++++++++++++++++++ .../styleFunctionSx/styleFunctionSx.test.js | 22 ++++++++++++ 5 files changed, 75 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js index a99e6eb0b7b855..b12643e48eb087 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.test.js +++ b/packages/mui-material/src/styles/CssVarsProvider.test.js @@ -246,7 +246,7 @@ describe('[Material UI] CssVarsProvider', () => { ); expect(container.firstChild?.textContent).to.equal( - 'htmlFontSize,pxToRem,fontFamily,fontSize,fontWeightLight,fontWeightRegular,fontWeightMedium,fontWeightBold,h1,h2,h3,h4,h5,h6,subtitle1,subtitle2,body1,body2,button,caption,overline', + 'htmlFontSize,pxToRem,fontFamily,fontSize,fontWeightLight,fontWeightRegular,fontWeightMedium,fontWeightBold,h1,h2,h3,h4,h5,h6,subtitle1,subtitle2,body1,body2,button,caption,overline,inherit', ); }); }); diff --git a/packages/mui-material/src/styles/createTypography.js b/packages/mui-material/src/styles/createTypography.js index ca52ce80c25179..78775e5ce5e1c5 100644 --- a/packages/mui-material/src/styles/createTypography.js +++ b/packages/mui-material/src/styles/createTypography.js @@ -72,6 +72,13 @@ export default function createTypography(palette, typography) { button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps), caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4), overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps), + inherit: { + fontFamily: 'inherit', + fontWeight: 'inherit', + fontSize: 'inherit', + lineHeight: 'inherit', + letterSpacing: 'inherit', + }, }; return deepmerge( diff --git a/packages/mui-material/src/styles/createTypography.test.js b/packages/mui-material/src/styles/createTypography.test.js index db14cdd166e6a7..2f2fbc07c6e076 100644 --- a/packages/mui-material/src/styles/createTypography.test.js +++ b/packages/mui-material/src/styles/createTypography.test.js @@ -74,6 +74,15 @@ describe('createTypography', () => { ); }); + it('should apply font CSS properties to inherit variant', () => { + const typography = createTypography(palette, {}); + const fontProperties = ['fontFamily', 'fontWeight', 'fontSize', 'lineHeight', 'letterSpacing']; + + fontProperties.forEach((prop) => { + expect(typography.inherit[prop]).to.equal('inherit'); + }); + }); + describe('warnings', () => { it('logs an error if `fontSize` is not of type number', () => { expect(() => { diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js index 7087c424593b5d..aa4f20f0d11252 100644 --- a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js +++ b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js @@ -1,9 +1,42 @@ +import { unstable_capitalize as capitalize } from '@mui/utils'; import { padding, margin } from '../spacing'; +import { handleBreakpoints } from '../breakpoints'; import { borderRadius, borderTransform } from '../borders'; import { gap, rowGap, columnGap } from '../cssGrid'; import { paletteTransform } from '../palette'; import { maxWidth, sizingTransform } from '../sizing'; +const createFontStyleFunction = (prop) => { + return (props) => { + if (props[prop] !== undefined && props[prop] !== null) { + const styleFromPropValue = (propValue) => { + let value = + props.theme.typography?.[ + `${prop}${ + props[prop] === 'default' || props[prop] === prop + ? '' + : capitalize(props[prop]?.toString()) + }` + ]; + + if (!value) { + value = props.theme.typography?.[propValue]?.[prop]; + } + + if (!value) { + value = propValue; + } + + return { + [prop]: value, + }; + }; + return handleBreakpoints(props, props[prop], styleFromPropValue); + } + return null; + }; +}; + const defaultSxConfig = { // borders border: { @@ -283,15 +316,18 @@ const defaultSxConfig = { // typography fontFamily: { themeKey: 'typography', + style: createFontStyleFunction('fontFamily'), }, fontSize: { themeKey: 'typography', + style: createFontStyleFunction('fontSize'), }, fontStyle: { themeKey: 'typography', }, fontWeight: { themeKey: 'typography', + style: createFontStyleFunction('fontWeight'), }, letterSpacing: {}, textTransform: {}, diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js index 64c6389fefca20..922f428e245f27 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js @@ -1,5 +1,6 @@ import { expect } from 'chai'; import createMixins from '@mui/material/styles/createMixins'; +import createTypography from '@mui/material/styles/createTypography'; import createBreakpoints from '../createTheme/createBreakpoints'; import styleFunctionSx from './styleFunctionSx'; @@ -419,4 +420,25 @@ describe('styleFunctionSx', () => { ).not.to.throw(); }); }); + + it('resolves inherit typography properties', () => { + const result = styleFunctionSx({ + theme: { typography: createTypography({}, {}) }, + sx: { + fontFamily: 'inherit', + fontWeight: 'inherit', + fontSize: 'inherit', + lineHeight: 'inherit', + letterSpacing: 'inherit', + }, + }); + + expect(result).deep.equal({ + fontFamily: 'inherit', + fontWeight: 'inherit', + fontSize: 'inherit', + lineHeight: 'inherit', + letterSpacing: 'inherit', + }); + }); });