Fundamental Library Styles – version 0.6.0

Another exciting version (0.6.0) of Fundamental Library Styles has been released!

Let’s dive and take a look what is included:

Shellbar

The first component that was migrated to the latest Fiori 3 specifications is Shellbar. It offers consistent, responsive navigation across all products and applications. It includes support for branding, product navigation, search, notifications, user settings, and CoPilot. This is a composite component comprised of mandatory and optional elements.

A basic usage – minimum shellbar for a single application product with only user settings. If no user thumbnail is available then display initials.

An example that includes the product menu for navigating to applications within the product and shows a search box.

When a product has multiple links, the product links should collapse into an overflow menu on mobile screens. All actions, except for the user menu, should be collapsed.

This example shows an application with CoPilot, integration with other products, and a customized logo.

The same example with an expanded product switch.

Bar

Bar is a freshly implemented component. It is a container that holds titles, buttons and input controls. Its content is distributed in three areas – left, middle and right. It is a basis for different components:

Bar with 3 areas(desktop, tablet and mobile

Bar as a sub header – left and right areas

Bar as a header and sub-header

Bar as a footer

Bar as a floating footer

Select, Multi Input and Combobox have been migrated to the latest Fiori 3:

Select

Select is a component commonly used to enable user to select an item from a predefined list. It should be used when there are less than 12 items to choose from.

Here are few variants and use cases:

Collapsed select in Cozy and Compact Modes

Expanded select

The Select component can be customized by adding additional information in additional columns

Select with two columns

Select with two text columns and one icon column

In cases where the list items need to be categorized into groups, it is possible to add headers for each category.

Select where the items are not wrapped.

Select where the field and menu lengths are matching.

Select also support semantic mode with all the supported states.

Combobox

Combobox is a pattern in Fundamental Library Styles as it is not implemented as a standalone component as it is a composition of few already existing ones. The Combobox Input component is an opinionated composition of the input group, popover and list components. It allows users to select an item from a predefined list. It provides an editable input field for filtering the list, and a dropdown menu with a list of the available options. If the entries are not validated by the application, users can also enter custom values. It supports all the types like Select.

Multi Input

Multi Input component is an opinionated composition of the input group, popover, checkbox, list and token components. It is designed as a pattern and it is not a standalone component. It allows users to enter multiple values which are displayed as a tokens. It provides an editable input field for filtering the list, and a dropdown menu with a list of the available options. If the entries are not validated by the application, users can also enter custom values.

Collapsed and expanded multi input examples with preselected items.

Multi Input where the body length doesn’t match the field length.

Multi Input with semantic messages.

All the components that are migrated to the latest Fiori 3 are also tested in different browsers (Internet Explorer 11, Edge, Firefox, Chrome and Safari). The components are using the cross technology theming parameters from SAP Theming Base Content package which makes them theme-able. Another aspect that is reflected into the latest changes is the accessibility.

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.