...

1. Form fields - Magnolia specific fields. 
2. Vaadin fields - Vaadin fields that can be used with Magnolia. - Rename.
3. Unsupported fields - Not clear why we specify what Vaadin fields NOT to use. The list of controls is not extensive, implying either that there are many more controls that can be added (in which case the form field tab and Vaadin fields tab are incomplete) or that the list of banned controls is incomplete.

...

• Make each tab tabular. Classic table with header, columns and rows (albeit these are invisible). Keep things nicely spaced.
• General suggestion valid for all three tabs is to add a link to official documentation, where users can find detailed information on using fields. The link could be by the line "Showcase apps......." above the tabs. Or, link to a more specific page from each tab. See Mockup proposal.

What do Vaadin do?Question for going forward - Is the showcase app likely to expand? As in, how likely is it that over time more and more controls will be added?  If this is the case, then it might be worth considering adding Categories for the Form Field tab control list.

For example Text, Button etc. The question then is whether to list by control type (e.g. 'Text fields')  or functional type (e.g. Text inputs) which would include specific control types ('Text fields'). Vaadin mix these in their documentation, probably a sensible approach. Here you can see the Text input category:

...

See: http://demo.vaadin.com/sampler Note that when the information is viewed this way, you get essentially what I would argue for in the Showcase app - a three column approach with headings that correspond to Control, Image, Description. The difference is that in Mag 5 we don't want to have click, jab to see the info.

Form fields tab changes

Suggest making a few alterations to the Showcase App: Form fields tab:

Proposal

1. Increase real estate for the fields (i.e make the light grey area bigger - stretch it to the left and right).
2. Add three columns with (headings : optional)
   
   1. Field Control name
   2. Appearance - Show the actual field, item, 'thing'.
   3. tree
   4. Control
   5. Description box with links.   Function (or Description) - Add a short usage description per field. Say, max 140 - 200 characters. (Use this for... Can also be used for... etc.) Where, why, how. (Use on x pages to describe....Try not to use more than x times per page.) 
3. Left align everything in each column.To accommodate the About text (Function? Description?) increase space between each row so that 140 characters can fit comfortably in the third column, spread over 2/3 lines at standard browsing settings.
4. Consider adding visible lines as column or row indicators (i.e grey vertical lines). Am not 100% convinced of this. There appear to be semi row indicators in the Vaadin fields tab. Not to great effect though.
5. Remove references to 'in a form' in field name. So, 'Commit button in a form' is just called 'Commit button'.
   
   

Current look

Proposal mockup

...