0.10.0 Breaking Changes - SAP/fundamental-ngx GitHub Wiki

Below is the list of all breaking changes paired to the 0.10.0 release. They are listed in no particular order and accompanied by a short explanation on why the change was necessary. Before and after examples are also provided for most of the changes.

Package Name Change

Before:

import { FundamentalNgxModule } from 'fundamental-ngx';
...
@NgModule({
    ...
    imports: [FundamentalNgxModule],
})

After:

import { FundamentalNgxCoreModule } from '@fundamental-ngx/core';
...
@NgModule({
    ...
    imports: [FundamentalNgxCoreModule],
})

Mega Menu

Introduction of mega menu Commit
Example of usage:

<fd-mega-menu>
    <ul fd-mega-menu-list>
        <fd-mega-menu-item>
            <a fd-mega-menu-link>Item 0</a>
            <li fd-mega-menu-subitem>
                <a fd-mega-menu-sublink>Sub Item 1</a>
            </li>
            <li fd-mega-menu-subitem>
                <a fd-mega-menu-sublink>Sub Item 2</a>
            </li>
            <li fd-mega-menu-subitem>
                <a fd-mega-menu-sublink>Sub Item 3</a>
            </li>
        </fd-mega-menu-item>
        <fd-mega-menu-item>
            <a fd-mega-menu-link>Item 1</a>
            <li fd-mega-menu-subitem>
                <a fd-mega-menu-sublink>Sub Item 1</a>
            </li>
            <li fd-mega-menu-subitem>
                <a fd-mega-menu-sublink>Sub Item 2</a>
            </li>
            <li fd-mega-menu-subitem>
                <a fd-mega-menu-sublink>Sub Item 3</a>
            </li>
        </fd-mega-menu-item>
        <fd-mega-menu-item>
            <a fd-mega-menu-link>Item 2</a>
        </fd-mega-menu-item>
    </ul>
</fd-mega-menu>

Menu Addon

Introduction of menu addon Commit
Example of usage:

<fd-menu fd-menu-addon>
    <ul fd-menu-list>
        <li>
            <div fd-menu-item-addon>
                <fd-icon [glyph]="'cart-5'"></fd-icon>
            </div>
            <a href=""
               fd-menu-item>Option 1</a>
        </li>
    </ul>
</fd-menu>

Select Component

Add [maxHeight] property to Select Component Commit

<fd-select [(value)]="selectValue"
           [maxHeight]="'250px'"
           placeholder="Select an option...">
    <fd-option value="apple">Apple</fd-option>
    ...
    <fd-option value="pineapple">Pineapple</fd-option>
</fd-select>

Token Component

Add disabled state to token component - Commit

<fd-token *ngFor="let token of selected"
          [disabled]=true
          (onCloseClick)="close(token)">
    {{token.name}}
</fd-token>