This content has been archived.

UI-Kit deprecated and removed skin formats

Skin formats are used to apply consistent styling across the user interface elements in applications that are built on the Pega Platform.

A skin format is deprecated or removed from the UI-Kit when one of the following conditions applies:

  • The skin format is no longer being used.
  • The skin format is similar to another skin format or the applied style can be replicated with the use of helper classes.
  • The skin format no longer aligns with the Pega Design system.

Removing no longer used, redundant, and outdated skin formats reduces the size of the generated CSS and reduces confusion around which formats to use.

The following tables list the pyEndUser skin formats that are deprecated or removed:

Dynamic layout formats

Format Deprecated in Removed in Replace with
Action area UI-Kit 10   Default
Button bar UI-Kit 10 UI-Kit 12 Inline middle
Grid filter bar UI-Kit 10 UI-Kit 12 Inline grid triple
Grid filter panel UI-Kit 10   Stacked
Header detail UI-Kit 10   Inline labels left
Inline grid 30 70 UI-Kit 10  

Inline

Add flex-col-30-70 helper class.

Inline grid 70 30 UI-Kit 10  

Inline

Add flex-col-70-30 helper class.

Inline grid double centered UI-Kit 10 UI-Kit 12

Inline

Add flex-col-2 and flex-align-center helper classes.

Remove spacing from properties in Dynamic layout presentation tab or add margin-0 helper class.

Inline grid left auto UI-Kitt 10 UI-Kit 12

Inline middle

Add flex-none helper class.

Inline grid triple no margin UI-Kit 10 UI-Kit 12

Inline

Add flex-col-3 helper class.Remove spacing from properties in Dynamic layout presentation tab or add margin-0 helper class.

Portal header group primary UI-Kit 10  

Inline middle

Add margin-r-3x helper class.

Portal header group secondary UI-Kit10  

Inline middle

Add margin-r-2x helper class.

Split button UI-Kit 10  

Inline middle

Add margin-0 helper class.

Stacked with labels spaced UI-Kit 10 UI-Kit 12 Stacked

Container formats

Format Deprecated in Removed in Replace with
Action area header no margin   UI-Kit 12 Use the Action area container format along with CSS overrides that remove the margins for specific use cases.
Action area no margin UI-Kit 10 UI-Kit 12 Use the Action area container format along with CSS overrides that remove the margins for specific use cases.
Action buttons   UI-Kit 12 Use the Action area container format along with the padding-b-1x helper class on the dynamic layout.
Assignment supporting UI-Kit 12   Use CSS overrides or helper classes that reference the Action area background mixin background color.
Case designer tile   UI-Kit 12 Use CSS overrides or helper classes that reference the Workarea background mixin background color and Borders mixin.
Case stages   UI-Kit 12 Use the stages helper class.
Child element UI-Kit 10   Use the padding-b-1x and padding-l-3x helper classes.
Column UI-Kit 12   Use CSS overrides or helper classes to add margins, padding, and the dashed border.
Column list UI-Kit 12   Use CSS overrides or helper classes to add margins, padding, and background color.
Combo group UI-Kit 12   No container format.
Content emphasis   UI-Kit 12 Not applicable.
Content emphasis table   UI-Kit 12 Not applicable.
Dashboard gadget UI-Kit 12   Use the Default container format along with CSS overrides to adjust spacing for specific use cases.
Dashed separator   UI-Kit 12 User a helper class to add the dashed border.
Default for indentation   UI-Kit 12 Use the padding-tb-2x helper class.
Default for nesting UI-Kit 12   Use the Default container format along with CSS overrides to adjust padding and borders for specific use cases.
Default with no padding UI-Kit 12   Use the Default container format along with CSS overrides to remove padding for specific use cases.
Explorer UI-Kit 12   No container format.
Fat list item UI-Kit 12   Use the padding-tb-rx and padding-lr-1x helper classes.
Hidden UI-Kit 10 UI-Kit 12 Use the hidden helper class, or use the Never when rule on the dynamic layout visibility condition.
List item   UI-Kit 12 Use the padding-2x helper class.
List item highlighted   UI-Kit 12

Use the padding-1x helper class.

Use the bg-workarea class to make the workarea with the Workarea background mixin.

Mobile action area UI-Kit 12   Use the action-area helper class.
Mobile action area header UI-Kit 12   Use the action-area, border-b-1x, and padding-l-2-x helper classes.
Modal button Array UI-Kit 12   Use the Default container format.
Modal buttons UI-Kit 12   Use the Default container format.
Mobile filter panel   UI-Kit 12 Not applicable.
Mobile Menu   UI-Kit 12 Not applicable.
Nested UI-Kit 12   Use the margin-b-1x helper class.
Nested content emphasis   UI-Kit 12 Not applicable.
Nested information UI-Kit 12   Use the Information container format along with a CSS override to remove the bottom border.
Portal header UI-Kit 12   No container format.
Rounded corners UI-Kit 10 UI-Kit 12 Use the border-t-1x and padding-t-2x helper classes.
Row divider UI-Kit 12   Not applicable.
Row divider no spacing UI-Kit 10 UI-Kit 12 Use the border-t-1x helper class.
Section divider UI-Kit 12   Use helper classes such as border-t-1x, padding-tb-2x, and margin-2x.
System message UI-Kit 12   Not applicable
Workarea UI-Kit 12   Not applicable

Text inputs and formatted text

Format Deprecated in Removed in Replace with
Assignment title UI-Kit 12   Heading 2 format
Case id UI-Kit 12  

Standard format

Add case-id-label helper class.

Category identifier   UI-Kit 12

Standard format

Add information-label helper class.

Grid display text UI-Kit 12   Standard format
On time display text UI-Kit 12  

Standard format

Add notifications-label helper class.

Past deadline display text   UI-Kit 12

Standard format

Add error-status-label helper class.

Past goal display text UI-Kit 12  

Standard format

Add warning-status-label helper class.

Work grid item UI-Kit 12   Standard format
Work identifier UI-Kit 12  

Standard format

Add label-color helper class.

Labels

Format Deprecated in Removed in Replace with
Announcement UI-Kit12   Standard format (label)
Explorer heading UI-Kit 12   Heading 3 format
Secondary information UI-Kit 12   Helper text format
SLA display UI-Kit 12  

Standard format (label or field)

Add error-status-label helper class.

Status complete UI-Kit 12  

Standard format (label)

Add status-complete helper class.

Status failure UI-Kit 12  

Standard format (label)

Add status-mobile-label helper class.

Status inprogress    

Standard format (label)

Add status-inprogress helper class.

Status unavailable    

Standard format (label)

Add status-mobile-label helper class.

Suggest Edit

100% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.