SDK: Standardize Component CSS Classes and HTML Structure
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 32/100
- Issue type
- Refactor
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- react
- Domain
- frontend
Research direction
Start by auditing the React components and their edit/production rendering paths, then compare the generated HTML structure and CSS class usage across both modes. Done means the components use .dot-container, unnecessary edit-mode wrappers are removed, structures match, tests cover consistency, and documentation includes the new classes, specifications, and migration guide.
Written by the indexing model from the issue text.
Description
[!CAUTION]
THIS IS A BREAKING CHANGES AND SHOULD BE DOCUMENTED
Problem Statement
Two critical issues in our SDK React components:
- The generic .container class risks style conflicts
- Inconsistent HTML structure between load the page in UVE and production modes creates layout issues
User Story
As a frontend developer, I want:
- Unique, conflict-free CSS class names
- Consistent HTML structure across all modes So that I can maintain reliable styling and layouts
Technical Implementation Plan
- Audit component structure
- Implement unified rendering logic
- Update CSS classes
- Add test cases for structure consistency
- Document changes
Acceptance Criteria
- Replace .container with .dot-container in all React components
- Unify HTML structure between edit/production modes
- Remove unnecessary wrapper divs in edit mode
- Verify layout consistency across modes
- Update documentation with:
- New class names
- HTML structure specifications
- Migration guide
- Test across example sites and dotcms.com
- Dominant language
- Java
- Stars
- 970
- Forks
- 486
- Avg merge
- 3d 33m
- Merged PRs (30d)
- 170
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from dotCMS/core
-
dotCMS : Build Team : Falcon Type : Task
Difficulty 1/5 Under an hour Newbie friendliness 92/100
-
OKR : Customer Support Team : Maintenance
Difficulty 1/5 Under an hour Newbie friendliness 88/100
-
Team : Modernization
Difficulty 1/5 Under an hour Newbie friendliness 78/100
-
dotCMS : Workflow Team : Cloud Eng
Difficulty 2/5 1-3 hours Newbie friendliness 87/100
-
Team : Maintenance
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
-
bug needs triage
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
-
Difficulty 1/5 Under an hour Newbie friendliness 94/100
objectionary/hone-maven-plugin#1061 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
spring-projects/spring-modulith#1895 ·