granite:commonAttrs - Implemenation difference b/w Coral UI 2 and Coral UI 3

Out of the 3 differences between Granite Components based on Coral UI 2 and Coral UI 3, we are done with the Validation change. In this post, we will get insights into the implementation change in common attributes (granite:commonAttrs)

Common Attributes:
The concept of common attributes is similar to HTML global attributes. (global attributes are those that are common to all HTML elements).
For Granite UI based components, the list of common attributes are highlighted here.

The change did on Coral UI3: Common attributes(say granite:class) are strictly implemented to replace existing properties (say, class)

We will consider a Touch UI dialog that uses CoralUI2 and Coral UI3 textfield and understands the difference in terms of implementation and usage.
Out of the attributes listed in the above link, the most commonly used are class, id, title, and data-related attributes. Hence the same is considered for illustration.

Granite Coral UI2 Textfield:
Resource Path: /libs/granite/ui/components/foundation/form/textfield.

• In Touch UI dialog, if this resourceType is used, we can add additional properties to the textfield node like class, id, title and other custom properties and it will be available in the generated textfield markup. (custom properties will be available in the form of data-* attributes)
• Screenshot of dialog and generated markup related to this is added under Screenshots A.

Granite Coral UI3 Textfield:
Resource Path: /libs/granite/ui/components/coral/foundation/form/textfield

• If this resourceType is used and if we would like to add class/id/title attributes, then we need to add property in the naming convention of granite:class/granite:id/granite:title respectively.
• For additional custom properties, we need to add a node under the text node in the name "granite:data" and add properties to this node which would then be available in the markup in the form of data-* attributes.
• Adding properties in the name of "class/id/any custom property" directly on the text node will not be available in the markup (this is the change done in terms of usage)
• Screenshot of dialog and generated markup related to this is added under Screenshots B.

Component level Implementation Logic:

• Granite UI's component config (com.adobe.granite.ui.components.Config) is used to retrieve the properties(that we add as part of the node where we use Granite UI component as a resourceType)
• These properties are then built up as attributes to the HTML tag using Granite UI's Attribute Builder (com.adobe.granite.ui.components.AttrBuilder)
• In Coral UI2, properties in the name of class ,id, rel and other custom properties are explicitly added to AttrBuilder object whereas in Coral UI3, this explicit logic is not available -> impact being properties in the name of "class" will not be accepted instead "granite:class" will be picked

Screenshots for Reference:
Screenshots A: (CoralUI 2 Textfield)
Custom property: textlength is added.



Generated markup: (textlength is added as data-textlength attribute. class, id and title are added as is)


Screenshots B: (Coral UI 3 Textfield)
Custom property: node named granite:data is added below the text node and custom property is then added in granite:data node. (in this case, textlength is the custom property)

• Though we add a property named "class"(txt-class) for CoralUI 3, the same will not be available in the generated markup. Refer below markup screenshot.

granite:data node for custom properties:

Generated markup: