0.26.0 Breaking Changes

Bar, Dialog, Popover Compoennts #4140

Bar

From:

<fd-bar-element>
    <button fd-button [fdType]="'transparent'" [glyph]="navigationArrow$ | async" [compact]="true"></button>
</fd-bar-element>

To:

<fd-button-bar [glyph]="navigationArrow$ | async"></fd-button-bar>

Dialog

From:

<fd-dialog-footer-button>
     <button
       fd-button
          fd-initial-focus
          fd-dialog-decisive-button
          fdType="emphasized"
          label="Close"
          [compact]="true"
          (click)="dialog.close()">
    </button>
</fd-dialog-footer-button>

To:

<fd-button-bar
    fd-initial-focus
    fdType="emphasized"
    label="Close"
    (click)="dialog.close()">
</fd-button-bar>

Message Box

From:

<fd-dialog-footer-button>
   <button fd-button
          fdType="emphasized"
          fd-dialog-decisive-button
          [label]="mobileConfig?.approveButtonText"
          (click)="handleApprove()">
   </button>
</fd-dialog-footer-button>

To:

<fd-button-bar
    fdType="emphasized"
    [label]="mobileConfig?.approveButtonText"
    (click)="handleApprove()">
</fd-button-bar>

Form Label

• Removed [inlineHelp] input from fd-form-label

Inline Help #4061

• Inline help now has completely changed structure, it is used now as a directive, just by adding fd-inline-help="text", or [fd-inline-help-template]="templateRef". Example: Text:

<fd-icon glyph="question-mark" fd-inline-help="Inline Help Tooltip"></fd-icon>

And usage with template:

<fd-icon glyph="question-mark" [fd-inline-help-template]="templateRef"></fd-icon>

Switch component #4116

• optionalText input property has been removed

Tab Component #4120

• selectedIndex input has been removed, use TabPanelComponent.open()
• selectedIndexChange output has been removed, use selectedTabChange
• TabListComponent.selectTab() has been removed, use TabPanelComponent.open()
• TabPanelComponent.triggerExpandedPanel() has been removed, use TabPanelComponent.open()