Fundamental Library Styles version 0.12.0 is out!

After 2 months of heavy work, we are pleased to announce that version 0.12.0 of Fundamental Library Styles has been released!

This is the biggest release yet! It includes 12 new components were introduced and two components (Tree and Notification) have been re-implemented to reflect the latest Fiori 3 design. Tons of other improvements and fixed were included in that release.

Let’s go over the new components:

Wizard

The wizard guides a user through a long or unfamiliar task by dividing it into sections, revealing information in an easy and digestible way. It consists of a walkthrough screen, where the user is prompted to input required information and upon completing a section, the next sections subsequently follow in a prescribed order; and the summary page, where the form is displayed in read-only mode for assessment and final submission.

Wizard with labeled steps

Steps without labels

Mobile version with stacked steps

Carousel

The carousel component is used for browsing through a set of images. One or several items can be displayed at a time, and the user can navigate to either the next or the previous item.

Cards

A Card is an app content container that represents a task or a topic on an overview page. It is a smart component that uses UI annotations to render its content. Cards can show application content from different sources side by side – without requiring the user to switch screens. Cards can display different content:

• a chart
• a list
• a table
• a informative text
• a combination of two elements

Analytical Card

List Card

Table Card

Object Card

Tree

Unlike tree tables, trees are used for rather basic data. The tree is like a list containing hierarchical data. It acts as a container for items, with the possibility to expand and collapse nodes. The tree changes the indentation per level dynamically when the user expands a node, based on number of levels currently showing.

Tree with semantically highlighted rows

Tree with multi-selection on the left

Tree with single-selection on the left

Notification

Notifications are used to relay information to the user about a situation or task that requires their input. They can notice and access the notifications by the bell icon in the shell bar on the top-right of the screen. In the notification popover, they take immediate action, navigate to the source of a specific notification or in the case of a notification group, they can sort the list items in various ways.

Notification group

Mobile version of Notification

Mobile Notification Group

Message Page

A message page gives feedback to the user when an app or list is empty or if an error has occurred.

Grid Table

Grid tables can contain various input elements inside of cells.

Rating Indicator

The rating indicator displays a group of icons or images (usually stars) that indicate a rating. It allows users to rate content on a numeric scale, typically from 1 (lowest) to 5 (highest).

Half values

Custom Icons

Different Values

Action Sheet

An action sheet consists of a list of options a user can select from to complete an action. Actions can be clustered if there is not enough space on the screen.

Desktop Action Sheet

Mobile Action Sheet

Feed Input

The feed input component is specifically designed for the users to type their own notes or comments and post them to a corresponding feed.

Object Identifier

The object identifier is a short text that represents the key identifier of an object, and can be displayed in various types of containers, tables, panels, popovers and more.

Object Number

An object number represents a numeric attribute of an object and its unit. The object number should be displayed with semantics to provide more insight to the user about the object’s value.

Object Marker

Object marker indicates the technical status of an object.

Title

A title component whose semantic level and visual appearance can be set separately, providing flexibility in design while adhering to accessibility best practices.

The full release notes can be found here.

Stay tuned for more updates. Want to read more blog posts about Fundamental Library? Check these out.

Feel free to raise any questions or try our libraries in case you didn’t have a chance.