From 7a92a8aab158dc38ef64ff7050d35305fbecbd98 Mon Sep 17 00:00:00 2001 From: Ansh Saini Date: Sun, 20 Jun 2021 20:51:34 +0530 Subject: [PATCH 1/7] [Box] fix TypeScript error on maxWidth prop --- packages/material-ui-system/src/Box/Box.d.ts | 54 +++++++++---------- .../src/styleFunctionSx/styleFunctionSx.d.ts | 6 +-- packages/material-ui/src/Box/Box.d.ts | 2 +- packages/material-ui/src/Grid/Grid.d.ts | 2 +- packages/material-ui/src/Stack/Stack.d.ts | 2 +- .../src/Typography/Typography.d.ts | 2 +- 6 files changed, 33 insertions(+), 35 deletions(-) diff --git a/packages/material-ui-system/src/Box/Box.d.ts b/packages/material-ui-system/src/Box/Box.d.ts index 03c9ff9abe0a91..e9e69af007023e 100644 --- a/packages/material-ui-system/src/Box/Box.d.ts +++ b/packages/material-ui-system/src/Box/Box.d.ts @@ -3,7 +3,7 @@ import { OverridableComponent, OverrideProps } from '@material-ui/types'; import { Theme } from '../createTheme'; import { SxProps, - StandardCSSProperties, + AllSystemCSSProperties, ResponsiveStyleValue, OverwriteCSSProperties, AliasesCSSProperties, @@ -140,36 +140,34 @@ export type ComposedStyleFunction>> = StyleFu ComposedStyleProps >; -export type CustomSystemProps = OverwriteCSSProperties & AliasesCSSProperties; - -export type SimpleSystemKeys = keyof Omit< - PropsFor< - ComposedStyleFunction< - [ - typeof borders, - typeof display, - typeof flexbox, - typeof grid, - typeof palette, - typeof positions, - typeof shadows, - typeof sizing, - typeof spacing, - typeof typography, - ] - > - >, - keyof CustomSystemProps +export interface CustomSystemProps extends AliasesCSSProperties, OverwriteCSSProperties {} + +export type SimpleSystemKeys = keyof PropsFor< + ComposedStyleFunction< + [ + typeof borders, + typeof display, + typeof flexbox, + typeof grid, + typeof palette, + typeof positions, + typeof shadows, + typeof sizing, + typeof spacing, + typeof typography, + ] + > >; -// The SimpleSystemKeys are subset of the StandardCSSProperties, so this should be ok -// This is needed as these are used as keys inside StandardCSSProperties -type StandardSystemKeys = Extract; +// The SimpleSystemKeys are subset of the AllSystemCSSProperties, so this should be ok +// This is needed as these are used as keys inside AllSystemCSSProperties +type StandardSystemKeys = Extract; -export type SystemProps = { - [K in StandardSystemKeys]?: ResponsiveStyleValue; -} & - CustomSystemProps; +export type SystemProps = { + [K in StandardSystemKeys]?: + | ResponsiveStyleValue + | ((theme: Theme) => ResponsiveStyleValue); +}; export interface BoxTypeMap

{ props: P & diff --git a/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.d.ts b/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.d.ts index 2a30a79bcc0a65..5800fbedc3cb71 100644 --- a/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.d.ts +++ b/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.d.ts @@ -26,13 +26,13 @@ export interface CSSSelectorObject { /** * Map of all available CSS properties (including aliases) and their raw value. - * Only used internally to map CCS properties to input types (responsive value, + * Only used internally to map CSS properties to input types (responsive value, * theme function or nested) in `SystemCssProperties`. */ export interface AllSystemCSSProperties extends Omit, - AliasesCSSProperties, - OverwriteCSSProperties {} + OverwriteCSSProperties, + AliasesCSSProperties {} export type SystemCssProperties = { [K in keyof AllSystemCSSProperties]: diff --git a/packages/material-ui/src/Box/Box.d.ts b/packages/material-ui/src/Box/Box.d.ts index 7c4cbffbe5ed04..56a6953113c838 100644 --- a/packages/material-ui/src/Box/Box.d.ts +++ b/packages/material-ui/src/Box/Box.d.ts @@ -4,7 +4,7 @@ import { Theme } from '../styles'; export interface BoxTypeMap

{ props: P & - SystemProps & { + SystemProps & { children?: React.ReactNode; component?: React.ElementType; ref?: React.Ref; diff --git a/packages/material-ui/src/Grid/Grid.d.ts b/packages/material-ui/src/Grid/Grid.d.ts index faac43bdd1f61e..37bcdd9e7ef3e8 100644 --- a/packages/material-ui/src/Grid/Grid.d.ts +++ b/packages/material-ui/src/Grid/Grid.d.ts @@ -14,7 +14,7 @@ export type GridSize = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 export interface GridTypeMap

{ props: P & - SystemProps & { + SystemProps & { /** * The content of the component. */ diff --git a/packages/material-ui/src/Stack/Stack.d.ts b/packages/material-ui/src/Stack/Stack.d.ts index 629c8ebbb46976..bbe5398340544f 100644 --- a/packages/material-ui/src/Stack/Stack.d.ts +++ b/packages/material-ui/src/Stack/Stack.d.ts @@ -5,7 +5,7 @@ import { Theme } from '../styles/createTheme'; export interface StackTypeMap

{ props: P & - SystemProps & { + SystemProps & { ref?: React.Ref; /** * The content of the component. diff --git a/packages/material-ui/src/Typography/Typography.d.ts b/packages/material-ui/src/Typography/Typography.d.ts index eecbc311fb3f00..721e634f5be16a 100644 --- a/packages/material-ui/src/Typography/Typography.d.ts +++ b/packages/material-ui/src/Typography/Typography.d.ts @@ -10,7 +10,7 @@ export interface TypographyPropsVariantOverrides {} export interface TypographyTypeMap

{ props: P & - SystemProps & { + SystemProps & { /** * Set the text-align on the component. * @default 'inherit' From f704171a2f76104e831106ee908a18a5d04edcc4 Mon Sep 17 00:00:00 2001 From: Ansh Saini Date: Sun, 20 Jun 2021 22:18:56 +0530 Subject: [PATCH 2/7] [Box] Add test for maxWidth prop using theme --- packages/material-ui-system/src/Box/Box.d.ts | 2 +- packages/material-ui-system/src/Box/Box.spec.tsx | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/material-ui-system/src/Box/Box.d.ts b/packages/material-ui-system/src/Box/Box.d.ts index e9e69af007023e..03b57d928076d8 100644 --- a/packages/material-ui-system/src/Box/Box.d.ts +++ b/packages/material-ui-system/src/Box/Box.d.ts @@ -171,7 +171,7 @@ export type SystemProps = { export interface BoxTypeMap

{ props: P & - SystemProps & { + SystemProps & { children?: React.ReactNode; component?: React.ElementType; ref?: React.Ref; diff --git a/packages/material-ui-system/src/Box/Box.spec.tsx b/packages/material-ui-system/src/Box/Box.spec.tsx index 4b724b061b6dc6..abb331ea5e7c9e 100644 --- a/packages/material-ui-system/src/Box/Box.spec.tsx +++ b/packages/material-ui-system/src/Box/Box.spec.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; + import { Box } from '@material-ui/system'; +import { Theme } from '../createTheme'; interface TestProps { test?: string; @@ -46,4 +48,5 @@ function GapTest() { function ComponentPropTest() { ; ; + theme.breakpoints.values.sm} />; } From 92c9664d1817faae92e5e38a6f7dfd829660e294 Mon Sep 17 00:00:00 2001 From: Ansh Saini Date: Sun, 20 Jun 2021 23:07:27 +0530 Subject: [PATCH 3/7] refactor import syntax --- packages/material-ui-system/src/Box/Box.spec.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/material-ui-system/src/Box/Box.spec.tsx b/packages/material-ui-system/src/Box/Box.spec.tsx index abb331ea5e7c9e..31ff8d2c9440ff 100644 --- a/packages/material-ui-system/src/Box/Box.spec.tsx +++ b/packages/material-ui-system/src/Box/Box.spec.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import { Box } from '@material-ui/system'; -import { Theme } from '../createTheme'; +import { Box, Theme } from '@material-ui/system'; interface TestProps { test?: string; From 4055efdef17a6e8b39042970c974e8325c77b757 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 20 Jun 2021 20:31:07 +0200 Subject: [PATCH 4/7] blank line --- packages/material-ui-system/src/Box/Box.spec.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui-system/src/Box/Box.spec.tsx b/packages/material-ui-system/src/Box/Box.spec.tsx index 31ff8d2c9440ff..63797009db2e30 100644 --- a/packages/material-ui-system/src/Box/Box.spec.tsx +++ b/packages/material-ui-system/src/Box/Box.spec.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; - import { Box, Theme } from '@material-ui/system'; interface TestProps { From 0055ec3e428766a595358a4c6dc1025f281e841d Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 22 Jun 2021 23:35:35 +0200 Subject: [PATCH 5/7] reduce git diff --- .../src/styleFunctionSx/styleFunctionSx.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.d.ts b/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.d.ts index 5800fbedc3cb71..2eeacf8e41bc57 100644 --- a/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.d.ts +++ b/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.d.ts @@ -31,8 +31,8 @@ export interface CSSSelectorObject { */ export interface AllSystemCSSProperties extends Omit, - OverwriteCSSProperties, - AliasesCSSProperties {} + AliasesCSSProperties, + OverwriteCSSProperties {} export type SystemCssProperties = { [K in keyof AllSystemCSSProperties]: From a42f902b87d007fa88008dafb55c2ff02d79c8e0 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 22 Jun 2021 23:40:32 +0200 Subject: [PATCH 6/7] blank line --- .../src/styleFunctionSx/AliasesCSSProperties.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui-system/src/styleFunctionSx/AliasesCSSProperties.d.ts b/packages/material-ui-system/src/styleFunctionSx/AliasesCSSProperties.d.ts index 7fc4d4d3155847..3db17e7b33116c 100644 --- a/packages/material-ui-system/src/styleFunctionSx/AliasesCSSProperties.d.ts +++ b/packages/material-ui-system/src/styleFunctionSx/AliasesCSSProperties.d.ts @@ -237,7 +237,6 @@ export interface AliasesCSSProperties { * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom */ paddingY?: StandardCSSProperties['paddingTop']; - /** * The **`typography`** property is shorthand for the CSS properties **`font-family`**, **`font-weight`**, **`font-size`**, **`line-height`**, **`letter-spacing`** and **`text-transform``**. * It takes the values defined under `theme.typography` and spreads them on the element. From 6ecd733560763c23a20c8cd6f522770a774cb887 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 22 Jun 2021 23:42:39 +0200 Subject: [PATCH 7/7] order logically --- .../src/styleFunctionSx/styleFunctionSx.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.d.ts b/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.d.ts index 2eeacf8e41bc57..5800fbedc3cb71 100644 --- a/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.d.ts +++ b/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.d.ts @@ -31,8 +31,8 @@ export interface CSSSelectorObject { */ export interface AllSystemCSSProperties extends Omit, - AliasesCSSProperties, - OverwriteCSSProperties {} + OverwriteCSSProperties, + AliasesCSSProperties {} export type SystemCssProperties = { [K in keyof AllSystemCSSProperties]: