Migration

Form Enhancements

In this iteration, all form components have been reviewed and new demos for template-driven and reactive forms have been added. During this work, limitations have been identified and resolved as well. In addition, we've introduced a new property named invalid to the form components that you may use style a component as invalid. In previous versions, form components style themselves as invalid using a built-in style like the following.

.p-inputtext.ng-invalid.ng-dirty {
    border-color: ${dt('inputtext.invalid.border.color')};
}

This style is opinionated as it is specifally for invalid and dirty states ignoring other potential UX requirements like touched/untouched or form submit. In v20, the new invalid provides full control to highlight a component a invalid.

<input type="text" pattern="email" [invalid]="email.invalid && (email.touched || sampleForm.submitted)" />

This styling change is backward compatible, meaning the opinionated ng-invalid.ng-dirty class is still included however in future versions, it will be removed.

PrimeUIX Themes

PrimeUIX is a shared package between all Prime libraries, this shared approach allows PrimeTek teams to share theming and the Design team who is responsible for the Figma UI Kit to work on a single design file, which is the single source of truth. Prior to v20, PrimeNG has its own fork in default styles and for the design tokens @primeng/themes package is required. With v20, PrimeNG receives the styles from @primeuix/styles under the hood and the design tokens as theme presets are loaded from @primeuix/themes.

The components need to be adjusted to fit in the PrimeUIX theming by using the host element where applicable, as a result for the components that use host element (<p-* />) as their main container, the styleClass became obselete since native class attribute is already available on the custom element. Refer to the documentation of a particular component to find out if styleClass is deprecated.

<!-- Deprecated -->
<p-select styleClass="mx-auto" />

<!-- New -->
<p-select class="mx-auto" />

All of these changes are backward compatible, @primeng/themes use @primeuix/themes internally, and migration is easy as replacing the dependency @primeng/themes with @primeuix/themes in your application.