After more than a month since we released the previous version of Fundamental Library Styles, version 0.11.0 is out.
Why did it take so much time to make the release? There are many reasons. Let’s iterate them:
Website and testing
Our landing page moved here.
We migrated our website over storybook. This helps us documenting and testing our components in one place. The same examples are used for testing and for documenting. Take a look and let us know what you think about it.
Cleanup
We have done huge cleanup. This cleanup started few months ago by migrating our component to the latest Fiori 3 design specifications, making our components theme-able and accessible.
Apart from migrating and deprecating old components we also dropped the support to the old Fundamental CSS Variables. This was one of our promises to make the library more Fiori 3 and less opinionated. In case you were using the old CSS variables we made a mapping that will help you migrate.
Another part of the cleanup and refactoring was dedicated for component accessibility.
New features and components
Date picker/Calendar
A nice enhancement to the Calendar(date picker) are today selection and today navigation:
- The today selection button in the footer selects today’s date in the system or user-preferred timezone and closes the DatePicker popover.
Today Selection
- The today navigation button in the header navigates focus to today’s date in the system or user-preferred timezone, selects it but does not close the DatePicker popover. This is useful in displaying the DatePicker on mobile where DatePicker closes when user presses the OK button.
Today Navigation
File Uploader
this is a brand new component which was added to version 0.11.0. It allows the user to select the files from the system to upload. The File Uploader component is an opinionated composition of the input and button components.
File Uploader
Table
This component was implemented from scratch and includes a lot of features. 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.
A line item contains several data points sorted into columns. A data point refers to a unit of information, such as a number, a text, a unit of measurement, and so on, which can be used to form the content of a table, form or other control. One data point is usually displayed by a control, such as a text, object status, or input field. A control can display more than one data point, for example, by concatenating text.
In contrast to traditional tables, a “cell” of the responsive table is not limited to displaying only one control, and therefore a single cell can present far more than one data point.
Table without borders
We support 3 types of Content Density: cozy(default), compact, and condensed:
Compact Table
Condensed Table
We support different states for making the table more interactive visually:
Highlighting a whole row on hover
Highlighting a cell from a hovered row
Selection States:
Cozy Table – selection
Compact Table – selection
Condensed Table – selection
Those and more examples can be found here.
We are happy to see our usage keep increasing.
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.
Original Article:
https://blogs.sap.com/2020/07/24/fundamental-library-styles-version-0.11.0-has-been-released/