Skip to Content
Technical Articles

Fundamental Styles version 0.19 is out

It has been more than 2 months since the last release of Fundamental Library Styles. This release (0.19) brings quite some new features and components and a lot of improvements. Some of those components are brand new or existing components with new design. We are proud to release them first. They were available as release candidates for quite some time (e.g. Vertical Navigation).

Let’s start with the components:

Icon Tab Bar

This was one of the biggest components we have brought in the library. It includes huge list of features and options. It reflects the very recent design by SAP Design.

It is a component meant to be used for navigation within an object, or as a filter. Each tab of the component can link to a different content area or a view.

Icon%20Tab%20Bar%20with%20text-only%20variant

Icon Tab Bar with text-only variant

This is the most common type. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page. The labels of the tabs do not get truncated. The full text is always shown.

IconTabBar%20with%20text%20only

Icon Tab Bar with text only variant and semantic colors

IconTabBar%20with%20Text%20and%20Counters

Icon Tab Bar with counters and text

The counters are shown on top of the labels.

IconTabBar%20with%20Icons%20only

Icon Tab Bar with icons only

The Icon tabs are rounded tabs that can be populated with any icon. The labels in this case are omitted and counters are optional.

IconTabBar%20with%20icons%20and%20labels

Icon Tab Bar with icons, text and counters

Icon Tab Bar with icons, text and counters in semantic colors

IconTabBar%20process

Icon Tab Bar as process

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

IconTabBar%20process%20with%20semantics

Icon Tab Bar as process in semantic colors

IconTabBar%20process%20with%20text

Icon Tab Bar as process with text only

IconTabBar%20filter

Icon Tab Bar as filters

The tab bar as a filter has two parts:

  • An “all” tab on the left – shows the total number of items, and describes the type of item (for example, 189 Products).
  • Tabs for specific filters – the tab text indicates the filter attribute. It is recommended to show a counter on every tab.

IconTabBar%20overflow

Icon Tab Bar with overflow

IconTabBar%20overflow%202

Icon Tab Bar with overflow

Tabs can have an overflow to either sides of the control. Depending on if the order is fixed (process steps) or can be rearranged (tabs). For processes with a fixed order, an overflow to both sides is used. For tabs that can be rearranged, only one overflow will be displayed on the right side.

UniversalIconTabBar%20Single%20Click%20Area

Universal Icon Tab Bar Single Click Area

When there is only one click area per tab (also including tabs with sub-items), regular tabs get selected immediately after the click is released. Tabs with sub-items trigger the expansion of a menu (Popover) showing its sub-items. The parent tab title remains displayed when its child is select.

UniversalIconTabBar%20Multi%20Click%20Area

Universal Icon Tab Bar Multi Click Area

In case of two click areas for tabs with sub-tabs, the behaviour for regular tabs (without sub-items) remains unchanged, like described above the tabs get selected immediately. Tabs with two click areas behave differently: when the main part of the tab is clicked, it is highlighted and then selected immediately. Clicking the second area opens a menu (Popover) containing the sub-items. Once a sub-item is clicked, the main tab is highlighted as selected.

IconTabBar%20Badges

Icon Tab Bar with badges

IconTabBar%20Badges

Icon Tab Bar with badges

IconTabBar%20Badges

Icon Tab Bar with badges

IconTabBar%20Badges

Icon Tab Bar with badges

The Tab attention badge is applied as a visual eye-catcher to indicate a change within a Tab. The badge can be animated by adding an additional modifier class. In this case the badge appears for a few milliseconds and then disappears.

NavigationIconTabBar%20with%20overflow

Navigation Icon Tab Bar with overflow

NavigationIconTabBar%20with%20Multi%20Click%20Area

Navigation Icon Tab Bar with multi click area

NavigationIconTabBar%20with%20Single%20Click%20Area

Navigation Icon Tab Bar with single click area

The Navigation Tab Bar is the main/default navigation displayed on the launchpad home page. It offers the user an easy access to multiple pages per space. The background color of the Shell Navigation is connected the Home/Shell Header to properly differentiate the global shell navigation versus any application specific navigation. The Navigation Bar snaps to top and remains visible while scrolling. It is not visible in App view.
The implementation is based on UniversalIconTabBar with some different color parameters that are specific to Shell Bar and Tool Header.
If there are more Tabs than the screen can accommodate, the remaining Tabs move into an Overflow.

The component supports semantic colors, horizontal paddings, different backgrounds, content density, responsive paddings. You can checkout all the example of the component documentation page.

Tool Header

ToolHeader is a component that is found in most Business Technology Platform products, most commonly as a part of the Tool Page Layout. The tool header inherits its functionality from the overflow toolbar and its visual design from the shell bar. You may consider using it in your application if it is somewhat or purely technical in nature, and the application’s main use cases are in development, administration, or configuration.

ToolHeader

Tool Header with components

ToolHeader

Tool Header with side navigation menu

The side navigation menu button is used to collapse/expand the side navigation. It is not recommended to use horizontal and responsive paddings when this button is present.

ToolHeader

Tool Header with side navigation menu and menu buttons

ToolHeader

Tool Header with responsive padding

Tool%20Header%20with%20horizontal%20paddings

Tool Header with horizontal paddings

Vertical Navigation

Vertical Navigation is component that can be used as an alternative to the Horizontal Navigation.
This navigation type is composed by two distinct item levels:

  • First Level items – always visible, can be either navigable in and of themselves or be a container for Second Level items (it should not be both)
  • Second Level items → Are always contained by a First Level item, and can have their visibility toggled by this First Level item. They are always only navigable\

This component is a brand new one and Fundamental Library is the first to release it officially.

Vertical navigation can be viewed in three different states:

  • Expanded: everything is shown; icons and/or text.
  • Condensed: only icons are shown; text-only condensed state is not supported.
  • Off-canvas: side navigation is completely off-screen, and can be triggered via the menu icon in the Tool Header. Note: It is recommend to use only two states per device.

Vertical%20Navigation%20-%20default

Vertical Navigation – default

The default vertical navigation is comprised of several navigation list items.

Vertical%20Navigation%20-%20condensed%20mode

Vertical Navigation – text only

A vertical navigation list does not need to have icons. However this is only available in expanded mode.

Vertical%20Navigation%20-%20condensed%20mode

Vertical Navigation – condensed mode

In condensed mode, only icons are shown unless some navigation items have second levels and the second level is expanded.

 

All the possible combinations of navigation indication are visualized below. When a second level item has been navigated to and the second list has been collapsed, the indicator is shown on the right of the corresponding first level item, but the text and icon color do not change.

Vertical%20Navigation%20-

Vertical Navigation – active item

Vertical%20Navigation%20-%20condensed%20mode%20with%20active%20item

Vertical Navigation – condensed mode with active item

Vertical%20Navigation%20-%20Grouping%20Headers

Vertical Navigation – Grouping Headers

The Vertical Navigation items can be further visually grouped using the Group Header List Item.

 

Extended Busy Indicator

We added new options to the existing Busy Indicator components. If more information needs to be displayed with the loading animation, it is replaced by the Extended Busy Indicator

Extended%20Busy%20Indicator

Extended Busy Indicator

Extended%20Busy%20Indicator%20inside%20Message%20Toast

Extended Busy Indicator inside Message Toast

 

Another 50+ more improvements and updates.

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 or visit out brand new Topic Page

Feel free to raise any questions or try our libraries in case you didn’t have a chance.

Join us at our very first virtual conference on August 11, 2021 – website.

Fundamental%20Conference

Fundamental Conference

Be the first to leave a comment
You must be Logged on to comment or reply to a post.