-
Notifications
You must be signed in to change notification settings - Fork 480
Description
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-rowelement - Inner wrapper uses
.dotcms-row-containerclass - 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
Labels
Type
Projects
Status