The Fundamental Library team is excited to announce that it has released version 0.10.0 of its UI Kit!
In case you haven’t heard of Fundamental Library, it’s a collection of UI libraries offering ready-to-use SAP Fiori components across multiple different frameworks such as HTML/CSS, Angular, React and Vue.
Find out more about the project here: Fundamental Library – What It Is and What It Is Not.
In this release, the UI kit has been completely redesigned from the ground up. 15 components have been added, and the already existing components have been updated to match the latest SAP Fiori specifications.
Latest Components
Avatar
|
The avatar component displays an image, icon or user initials, and is used for user profiles, placeholder images, icons or business-related images i.e. product photos. |
Menu
|
The menu component displays a dropdown menu with multiple options, which is usually triggered by a menu button. |
Message Box
|
The message box is 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. |
Message Toast
|
A message toast is a small, non-disruptive popup for success messages that disappear automatically after a few seconds. |
Notifications
|
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. |
Panel
|
The panel is a container that is usually used for grouping and displaying content. |
Responsive Table
|
The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details. |
Table Select Dialog
|
The table select dialog allows users to select from a comprehensive table containing multiple attributes or values. Within the dialog, users can access additional information about the items in the table without needing to select them first. |
Table Personalization Dialog
|
The table personalization dialog can be used to modify the display and settings of a responsive table. |
Side Navigation
|
The side navigation area can be used to display navigation structures with links that change the content in the main area. |
Step Input
|
The step input control allows users to change input values in predefined increments (steps). |
Tabs
|
Tabs are based on a folder metaphor and used to separate content into different sections. |
Time Picker
|
The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input. |
Toolbar
|
The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on. |
Icon Tab Bar
|
The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter. |
(Note: The Table Select Dialog and Table Personalization Dialog components were designed for the Responsive Table.)
There have also been improvements made to the organization of components in the Sketch file with respect to feedback from fellow designers using our kit.
If you have any feedback and/or questions regarding the UI kit, please feel free to reach out to me via the comments section. I would be happy to connect and consider your ideas/suggestions, as well as answer any questions you may have!
SOURCES
https://experience.sap.com/fiori-design-web/
https://sap.github.io/fundamental/
