Fundamental Library Styles version 0.11.0 has been released

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.