0.13.0 Breaking Changes and Features - SAP/fundamental-ngx GitHub Wiki

Breaking Changes

Checkbox

  • New component CheckboxComponent
  • FormControlDirective does not support input type="checkbox" elements

Dropdown

  • Dropdown is marked as deprecated, will be removed in 0.14.0
  • Instead of it we recommend to use button with menu option.

Forms

  • FormControlDirective does not support input type="checkbox" and input type="radio" elements, there are new component related to these elements.

InputGroup

  • InputGroupSearchComponent is removed. It can be replaced by basic InputGroupComponent with close icon.

Radio

  • There is completely new module RadioModule with fd-radio component.
  • FormControlDirective does not support input type="radio" elements anymore.

SideNavigation

  • Added NestedList directives, most of side-navigation components/directives are removed Before:
<fd-side-nav>
    <div fd-side-nav-list>
        <fd-side-nav-item>
            <a [attr.href]="'#'" fd-side-nav-link>
                <fd-icon [glyph]="'home'" [size]="'l'"></fd-icon>
            </a>
        </fd-side-nav-item>
        <fd-side-nav-item>
            <a [attr.href]="'#'" fd-side-nav-link>
                <fd-icon [glyph]="'home'" [size]="'l'"></fd-icon>
            </a>
        </fd-side-nav-item>
        <fd-side-nav-item>
            <a [attr.href]="'#'" fd-side-nav-link>
                <fd-icon [glyph]="'home'" [size]="'l'"></fd-icon>
            </a>
        </fd-side-nav-item>
        <fd-side-nav-item>
            <a [attr.href]="'#'" fd-side-nav-link>
                <fd-icon [glyph]="'home'" [size]="'l'"></fd-icon>
            </a>
        </fd-side-nav-item>
    </div>
</fd-side-nav>

After

<fd-side-nav>
    <div fd-side-nav-main>
        <ul fd-nested-list [textOnly]="false">
            <li fd-nested-list-item>
                <a fd-nested-list-link>
                    <span fd-nested-list-icon [glyph]="'menu'"></span>
                    <span fd-nested-list-title>Link 1</span>
                </a>
            </li>
            <li fd-nested-list-item>
                <a fd-nested-list-link>
                    <span fd-nested-list-icon [glyph]="'home'"></span>
                    <span fd-nested-list-title>Link 2</span>
                </a>
            </li>
            <li fd-nested-list-item>
                <a fd-nested-list-link>
                    <span fd-nested-list-icon [glyph]="'settings'"></span>
                    <span fd-nested-list-title>Link 3</span>
                </a>
            </li>
            <li fd-nested-list-item>
                <a fd-nested-list-link>
                    <span fd-nested-list-icon [glyph]="'settings'"></span>
                    <span fd-nested-list-title>Link 4</span>
                </a>
            </li>
        </ul>
    </div>

    <div fd-side-nav-utility>
        <ul fd-nested-list [textOnly]="false">
            <li fd-nested-list-item><a fd-nested-list-link>
                <span fd-nested-list-icon [glyph]="'menu'"></span>
                <span fd-nested-list-title>Link 1</span>
            </a></li>
            <li fd-nested-list-item><a fd-nested-list-link>
                <span fd-nested-list-icon [glyph]="'home'"></span>
                <span fd-nested-list-title>Link 2</span>
            </a></li>
        </ul>
    </div>
</fd-side-nav>

Features

Busy Indicator

  • new component

Combobox

  • new [state] option is added
  • resetDisplayedValues method introduction.
  • New [buttonFocusable] flag added

Datepicker

  • new [state] option is added
  • new [locale] and [format] options added. Introduction of angular's DatePipe, to deal with formatting values from FdDate to string.
  • New [buttonFocusable] flag added

DateTimePicker

  • new [state] option is added
  • new [locale] and [format] options added. Introduction of angular's DatePipe, to deal with formatting values from FdTimeDate to string.
  • New [buttonFocusable] flag added
  • New [keepTwoDigitsTime] flag, to keep two digits for less than 10 values on hours/minutes/seconds input.

Forms

  • FormMessage component has got changed [state] to 'success' | 'error' | 'warning' | 'information'
  • FormControl component, now it supports the compact mode and has changed [type]: 'valid' | 'invalid' | 'warning' | 'information'
  • FormLabel got new [checkbox], [radio] and [toggle] options, to define if it's used along with these input elements

InputGroup

  • new [state] option is added
  • Now it allow to use more than 1 addon per side.

LocalizationEditor

  • new [state] option is added
  • New [buttonFocusable] flag added

MultiInput

  • new [state] option is added
  • New [buttonFocusable] flag added

Popover

  • Added new [additionalClasses] option, which is ist of additional classes, that will be added to popover container element

Select

  • Added unselectMissingOption option to prevent removing chosen option, when option array is still not present.

Shellbar

  • Added ShellbarSideNavigationDirective, to integrate side navigation with shellbar.

Time

  • New [keepTwoDigits] flag, to keep two digits for less than 10 values on hours/minutes/seconds input.

TimePicker

  • new [state] option is added
  • New [buttonFocusable] flag added
  • New [keepTwoDigitsTime] flag, to keep two digits for less than 10 values on hours/minutes/seconds input.

Toggle

  • Now have semantic and compact modes.
⚠️ **GitHub.com Fallback** ⚠️