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.

↑ Back to top

Content XML

Nodes

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

Properties

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

↑ Back to top

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 Labels should be descriptive rather than instructive. Instead of Select Max Items, prefer Max Items.

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].

↑ Back to top

---

[0] - Case Converter