feat(ui5-user-settings-notifications-view): introduce NotificationsView in UserSettingsDialog

[dobromiraboycheva]

Overview

Introducing a new UserSettingsNotificationsView component family for managing notification preferences inside UserSettingsDialog. The design follows a primary → detail drill-in
pattern: a primary view lists all notification types (optionally grouped), and each navigable item opens a dedicated secondary view with its own independent state.

Structure

Three new components:

• ui5-user-settings-notifications-view — extends UserSettingsView. Acts as both the primary list view and the secondary detail view (marked with secondary). Handles drill-in
  navigation automatically by matching a clicked item's item-key to the id of a sibling secondary view. If no id matches, falls back to the first secondary sibling and sets its
  text to the clicked item's label. Navigation can be fully overridden by canceling the item-click event.
• ui5-user-settings-notifications-view-group — extends ListItemGroup. Groups items under a bold section header with a separator line, per the Fiori notifications design spec.
• ui5-user-settings-notifications-view-item — extends ListItemCustom. A toggle row with a title, an optional byline, and a trailing switch reflecting checked. Setting
  navigable renders a navigation arrow and makes the row clickable. The trailing switch can be replaced entirely via the endContent slot (e.g. a ui5-select for frequency); when
  endContent is provided the switch and switch-change event are suppressed.

API

ui5-user-settings-notifications-view-item properties

Property	Type	Default	Description
itemKey	string	""	Unique key used to match a sibling secondary view by id for drill-in navigation.
text	string	""	Title text of the item.
bylineText	string	""	Secondary descriptive text rendered below the title.
checked	boolean	false	Whether the trailing switch is on. Ignored when endContent is used.
navigable	boolean	false	When set, a navigation arrow is shown and clicking fires the parent view's item-click event.

ui5-user-settings-notifications-view-item slots

Slot	Description
endContent	Replaces the default trailing switch with custom content (e.g. ui5-select). Suppresses switch-change.

ui5-user-settings-notifications-view-group properties

Property	Type	Default	Description
headerText	string	""	Bold section title rendered above the grouped items.

ui5-user-settings-notifications-view slots

Slot	Description
default	Mix of ui5-user-settings-notifications-view-item and ui5-user-settings-notifications-view-group elements.
additionalContent	Content rendered above the list (e.g. an ui5-message-strip).

Usage

Primary view with groups and navigable items:

<ui5-user-settings-item icon="bell" text="Notifications" header-text="Notifications">
  <ui5-user-settings-notifications-view id="notifications-main-view">
    <ui5-message-strip slot="additionalContent" design="Information" hide-close-button>
      Some settings are managed by your organization.
    </ui5-message-strip>

    <ui5-user-settings-notifications-view-item text="Allow Notifications" checked></ui5-user-settings-notifications-view-item>

    <ui5-user-settings-notifications-view-group header-text="Sales">
      <ui5-user-settings-notifications-view-item item-key="sales-updates" text="Sales Order Updates" checked navigable></ui5-user-settings-notifications-view-item>
    </ui5-user-settings-notifications-view-group>
  </ui5-user-settings-notifications-view>

  <!-- Secondary detail view — matched by item-key ↔ id -->
  <ui5-user-settings-notifications-view id="sales-updates" secondary>
    <ui5-user-settings-notifications-view-group header-text="Notification Preferences">
      <ui5-user-settings-notifications-view-item item-key="email" text="Email"
        byline-text="Receive notifications by email." checked>
      </ui5-user-settings-notifications-view-item>
      <ui5-user-settings-notifications-view-item item-key="frequency" text="Frequency"
        byline-text="Choose how often to receive notifications.">
        <ui5-select slot="endContent">
          <ui5-option selected>Immediate</ui5-option>
          <ui5-option>Daily digest</ui5-option>
        </ui5-select>
      </ui5-user-settings-notifications-view-item>
    </ui5-user-settings-notifications-view-group>
  </ui5-user-settings-notifications-view>
</ui5-user-settings-item>

Listening to events:

const notificationsItem = document.getElementById("notifications");

// Bubbles up from any item in any view inside this settings item
notificationsItem.addEventListener("switch-change", (e) => {
  console.log(`${e.detail.item.text} → ${e.detail.checked ? "ON" : "OFF"}`);
});

// Override drill-in navigation
document.getElementById("notifications-main-view").addEventListener("item-click", (e) => {
  e.preventDefault(); // skip built-in drill-in
  console.log("Custom navigation for:", e.detail.item.text);
});

[github-actions]

Sample sync reminder

HTML sample changed but React sample (sample.tsx) not updated:

• patterns/UXCIntegration/Basic

Please keep both samples in sync, or ignore if the change does not apply to both.

[sap-ui5-webcomponents-release]

🚀 Deployed on https://pr-13885--ui5-webcomponents-preview.netlify.app