PrimeOne Migration

PrimeNG 10 is based on PrimeOne Design Architecture that separates core from skinning. Core is responsible for alignment where skinning is the responsibility of the themes. This flexible structure was already used by PrimeReact and PrimeVue, with V10 PrimeNG also migrated to PrimeOne. Main difference is, v10 uses p-* prefix for classes whereas older versions use ui-*. This page documents the changes in detail.

Global Classes

Various shared classes have been renamed and some are removed.

Removed Classes

• ui-widget-header
• ui-widget-content
• ui-state-active
• ui-state-default
• ui-shadow
• ui-corner-*
• ui-helper-clearfix-*

Renamed Classes

• ui-widget to p-component
• ui-state-disabled to p-disabled
• ui-state-highlight to p-highlight
• ui-state-focus to p-focus
• ui-helper-hidden to p-hidden
• ui-helper-accessible to p-hidden-accessible
• ui-helper-reset to p-reset
• ui-component-overlay to p-component-overlay
• ui-overflow-hidden to p-overflow-hidden
• ui-link to p-link
• ui-unselectable-text to p-unselectable-text

Component Classes

• Classes of all the components have been migrated to the p-* prefix, for example ui-dialog is replaced with p-dialog.
• p-table uses p-datatable- prefix instead of p-table- to be able to align it with PrimeReact and PrimeVue.
• Button has a new set of classes