0.5.0 Breaking Changes - SAP/fundamental-ngx GitHub Wiki

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

ActionBarTitleComponent is now a directive called ActionBarTitleDirective.

Done to allow developers to customize the heading level of the action bar title. In terms of web accessibility, there should only be one h1 per page. Our previous action bar had a hardcoded h1, which would mean that there could only be one per page.
```

<fd-action-bar-title>Action Bar Title</fd-action-bar-title>


<h2 fd-action-bar-title>Action Bar Title</h2>
```

Button

ButtonDirective no longer supports the state input.

Due to confusion between whether the use of state or native attributes was preferred, the state input has been removed. Developers can make use of the native attributes aria-disabled, disabled and aria-selected to set the state.

<!-- BEFORE -->
<button fd-button [state]="'selected'">Selected State</button>
<button fd-button [state]="'disabled'">Disabled State</button>

<!-- NOW -->
<button fd-button aria-selected="true">Selected State</button>
<button fd-button aria-disabled="true">Disabled State</button>
<button fd-button disabled>Disabled State</button>

Calendar

mondayStartOfWeek boolean input is now startingDayOfWeek number input.

As the functionality for the first day of the week was made more flexible, we had to change the input name and type. It is now a number, with 1 representing Monday and so on. Note that this change also affects the datetime and date pickers.
```

<fd-calendar [mondayStartOfWeek]="true"></fd-calendar>


<fd-calendar [startingDayOfWeek]="1"></fd-calendar>
```

Forms

FormLegendComponent is now a directive called FormLegendDirective.

Developers should ideally have access to the legend element themselves to facilitate customization. There was also little to no point of having a component since it only adds a class to the element.
```

<fd-form-legend>Legend</fd-form-legend>


<legend fd-form-legend>Legend</legend>
```
FormLabelComponent is now a directive called FormLabelDirective.

Implemented to allow developers direct access to the native label element. All the component used to do was add a class to the element, which can be easily done through a directive.
```

<fd-form-label>Label</fd-form-label>


<label fd-form-label>Label</label>
```

Panel

PanelTitleComponent is now a directive called PanelTitleDirective.

Implemented to allow customization of the heading level of the title. Previously, we had a hardcoded h1, which is terrible for web accessibility.
```

<fd-panel-title>Panel Title</fd-panel-title>


<h2 fd-panel-title>Panel Title</h2>
```

Side Navigation

SideNavigationTitleComponent is now a directive called SideNavigationTitleDirective.

Done to allow developers to customize the heading level of the side navigation title. In terms of web accessibility, there should only be one h1 per page. Our previous sidenav title had a hardcoded h value, which would make a11y harder on developers.
```

<fd-side-nav-title>Side Nav Title</fd-side-nav-title>


<h2 fd-side-nav-title>Side Nav Title</h2>
```

Tile

TileTitleComponent is now a directive called TileTitleDirective.

Done to allow developers to customize the heading level of the tile title. In terms of web accessibility, there should only be one h1 per page. Our previous tile title had a hardcoded h value, which would make a11y harder on developers.
```

<fd-tile-title>Tile Title</fd-tile-title>


<h2 fd-tile-title>Tile Title</h2>
```
ProductTileTitleComponent is now a directive called ProductTileTitleDirective.

Done to allow developers to customize the heading level of the product tile title. In terms of web accessibility, there should only be one h1 per page. Our previous tile title had a hardcoded h value, which would make a11y harder on developers.
```

<fd-product-tile-title>Product Tile Title</fd-product-tile-title>


<h2 fd-product-tile-title>Product Tile Title</h2>
```