Table of Contents

Article

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

FormatDeprecated inRemoved inReplace with
Action areaUI-Kit 10 Default
Button barUI-Kit 10UI-Kit 12Inline middle
Grid filter barUI-Kit 10UI-Kit 12Inline grid triple
Grid filter panelUI-Kit 10 Stacked
Header detailUI-Kit 10 Inline labels left
Inline grid 30 70UI-Kit 10 

Inline

Add flex-col-30-70 helper class.

Inline grid 70 30UI-Kit 10 

Inline

Add flex-col-70-30 helper class.

Inline grid double centeredUI-Kit 10UI-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 autoUI-Kitt 10UI-Kit 12

Inline middle

Add flex-none helper class.

Inline grid triple no marginUI-Kit 10UI-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 primaryUI-Kit 10 

Inline middle

Add margin-r-3x helper class.

Portal header group secondaryUI-Kit10 

Inline middle

Add margin-r-2x helper class.

Split buttonUI-Kit 10 

Inline middle

Add margin-0 helper class.

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

Container formats

FormatDeprecated inRemoved inReplace with
Action area header no margin UI-Kit 12Use the Action area container format along with CSS overrides that remove the margins for specific use cases.
Action area no marginUI-Kit 10UI-Kit 12Use the Action area container format along with CSS overrides that remove the margins for specific use cases.
Action buttons UI-Kit 12Use the Action area container format along with the padding-b-1x helper class on the dynamic layout.
Assignment supportingUI-Kit 12 Use CSS overrides or helper classes that reference the Action area background mixin background color.
Case designer tile UI-Kit 12Use CSS overrides or helper classes that reference the Workarea background mixin background color and Borders mixin.
Case stages UI-Kit 12Use the stages helper class.
Child elementUI-Kit 10 Use the padding-b-1x and padding-l-3x helper classes.
ColumnUI-Kit 12 Use CSS overrides or helper classes to add margins, padding, and the dashed border.
Column listUI-Kit 12 Use CSS overrides or helper classes to add margins, padding, and background color.
Combo groupUI-Kit 12 No container format.
Content emphasis UI-Kit 12Not applicable.
Content emphasis table UI-Kit 12Not applicable.
Dashboard gadgetUI-Kit 12 Use the Default container format along with CSS overrides to adjust spacing for specific use cases.
Dashed separator UI-Kit 12User a helper class to add the dashed border.
Default for indentation UI-Kit 12Use the padding-tb-2x helper class.
Default for nestingUI-Kit 12 Use the Default container format along with CSS overrides to adjust padding and borders for specific use cases.
Default with no paddingUI-Kit 12 Use the Default container format along with CSS overrides to remove padding for specific use cases.
ExplorerUI-Kit 12 No container format.
Fat list itemUI-Kit 12 Use the padding-tb-rx and padding-lr-1x helper classes.
HiddenUI-Kit 10UI-Kit 12Use the hidden helper class, or use the Never when rule on the dynamic layout visibility condition.
List item UI-Kit 12Use 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 areaUI-Kit 12 Use the action-area helper class.
Mobile action area headerUI-Kit 12 Use the action-area, border-b-1x, and padding-l-2-x helper classes.
Modal button ArrayUI-Kit 12 Use the Default container format.
Modal buttonsUI-Kit 12 Use the Default container format.
Mobile filter panel UI-Kit 12Not applicable.
Mobile Menu UI-Kit 12Not applicable.
NestedUI-Kit 12 Use the margin-b-1x helper class.
Nested content emphasis UI-Kit 12Not applicable.
Nested informationUI-Kit 12 Use the Information container format along with a CSS override to remove the bottom border.
Portal headerUI-Kit 12 No container format.
Rounded cornersUI-Kit 10UI-Kit 12Use the border-t-1x and padding-t-2x helper classes.
Row dividerUI-Kit 12 Not applicable.
Row divider no spacingUI-Kit 10UI-Kit 12Use the border-t-1x helper class.
Section dividerUI-Kit 12 Use helper classes such as border-t-1x, padding-tb-2x, and margin-2x.
System messageUI-Kit 12 Not applicable
WorkareaUI-Kit 12 Not applicable

Text inputs and formatted text

FormatDeprecated inRemoved inReplace with
Assignment titleUI-Kit 12 Heading 2 format
Case idUI-Kit 12 

Standard format

Add case-id-label helper class.

Category identifier UI-Kit 12

Standard format

Add information-label helper class.

Grid display textUI-Kit 12 Standard format
On time display textUI-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 textUI-Kit 12 

Standard format

Add warning-status-label helper class.

Work grid itemUI-Kit 12 Standard format
Work identifierUI-Kit 12 

Standard format

Add label-color helper class.

Labels

FormatDeprecated inRemoved inReplace with
AnnouncementUI-Kit12 Standard format (label)
Explorer headingUI-Kit 12 Heading 3 format
Secondary informationUI-Kit 12 Helper text format
SLA displayUI-Kit 12 

Standard format (label or field)

Add error-status-label helper class.

Status completeUI-Kit 12 

Standard format (label)

Add status-complete helper class.

Status failureUI-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.

Published August 9, 2018 — Updated January 9, 2019

Related Content

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.