Improve HTML Layout Generation Strategies in DXP

• Type: Epic
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: None
• Component/s: ~ [Archived] Frontend Infrastructure
• Labels:
  • 7.3-ce-ga4
  • fc_20_06
  • fi-s03e22
  • fi-s03e23
  • fi-s03e24
  • fi-s03e25
  • fi-s03e26
  • fi-s03e27
  • fi-s03e28
  • fi-test-not-needed
• Epic/Theme:
  • Fi_Internal_Productivity
• Epic Status: To Do

There's currently too many different ways to do HTML layouts in DXP (see Reference). Many of them deprecated for a while.

The goal of this epic is to analyze existing HTML layout strategies and implement a plan to update them.

Acceptance Criteria

• A document with current strategies to layout elements in DXP
• A set of new and coherent new strategies that includes:
  • List of clay:tags that can be used for layouts
  • Examples of usages
  • Documented guidelines and best practices
  • Clay layout utilities
  • Clay layout components
• All existing tags that should no longer be used are marked as deprecated including a description on how to migrate to the new utils

Reference

CSS Classes

Class	Usages
col-*	198
container-*	486
row	105

Tags

aui

Util	Description	Usages
aui:button-row	Creates a button row <div> tag to wrap <aui:button /> components and offer additional styling	228
aui:col	Creates a column to display content in an <aui:row /> component	181
aui:container	Creates a container <div /> tag to wrap<aui:row /> components and offer additional styling	12
aui:field-wrapper	Creates a <div /> tag to wrap form fields and offer additional styling	176
aui:fieldset	Creates a <div /> tag to group related form elements and offer additional styling	451
aui:fieldset-group	Creates a <div /> tag to group fieldset elements and offer additional styling	98
aui:row	Creates a row to hold <aui:col /> components	77

liferay-ui

Util	Description	Usages
liferay-ui:section	??	103

liferay-frontend

Util	Description	Usages
liferay-frontend:edit-form	Creates a form that offers additional styling and custom namespacing	104
liferay-frontend:edit-form-body	Creates an edit form body that offers additional styling	104
liferay-frontend:edit-form-footer	Creates an edit form footer that offers additional styling	101
liferay-frontend:fieldset	Creates a <div /> tag to group related form elements and offer additional styling	160
liferay-frontend:fieldset-group	Creates a<div /> tag to group fieldset elements and offer additional styling	132