0.12.0 Breaking changes

The 0.12.0 Patch is the biggest patch so far.

We migrated our project to fundamental-styles 0.3.0. You can find all breaking changes included in this release in the Breaking Changes Wiki. **If you are planning to migrate from an older version to 0.12 then you should be prepared for some breaking changes that fundamental-styles version 0.3 brings. There are some classes being removed, others renamed. These changes have been done to align with Fiori 3 guidelines.

We also introduced Angular 8 support and enabled IVY support. This means the all Library versions as of 0.12.0 are compiled with Angular 8 and can be used by applications using angular 8 or newer.

Below is the list of all breaking changes paired to the 0.12.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.

Library Usage

• Right now if you don't use Angular CLI's command to add core library ng add @fundamental-ngx/core, you should run npm install fundamental-styles && npm install @fundamental-ngx/core and add to angular.json styles array:

"node_modules/fundamental-styles/dist/fonts.css",
"node_modules/fundamental-styles/dist/icon.css"

instead of

"node_modules/fundamental-styles/dist/fundamental-styles.min.css"

Every single component import css for itself, so only fonts and icons should be added.

All Components

• Some of components became component, but can be used as a directive for example button.

Button

• Remove main and toolbar types.

Combobox

• Add [open] Input, to change the open state
• Add (openChange) Output, to make possible subscribing to open state change
• Add [closeOnOutsideClick] Input, which works same as on PopoverComponent
• Add [openOnKeyboardEvent] Input, to add better control on open state in combobox

Forms

• To add any styling to native form elements (input, select, textarea), you should add fd-form-control directive

Inline Help

• Add inlineHelpIconStyle and inlineHelpContentStyle input to be able, to style the elements inside components by passing some objects to Inline Help.

Input group

• Introduction of new directives (InputGroupAddOnDirective, InputGroupInputDirective, InputGroupTextareaDirective)
• Thanks to these directives there is way to define own separated addon or input inside input-group component. Examples are added as a complex input-group

Layout Grid

• Now replaces panel grid example:

Before:

<fd-panel-grid [col]="6">
    <fd-panel [columnSpan]="2">
        <fd-panel-body>
        </fd-panel-body>
    </fd-panel>
    <fd-panel [columnSpan]="2">
        <fd-panel-body>
        </fd-panel-body>
    </fd-panel>
<fd-panel-grid>

After:

<fd-layout-grid [col]="6">
    <fd-panel fd-layout-grid-span [columnSpan]="2">
        <fd-panel-body>
        </fd-panel-body>
    </fd-panel>
    <fd-panel fd-layout-grid-span [columnSpan]="2">
        <fd-panel-body>
        </fd-panel-body>
    </fd-panel>
<fd-layout-grid>

More Information on Layoud Grid page in Docs Page.

List Component

• ListCheckbox completely removed, now to keep the functionality, you should use fd-form-control directive on checkbox

Before:

<li fd-list-item>
    <fd-list-checkbox formControlName="listItem1">List Item 1</fd-list-checkbox>
</li>

After:

<li fd-list-item>
    <input type="checkbox" formControlName="listItem1" fd-form-control [id]="'listItem1'"/>
    <label [for]="'listItem1'">List item 1</label>
</li>

Notifications

• Introduction of notification (https://github.com/SAP/fundamental-ngx/pull/1367)
• Example of usage:

<div>
    <button fd-button (click)="openNotifications()">Create Notifications</button>
</div>
<div class="docs-notifications-inline-container" #vc></div>

Product Switch

• New Component Product Switch with default drag and drop.
• Whether component detects, that the window is too small, to fit products, it changes to listMode
• Example of usage:

<fd-product-switch>
    <fd-product-switch-body
        [dragAndDropEnabled]="false"
        [products]="productSwitcher"
        (productsChange)="handleProductsChange($event)">
    </fd-product-switch-body>
</fd-product-switch>

Scroll Spy

• There is new Input [targetOffset] in pixels, it adds offset the element.

Search Input

• Search input is removed on shellbar and no longer exist in the code. Please use combobox instead.
• It is propagated to shellbar

Shellbar

• Search Input component is changed to Combobox inside shellbar.
• Product Switch is now separated component. Product Switch also deal with responsiveness by itself. Before

<fd-shellbar-product-switcher
       [productSwitcher]="productSwitcher">
</fd-shellbar-product-switcher>

After

<fd-product-switch>
    <fd-product-switch-body
        [products]="productSwitcher">
    </fd-product-switch-body>
</fd-product-switch>

• Types added to the data passed to shellbar.

Table

• Now every single element should have directive, to keep styling Before

<table fd-table>
    <thead>
        <tr>
            <th>Column 1</th>
        </tr>
    <tbody>
        <tr *ngFor="let row of tableRows; let i = index">
            <td>{{row.column1}}</td>
        </tr>
    </tbody>
</table>

After

<table fd-table>
    <thead fd-table-header>
        <tr fd-table-row>
            <th fd-table-cell>Column 1</th>
        </tr>
    </thead>
    <tbody fd-table-body>
        <tr *ngFor="let row of tableRows; let i = index" fd-table-row>
            <td fd-table-cell>{{row.column1}}</td>
        </tr>
    </tbody>
</table>

Tile Grid

• fd-tile-grid directive is removed - Commit

Tile

• Added fd-tile-text and fd-product-tile-text directives - Commit Before

<fd-tile>
    <div fd-tile-content>
        <h2 fd-tile-title>
            Tile Title
        </h2>
        <p>Tile Description</p>
    </div>
</fd-tile>

After

<fd-tile>
    <div fd-tile-content>
        <h2 fd-tile-title>
            Tile Title
        </h2>
        <p fd-tile-text>Tile Description</p>
    </div>
</fd-tile>