From 491ce192a4215dc887b44df7b305d3a451532f4f Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 7 Oct 2020 00:40:11 -0500 Subject: [PATCH 1/5] updated warnings and docs for datagrid --- .../components/data-grid/rendering/rendering.md | 6 ++++++ packages/grid/_modules_/grid/GridComponent.tsx | 12 ++++++++++++ .../grid/_modules_/grid/components/AutoSizer.tsx | 8 ++++---- 3 files changed, 22 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/components/data-grid/rendering/rendering.md b/docs/src/pages/components/data-grid/rendering/rendering.md index 7757480557346..a4818f59ea551 100644 --- a/docs/src/pages/components/data-grid/rendering/rendering.md +++ b/docs/src/pages/components/data-grid/rendering/rendering.md @@ -181,6 +181,12 @@ const columns: Columns = [ By default, the grid has no intrinsic dimensions. It occupies the space its parent leaves. +⚠️ When using % (**percentage**) for your height or width.
+
+You need to make sure the container you are putting the grid into also has an intrinsic dimension. +The browsers fit the element according to a percentage of the parent dimension. +If the parent has no dimensions, then the % will be zero. + ### Flex layout It's recommended to use a flex container to render the grid. This allows a flexible layout, resizes well, and works on all devices. diff --git a/packages/grid/_modules_/grid/GridComponent.tsx b/packages/grid/_modules_/grid/GridComponent.tsx index fb2abbf6fbda8..cd14a3fefad51 100644 --- a/packages/grid/_modules_/grid/GridComponent.tsx +++ b/packages/grid/_modules_/grid/GridComponent.tsx @@ -128,6 +128,18 @@ export const GridComponent = React.forwardRef React.ReactNode; /** * Default height to use for initial render; useful for SSR. - * @default 0 + * @default null */ defaultHeight?: number; /** * Default width to use for initial render; useful for SSR. - * @default 0 + * @default null */ defaultWidth?: number; /** @@ -65,7 +65,7 @@ export const AutoSizer = React.forwardRef(functi ...other } = props; - const [state, setState] = React.useState({ + const [state, setState] = React.useState<{height: number | null; width: number | null}>({ height: defaultHeight, width: defaultWidth, }); @@ -153,7 +153,7 @@ export const AutoSizer = React.forwardRef(functi }} {...other} > - {state.height === 0 && state.width === 0 ? null : children(childParams)} + {state.height === null && state.width === null ? null : children(childParams)} ); }); From 2ae8919794baccdea8e99f494b3ab028bea1391c Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 7 Oct 2020 01:12:52 -0500 Subject: [PATCH 2/5] style: prettier update --- packages/grid/_modules_/grid/GridComponent.tsx | 4 ++-- packages/grid/_modules_/grid/components/AutoSizer.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/grid/_modules_/grid/GridComponent.tsx b/packages/grid/_modules_/grid/GridComponent.tsx index cd14a3fefad51..7cd79615b4de6 100644 --- a/packages/grid/_modules_/grid/GridComponent.tsx +++ b/packages/grid/_modules_/grid/GridComponent.tsx @@ -128,7 +128,7 @@ export const GridComponent = React.forwardRef(functi ...other } = props; - const [state, setState] = React.useState<{height: number | null; width: number | null}>({ + const [state, setState] = React.useState<{ height: number | null; width: number | null }>({ height: defaultHeight, width: defaultWidth, }); From 0dc282311438689a0a61783c6d30ac4e00da0915 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 7 Oct 2020 02:03:23 -0500 Subject: [PATCH 3/5] fix: setup correct default state --- packages/grid/_modules_/grid/components/AutoSizer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/_modules_/grid/components/AutoSizer.tsx b/packages/grid/_modules_/grid/components/AutoSizer.tsx index 4f222ad22851b..50763b78aa150 100644 --- a/packages/grid/_modules_/grid/components/AutoSizer.tsx +++ b/packages/grid/_modules_/grid/components/AutoSizer.tsx @@ -55,8 +55,8 @@ export const AutoSizer = React.forwardRef(functi ) { const { children, - defaultHeight = 0, - defaultWidth = 0, + defaultHeight = null, + defaultWidth = null, disableHeight = false, disableWidth = false, nonce, From 468a212e3568d4ff3c90e7607c4ee9bae6a26625 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 7 Oct 2020 02:19:56 -0500 Subject: [PATCH 4/5] docs: group warning message together & remove
s as they aren't needed --- .../pages/components/data-grid/rendering/rendering.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/components/data-grid/rendering/rendering.md b/docs/src/pages/components/data-grid/rendering/rendering.md index a4818f59ea551..ea7800a56a852 100644 --- a/docs/src/pages/components/data-grid/rendering/rendering.md +++ b/docs/src/pages/components/data-grid/rendering/rendering.md @@ -181,11 +181,11 @@ const columns: Columns = [ By default, the grid has no intrinsic dimensions. It occupies the space its parent leaves. -⚠️ When using % (**percentage**) for your height or width.
-
-You need to make sure the container you are putting the grid into also has an intrinsic dimension. -The browsers fit the element according to a percentage of the parent dimension. -If the parent has no dimensions, then the % will be zero. +>⚠️ When using % (**percentage**) for your height or width.
+>
+>You need to make sure the container you are putting the grid into also has an intrinsic dimension. +>The browsers fit the element according to a percentage of the parent dimension. +>If the parent has no dimensions, then the % will be zero. ### Flex layout From 184cedf5fb9d0579b35c12953bf91f0ff0e26148 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 7 Oct 2020 10:37:30 +0200 Subject: [PATCH 5/5] fix CI & add test case --- .../components/data-grid/rendering/rendering.md | 9 ++++----- packages/grid/data-grid/src/DataGrid.test.tsx | 13 +++++++++++++ 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/components/data-grid/rendering/rendering.md b/docs/src/pages/components/data-grid/rendering/rendering.md index ea7800a56a852..455e535dc2bdd 100644 --- a/docs/src/pages/components/data-grid/rendering/rendering.md +++ b/docs/src/pages/components/data-grid/rendering/rendering.md @@ -181,11 +181,10 @@ const columns: Columns = [ By default, the grid has no intrinsic dimensions. It occupies the space its parent leaves. ->⚠️ When using % (**percentage**) for your height or width.
->
->You need to make sure the container you are putting the grid into also has an intrinsic dimension. ->The browsers fit the element according to a percentage of the parent dimension. ->If the parent has no dimensions, then the % will be zero. +> ⚠️ When using % (**percentage**) for your height or width.
>
+> You need to make sure the container you are putting the grid into also has an intrinsic dimension. +> The browsers fit the element according to a percentage of the parent dimension. +> If the parent has no dimensions, then the % will be zero. ### Flex layout diff --git a/packages/grid/data-grid/src/DataGrid.test.tsx b/packages/grid/data-grid/src/DataGrid.test.tsx index 2e9a3f5f599c7..8fd645e6b3bce 100644 --- a/packages/grid/data-grid/src/DataGrid.test.tsx +++ b/packages/grid/data-grid/src/DataGrid.test.tsx @@ -104,6 +104,19 @@ describe('', () => { clock.tick(100); }).toWarnDev('Material-UI Data Grid: The parent of the grid has an empty height.'); }); + + it('should warn if the container has no intrinsic width', () => { + expect(() => { + render( +
+
+ +
+
, + ); + clock.tick(100); + }).toWarnDev('Material-UI Data Grid: The parent of the grid has an empty width.'); + }); }); });