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

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

• thing

Removals

• thing