Upgrade Quantum

This guide will help you migrating from Quantum v1 to Quantum v2.

Need to see the v1 docs? Visit this older version of the docs site (unmaintained v1.4.0 snapshot).

Overview

Angular package is built with Angular 16, contrary to v1.4.0 that was built with Angular 14.

Components

Alert

• The Alert component's action button icon (ActionButton's icon prop) now supports both IconProps and string types, allowing more flexible icon definitions.

Datatable

• A new Datatable component is available to render basic data tables, with a variant for when there's no data available.

Doughnut

• The Doughnut component wasn't officially released in v1, but please be aware that the Doughnut component present in the package has been removed.

Dropdown

• The DropdownTrigger component disabled prop has been removed as what's important is the disabled state of the dropdown trigger child itself.

Dropdown Select

• DropdownSelectOption type has been renamed to DropdownSelectItem to avoid naming conflict with the DropdownSelectOption component.
• The Dropdown Select component is now searchable thanks to its new isSearchable prop (default to false).
• The Dropdown Select component now has a minimal keyboard navigation that is not yet fully accessible.
• The Dropdown Select component now supports disabled options (new DropdownSelectItem's disabled prop).
• The Dropdown Select component has a new visible prop.

Icon

• IconType has been renamed to IconProps.

Menu

• MenuItemItemType has been renamed to MenuItemType.
• MenuItemList component's enableAutoActive prop is now set by default to true. To maintain the previous behavior, review all instances of MenuItemList in your codebase. If you wish to disable the new auto-active feature, explicitly set enableAutoActive to false. Alternatively, to take advantage of the new feature, ensure each menu item (or sub-menu item) has a unique id and remove any manually set active props, allowing the auto-active logic to handle them automatically.

Multiselect

• The Multiselect component is now searchable thanks to its new isSearchable prop (default to false).
• The Multiselect component now has a minimal keyboard navigation that is not yet fully accessible.
• The Multiselect component now supports disabled options (new MultiSelectOption's disabled prop).
• The Multiselect component has a new visible prop.

Slider

• The default behavior of the Slider component has changed. If you do not explicitly set a value, it will now default to the min value instead of 0.

Split Button

• The SplitButton component's icon prop now supports both IconProps and string types for more flexible icon definition.
• The Split Button component's options icon (SplitButtonOption component's icon prop) now supports both IconProps and string types for more flexible icon definition.

Tabs

• The Tabs component now support two modes supported by the enableAutoActive prop (default to true):
  • When set to true, the active tab is automatically updated by manipulating the activeId prop of the Tabs component, along with an onActiveIdChanged event to handle active tab changes. To support this, each Tab component must have a unique id.
  • When set to false, the active state is controlled via an active prop. Be careful, before Tabs generated automatic ids. This has changed as you need to set id yourself.
• To migrate, you can use the default behavior of enableAutoActive:

- <Tabs>
-   <Tab active label="Item 1"></Tab>
-   <Tab label="Item 2"></Tab>
+ <Tabs activeId="tab-item-1">
+   <Tab id="tab-item-1" label="Item 1"></Tab>
+   <Tab id="tab-item-2" label="Item 2"></Tab>
</Tabs>

• The Tabs component has an extra clickTab event.
• The Tab component has a new active prop.
• The Tab components' clickedTabEvent has been renamed to clickedTab.

Text Area

• The Text Area component has been renamed from TextArea to Textarea. The derivative types and props too:
  • TextAreaSize is now TextareaSize.
  • TextAreaSeverity is now TextareaSeverity.

Tooltip

• The Tooltip title prop has been renamed to tooltipTitle.

Typography

• TagType has a stricter type from string to 'h1' | 'h2' | 'p' | 'span'.