SAP/fundamental v1.3.3

on GitHub

This release continues refining the soft launched shellbar and also include enhancements and bug fixes.

Shell improvements

• The shell layout container replaces the ui
  • Height and background colors are global vars — $fd-shell-header-height, $fd-shell-header-background-color
  • Same --fixed variants available
• Button variant $fd-button--shell added for shell component buttons
• product-menu shellbar component structure adds __control wrapper and removes __titletext and __titlearrow elements
• A --shell variant added to search-input
• Many shellbar updates
  • Logo can now be applied via CSS or an image, default is markup, CSS replacement should use modifier --image-replaced and the width and height must be set
  • Action classes simplified, use fd-shellbar__action--collapsible to set actions that should collapse for mobile, use --show-always if the action should always show

CSS vars

• New $fd-support-css-var-fallback flag that can be enabled to output HEX value fallbacks for all CSS colors
  • Default is false
  • Apps that need IE11 support must generate their own CSS to use in their projects
• Color mixin added @mixin fd-var-color($property, $value, $var:null)
  • Use like @include fd-var-color("color", $fd-button-color, --fd-button-color);

Enhancements

• Project workflow updated to gulp4
• Better RTL support for button-group
• Identifiers now available in 7 sizes

Additions

• Indeterminate state for checkboxes
• Identifiers support background image
• A counter component to show unread or filtered counts
• Lots of new helpers
  • No border none on any side, fd-has-border-bottom-none, fd-has-border-begin-none`
  • Border color, fd-has-border-color-accent-10, fd-has-border-color-shell-1
  • Flex fd-has-align-items-flex-end
  • Table text align nth cols, fd-has-first-child-text-align-right, fd-has-nth-child-9-text-align-right