Use css grid to layout form

[WangLarry]

Is your feature request related to a problem? Please describe.
Current react-layout use Section and Box to align component, which is flexible. But I feel it is not Intuitive，specially Box nested Box in source code.

Describe the solution you'd like
Css grid is modern layout, which is intuitive and powerful. Specially grid-area is suit to layout form.

Describe alternatives you've considered
For example, we can define form layout like this:

// CSS
.container {
  grid-template-areas: 
    "name    name    age age"      // <<---------- define component occupy which cell, can span rows or cols
    "phone   phone   "                   //
}
.name {
  grid-area: name;
}
.age {
  grid-area: age;
}
.phone {
 grid-area: phone;
}

// JS
<Field id="name" className="name" />
<Field id="age" className="age" />
<Field id="phone" className="phone" />
...

Changing grid-template-areas will change layout. Grid-template-areas string is just like EXCEL, can span cols and rows, is very flexible.

[galhavivi]

@WangLarry
Thats a great idea and definitely more intuitive, thank you! :)
Let me check how we can offer a different / newer sections version based on grid.
we can have for example that each section will get content - array of strings (or array of arrays) instead of boxes like:

sections: [{
   id: 'basic-info',
   title: 'Basic Info',
   content: [
       "name name . . age age . .",
       ". . . . phone . . ."
   ],
}]

BTW - our advanced goal is to create also a Layout editor, where you will have all your defined fields in a list and you can drag & drop fields to some area - to create different layouts, and behind the scene it will translate to the sections json.
We had this feature in a prior version of Jafar in our portal, and it was very useful for non UI developers - such as backend devs or product manages to create different layouts for the same form based on user role / permissions.
For example - one set of user can get a different layout that another set of users (different sections and fields order) - but both based on the same form model fields. :)

[galhavivi]

pr - #65
demo - https://yahoo.github.io/jafar/demo-react-layout.html#/item/sections-grid/html

available on v1.0.7

[WangLarry]

Beautiful and elegant! @galhavivi

[WangLarry]

Maybe It looks pleasant to get rid of 'getGrid()' in array?

grid: [
    'firstName lastName .',
    'personalId address .',
  ],

...

sections.map(section => ({...section, grid: getGrid(section.grid)})

Oh, current syntax can style every row.

[galhavivi]

I agree its more clean :) and when I'll use it ill probably do like you suggested... but i think it might be better to keep the demo with the getGrid so it will be more clear to people that the grid configuration is an object of { templateAreas, elements } - rather than array (they might miss the last row of sections.map if well change it)

[WangLarry]

Maybe we should show the feature of gird - can span rows. For example:

  grid: getGrid([
    'department  benefits    .    ',
    'level        benefits    .    ',
  ]),

[galhavivi]

Not sure i understand what you meant ..?

[WangLarry]

[galhavivi]

like this?

[WangLarry]

'benefits' can occupy two rows. See my updated picture

[galhavivi]

done :) i was slow here lol