- SAP Managed Tags:
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.
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
Example: If you are not supporting IE11, the recommended format is
After importing fonts and icons from `@sap-theming/theming-base-content`, add the following to your css:
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.
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
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.
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
@Sisn-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.
