SDK: Standardize Angular Component CSS Classes and HTML Structure

[rjvelazco]

Caution

THESE ARE BREAKING CHANGES AND SHOULD BE DOCUMENTED

Parent Issue

#30943

Overview

In the Angular SDK, container components render an extra wrapper

when used inside the editor to support inline editing. This div includes inline attributes such as data-dot-*. While necessary for the editor, these extra attributes and inconsistent DOM structures can disrupt user-defined styles.

Task

1. Update the Angular Container Component to always include the extra wrapper div.
2. Conditionally apply inline attributes (e.g., data-dot-*) to the wrapper div only when inside the editor.
3. Ensure the wrapper div uses a consistent class name: dot-container.
4. Update all CSS classes exposed to users/clients to include the dot- prefix (e.g., dot-container).
5. Verify the behavior in both editor and live environments.
6. Update relevant documentation and examples to reflect the changes.

Proposed Objective

Technical User Experience

Proposed Priority

Priority 3 - Average

Acceptance Criteria

Preview Give feedback

1. Unify HTML structure between edit/production modes
2. Always renders the extra wrapper <div> regardless of the environment.
3. Replace .container with .dot-container in all React components
4. The inline attributes (data-dot-*) are applied only when isInsideEditor is true.
5. No visible regressions occur for content rendering or inline editing workflows.
6. Document all the classes that have been added or changed. (Add a comment in this GH ticket)
7. New class names
8. Migration guide
9. Test across example sites and dotcms.com

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

No response

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

• Refactor the Container Component to ensure attributes are conditionally applied.
• Standardize the wrapper div's class name to dot-container.
• Update all exposed CSS classes to use the dot- prefix.
• Write/update unit tests:
• Validate attribute presence when inside the editor.
• Confirm the absence of attributes in production environments.
• Test the changes in both editor and non-editor environments.