Skip to Content
Technical Articles

Fundamental Library Styles – version 0.8.1

We were able to release version 0.8.1 of Fundamental Library Styles more than 10 days ago but I didn’t have time sit and list all the improvements and features we included in the version.

Removing SAP Icons and 72 fonts from the distribution package

As of version 0.8.0 Fundamental Library Styles does not include the SAP Icons and font 72 as part of the package. The main reason is that those assets are not part of Fundamental Library. They come from the package @sap-theming/theming-base-content and in case there are changes or updates they should come from the original package. Also this way the application can add the specific font file instead of downloading all the files. This change will have a positive performance effect on the application – less data will be transferred over the internet.

Example: If you are not supporting IE11, the recommended format is woff2. If supporting IE11, use woff.

After importing fonts and icons from `@sap-theming/theming-base-content`, add the following to your css:

@font-face {
    font-family: "72";
    src: url("path/to/fonts") format("woff"); // Bold, Light, Regular available in woff and woff2
    font-weight: normal;
    font-style: normal;
};
@font-face {
    font-family: "SAP-icons";
    src: url("path/to/icons") format("woff"); // available in woff, woff2 and ttf
    font-weight: normal;
    font-style: normal;
}

 

Message Box

Message Box a special dialog that allows you to display messages to the user. Compared to the message popover, you can use the message box to display messages that are not related to a field on the UI, such as technical errors. These messages could be Standard (Default), Confirmation, Error, Success, Warning and Information (Neutral). The Message Box component inherits the look and the basic behaviour (excludes dragging and resizing) of the Dialog component.

The Message Box follows the Dialog structure.

The available options are:

Standard Message Box

Confirmation Message Box

Error Message Box

Success Message Box

Warning Message Box

Information Message Box.

There is a way to render the Message Box without icons. Also the component offers different horizontal paddings.

 

Object Status

The object status is a short text that represents the semantic status of an object. It has a semantic color and an optional icon. Typically, the object status is used in the dynamic page header and as a status attribute of a line item in a table.

Object Status can display the semantic status of an object:

Negative, Critical, Positive, Informative, and Neutral

Object Status with icons only

Object Status with text only

Object Status with 8 generic indication colors

The Object Status can be put as a link, which has hover effect for non-touch devices.

The component also supports optional inverted visualization – Inverted Object Status. It determines whether the background color reflects the set state instead of the control’s text. Use the inverted object status if the information is crucial for the user’s actions and needs to stand out visually

Inverted Object Status with 8 generic indication colors

 

Calendar/Date Picker

This was the biggest change in the current version.

The calendar control lets users select a single date, multiple days, entire week(s), or a date range using touch, mouse, or keyboard input. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.

An example of the calendar with days. It includes some special days. The library support up to 20 different colors for special days – highlights. A legend can be used to define the meaning of the highlights.

An example with Month View

An example with Year View

An example with Year Ranges View

Compact Mode of the Day View

Landscape Mobile Day View

Portrait Mobile Day View

 

The full release notes can be find 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.

Be the first to leave a comment
You must be Logged on to comment or reply to a post.