Dialog Style Guide

Style guide for the edit and policy dialogs used in the Adobe Experience Manager Core Components.

Contents

• General
• Content XML
• Form Fields

General

• Use Coral 3 (granite/ui/components/coral/foundation/...) Granite component resources types. Do not use Coral 2 (granite/ui/components/foundation/...) Granite component resource types.
• A Fixed Columns (granite/ui/components/coral/foundation/fixedcolumns) Granite component should be used to wrap all form fields. This ensures the width of the components is contained in full screen mode and they don't stretch to full width.

Content XML

Nodes

• Node Names should use the lowerCamelCase naming convention. Example: sortOrder.

Properties

• Property Names should use the lowerCamelCase naming convention. Example: fieldDescription.

Form Fields

Field Name Property

• The Field Name ./name should use the lowerCamelCase naming convention. Example: ./maxItems

Field Node Name

• The Field Node Name should match the Field Name Property. Example: ./maxItems -> maxItems

Field Label

• All Form Fields should have a fieldLabel property.
• The Field Name should be easily understood and simply describe the associated functionality.
• The Field Label should typically match the Field Name Attribute. Example: ./maxItems -> Max Items
• All Field Labels should use Title Case [0].

Field Description

• All Form Fields should have a fieldDescription property.
• The Field Description should provide additional information not communicated in the Field Label.
• The Field Description should not simply repeat the Field Label text.
• The Field Description should use Sentence Case [0].

---

[0] - Case Converter