New Grid component

[GomezIvann]

Discuss and implement a new component Grid to offer our users more options to choose from when implementing their page layout. As its name explains, this component would be based on the CSS Grid Layout pattern, which introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements.

This component has been already requested by a user in issue #1526.

[GomezIvann]

Here is the first API agreed upon:

Grid API

Name	Type	Default value	Prop description
autoColumns	string	auto	MDN
autoRows	string	auto	MDN
autoFlow	row or column or row dense or column dense	row	MDN
gap	Spaces or Gap	-	MDN
placeContent	"normal" or "start" or "end" or "center or "stretch" or "space-between" or "space-around" or "space-evenly" or "baseline" or an object { alignContent, justifyContent }	"normal"	MDN
placeItems	"normal" or "start" or "end" or "center" or "stretch" or "baseline" or an object { alignItems, justifyItems }	"normal"	MDN
templateAreas	string[]	-	MDN
templateColumns	string[]	-	MDN
templateRows	string[]	-	MDN
areaName	string	-	Name or tag corresponding to the area defined with grid-template-areas.
column	number or string or GridCell	-	MDN
row	number or string or GridCell	-	MDN
placeSelf	"auto" or "start" or "end" or "center" or "stretch" or "baseline" or an object { alignSelf, justifySelf }	"auto"	MDN
as	keyof HTMLElementTagNameMap	div	Set the component to a different HTML tag.
children	React.ReactNode	-	Custom content inside the Grid container.

Complementary types:

type Spaces = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
type Gap = { rowGap?: Spaces; columnGap?: Spaces };
type GridCell = { start: number | string; end: number | string };

[GomezIvann]

UPDATES

New Grid.GridItem included. The main reason is to fulfil every possible scenario and make the experience simple and intuitive. These scenarios are:

1. Simple Grid Layout with all the information at the parent container. This is the most basic scenario and, we think, also the most common. Grid Layout pattern, unlike the Flex, lays most of the information in the parent container, so in the majority of cases we will see the component with some children elements without a very deep tree inside.

Example: Center an item

<DxcGrid placeItems="center">
  <div style={{ backgroundColor: "#fabada" }} />
</DxcGrid>

Example: Simple layout with 8 columns (as Halstack layout patterns)

<DxcGrid templateRows={["repeat(8, 1fr)"]} templateRows={["minmax(40px, auto)"]} gap="1rem">
  {...}
</DxcGrid>

2. A More complex layout with the Grid decision at the parent (ONLY). In the first iteration we assume grid items would also follow the Grid pattern, but, after some thought, that would be a very pretentious decision. So, we will finally the users decide how to distribute the elements inside each child item. That's where the new Grid is.GridItem came from, a compound component with only properties that affect GridItems in relation to the parent grid container, without any decision preset for its content (no display: grid or anything).

Example: Reproducing halstack Application Layout with Grid

<DxcGrid
  templateColumns={["repeat(4, minmax(50px, 200px))"]}
  templateRows={["minmax(40px, auto)"]}
  templateAreas={["header header header header", "sidenav main main main", "sidenav footer footer footer"]}
  gap={{ rowGap: "0.5rem", columnGap: "1rem" }}
>
   <DxcGrid.GridItem areaName="header" as="header">
     <Header />
   </DxcGrid.GridItem>
   <DxcGrid.GridItem areaName="main" as="main">
     {...}
   </DxcGrid.GridItem>
   <DxcGrid.GridItem areaName="sidenav" as="nav">
     <Sidenav />
   </DxcGrid.GridItem>
   <DxcGrid.GridItem areaName="footer" as="footer">
     <Footer/>
   </DxcGrid.GridItem>
</DxcGrid>

3. Building a complex layout with grid containers inside grid containers (Subgrid).

Example: Halstack Application Layout but with a complex main

<DxcGrid
  templateColumns={["repeat(4, minmax(50px, 200px))"]}
  templateRows={["minmax(40px, auto)"]}
  templateAreas={["header header header header", "sidenav main main main", "sidenav footer footer footer"]}
  gap={{ rowGap: "0.5rem", columnGap: "1rem" }}
>
  <DxcGrid.GridItem areaName="header">
    {...}
  </DxcGrid>
  <DxcGrid
    areaName="main"
    templateColumns={["repeat(8, 1fr)"]} 
    templateRows={["repeat(8, 1fr)"]} 
  >
    {...}
  </DxcGrid>
  <DxcGrid.GridItem areaName="sidenav">
    {...}
  </DxcGrid.GridItem>
  <DxcGrid.GridItem areaName="footer">
    {...}
  </DxcGrid.GridItem>
</DxcGrid>

[GomezIvann]

Grid.GridItem API

Name	Type	Default value	Prop description
areaName	string	-	Name or tag corresponding to the area defined with grid-template-areas.
column	number or string or GridCell	-	MDN
row	number or string or GridCell	-	MDN
placeSelf	"auto" or "start" or "end" or "center" or "stretch" or "baseline" or an object { alignSelf, justifySelf }	"auto"	MDN
as	keyof HTMLElementTagNameMap	div	Set the component to a different HTML tag.
children	React.ReactNode	-	Custom content inside the Grid item.

[GomezIvann]

Implementation (#1571) and documentation (#1582) are already reviewed and merged. Closing this.