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 required 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>

Deprecations

• thing

Changes

DialogService refactor

• thing

Removals

• thing