github siemens/ix @siemens/ix-react@5.0.0
on GitHub

latest releases: @siemens/ix-angular@5.0.0, @siemens/ix-aggrid@5.0.0, @siemens/ix-docs@5.0.0...
4 hours ago

Major Changes

  • #2514 73a2ed3 Thanks @dmytro-halimov! - Breaking (v5): Remove the placement property (and placement attribute) from ix-split-button. It was not wired to the internal dropdown, so it had no effect; removing it only drops a misleading no-op from the public API. See BREAKING_CHANGES/v5.md.

  • #2524 f2c8b83 Thanks @danielleroux! - Require breadcrumbKey on ix-breadcrumb-item, change ix-breadcrumb nextItems entries from strings to { label, breadcrumbKey } objects, and export the shared BreadcrumbClick payload type so breadcrumb click events expose stable item keys.

    This change was necessary to identify breadcrumb items in a stable way, as their labels may not be unique and can change over time. The breadcrumbKey provides a consistent identifier for each breadcrumb item, allowing for more reliable event handling and state management in applications using the breadcrumb component.

  • #2268 c81324b Thanks @danielleroux! - Update ix-date-dropdown quick date selection from a list to a picker, with quick date options displayed on the left side.

    Removed attributes:

    • ariaLabelDropdownButton: Provided aria-label will be passthrough the component shadow-dom to the actual button
    • customRangeDisabled (also contain removal of i18nCustomItem): Removed because ix-date-dropdown will be a picker with quick selection on the left side.

  • #2516 91f811a Thanks @alexkaduk! - ix-chip: Status-filled hover/active colors and padding use design tokens; custom-color chips keep the overlay behavior.
    ix-chip: Add ariaLabelIcon, forward host ARIA to the main control, optional host role="group", a native close button, and tooltip labeling; React, Angular, and Vue expose ariaLabelIcon.

  • #2508 cdae15b Thanks @alexkaduk! - ix-time-picker: optional minTime and maxTime constrain selectable values (same string shape as format / time). Values outside the inclusive range are disabled in the picker rings.

    Breaking (v5): the hour column header attribute is renamed from i18n-column-header to i18n-hour-column-header. The i18nHourColumnHeader property is unchanged—update static HTML or attribute-based markup. Migration: BREAKING_CHANGES/v5.md.

  • #2525 7042a10 Thanks @danielleroux! - Update the required @siemens/ix-icons peer dependency to ^3.4.0. This is a breaking change that requires consumers to update their @siemens/ix-icons dependency to version 3.4.0 or higher.

  • #2268 c81324b Thanks @danielleroux! - Refactor keyboard navigation for dropdown-related components

    Refactors keyboard navigation to align with W3C accessibility patterns for dropdown-related components, significantly improving accessibility and user experience:

    Component Changes

    Date Picker

    • Added comprehensive keyboard navigation support:
      • Home/End: Navigate to first/last day of week
      • PageUp/PageDown: Navigate to previous/next month
      • Shift+PageUp/Shift+PageDown: Navigate to previous/next year
      • ArrowLeft/ArrowRight/ArrowUp/ArrowDown: Navigate between days
      • Enter/Space: Select focused day
      • Escape: Close picker
    • Replaced manual year/month dropdown with accessible ix-dropdown-button components
    • Implemented visual focus mode with aria-activedescendant for embedded pickers
    • Added infinite scrolling for year selection with IntersectionObserver
    • Improved ARIA labels: ariaLabelMonthSelection and ariaLabelYearSelection props
    • Calendar days now have proper role="button" and descriptive aria-label attributes

    Date Input

    • Implemented aria-activedescendant pattern for combobox interaction
    • Added keyboard forwarding to embedded date picker
    • ArrowDown opens picker and activates keyboard navigation
    • Escape closes picker and returns focus to input
    • Focus management improved with delegatesFocus shadow DOM option

    Date Dropdown

    • Enhanced focus handling with onFocusout to close dropdown when focus leaves
    • Auto-focus date picker when opened via keyboard
    • Added suppressOverflowBehavior to prevent unwanted repositioning

    Dropdown & Dropdown Button

    • New props: disableFocusHandling, disableFocusTrap
    • New events: showChange (preventable), showChanged (post-change)
    • Improved focus proxy for dropdown items with proper role="menuitem"
    • Better keyboard navigation with arrow keys, Home, End, Enter, Escape

    Breadcrumb

    • Complete refactor using ix-dropdown-button for previous/next items
    • Added role="navigation" and role="listitem" for proper semantics
    • Improved ARIA labels (default: "Show previous breadcrumb items")
    • Each breadcrumb item now has aria-current="page" for the current page
    • Keyboard navigation now works consistently across all breadcrumb dropdowns

    Avatar

    • Implemented focus proxy pattern for dropdown menu items
    • Added aria-activedescendant support
    • Button now has role="combobox" with proper aria-controls and aria-expanded
    • Menu items properly labeled with role="menuitem"

    Button

    • Added .ix-focused class for programmatic focus indication
    • Fixed focus-visible styles to work consistently
    • Disabled buttons now have tabindex="-1"

    Application Header

    • Added role="banner" for proper landmark semantics
    • Fixed overflow context menu visibility logic for small viewports

    Breaking Changes

    • ix-breadcrumb-item: ariaLabelButton prop deprecated in favor of direct aria-label attribute
    • Date picker month/year selection UI completely redesigned (visual breaking change)
    • Internal structure for all ix-dropdown related components are changed

  • #2503 8c7fb12 Thanks @danielleroux! - Update ix-menu-about and ix-menu-settings for key-based tabs and slotted ix-tabs opt-in

    ix-menu-about and ix-menu-settings keep their legacy ix-menu-about-item / ix-menu-settings-item rendering by default. To switch to slotted ix-tabs / ix-tab-item markup, set the new suppressLegacyTabs prop on the parent menu component. ix-menu-about-news still uses activeAboutTabKey instead of aboutItemLabel.

    Breaking Changes

    ix-menu-about / ix-menu-settings

    • The slotted ix-tabs integration path uses the new suppressLegacyTabs prop on the parent menu component.
    • ix-menu-about renamed activeTabLabel to activeTabKey for legacy item-based integrations.

    ix-menu-about-item / ix-menu-settings-item

    • tabKey is now required when using legacy item-based integrations.
    • ix-menu-about-item changed from shadow: true to shadow: false.

    ix-menu-about-news

    • New activeAboutTabKey prop replaces aboutItemLabel as the condition for showing the "Show more" footer button.
    • The aboutItemLabel prop no longer controls footer visibility. Use activeAboutTabKey instead.

    Migration

    Use the existing ix-tabs pattern in your application (ix-menu-about / ix-menu-settings), and show the matching slotted content based on the active tab key. Set suppressLegacyTabs on the ix-menu-about / ix-menu-settings and active-tab-key on the nested ix-tabs, not on ix-menu-about or ix-menu-settings. 

    <!-- Slotted ix-tabs path -->
<ix-menu-about suppress-legacy-tabs>
  <ix-tabs active-tab-key="tab-1">
    <ix-tab-item tab-key="tab-1">Tab 1</ix-tab-item>
    <ix-tab-item tab-key="tab-2">Tab 2</ix-tab-item>
  </ix-tabs>
  <!-- render the matching content in the slot using the active tab key -->
</ix-menu-about>
    <!-- Legacy item-based path -->
<ix-menu-about active-tab-key="tab-1">
  <ix-menu-about-item tab-key="tab-1" label="Tab 1"
    >Content 1</ix-menu-about-item
  >
  <ix-menu-about-item tab-key="tab-2" label="Tab 2"
    >Content 2</ix-menu-about-item
  >
</ix-menu-about>
    <!-- Legacy item-based path -->
<ix-menu-settings active-tab-key="tab-1">
  <ix-menu-settings-item tab-key="tab-1" label="Tab 1"
    >Content 1</ix-menu-settings-item
  >
</ix-menu-settings>

  • #2541 130df33 Thanks @danielleroux! - Breaking (v5): showModalLoading() now returns a Promise<ModalLoadingContext>. Await the call before using update() or finish() on the returned loading context.

  • #2471 e324caa Thanks @alexkaduk! - Add non-blocking dialog mode to ix-modal with isNonBlocking and ModalConfig.isNonBlocking: opens with dialog.show() so the page stays interactive (no lightbox or focus trap; aria-modal is false). After open, showModal() schedules initial focus on the first light-DOM match for [autofocus] or [auto-focus] (with focusVisible: true).

    Breaking (v5): Remove disableEscapeClose. Escape and cancel always go through dismissModal(); use beforeDismiss to veto dismissal (e.g. replace disableEscapeClose with beforeDismiss: () => false). showModalLoading is updated accordingly; closeModal from finish() is unchanged.

  • #2465 7406be7 Thanks @danielleroux! - Remove legacy accessible-name properties from button components. Set the native aria-label attribute on the host element instead; it is applied to the inner interactive surface.

    • ix-button: ariaLabelButton (aria-label-button)
    • ix-icon-button: a11yLabel (a11y-label)
    • ix-toggle-button: ariaLabelButton (aria-label-button)
    • ix-icon-toggle-button: ariaLabelIconButton (aria-label-icon-button)

    See Breaking changes v5 for migration examples.

  • #2475 834bbbf Thanks @nuke-ellington! - ix-card-list breaking change: selecting the show-all button or show-more card now reveals all hidden cards by default and toggles back to the hidden-overflow state from the show-less button. To keep the previous event-only behavior, call preventDefault() on the cancelable showAllClick or showMoreCardClick event.

    Fixes #1367 and Fixes #2353

  • #2548 3ece658 Thanks @alexkaduk! - Remove pre-v5 deprecated components, properties, and the showModalLoading string overload.

    Removed components: ix-input-group (use ix-input); ix-validation-tooltip (use built-in validation on ix-input / ix-select); ix-drawer (use ix-pane).

    Removed properties: ariaLabelMenuExpandIconButton on ix-application-header; a11yLabel on ix-avatar; ariaLabelButton on ix-breadcrumb-item; ariaLabelChevronDownIconButton on ix-select; error on ix-slider (use class="ix-invalid" and invalid-text instead).

    Removed util overload: showModalLoading(message: string) — use showModalLoading({ message: '...' }) instead.

    See BREAKING_CHANGES/v5.md (section Removed deprecated components and APIs) for migration details.

  • #2538 909bb6a Thanks @alexkaduk! - Remove no-op ModalConfig fields container, keyboard, and title from the showModal API. They had no effect in v4; delete them from config objects.

    See Breaking changes v5 (ModalConfig: removed no-op options) for migration.

  • #2465 7406be7 Thanks @danielleroux! - Remove unused i18n-expand-sidebar property from ix-menu

Minor Changes

  • #2279 40cfbe0 Thanks @varun-srinivasa! - Add disabled-state support for ix-tree-item, including the exposed disabled property and corresponding tree item state handling.
    Improve ix-tree and ix-tree-item accessibility by updating ARIA roles and positional attributes.

    Fixes #2091

  • #2521 36ce453 Thanks @alexkaduk! - ix-datetime-input: Add minTime and maxTime so the combined date-time field can constrain the time portion.

  • #2458 a6a5309 Thanks @danielleroux! - ix-dropdown now observes the visibility of the trigger element in the viewport while the dropdown is open. If the trigger element scrolls outside the visible viewport, the dropdown will automatically close to prevent it from remaining visible in an unexpected screen position. To keep the dropdown open regardless of trigger visibility, set suppressTriggerVisibilityCheck to true.

  • #2437 4161ab9 Thanks @danielleroux! - Add new component ix-range-field which can currently display range related inputs. Supported components: ix-date-input, ix-time-input and ix-datetime-input.

  • #2478 4231d51 Thanks @khathija-ahamadi! - Support directory upload in ix-upload.

    Fixes #2053
    Fixes #2354

Patch Changes

Check out latest releases or
releases around siemens/ix @siemens/ix-react@5.0.0

Don't miss a new ix release

NewReleases is sending notifications on new releases.

Get notifications