v3 to v4 upgrade guide

Additions

open input in modal

The ibm-modal now requires an open attribute. This attribute allows for better control over the visibility of the modal. If you're using a modal component that extends BaseModal all you need to do is add [open]="open" to the ibm-modal component in your template.

Old:

<ibm-modal>
    <!-- snip -->
</modal>

New:

<ibm-modal [open]="open">
    <!-- snip -->
</ibm-modal>

Simpler modal usage option

The ibm-modal component can now be used in a standard component template, and does not require the use of the ModalService or extending BaseModal. ModalService is still available and recommended as an easy way to encapsulate your modal code, or open our data driven modals such as the AlertModal.

Example:

<!-- component template -->
<ibm-modal [open]="showModal">
    <!-- modal contents -->
</ibm-modal>
<!-- component template -->

open input and openChange output in overflow menu

The ibm-overflow-menu component now supports an open input and openChange output to allow for programmatic control over the open/closed state of the menu.

Example:

<ibm-overflow-menu [open]="menuOpen">
    <!-- menu items here -->
</ibm-overflow-menu>

The combination of open and openChange also makes them eligible for double binding:

<ibm-overflow-menu [(open)]="menuOpenState">
    <!-- menu items here -->
</ibm-overflow-menu>

isOpen input and isOpenChange output in dialog (Tooltip an Overflow menu directives)

The ibmDialog and descendant (ibmTooltip and ibmOverflowMenu) directives now support the isOpen input and isOpenChange output for programmatic control over the open/closed state of the dialog.

Example:

<button ibmTooltip="Hello, world!" [isOpen]="tooltipOpen">I'm a tooltip!</button>

The combination of isOpen and isOpenChange also makes them eligible for double binding:

<button ibmTooltip="Hello, world!" [(isOpen)]="tooltipState">I'm a double bound tooltip!</button>

updateConfig method in Dialog

Deprecations

Checkbox

• CheckboxChange and the change output - use checkedChange instead
• size input on ibm-checkbox
• nested input on ibm-checkbox
• aria-label and aria-labelledby as input - use ariaLabel and ariaLabelledby instead

Toggle

• ToggleChange and change output - use checkedChange instead

Combobox

• size input

Dialog

• Instance method closeAll - use the static DialogService.closeAll instead

Dropdown

• size input in ibm-dropdown/ibm-dropdown-list/AbstractDropdownView
• value input in ibm-dropdown - use itemValueKey instead

Modal

• modalLabel in ibm-modal - use ariaLabel instead

Changes

DialogService refactor

• setContext method replaces create as the method to initialize the service for a given dialog type

Dropdown

• Made appendInline more intelligent - It will try to append inline more frequently, it will only append to the ibm-placeholder/body if it's contained (at some point between it and the body element) within a scrolling container or it is explicitly set to false.

Removals

Content Switcher

• label input - use ariaLabel instead

Datepicker

• flatpickrOptionsRange input - use flatpickrOptions and set range to true instead

Dialog

• Removed the entire ibm-dialog-placeholder component - use ibm-placeholder instead
• Made ElementService manditory for Dialog subclasses
• appendToBody input - use appendInline instead
• Simplified the close method in DialogService to just take close(dialogRef: ComponentRef<Dialog>)

Dropdown

• appendToBody input - use appendInline instead

Experimental service

• experimentalEnabled and isExperimental

Modal

• modalType, modalLabel, modalTitle, and modalContent as valid properties in AlertModalData
• Removed the entire ibm-modal-placeholder component - use `ibm-placeholder instead
• AnimationsModule and @angular/animations as a dependency
• The modal @Modal decorator

Number

• Number as a valid export for NumberComponent

Search

• SearchChange and change as a valid output event type - use valueChange instead

Select

• selected output - use valueChange instead

Table

• ibmDataGridFocus directive
• enableRowSelect input on ibm-table

UI Shell

• ibm-sidenav-header component