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

[system] Fix sx prop regression for fontWeight values #36543

Merged
merged 2 commits into from
Mar 17, 2023
Merged

[system] Fix sx prop regression for fontWeight values #36543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1057edd
[system] Fix sx prop regression for fontWeight values
mnajdova Mar 17, 2023
4a627a2
add test for the default value too
mnajdova Mar 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 18 additions & 10 deletions packages/mui-system/src/styleFunctionSx/defaultSxConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,29 @@ 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())
}`
];
// fetch the value directly defined in the theme, like fontWeightLight
let value = props.theme.typography?.[propValue];

if (typeof value === 'object') {
// typography variant was pulled, but these props can't be an object
value = null;
}

if (!value) {
value = props.theme.typography?.[propValue]?.[prop];
// fetch fontWeightLight when the value is 'light'
value =
props.theme.typography?.[
`${prop}${
props[prop] === 'default' || props[prop] === prop
? ''
: capitalize(props[prop]?.toString())
}`
];
}

if (!value) {
value = propValue;
// fetch the value from the typography variant or default to the propValue
value = props.theme.typography?.[propValue]?.[prop] ?? propValue;
}

return {
Expand Down
17 changes: 17 additions & 0 deletions packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -441,4 +441,21 @@ describe('styleFunctionSx', () => {
letterSpacing: 'inherit',
});
});

it('resolves theme typography properties', () => {
const result = styleFunctionSx({
theme: { typography: createTypography({}, {}) },
sx: {
fontFamily: 'default',
fontWeight: 'fontWeightMedium',
fontSize: 'fontSize',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now I understood why this was added. Just the syntax looks a bit weird.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are going to drop that one in v6, that was the initial plan. We will support 'default', or 'light', 'medium' etc. We just cannot do it during v5's lifetime.

},
});

expect(result).deep.equal({
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
fontWeight: 500,
fontSize: 14,
});
});
});