0.6.0 Breaking Changes

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

Action Bar

• Components are now directives.

  These components should have been directives from the start. All they do is apply some classes to a div element.

  <!-- BEFORE -->
  <fd-action-bar>
     <fd-action-bar-back> ... </fd-action-bar-back>
     <fd-aciton-bar-header> ... </fd-action-bar-header>
     <fd-action-bar-actions> ... </fd-action-bar-actions>
  </fd-action-bar>
  
  <!-- NOW -->
  <div fd-action-bar>
     <div fd-action-bar-back> ... </div>
     <div fd-aciton-bar-header> ... </div>
     <div fd-action-bar-actions> ... </div>
  </div>

Dropdown

• Dropdown styling has been extracted from the popover component.

  Previously, developers could mark a popover as a dropdown using the isDropdown input. It was a hacky method at best, so we proceeded to extract that functionality from the popover, putting it inside its own component instead. Inputs related to dropdown that you previously used on popover can now be used on the dropdown component.

  <!-- BEFORE -->
  <fd-popover [isDropdown]="true" [compact]="true"> ... </fd-popover>
  
  <!-- NOW -->
  <fd-popover>
     <fd-dropdown-control [compact]="true">Dropdown</fd-dropdown-control>
     <fd-popover-body> ... </fd-popover-body>
  </fd-popover>

General

• Fundamental NGX now uses Fundamental Styles.

  Our documentation has moved to using Fundamental Styles as opposed to Fiori Fundamentals. We recommend that users do the same as the two will begin to differ quite severely. It should be sufficient to uninstall fiori-fundamentals and then install fundamental-styles.

List

• List is now a directive that can be applied to a ul or ol element.

  Done to increase flexibility for developers. The component itself did not have much functionality to begin with.

  <!-- BEFORE -->
  <fd-list> ... </fd-list>
  
  <!-- NOW -->
  <ul fd-list> ... </ul>

Popover

• Arrow input on both the popover directive and component is now noArrow.

  Done to conform to the other fundamental libraries and popper.js itself. Requires the opposite value from the previous implementation. Default behaviour is still to not show an arrow.

  <!-- BEFORE -->
  <fd-popover [arrow]="true"> ... </fd-popover>
  
  <!-- NOW -->
  <fd-popover [noArrow]="false"> ... </fd-popover>

Status Indicators

• Badge and Label components are now directives.

  These components should have been directives from the start. All they do is apply some classes to a div element.

  <!-- BEFORE -->
  <fd-badge>Badge</fd-badge>
  <fd-label>Label</fd-label>
  
  <!-- NOW -->
  <span fd-badge>Badge</span>
  <span fd-label>Label</span>

Table

• Table component is now a directive.

  Done to allow the fundamental table to be used with the Angular component development kit. It also exposes the table element directly which is much more flexible.

  <!-- BEFORE -->
  <fd-table> ... </fd-table>
  
  <!-- NOW -->
  <table fd-table> ... </table>