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