-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
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.
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
[system] Improve breakpoints types #20753
Conversation
Details of bundle changes.Comparing: 3e5fd3c...360bfa9 Details of page changes
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you add a test that was breaking without these changes? We have type tests for /system in packages/material-ui-system/src/index.spec.tsx
@nodeTempest I would be cautious with this approach, I'm not aware that we have test cases for it. |
Thank you for feedback. I added breakpointsTest and pointed expected result of my request. About css prop. Lets take a look look at one of tests: function cssTest() {
function styleFunction(props: { color?: string; spacing?: number; theme?: object }) {
return {};
}
const wideOrNarrowStyleFunction = css(styleFunction);
// narrow
wideOrNarrowStyleFunction({ theme: {}, css: { color: 'blue', spacing: 2 } });
// wide, undesire: `css` is required, marking it as optional breaks system/basics/#css-property
wideOrNarrowStyleFunction({ theme: {}, color: 'blue', spacing: 2, css: {} });
// wide and narrow
wideOrNarrowStyleFunction({ theme: {}, css: { color: 'blue', spacing: 2 }, color: 'red' });
} From second test I see that css prop is required and if you want to omit it you must specify it as css: {} |
@@ -56,7 +56,7 @@ export function compose<T extends Array<StyleFunction<any>>>(...args: T): Compos | |||
// css.js | |||
export function css<Props>( | |||
styleFunction: StyleFunction<Props> | |||
): StyleFunction<Props & { css: Omit<Props, 'theme'> }>; | |||
): StyleFunction<Props & { css?: Omit<Props, 'theme'> }>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What about making a different pull request for the css concern? It would also be a good opportunity to add a JavaScript test case for it, I wasn't aware it was even working. Actually, I don't think that we should support it, rather encourage the other way around
@nodeTempest Much appreciated, thanks! |
@oliviertassinari @eps1lon Thank you guys, I might create a new PR regarding css prop soon. |
Hi guys. Your awesome material-ui-system package allows doing this:
But current typescript implementation breaks everything.