Skip to content

0.16.0 Breaking Changes

Jump to bottom
Inna Atanasova edited this page Apr 14, 2020 · 11 revisions

Breaking Changes

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 mark 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>

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>
Clone this wiki locally