feat(binary-field): migrate dot-edit-content-binary-field lib to Tailwind CSS / PrimeNG 21
Open
@hmoreras is already working on this.
Since Mar 6, 2026.
Team : Modernization
- Dominant language
- Java
- Stars
- 970
- Forks
- 486
- Avg merge
- 3d 33m
- Merged PRs (30d)
- 170
Description
Description
The dot-edit-content-binary-field library (and its dotcms-binary-field-builder custom element app) was rolled back from the Angular 20→21 / PrimeNG 17→21 migration commit (618fd32060) due to multiple regressions:
NG0950errors in JSP pages —input.required()signal inputs are incompatible withcreateCustomElementfrom@angular/elements- Tailwind CSS was never wired into the
dotcms-binary-field-builderapp's build, breaking all layout - The PrimeNG 21 Lara theme provider (
provideDotCMSTheme) was missing fromAppModule, leaving all PrimeNG components unstyled - The global
.pi { display: flex; width: 20px; aspect-ratio: 1/1 }rule from_misc.scssconflicted with PrimeNG 21's button flex layout, misaligning all button icons - Multiple PrimeNG 17
styleClassbutton variants broken under PrimeNG 21
The rollback restored all pre-migration SCSS files and HTML templates. This task tracks the proper forward migration so the field is fully aligned with the rest of the codebase (Tailwind CSS v4 + PrimeNG 21 Lara theme).
Fixes already applied to the builder app (must be preserved during migration)
| Fix | File |
|---|---|
provideDotCMSTheme() in AppModule |
apps/dotcms-binary-field-builder/src/app/app.module.ts |
| Tailwind CSS + PostCSS setup | apps/dotcms-binary-field-builder/src/style.css, .postcssrc.json, project.json |
Dialog backdrop override (PrimeNG 21 renamed p-component-overlay → p-overlay-mask) |
src/style.css |
Button icon alignment fix (.p-button .p-button-icon.pi { width: auto; aspect-ratio: unset }) |
src/style.css |
@Input() setter + backing signal pattern (replaces input.required()) |
dot-edit-content-binary-field.component.ts |
Components to migrate
All under libs/edit-content/src/lib/fields/dot-edit-content-binary-field/:
dot-edit-content-binary-field.component(main +.scss)components/dot-binary-field-editor/(HTML +.scss)components/dot-binary-field-preview/(HTML +.scss)components/dot-binary-field-ui-message/(HTML +.scss)components/dot-binary-field-url-mode/(HTML +.scss)components/dot-binary-field-wrapper/
PrimeNG 17 → 21 button API reference
Old styleClass |
New PrimeNG 21 props |
|---|---|
styleClass="p-button-link p-button-sm" |
[link]="true" size="small" |
styleClass="p-button-outlined p-button-sm p-button-secondary" |
[outlined]="true" severity="secondary" size="small" |
styleClass="p-button-rounded p-button-sm p-button-outlined" |
[rounded]="true" [outlined]="true" size="small" |
styleClass="p-button-rounded p-button-sm p-button-tertiary" |
[rounded]="true" severity="contrast" size="small" |
styleClass="p-button-outlined" |
[outlined]="true" |
Acceptance Criteria
- All SCSS files deleted and replaced with Tailwind CSS utility classes in templates
- All
styleClasson<p-button>replaced with PrimeNG 21 props -
@Input()setter + backing signal pattern preserved in.component.ts(NOT reverted toinput.required()) to maintain@angular/elementscompatibility - Builder app fixes preserved (Tailwind setup,
provideDotCMSTheme, dialog backdrop, button icon override) - Field renders correctly in JSP pages — no
NG0950, no unstyled components - URL import dialog, editor dialog, and file preview match design spec
- Tooltip displays correctly on disabled AI button (
[tooltipOptions]="{ showOnDisabled: true }") - All unit tests pass (
yarn nx test edit-content)
Additional Context
- The
dotcms-binary-field-builderapp exposes<dotcms-binary-field>as a custom HTML element viacreateCustomElement— embedded in JSP pages. This is whyinput.required()cannot be used. - PrimeFlex is no longer available — Tailwind utilities only.
- Reference the migration commit
618fd32060for the intended Tailwind output structure. - Related rollback: branch
issue-34552-tags-portlet-feedback.
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.
Assessment
This issue has not been assessed yet.