Fundamental Library Styles version 0.10.0 is out

Another Fundamental Library Styles milestone has been achieved – version 0.10.0 has been released!

There are new and completely refactored components included in this release in order to make them match the latest and greatest Fiori 3, support accessibility and theming.

Here is the list of the components:

Panel

The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen. You can use the component when you need to group or display information; when you want to give users the options of hiding this information; or want to show additional information on demand.

Expandable (collapsed) panel

Expanded panel

Fixed panel

Layout Panel

The Layout Panel are used to encapsulate part of content, form elements, lists, collections, etc., on a page.

Tiles

Generic Tile

Generic Tiles can be used to represent an app similar to the SAP Fiori launchpad home page. They can display different types of content, which are based on the data supplied by the app. They can contain an icon, a title, an informative text, KPIs, counters and charts.

The tiles have 2 sizes: large(11 x 11rem) and small(9.25 x 9.25rem)

The generic tile control supports two tile dimensions – 1×1 (default) and 2×1:

• Large Tile (1 x 1) – 11 x 11rem
• Large Tile (2 x 1) – 22.5 x 11rem
• Small Tile (1 x 1) – 9.25 x 9.25rem
• Small Tile (2 x 1) – 19 x 9.25rem

Launch Tile

Launch Tile With Numeric Content and Launch Icon

Launch Tile With Combined Header and Content

Launch Tile (Profile)

Launch Tile (Logo)

KPI Tile with Numeric Content

Key Performance Indicators (KPIs) are used to measure and monitor a company’s performance at a strategic and operational level. The KPI Tile control supports a limited number of digits which varies depending on the size of the tile.

KPI Tile with L-Size Numeric Content

KPI Tile with M-Size Numeric Content

KPI Tile with S-Size Numeric Content

Feed Tile

The Feed tile can be used to show new notification content in a news feed.

Badge Tile

Badges are used to display very short and important information. Use a badge on a Tile if the Tile is new or has been newly added to a page. Tiles do not display badges in action/edit mode.

Slide Tile

The Slide Tile contains a news headline, a background image, the news source, and a time stamp. A start and pause button are always displayed on touch devices and can be revealed by hovering the mouse over the tile on desktop devices. The dots on the bottom of each tile identify the number of pages they contain.

Tile in Action Mode

In action mode view, the close button is displayed on the top right-hand corner of the Tile. The action icon is only an indicator and is displayed on the bottom right-hand corner. The click/touch area fills the entire Tile, excluding the click/touch area reserved for the close button.

Line Tile

The line tiles are a text only version of a launch tile. It acts as a link agglomeration in one container. The title is mandatory while the subtitle is optional.

Toolbar and Overflow 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. It is most commonly used to display buttons, labels, selects and various other input controls.

Toolbar offers few design types (solid, transparent, auto, info, and title.

The component also offers 2 types of spacers (auto and fixed). You can add also separators between the items.

The Overflow toolbar can be used to add additional elements when extra space is required.

Step Input

The step input component allows the user to change the input values in predefined increments (steps). You can use the step input if you want the user to adjust amounts, quantities, or other values quickly, or toadjust values for a specific step (for example, in a shopping cart).

Accessibility

When it comes to accessibility guidelines we take the task very seriously and work hard to meet those guidelines. Delivering accessible applications is a task that involves all the layers and roles during the design and development phases. We can only achieve this if we work together. It requires the design language and guidelines to reflect certain qualities such as color and contrasts. It requires the components to be accessible and respect the ARIA specifications. It requires keyboard support, and many other requirements.

Accessibility cannot be achieved only by one team or one library.

Fundamental Library’s team is working with design teams, application teams, accessibility experts. Fundamental Library Styles is applying the Fiori 3 design which is created with accessibility in mind. The library is also trying to apply the right ARIA attributes so the components are accessible.

The full release notes can be find here.

More cool and new things to come. We are more than excited to keep this momentum.

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.