Skip to content

[TASK] BREAKING: Fix Row component markup structure in React and Angular SDKs #34431

@fmontes

Description

@fmontes

Description

Fix the HTML markup structure for the Row component in both React and Angular SDKs. Currently, the custom classes from the Layout Editor are being applied to an inner wrapper div, but they should be applied to the outer container to properly support full-width backgrounds with contained content.

Current (Incorrect) Markup:

<div class="dotcms-row">
  <div class="CUSTOM_CLASSES_FROM_LAYOUT_EDITOR">
    <column-1>
    <column-2>
    <column-3>
  </div>
</div>

Expected (Correct) Markup:

<div class="dotcms-row CUSTOM_CLASSES_FROM_LAYOUT_EDITOR">
  <div class="dotcms-row-container">
    <column-1>
    <column-2>
    <column-3>
  </div>
</div>

Rationale:

The correct markup structure is needed to support rows where the background extends edge-to-edge while the content remains contained. The custom classes from the Layout Editor need to be on the outer container to properly control the background styling.

Breaking Change:

This is a breaking change because customers may have CSS targeting the current markup structure. However, this fix addresses a fundamental design issue and aligns with proper semantic HTML structure for this pattern.

Acceptance Criteria

  • Update Row component in React SDK (/core-web/libs/sdk/react/src/lib/next/components/Row)
  • Update Row component in Angular SDK (/core-web/libs/sdk/angular/src/lib/components/dotcms-layout-body/components/row)
  • Custom classes from Layout Editor are applied to .dotcms-row element
  • Inner wrapper uses .dotcms-row-container class
  • Document breaking change in CHANGELOG/release notes
  • Update any related documentation
  • Test full-width background scenarios work correctly

Additional Context

This issue was identified during internal review and represents a bug that has existed since the SDK release (~10 months). The decision to make this a breaking change rather than deprecate and create a new component follows standard JavaScript library versioning practices. The breaking change should be properly documented in release notes to inform customers who may need to update their custom CSS.

Metadata

Metadata

Assignees

Type

Projects

Status

New

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions