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
  • Button property @Input() options mark as deprecated (will be removed in 0.17.0). Under the hood transition from options to fdType was made
  • Button light option changed to button transparent type
  • Button emphasized option changed to button emphasized type

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