The assignment of the 'form-control' class for input and textarea elements is no longer required.
Use ix-dropdown-item
instead of ix-split-button-item
. ix-split-button-item
will be removed in the next major release.
Remove itemClick
event use native click
event instead.
Remove deprecated props
opacity
Remove deprecated props
active
Remove deprecated events
close
Before
<ix-select onItemSelectionChange={...} selectedIndices={...}></ix-select>
Now
<ix-select onValueChange={...} value={...}></ix-select>
Replaced by ix-tabs
implementation.
Before
<ix-button invisible>OK</button>
<ix-icon-button icon="context-menu" invisisble></ix-icon-button>
Now
<ix-button ghost>OK</button>
<ix-icon-button icon="context-menu" ghost></ix-icon-button>
selected
was removed. Use ix-toggle-button
/ix-icon-toggle-button
with property pressed="true"
instead.
<ix-button selected>OK</button>
<ix-icon-button icon="checkboxes" selected></ix-icon-button>
Now
<ix-toggle-button pressed>OK</button>
<ix-icon-toggle-button icon="checkboxes" pressed></ix-icon-toggle-button>
Progression of the workflow steps has to be handled by the business logic now. This change is due to various user feedback.
You can now control the "navigation" of the steps by preventing the stepSelected
event e.g:
<ix-workflow-steps
clickable
onStepSelected={(event) => {
event.preventDefault(); // This prevents the `ix-workflow-steps` to select the clicked step
}}
>
<ix-workflow-step>Test 1</ix-workflow-step>
<ix-workflow-step>Test 2</ix-workflow-step>
<ix-workflow-step>Test 3</ix-workflow-step>
</ix-workflow-steps>
position
was a internal property
Replaced with ix-pill
ix-toggle
is now display: inline-flex
instead of display: flex
Replaced with standard ix-dropdown-item
Now
<ix-group header="Header text" sub-header="Subheader text">
<ix-dropdown slot="dropdown">
<ix-dropdown-item label="Item 1"></ix-dropdown-item>
<ix-dropdown-item label="Item 2"></ix-dropdown-item>
</ix-dropdown>
<ix-group-item text="Example text 1"></ix-group-item>
<ix-group-item text="Example text 2"></ix-group-item>
<ix-group-item text="Example text 3"></ix-group-item>
</ix-group>
- adjustDropdownWidthToReferenceWith
- adjustDropdownWidthToReferenceWidth
The submenu now appends a chevron icon automatically to the trigger element, if the trigger element is an ix-dropdown-item.
Before
<ix-dropdown-item id="submenuTrigger" label="Submenu">
<ix-icon name="chevron-right-small" size="24"></ix-icon>
</ix-dropdown-item>
Now
<ix-dropdown-item id="submenuTrigger" label="Submenu"></ix-dropdown-item>
All automatic placement types are removed from placement type:
export declare type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
Placement will be automatically chosen depending on remaining space. If you want to suppress the automatic behavior you can set the property suppress-automatic-placement
.
This breaking change only affects the function modal
which is exported from @siemens/ix
(not @siemens/ix-angular
etc).
Before
export async function modal<T = any>(
config: ModalConfig<T>
): Promise<ModalInstance<T>>;
Now
export async function showModal<T = any>(
config: ModalConfig<T>
): Promise<ModalInstance<T>>;
Container is not needed anymore because the modal system is using HTMLDialog
now as
basic system to open modal dialogs
Before
export type IxModalSize = 'sm' | 'lg' | 'xl';
Now
export type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';
export type IxModalDynamicSize = 'full-width';
export type IxModalSize = IxModalFixedSize | IxModalDynamicSize;
scrollable
is removed, no successormodalDialogClass
is removed, no successorwindowClass
is removed, no successorcontent
is now genericbackdrop = 'static'
removed, successor will becloseOnBackdropClick
.
Before
const config: ModalConfig = {
// Other properties
backdrop: 'static',
};
Now
const config: ModalConfig = {
// Other properties
backdrop: true // `true` is default
closeOnBackdropClick: true
}
icon
andiconColor
were removed, successor is theix-modal-header
component.
To get a consistent UI design we decided to remove custom backdrops.
Change flip-state from
export enum FlipTileState {
None = 'None',
Info = 'Info',
Warning = 'Warning',
Alarm = 'Alarm',
Primary = 'Primary',
}
to
export enum FlipTileState {
None = 'none',
Info = 'info',
Warning = 'warning',
Alarm = 'alarm',
Primary = 'primary',
}
e.g for alarm state
Before
<ix-flip-tile state="Alarm"></ix-flip-tile>
Now
<ix-flip-tile state="alarm"></ix-flip-tile>
Affected components:
ix-button
ix-icon-button
ix-index-button
ix-dropdown-button
ix-split-button
Change Primary
and Secondary
to lower case primary
and secondary
Change Primary
and Secondary
to lower case primary
and secondary
Before
<ix-menu-item tabIcon="rocket"></ix-menu-item>
Now
<ix-menu-item icon="rocket"></ix-menu-item>
Before
@Event() close: EventEmitter<string>;
Now
@Event()
close: EventEmitter<{
nativeEvent: MouseEvent;
name: string;
}>;
Remove typo sencodary
from variant
property
Remove deprecated invisible
-property
Before
<ix-split-button invisible></ix-split-button>
Now
<ix-split-button ghost></ix-split-button>