feat: Base implementation for Grid about fluent-ui-react

[bmdalex]

@levithomason

I started working on this and got a few questions for the first version:

1. Is this the complete API? It looks a bit limiting to have only these props (I extracted them in an interface):

interface IGridProps {
  as?: string
  children?: ReactNode
  className?: string
  columns?: string | number
  content?: ReactNode
  rows?: string
}

2. Shouldn't we add a sub-component for children (GridItem)? On CSS Tricks for Grid there are plenty of examples on how to style individual items; maybe add orientation (justify-self, align-self, place-self, etc)? or should we keep that for v2?

3. Related to 2; how do we align items?

• Do we add any props to the Grid component?
• Do we add GridItem sub-component to make it more visible or other options?
• Do we create some default alignment (everything centered let's say) and iterate from there?

4. Children and content

• What should be the API for content initially and how do we render it in the DOM?
• Should we manipulate children in any way to add correct grid item styling? (e.g.: going through children and adding CSS classes)

[levithomason]

rows (quantity)

Looking back, this is short sighted. If you have a grid with a fixed height, you very well may want to equally divide up that vertical space by passing a number of rows. Let's give the same API to rows as columns has.

Grid Item

Yes, let's save for a future PR.

Should we manipulate children in any way to add correct grid item styling?

Best practice is to never parse/loop over children. This is because they can be wrapped in HOCs making it difficult to work with as you don't know what component you might encounter or what features they support.

We'll use the CSS grid syntax from the parent to position children. Once we get to fine grained positioning for one off children, we'll likely have a GridItem type of component. Similar to how SUIR has a Grid and Grid.Column/Grid.Row.

[bmdalex]

Opened a PR for it, WIP #15
@levithomason

[levithomason]

We need to ensure the grid renders correctly with the requirements here: #29