What’s New

Foundation

SAP 72 Semibold Weight 

Updated Typography! New semibold weight has been applied across the design kit and SDK. Formerly black font weight is now bold, and bold is updated to semibold. Exceptions to the approach include navigation bar title, KPIs, and card headers. 

UI Components & Patterns

Avatars and Images

Updated Component! Multiple avatars can be grouped horizontally in an avatar stack. The avatar stack can now also display an optional label in front of (leading) or after (trailing) the avatar stack. However, we do not recommend using both the leading and trailing labels together.

Banners

Updated Component! By default, a banner partially covers the content below it. Now, banners can also appear between elements, making sure they don’t cover any content. In this position, the banner pushes the content below it down.

Buttons

Updated Component! The new variant of loading state in buttons (“FUILoadingButton”) can be applied to a button when a user-triggered non-disruptive progress is being processed. The original icon and/or text is replaced with an activity indicator and/or loading message.

Cards

Updated Component! The card footer now allows using an overflow button if there are more than two buttons or when the buttons do not fit into the footer’s width. Tapping on the overflow button shows the user the additional buttons in a menu.

Feedback Indicators

Updated Pattern! The design of the progress and processing indicators has been updated with thicker indicator strokes, a light grey track, and the SAP Fiori icon inside. 

Form Cells

Updated Components! List picker form cell, in-line signature form cell, and pickers now have required field behavior available.  

Illustrated Message

Updated Component! The illustrated message component now supports up to two action buttons. These buttons are flexible in layout and button type to better accommodate more use cases.

Segmented Control

Updated Component! Segmented control colors are updated to align with the native iOS control.  

Sidebar Pattern

Updated Pattern! The visual design of the sidebar has been enhanced. Additionally, the sidebar has a new edit mode to rearrange and to hide or show items.

Skeleton Loading

Updated Pattern! Skeleton loading for object headers has been added to the design kit. It is used to replace the object header on a screen during skeleton loading.