mui
[material-ui][Typography] Enforce responsive typography type checking in sx prop
Fixes #42918
Typography Prop Extended to Enforce Typography Breakpoint Types.
- [x] I have followed (at least) the PR section of the contributing guide.
Netlify deploy preview
https://deploy-preview-42945--material-ui.netlify.app/
Bundle size report
No bundle size changes (Toolpad) No bundle size changes
Generated by :no_entry_sign: dangerJS against 556ce79ca9f5f06168173324fc841f34a1b7b5c4
Addressed many of CI failures. Could use an assist with understanding why the test_static is failing with the following prompt: pnpm proptypes` changes committed? I ran pnpm proptypes && pnpm docs:api to generate changes and committed.
@ZeeshanTamboli Thank you for the feedback on the PR! Makes sense about omitting the sx prop to reduce the scope of changes. And the same for @typescript-to-proptypes-ignore to disable the proptype generation in favor of PropTypes.object. 🚀
@ZeeshanTamboli, @DiegoAndai, @siriwatknp Commenting to keep this PR active. Awaiting final review.
@ZeeshanTamboli, @DiegoAndai, @siriwatknp Commenting to keep this PR active. Awaiting final review.
Upon reflection, I believe this is a breaking change. If users extend TypographyProps in their custom components, they must also omit the sx prop if it's defined in their custom component. That would seem like a edge case though. It looks good to me, and I've already requested reviews from others.
Hey @Sergio16T and @goodwin64, I'm sorry for the delay in responding to this PR. It's been an intense couple of months with the v6 release 😅.
Let me know if I understand correctly: the intent of https://github.com/mui/material-ui/issues/42918 is for users to be able to restraint the typography type? So it won't accept any other values that are not the variants?
If so, I don't think this should be changed in the component level but rather the SxProps level, as it should work on all components in the same way
What do you think @siriwatknp? I'm not familiar with how the typography sx property is implemented, may I ask you to provide your insight into how it works?
While this fixes the typography but it creates more complexity to the codebase. What's about other fields? I'm pretty sure there will be more requests once this is merged.
The underlying problem is the type of sx prop, not specifically typography. It cannot be enforced to the responsive type because sx prop has to support any CSS selector which is a string.
The best experience I can achieve so far is with autocomplete for the typography but not possible to enforce the responsive keys due to https://github.com/mui/material-ui/blob/master/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts#L64
I put on hold to this PR until we can figure out a better solution for the whole sx type system. cc @Janpot
