From cfa53fc780d4f6af1305127852db111ca5b9149b Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Fri, 7 May 2021 19:24:34 -0300 Subject: [PATCH 1/5] [Grid] Remove unnecessary type exports --- .../pages/guides/migration-v4/migration-v4.md | 18 ++++++++++++++++++ packages/material-ui/src/Grid/Grid.d.ts | 8 ++++---- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 584edd0ddbffb5..15bb2b88a59dfe 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -832,6 +832,24 @@ As the core components use emotion as a styled engine, the props used by emotion }); ``` +- The auxiliary types `GridDirection`, `GridSpacing`, `GridWrap` and `GridSize` are not exported anymore. Instead, get them from `GridProps`. + + ```diff + -import { GridDirection, GridSpacing, GridWrap, GridSize } from '@material-ui/core/Grid'; + +import { GridProps } from '@material-ui/core/Grid'; + + interface Props { + - direction: GridDirection; + - spacing: GridSpacing; + - wrap: GridWrap; + - size: GridSize; + + direction: GridProps['direction']; + + spacing: GridProps['spacing']; + + wrap: GridProps['wrap']; + + size: GridProps['xs'] & (string | number); + } + ``` + ### GridList - Rename the `GridList` components to `ImageList` to align with the current Material Design naming. diff --git a/packages/material-ui/src/Grid/Grid.d.ts b/packages/material-ui/src/Grid/Grid.d.ts index e0222e8a6ce0f4..93173f3fb7dec3 100644 --- a/packages/material-ui/src/Grid/Grid.d.ts +++ b/packages/material-ui/src/Grid/Grid.d.ts @@ -3,13 +3,13 @@ import { SxProps, SystemProps } from '@material-ui/system'; import { Theme } from '../styles'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'; +type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'; -export type GridSpacing = number | string; +type GridSpacing = number | string; -export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse'; +type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse'; -export type GridSize = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; +type GridSize = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; export type GridClassKey = keyof NonNullable; From 1d4e651795a044330aa87620cb8f439e4dd8c02a Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Fri, 7 May 2021 19:41:29 -0300 Subject: [PATCH 2/5] Fix demo --- docs/src/pages/components/grid/InteractiveGrid.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/components/grid/InteractiveGrid.tsx b/docs/src/pages/components/grid/InteractiveGrid.tsx index 0ee011f5d8db8d..bdd85899efd578 100644 --- a/docs/src/pages/components/grid/InteractiveGrid.tsx +++ b/docs/src/pages/components/grid/InteractiveGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid, { GridDirection } from '@material-ui/core/Grid'; +import Grid, { GridProps } from '@material-ui/core/Grid'; import FormControl from '@material-ui/core/FormControl'; import FormLabel from '@material-ui/core/FormLabel'; import FormControlLabel from '@material-ui/core/FormControlLabel'; @@ -23,8 +23,10 @@ type GridJustification = | 'space-around' | 'space-evenly'; +type Direction = Exclude + export default function InteractiveGrid() { - const [direction, setDirection] = React.useState('row'); + const [direction, setDirection] = React.useState('row'); const [justifyContent, setJustifyContent] = React.useState( 'center', ); @@ -80,7 +82,7 @@ export default function InteractiveGrid() { value={direction} onChange={(event) => { setDirection( - (event.target as HTMLInputElement).value as GridDirection, + (event.target as HTMLInputElement).value as Direction, ); }} > From dfd642a0985fb07075f6ff84e5bc1bf5d872b122 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Fri, 7 May 2021 19:41:46 -0300 Subject: [PATCH 3/5] Suggest to use Exclude --- docs/src/pages/guides/migration-v4/migration-v4.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 15bb2b88a59dfe..35d11f9fce638d 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -846,7 +846,7 @@ As the core components use emotion as a styled engine, the props used by emotion + direction: GridProps['direction']; + spacing: GridProps['spacing']; + wrap: GridProps['wrap']; - + size: GridProps['xs'] & (string | number); + + size: Exclude; } ``` From 77e56c3518b287991e9731ff25a345a87d88e715 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Fri, 7 May 2021 19:45:39 -0300 Subject: [PATCH 4/5] Use types inline --- packages/material-ui/src/Grid/Grid.d.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/material-ui/src/Grid/Grid.d.ts b/packages/material-ui/src/Grid/Grid.d.ts index 93173f3fb7dec3..f4c0a8b3de50a3 100644 --- a/packages/material-ui/src/Grid/Grid.d.ts +++ b/packages/material-ui/src/Grid/Grid.d.ts @@ -3,12 +3,6 @@ import { SxProps, SystemProps } from '@material-ui/system'; import { Theme } from '../styles'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'; - -type GridSpacing = number | string; - -type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse'; - type GridSize = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; export type GridClassKey = keyof NonNullable; @@ -83,7 +77,7 @@ export interface GridTypeMap

{ * It is applied for all screen sizes. * @default 'row' */ - direction?: GridDirection; + direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse'; /** * If `true`, the component will have the flex *item* behavior. * You should be wrapping *items* with a *container*. @@ -113,7 +107,7 @@ export interface GridTypeMap

{ * It can only be used on a type `container` component. * @default 0 */ - spacing?: GridSpacing; + spacing?: string | number; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ @@ -123,7 +117,7 @@ export interface GridTypeMap

{ * It's applied for all screen sizes. * @default 'wrap' */ - wrap?: GridWrap; + wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'; /** * Defines the number of grids the component is going to use. * It's applied for the `xl` breakpoint and wider screens. From f3a5ca8d0dbff8e89e5362da21b28e3d47336c98 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Fri, 7 May 2021 19:46:07 -0300 Subject: [PATCH 5/5] prettier --- docs/src/pages/components/grid/InteractiveGrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/grid/InteractiveGrid.tsx b/docs/src/pages/components/grid/InteractiveGrid.tsx index bdd85899efd578..cbb6c2bfdc5221 100644 --- a/docs/src/pages/components/grid/InteractiveGrid.tsx +++ b/docs/src/pages/components/grid/InteractiveGrid.tsx @@ -23,7 +23,7 @@ type GridJustification = | 'space-around' | 'space-evenly'; -type Direction = Exclude +type Direction = Exclude; export default function InteractiveGrid() { const [direction, setDirection] = React.useState('row');