Skip to content

Breaking Changes

Jump to bottom
Platon Rov edited this page Jul 18, 2022 · 184 revisions

The goal of this page is to document all the breaking changes that take place in the library. For minor version bumps, these will be posted here in list format. For feature or major version bumps, independent pages will be set up and linked here to provide more details for the upgrading process.

0.31.0 Breaking Changes

**Wizard generator(platform). #6244

  • Removed [addSummary] input property.
  • Added [displaySummaryStep] input property.
  • In order to add summary steps, users will need to specify it directly in steps array for wizard generator

List Component(platform).#6010

  • Removed [noSeperator] property as it was not necessary, as we have [noBorder] property which has same functionality.

Before

<fdp-list [noSeperator]="true">
    <fdp-standard-list-item title="Title1">
    </fdp-standard-list-item>
    <fdp-standard-list-item title="Title2">
    </fdp-standard-list-item>
    <fdp-standard-list-item title="Title3">
    </fdp-standard-list-item>
    <fdp-standard-list-item title="Title4">
    </fdp-standard-list-item>
</fdp-list>

After

<fdp-list [noBorder]="true">
    <fdp-standard-list-item title="Title1">
    </fdp-standard-list-item>
    <fdp-standard-list-item title="Title2">
    </fdp-standard-list-item>
    <fdp-standard-list-item title="Title3">
    </fdp-standard-list-item>
    <fdp-standard-list-item title="Title4">
    </fdp-standard-list-item>
</fdp-list>

Status Indicator(core).#6032

  • Removed [hasLabel] property as it was unnecessary.

Before

<fd-status-indicator
    id="status_icon_9"
    status="negative"
    size="lg"
    fillPercentage="35"
    [clickable]="false"
    ariaLabel="Euro Status Indicator With Negative Filling"
    ariaRoledescription="Status Indicator"
    role="progressbar"
    ariaValuetext="35%"
    focusable="true"
    title="35% with small size"
    labelPosition="top"
    [hasLabel]="true"
    statusLabel="35%"
    labelSize="lg"
    [path]="euroImage"
    viewBox="0 0 26 25"
>
</fd-status-indicator>

After

<fd-status-indicator
    id="status_icon_9"
    status="negative"
    size="lg"
    fillPercentage="35"
    [clickable]="false"
    ariaLabel="Euro Status Indicator With Negative Filling"
    ariaRoledescription="Status Indicator"
    role="progressbar"
    ariaValuetext="35%"
    focusable="true"
    title="35% with small size"
    labelPosition="top"
    statusLabel="35%"
    labelSize="lg"
    [path]="euroImage"
    viewBox="0 0 26 25"
>
</fd-status-indicator>

Fundamental-ngx/core changes PR #5980

  • Remove Hammerjs from dependencies and refactor carousel component

Multi-input(core) changes PR #5959

  • Multi-input component supports autocomplete functionality

DialogBase(core) changes PR #5924

  • DialogBase now needs rtlService argument in the constructor in order to correctly process rtl changes.
  • DialogBase also adds dir="rtl" to the component if rtl mode is enabled.

Approval Flow Phase 3 PR #5302

  • From now setting a due date in the node adding/editing dialog possible only if set [checkDueDate]="true" for the Approval Flow component.

DatetimeAdapter changes PR #5502 Optional fromNow function was added to the DatetimeAdapter abstract class. Because there are no truly "optional" abstract functions, any adapter that implements the DatetimeAdapter will need to implement the fromNow function - however if the developer does not wish to use the fromNow function, in their custom adapter they can simply implement it as fromNow: undefined as I've done here for the default FdDatetimeAdapter

QuickView (core) PR #5493

  • Added QuickViewGroupItemContentElementDirective (fd-quick-view-group-item-content-element) needed for bind the corresponding label to the element (email, phone, link, etc.)

Core library with subpackages PR #5453

  • Libraries are built with nx instead of ng;
  • All main core modules are now built as separate sub-packages;
  • Recommended way of importing files from the core library now is following:
import {DialogModule, DialogService} from '@fundamental-ngx/core/dialog';
  • Structure of fundamental-ngx/core was refactored to allow splitting it into separate sub-packages;
  • CarouselModule now in the Carousel namespace instead of utils;
  • AlertService, DialogService, NotificationService, MessageToastService, ThemesService are removed from providers array in FundamentalNgxCoreModule;
  • Core documentation has been updated with the appropriate import paths;
  • TSPath has been updated to reflect all separate submodules paths;
  • root tsconfig.json has been renamed to tsconfig.base.json;
  • tests folder from utils has been moved to a separate sub-package;
  • each library contains own tsconfig.json file with strict mode disabled, and can be enabled on per-package basis;
  • *.spec.ts files are excluded from dependency graph calculation for nx;
  • Now it is possible to launch module-specific unit tests by using nx test core-[module-name] command

Avatar Group (core) PRs #5074, #5628

  • Added for noPadding, noHorizontalScroll and noVerticalScroll inputs for AvatarGroupOverflowBodyDirective (fd-avatar-group-overflow-body).

Before

<div fd-avatar-group-overflow-body> Content here </div>

After

<div fd-avatar-group-overflow-body [noPadding]="true" [noHorizontalScroll]="true" [noVerticalScroll]="false"> Content here </div>
  • Added AvatarGroupFocusableAvatarDirective (fd-avatar-group-focusable-avatar) needed to bind styles for focusable Avatars.

Before

<fd-avatar [circle]="true" size="s" label="John Doe" tabindex="0"></fd-avatar>

After

<fd-avatar fd-avatar-group-focusable-avatar [circle]="true" size="s" label="John Doe"></fd-avatar>
  • Expose Avatar's title and role="img" as part of Avatar Group.

Before

<fd-avatar label="John Doe" [circle]="true" [border]="true" size="s"></fd-avatar>

After

<fd-avatar label="John Doe" title="John Doe" role="img" [circle]="true" [border]="true" size="s"></fd-avatar>
  • Changes in markup and getting rid of examples styles.
  • Added AvatarGroupPopoverControlDirective (fd-avatar-group-popover-control) needed to bind the corresponding CSS class and attributes to group type overflow popover control.

Before

<fd-popover-control tabindex="0"
                    (click)="handleControlClick($event, overflowPopover)"
                    (keydown)="handleControlKeydown($event, overflowPopover)">

After

<fd-popover-control fd-avatar-group-popover-control
                    [attr.aria-label]="'Has popup type dialog Conjoined avatars, 12 avatars displayed, 8 avatars hidden, activate for complete list'"
                    (click)="handleControlClick($event, overflowPopover)"
                    (keydown)="handleControlKeydown($event, overflowPopover)">

Handle invalid date inside date's components PR #5851

Changing in FdDate class invalid date handling:

Before:

  • You create instance of FdDate class and pass invalid date -> You are getting throwing error.

After:

  • You create instance of FdDate class and pass invalid date -> You are getting an invalid date instance.

Changing in FdDate class invalid date instance:

Before:

  • Previously, this was not possible, since when creating an instance with an invalid date, we got an error.

After:

  • Similar behavior to the native Date class of js has been implemented. If we try to get the date string format from invalid instance of FdDate, we get the string "Invalid Date".
  • Attempting to invoke any method that must return a numeric format(getYear(), getSeconds(), ...etc) returns NaN

Changing in DateTimePickerComponent class:

Before:

  • You type in input invalid date format -> You are getting date instance with current date.

After:

  • You type in input invalid date format -> You are getting an invalid date instance.

Changing in DatePickerComponent class:

Before:

  • You type in input invalid date format -> You are getting `null`

After:

  • You type in input invalid date format -> You are getting an invalid date instance.

0.30.0 Breaking Changes

Card PR #5158

  • Removed CardFooter` component. To achieve a footer in Cards you can use the Bar component.

Notification PR #5186

  • Changes in markup
  • Removed fd-notification-avatar directive
  • The directive fd-notification-actions is now a component
  • Removed fd-notification-text directive
  • Removed fd-notification-description directive
  • Removed fd-notification-metadata directive
  • Removed the Notifications From Object option together with the NotificationDefault.
  • Notifications Group is no longer a banner displayed in the right corner but displayed inside a popover triggered by clicking the bell icon in the shell bar at the top right of the screen.

0.29.0 Breaking Changes

Icons PR #5093

  • The deprecated "size" input property has been removed.

i18n PR #5109

  • Some translation strings were updated their values. Page with list of changes.

0.28.0 Breaking Changes

Popover Directive PR #4701

  • popoverDirective has been removed

0.27.0 Breaking Changes

Select PR #4511

  • extendedBodyTemplate is deprecated, handled internally by select component.

Avatar in Card Header PR#4638

  • expose Avatar's inputs size and glyph as part of Card header

Before

<fd-card badge="New" cardType="list">
    <fd-card-header>
        <fd-avatar ariaLabel="avatar image" title="avatar image"></fd-avatar>

After

<fd-card badge="New" cardType="list">
    <fd-card-header>
        <fd-avatar ariaLabel="avatar image" size="s" glyph="cart" title="avatar image"></fd-avatar>

0.26.0 Breaking Changes

Switch PR #4116

  • optionalText input property has been removed

0.25.0 Breaking Changes

Tabs PR#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()

Dialog PR#4108

removed DIALOG_CONFIG and DIALOG_REF and made DialogConfig and DialogRef classes injectable

Wizard PR#4082

Added wizard summary page

Form Select Pr#3895

Remove fd-form-select from Form Control

Dialog PR#3902

Remove fd-dialog-title, fd-title should be used

Message Form PR#4009

Remove [compact] input

Remove deprecated File Input PR#4067

Remove badge as a standalone component PR#4068

0.24.0 Breaking Changes

Mega Menu#3782

Remove deprecated Mega Menu. The successor - Menu

Localization Editor #3781

Remove deprecated Localization Editor as it doesn't not in SAP Fiori 3

FormItemComponent #3780

remove a deprecated Input isCheck

0.23.0 Breaking Changes

Layout Grid #3640 Layout grid has been reworked entirely. It is no longer a series of components but rather directives. Here are a few other details:

  • gapSize input replaced with fdLayoutGridColOffset
  • nogap replaced with noGap
  • responsiveness is achieved by setting individual sizes for each of the following: fdLayoutGridCol fdLayoutGridColMd fdLayoutGridColLg fdLayoutGridColXl
  • individual rows can be set with the fdLayoutGridRow directive.

Popover PR#3570

remove deprecated method isDropdown

Input Group PR#3573

remove deprecated input buttonType from input group

Bar, DateTime Picker, Dialog PR#3662

In Bar component the Input property cosy was renamed to cozy for consistency with other components and Fiori 3 naming. Affected components: DateTime Picker, Dialog (footer and header).

Before:

<div fd-bar barDesign="footer" [cosy]="!compact">

Now:

<div fd-bar barDesign="footer" [cozy]="!compact">

0.22.0 Breaking Changes

(Core) Object Status

  • Replace the content projection of the Object Status with an input property called label.

(Core) Action Bar

  • fd-action-bar-title directive is now a component.

(Core) Info Label

  • Replace the content projection of the Info Label with an input property called label.

(Core) File Input

  • Deprecate the File Input component, as we introduced new File uploader component.

(Core) Drag And drop Module

  • Markup now is simplified Old: ul fd-dnd-list > li fd-dnd-container > div cdkDrag new: ul fd-dnd-list > li fd-dnd-container

  • Input properties has been changed

  • @Input() listMode to gridMode

  • removed select-native component

  • removed Identifier (use Avatar instead)

  • removed Image component (use Avatar instead)

  • removed dropdown component

(Core) Buttons

  • The value for the text button is now passed as an input property, not as content projection.

(Core) fundamental-styles version 0.11.0 adoption

  • removed select-native component
  • removed Identifier (use Avatar instead)
  • removed Image component (use Avatar instead)
  • removed dropdown component

(Core) Menu

  • fd-menu-addon directive is changed to component and the way how it can be used:

(Core) Side Navigation

  • NestedListExpandIconDirective is now a component NestedListExpandIconComponent

(Platform) Button

  • The value for the text button is now passed as an input property, not as content projection.

(Core) Segmented Button

  • Segmented button directive has been removed

0.21.0 Breaking Changes

Input Group Number

  • InputGroupNumberComponent has been removed from the library. Use StepInputComponent as its functional successor.

Loading Spinner

  • LoadingSpinnerComponent has been removed from the library. Use BusyIndicatorComponent as its functional successor.

Avatar

  • [backgroundImage] has been deprecated. Use [image] instead.
  • No longer support for content transclusion using <ng-content>

Multi Input

  • [multiInputMobileConfig] has been renamed to [mobileConfig]
  • To provide dialog config for Mobile Mode use MobileModeConfig.dialogConfig and pass it as a part of [mobileConfig]="mobileConfig"

Select

  • To provide dialog config for Mobile Mode use MobileModeConfig.dialogConfig and pass it as a part of [mobileConfig]="mobileConfig"

Menu

  • To provide dialog config for Mobile Mode use MobileModeConfig.dialogConfig and pass it as a part of [mobileConfig]="mobileConfig"

Table #2819

  • fdColumnSortable deprecated, along with associated input [sortDir]

0.19.0 Breaking Changes

Button

  • [options] Input has been removed. Use [fdType] or [fdMenu] input instead

Split Button

  • [options] Input has been removed. Use [fdType] or [fdMenu] input instead

Action Bar(Platform)

  • Adopted fiori3 styles
  • Significant markup changes - fd-action-bar-back and fd-action-bar-actions now children of fd-action-bar- header. fd-action-bar-description no longer child of fd-action-bar-header, requires [withBackBtn]="true" if used with back button.
  • Removed edit title functionality.
  • Made internal design changes to support i18n.
  • Added new component called ActionButtonGroup to control the overflow actions for Action Bar, Shell Bar, and Panel platform components in future.

Panel

  • The Panel component has been refactored in Fundamental-styles. The "old" panel is now called Layout Panel and a new Panel that follows Fiori 3 guidelines has been introduced.
  • fd-panel -> fd-layout-panel
  • fd-panel-header -> fd-layout-panel-header
  • fd-panel-head -> fd-layout-panel-head
  • fd-panel-title -> fd-layout-panel-title
  • fd-panel-description -> fd-layout-panel-description
  • fd-panel-actions -> fd-layout-panel-actions
  • fd-panel-filters -> fd-layout-panel-filters
  • fd-panel-body -> fd-layout-panel-body
  • fd-panel-footer -> fd-layout-panel-footer

Menu

  • Menu has been migrated from simple list markup to component with integrated popover and other logic
  • Menu should not be used for creating list template embedded in other components. To create lists templates use ListComponent
  • fd-menu-group has been removed
  • fd-menu-list has been removed - menu list is now integrated with fd-menu
  • fd-menu-item can be used only on li elements
  • fd-menu-item-addon has been renamed to fd-menu-addon
  • fd-menu-addon should be used on menu element level to add certain icon
  • Menu[separator]="true" input has been removed. Use fd-menu-separator element to create separators.
  • fd-menu-title should be used to wrap the text value of menu element

Split Button

  • fd-split-button-menu directive has been removed
  • Following inputs: triggers, closeOnOutsideClick, closeOnEscapeKey, focusTrapped, fillControlMode, isOpen, isOpenChange have been removed. Use API exposed by MenuComponent to configure and control popover.
  • (primaryButtonClicked) emits MouseEvent instead of void

ShellbarUserMenuComponent

  • Public API changes
  • Removed noArrow input
  • Removed addContainerClass input
  • Removed isDropdown input
  • Removed appendTo input
  • Removed isOpen input/output use ShellbarUserMenuComponent.menu.open()/.close()
  • Removed additionalClasses input

ProductMenuComponent

  • Public API changes
  • Removed noArrow input
  • Removed addContainerClass input
  • Removed isDropdown input
  • Removed appendTo input
  • Removed isOpen input/output use ProductMenuComponent.menu.open()/.close()
  • Removed additionalClasses input

0.18.0 Breaking Changes

Select

  • Has been reworked to match Fiori3 specification
  • [selectType] input is no longer supported
  • [triggerTemplate] input has been replaced with [controlTemplate] input offering similar but narrower functionality.
  • [isOpen] input has been removed. Use Select.open() and Select.close() to manipulate Select popover state
  • [loading] input has been removed use BusyIndicator as a wrapped instead

Option

  • [viewValue] is no longer supported
  • (selectedChange) output is no longer supported

Busy Indicator

  • [loadingLabel] input has been renamed to [ariaLabel]

0.17.0 Breaking Changes

No breaking changes introduced

0.16.0 Breaking Changes

General

  • No longer need to import icons or fonts in angular.json

Action Bar

  • Significant markup changes - fd-action-bar-back and fd-action-bar-actions now children of fd-action-bar-header. fd-action-bar-description no longer child of fd-action-bar-header, requires [withBackBtn]="true" if used with back button.
  • fd-action-bar-mobile no longer requires fd-action-bar child

Combobox

  • Add [groupFn] input to combobox component
  • [searchFunction] changed to [searchFn] for consistency with [groupFn]
  • Add example of two-column combobox using item template

Modal

  • Refactor Modal component into Dialog to match Fiori3 specification and features.

SearchInput

  • Changed name of SearchInput (fdp-search-input) component to SearchField (fdp-search-field) in compliance with Fiori 3 naming conventions.

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
  • All occurrence of the button in the docs have been updated
  • New button types have been added

Validation States

Tokenizer/Multi-Input

  • compact mode - off-screen tokens hidden with "more" text. Text can be clicked to expand menu popover in multi-input
  • cozy mode - user can use thumb to swipe to hidden tokens on both tokenizer and multi-input

0.15.0 Breaking Changes

  • Removed ListActionDirective
  • Markup Popover Changes

0.14.0 Breaking Changes

  • Add [noText] input: only used in Toggle component
  • Add [dir] input: only used in Toggle component
  • Add [semantic] input: only used in Toggle component
  • Removed [size] input
  • Add [containerElement] to Breadcrumb component
  • New Modes for Tab component. Markup is changed.
  • Tab Component has removed disable mode now. Instead of disabling it's recommended to hide tab.

0.13.0 Breaking Changes

0.12.0 Breaking Changes

  • Introduced new properties to combobox
  • To add native elements stylings it's needed to add fd-form-control directive
  • Introduced new options to inline-help
  • There is new way to use input-group, with complex addon or input elements
  • layout-grid now replaces panel-grid
  • ListCheckbox directive is completely removed. Check how to replace it
  • New component Notification
  • New component ProductSwitch with drag and drop functionality
  • ScrollSpy has new targetOffset input
  • SearchInput is completely removed, use combobox to replace it
  • ProductSwitch in Shellbar is separated component. Also SearchInput should be replaced by Combobox
  • Now every element should have specified directive in Table to follow styling.

0.11.0 Breaking Changes

  • Introduced platform library to fundamental-ngx.

0.10.1 Breaking Changes

  • npm package name has changed from fundamental-ngx to fundamental-ngx/core and fundamental-ngx/platform.
  • There are other breaking changes. There were few features being added

0.9.0 Breaking Changes

  • Calendar, DatePicker and DateTimePicker use custom models FdDate and FdDateRange instead of native JS date object.
  • Popover - fillControl input is now fillControlMode and is now a string.

0.8.0 Breaking Changes

  • Search input is now deprecated.
  • Search input highlight is now called highlighting.
  • Combobox input is now called combobox.
  • Combobox highlight input is now called highlighting.
  • Combobox no longer comes with 'add new item' functionality.

0.7.0 Breaking Changes

  • isStatusLabel label input is now a directive called fd-status-label.
  • Some side navigation components are now directives.

0.6.0 Breaking Changes

  • Arrow input on both popover directive and component is now noArrow and requires the reverse of what it did before. Done to conform to other fundamental libraries and popper.js itself.
  • List is now a directive which can be applied to a ul or ol element.
  • Actionbar components have all been changed to directives.
  • Badge/Label components have been changed to directives.
  • Table component is now a directive.
  • Removed is[component] inputs from multiple components.
  • Removed isDropdown from popover component.
  • Use Fundamental Styles instead of Fiori Fundamentals.

0.5.0 Breaking Changes

  • Action bar title component is now a directive.
  • Button state input has been removed.
  • Form label component is now a directive.
  • Form legend component is now a directive.
  • Panel title component is now a directive.
  • Side navigation title component is now a directive.
  • Tile title component is now a directive.
  • Product tile title component is now a directive.
  • Calendar mondayStartOfWeek input is now startingDayOfWeek number input.
Clone this wiki locally