0.16.0 Breaking Changes - SAP/fundamental-ngx GitHub Wiki

Breaking Changes

General

In case of migrating to ngx 0.16.0 - Remove node_modules/fundamental-styles/dist/fonts.css file import from angular.json
Fonts imports should be included manually, take a look at Project Configuration here
Angular 9 is now supported

Button (fd-button)

button group component changed to segmented button

Before:

<fd-button-group>
    <button fd-button-grouped [glyph]="'survey'" (click)="setLocaleIcon(0)" [state]="isSelectedIcon(0)">
        survey
    </button>
    <button fd-button-grouped [glyph]="'pie-chart'" (click)="setLocaleIcon(1)" [state]="isSelectedIcon(1)">
        pie-chart
    </button>
    <button fd-button-grouped [glyph]="'pool'" (click)="setLocaleIcon(2)" [state]="isSelectedIcon(2)">
        pool
    </button>
</fd-button-group>

After:

<fd-segmented-button>
    <button fd-button [glyph]="'survey'" (click)="setLocaleIcon(0)" [class]="isSelectedIcon(0)">
        survey
    </button>
    <button fd-button [glyph]="'pie-chart'" (click)="setLocaleIcon(1)" [class]="isSelectedIcon(1)">
        pie-chart
    </button>
    <button fd-button [glyph]="'pool'" (click)="setLocaleIcon(2)" [class]="isSelectedIcon(2)">
        pool
    </button>
</fd-segmented-button>

Button property @Input() options is marked as deprecated (will be removed in 0.17.0). Under the hood transition from options to fdType was made.

Before:

<button fd-button [options]="'emphasized'">Emphasized Button</button>
<button fd-button [options]="'light'">Light Button</button>
<button fd-button [options]="'menu'">Menu Button</button>

After:

<button fd-button [fdType]="'emphasized'">Emphasized Button</button>
<button fd-button [fdType]="'ghost'">Ghost Button</button>
<button fd-button [fdType]="'positive'">Positive Button</button>
<button fd-button [fdType]="'negative'">Negative Button</button>
<button fd-button [fdType]="'attention'">Attention Button</button>
<button fd-button [fdType]="'transparent'">Transparent Button</button>

Button light option changed to button transparent type

Before:

<button fd-button [options]="'light'">Light Button</button>

After:

<button fd-button [fdType]="'transparent'">Transparent Button</button>

Button emphasized option changed to button emphasized type

Before:

<button fd-button [options]="'emphasized'">Emphasized Button</button>

After:

<button fd-button [fdType]="'emphasized'">Emphasized Button</button>

Calendar, DatePicker, DateTimePicker

[blockFunction], [blockRangeStartFunction], [blockRangeEndFunction] methods are removed, it can be replaced by old disable functions.
New Modes of calendar component [showWeekCount], [compact], [markWeekends], [specialDaysRules]

Checkbox (fd-checkbox)

valid state is now success
invalid state is now error

Before:

<fd-checkbox [(ngModel)]="checkboxValue3" state="valid" label="Valid state"></fd-checkbox>
<fd-checkbox [(ngModel)]="checkboxValue5" state="invalid" label="Invalid state"></fd-checkbox>

After:

<fd-checkbox [(ngModel)]="checkboxValue3" state="success" label="Success state"></fd-checkbox>
<fd-checkbox [(ngModel)]="checkboxValue5" state="error" label="Error state"></fd-checkbox>

Input Groups (fd-input-group)

valid state is now success
invalid state is now error

Before:

<fd-input-group [addOnText]="'Button'" [button]="true" [state]="'information'" [placeholder]="'Placeholder'"></fd-input-group>
<fd-input-group [addOnText]="'Button'" [button]="true" [state]="'valid'" [placeholder]="'Placeholder'"></fd-input-group>	<div fd-form-item>

After:

<fd-input-group fd-form-control [addOnText]="'Button'" [compact]="true" [button]="true" [state]="'success'" [placeholder]="'Placeholder'"></fd-input-group>
 <fd-input-group fd-form-control [addOnText]="'Button'" [button]="true" [state]="'error'" [placeholder]="'Placeholder'"></fd-input-group>

Form Control (fd-form-control)

valid state is now success
invalid state is now error

Before:

<input fd-form-control type="text" id="input-52" placeholder="Field placeholder text" [state]="'valid'"/>
<input fd-form-control type="text" id="input-53" placeholder="Field placeholder text" [state]="'invalid'"/>
<select fd-form-control id="select-52" name="" [state]="'valid'">....</select>
<select fd-form-control id="select-52" name="" [state]="'invalid'">....</select>
<textarea fd-form-control id="textarea-52" placeholder="Field placeholder text" [state]="'valid'"></textarea>
<textarea fd-form-control id="textarea-52" placeholder="Field placeholder text" [state]="'invalid'"></textarea>

After:

<input fd-form-control type="text" id="input-52" placeholder="Field placeholder text" [state]="'success'"/>
<input fd-form-control type="text" id="input-53" placeholder="Field placeholder text" [state]="'error'"/>
<select fd-form-control id="select-52" name="" [state]="'success'">....</select>
<select fd-form-control id="select-52" name="" [state]="'error'">....</select>
<textarea fd-form-control id="textarea-52" placeholder="Field placeholder text" [state]="'success'"></textarea>
<textarea fd-form-control id="textarea-52" placeholder="Field placeholder text" [state]="'error'"></textarea>

Radio Buttons (fd-radio-button)

valid state is now success
invalid state is now error

Before:

<fd-radio-button [state]="'valid'" [value]="'val1'" [(ngModel)]="optionFourVariable">Valid Option</fd-radio-button>
<fd-radio-button [state]="'invalid'" [value]="'val1'" [(ngModel)]="optionFourVariable">Valid Option</fd-radio-button>

After:

<fd-radio-button [state]="'success'" [value]="'val1'" [(ngModel)]="optionFourVariable">Valid Option</fd-radio-button>
<fd-radio-button [state]="'error'" [value]="'val1'" [(ngModel)]="optionFourVariable">Valid Option</fd-radio-button>

Dialog (successor of Modal)

Modal component has been renamed to Dialog
DialogConfig has been extended by:
- Mobile mode
- Draggable Dialog window mode
- Resizable Dialog window mode
- Responsive Dialog window padding mode
- Enabling/disabling Dialog window vertical padding option
- Dialog window outer spacing for Mobile mode option
DialogRef has been extended by:
- hide(isHidden: boolean) feature which enables to visually hide the Dialog window without destroying Dialog DOM elements
- loading(isLoading: boolean) feature which enables to display the Dialog window in Loading state
Default DialogConfig can be now specified by providing custom value for DIALOG_DEFAULT_CONFIG DI token:

({
    providers: [ {provide: DIALOG_DEFAULT_CONFIG, useValue: myCustomConfig} ]
})
export class AppModule {}

Dialog Header and Footer are now composed out of Bar component so it is possible to use Bar component features to build Dialogs Header/Subheader/Footer.
To create Template based Dialog:
Before:

<ng-template let-modal #modalTemplate>
    <fd-modal-header></fd-modal-header>
    <fd-modal-body></fd-modal-body>
    <fd-modal-footer></fd-modal-footer>
</ng-template>

After:

<ng-template let-dialog let-dialogConfig="dialogConfig" #dialogTemplate>
    <fd-dialog [dialogConfig]="dialogConfig" [dialogRef]="dialog">
        <fd-dialog-header></fd-dialog-header>
        <fd-dialog-body></fd-dialog-body>
        <fd-dialog-footer></fd-dialog-footer>
    </fd-dialog>
</ng-template>

To create Component based Dialog:
Before:

@Component({
    template: `
        <fd-modal-header></fd-modal-header>
        <fd-modal-body></fd-modal-body>
        <fd-modal-footer></fd-modal-footer>
    `
})
export class MyModalComponent {
    constructor(public modalRef: ModalRef)  {}
}

After:

@Component({
    template: `
        <fd-dialog>
            <fd-dialog-header></fd-dialog-header>
            <fd-dialog-body></fd-dialog-body>
            <fd-dialog-footer></fd-dialog-footer>
        </fd-dialog>
    `,
})
export class MyDialogComponent {
    constructor(@Inject(DIALOG_REF) public dialogRef: DialogRef) {}
}

Dialog HTML elements composition has changed

For Template based Dialog
Before:

<fd-modal-container>
    <fd-modal-overlay></fd-modal-overlay>
    <fd-modal>
        <div class="fd-modal__content">
            <fd-modal-header></fd-modal-header>
            <fd-modal-body></fd-modal-body>
            <fd-modal-footer></fd-modal-footer>
        </div>
    </fd-modal>
</fd-modal-container>

After:

<fd-dialog-container>
    <fd-dialog>
        <div class="fd-dialog__content">
            <fd-dialog-header></fd-dialog-header>
            <fd-dialog-body></fd-dialog-body>
            <fd-dialog-footer></fd-dialog-footer>
        </div>
    </fd-dialog>
</fd-dialog-container>

For Component based Dialog
Before:

<fd-modal-container>
    <fd-modal-overlay></fd-modal-overlay>
    <fd-modal>
        <div class="fd-modal__content">
            <app-custom-component>
                <fd-modal-header></fd-modal-header>
                <fd-modal-body></fd-modal-body>
                <fd-modal-footer></fd-modal-footer>
            </app-custom-component>
        </div>
    </fd-modal>
</fd-modal-container>

After:

<fd-dialog-container>
    <app-custom-component>
        <fd-dialog>
            <div class="fd-dialog__content">
                <fd-dialog-header></fd-dialog-header>
                <fd-dialog-body></fd-dialog-body>
                <fd-dialog-footer></fd-dialog-footer>
            </div>
        </fd-dialog>
    </app-custom-component>
</fd-dialog-container>

Action bar (fd-button)

Significant markup changes - fd-action-bar-back and fd-action-bar-actions now children of fd-action-bar-header. fd-action-bar-description no longer child of fd-action-bar-header, requires [withBackBtn]="true" if used with back button.
fd-action-bar-mobile no longer requires fd-action-bar child

Before:

<div fd-action-bar>
    <div fd-action-bar-back>
        <button aria-label="back" fd-button [fdType]="'transparent'" [compact]="true" [glyph]="'nav-back'"></button>
    </div>
    <div fd-action-bar-header>
        <h3 fd-action-bar-title>Page Title</h3>
        <div fd-action-bar-description>Action bar Description</div>
    </div>
    <div fd-action-bar-actions>
        <button fd-button [fdType]="'main'">Save</button>
        <button fd-button [fdType]="'transparent'">Cancel</button>
    </div>
</div>

After:

<div fd-action-bar>
    <div fd-action-bar-header>
        <div fd-action-bar-back>
            <button aria-label="back" fd-button [compact]="true" [fdType]="'transparent'" [glyph]="navigationArrow$ | async"></button>
        </div>
        <h3 fd-action-bar-title>Page Title</h3>
        <div fd-action-bar-actions>
            <button fd-button [compact]="true">Cancel</button>
            <button fd-button [compact]="true" [fdType]="'emphasized'">Save</button>
        </div>
    </div>
    <p fd-action-bar-description [withBackBtn]="true">Action bar Description</p>
</div>

Combobox

Add [groupFn] input to combobox component
[searchFunction] changed to [searchFn] for consistency with [groupFn]
Add example of two-column combobox using item template

0.16.0 Breaking Changes - SAP/fundamental-ngx GitHub Wiki

Breaking Changes

General

Button (fd-button)

Calendar, DatePicker, DateTimePicker

Checkbox (fd-checkbox)

Input Groups (fd-input-group)

Form Control (fd-form-control)

Radio Buttons (fd-radio-button)

Dialog (successor of Modal)

Action bar (fd-button)

Combobox

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️