Migration Guide to CoralUI 3-based

New Location

1. A new set of Sling components of Granite UI Foundation is created for Coral3 under /libs/granite/ui/components/coral/foundation
2. A new clientlib of Granite UI Foundation, named granite.ui.coral.foundation is also created
3. So basically there is one set for CoralUI 2-based components and one set for CoralUI 3-based components
4. The new set will not be just a copy-paste of the old set, rather it will be cleaned up (e.g. streamlining, removing deprecated feature)
5. It is recommended that a page only use either CoralUI 3-based or CoralUI 2-based set (i.e. not mixed)

Layout Concept

The new set will not use the layout concept anymore. This is to increase the simplicity of the understanding of Granite UI. Each layout component thus becomes a standard component.

The layout mechanic itself is still there for other to use if needed.

Before:

+ mytabs
  - sling:resourceType = "granite/ui/components/foundation/container"
  + layout
    - sling:resourceType = "granite/ui/components/foundation/layouts/tabs"
  + items
    + tab1
      - jcr:title = "Tab 1"
      - sling:resourceType = "granite/ui/components/foundation/container"
    + tab2
      - jcr:title = "Tab 2"
      - sling:resourceType = "granite/ui/components/foundation/container"
      + layoutConfig
        - active = true

After:

+ mytabs
  - sling:resourceType = "granite/ui/components/coral/foundation/tabs"
  + items
    + tab1
      - jcr:title = "Tab 1"
      - sling:resourceType = "granite/ui/components/coral/foundation/container"
    + tab2
      - jcr:title = "Tab 2"
      - sling:resourceType = "granite/ui/components/coral/foundation/container"
      + parentConfig
        - active = true

Streamlining the API

Since we have to create a new set of RT and clientlib, we have an opportunity to revisit the API.

1. The common attributes, such as granite:class are strictly implemented to replace existing properties, such as class.
2. Unnecessary or similar component is removed.
3. foundation-validation in the client-side replaces $.validator (deprecated).

Component Mapping

If not specify, by default the equivalence of an existing component can be found at the same relative path to /libs/granite/ui/components/coral/foundation.

Removed Components

The following is the list of components that are removed in the new set.

Path	Replacement	Remarks
navigation	container
section	container
form/colorpicker		No Coral’s ColorPicker at this point
form/decoratedtextfield		Too low level
form/inputgroup		Too low level
form/layouts/actionfield	actionfield
form/option		Obsolete
form/radio	form/radiogroup	Cannot have standalone radio anymore
form/reset	button
form/searchfield	form/textfield
form/selector	form/buttongroup
form/submit	button
form/taglist		Too low level
form/wizard/*	wizard
admin/layouts/*		Obsolete
admin/layouttoggle		Obsolete
admin/page		Obsolete
admin/toolbar		Obsolete
layouts/cardview	masonry
layouts/container		Obsolete
layouts/content		Tied to Shell implementation
layouts/dialog	wizard
layouts/collapsible	accordion
layouts/columnview	columnview
layouts/fit		Each container-like component may support maximized feature
layouts/fixedcolumns	fixedcolumns
layouts/list	list
layouts/listview	table
layouts/modal	dialog
layouts/mode	mode/switcher
layouts/form	mode/form	Only for the switching of default/edit mode; use form for form styling (vertical/aligned)
layouts/popover	popover
layouts/tabs	tabs
layouts/well	well