Support dense layout

[WangLarry]

Is your feature request related to a problem? Please describe.
Current style of layout and component looks too disperse.

Describe the solution you'd like
We should support dense style.

Describe alternatives you've considered
Support variant prop in ItemView component of react-layout.

[Gal Havivi]

@WangLarry
Did you mean you want to pass the ItemView some custom styles to change the internal objects style like margins and more? (which is of course basic ability we should have anyway)

[WangLarry]

@galhavivi
No. I mean we have a default dense style, user can choose it or use current default disperse style.

[Gal Havivi]

Currently each section can get also "level".. (by default each section get level:1 , and sub section gets level:2)
you can see that sub sections has more dense style - less margins and smaller fonts.. level:2 was more for sub sections but can also be used on top level sections...

But ok, we'll think about it, and maybe make it even more flex-able with all the styles

[WangLarry]

Some users like use table to align component, specially when form have lots of fields, which have no enough space.

[Gal Havivi]

pr - #68

[Gal Havivi]

@WangLarry did you mean something like this? - #68

Also - should we change 'size' prop name to something else? maybe dispersing or variant? WDYT?

[WangLarry]

@galhavivi 'Size' prop name is better, just like table component etc in Material-ui

[Gal Havivi]

demo - https://yahoo.github.io/jafar/demo-react-layout.html#/item/layouts/html

available on - v1.0.8

[Gal Havivi]

BTW layout size does not affect spaces between fields (each fields has by default margin bottom and right of 40px)
since "Field" is a generic component that layout section can get like any other component to render inside.

For now anyone can create its own custom FieldView with different styles, of maybe wrap Field / FieldView with styled components and change styles. (custom FieldView)

Another quick way to control Field's style via sections is to pass style object though the grid config - as it goes to the root div of the Field.For example we can control Field's width and margin:

import { Field } from '@jafar/react-form';

const getGrid = (templateAreas) => {
  const fieldIds = templateAreas.join(' ').split(' ').filter(x => x !== '.');
  return {
    templateAreas,
    elements: fieldIds.map(id => ({ 
      selector: `#${id}`, 
      gridArea: id, 
      component: Field, 
      props: { id },      
      style: 'width: 350px; margin: 0 15px 20px 0;',     //  < ------- like this
    })),
  };
};

export default [{
  id: 'personal-information',
  title: 'Personal Information',
  grid: getGrid([
    'firstName    lastName  .',
    'personalId   address   .',
  ]),
}];