feat(ui5-user-settings-dialog): add saveMode with Save/Cancel footer

packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx

@@ -1498,3 +1498,97 @@ describe("F6 Navigation", () => {
             .should("be.focused");
     });
 });
+
+describe("Save mode", () => {
+	it("renders the default single Close button when saveMode is not set", () => {
+		cy.mount(<UserSettingsDialog open>
+			<UserSettingsItem text="Setting">
+				<UserSettingsView>
+				</UserSettingsView>
+			</UserSettingsItem>
+		</UserSettingsDialog>);
+		cy.get("[ui5-user-settings-dialog]").shadow().find("[ui5-toolbar]").as("toolbar");
+		cy.get("@toolbar").find("[ui5-toolbar-button]").should("have.length", 1);
+		cy.get("@toolbar").find("[ui5-toolbar-button]").should("have.attr", "design", "Transparent");
+	});
+
+	it("renders Save (Emphasized) + Cancel buttons when saveMode is set", () => {
+		cy.mount(<UserSettingsDialog open saveMode>
+			<UserSettingsItem text="Setting">
+				<UserSettingsView>
+				</UserSettingsView>
+			</UserSettingsItem>
+		</UserSettingsDialog>);
+		cy.get("[ui5-user-settings-dialog]").shadow().find("[ui5-toolbar]").as("toolbar");
+		cy.get("@toolbar").find("[ui5-toolbar-button]").should("have.length", 2);
+		cy.get("@toolbar").find("[ui5-toolbar-button]").eq(0).should("have.attr", "design", "Emphasized");
+		cy.get("@toolbar").find("[ui5-toolbar-button]").eq(1).should("have.attr", "design", "Transparent");
+	});
+
+	it("fires the save event when the Save button is clicked", () => {
+		cy.mount(<UserSettingsDialog open saveMode>
+			<UserSettingsItem text="Setting">
+				<UserSettingsView>
+				</UserSettingsView>
+			</UserSettingsItem>
+		</UserSettingsDialog>);
+		cy.get("[ui5-user-settings-dialog]").as("dialog");
+		cy.get("@dialog").then($d => {
+			$d.get(0).addEventListener("save", cy.stub().as("saveEv"));
+		});
+		cy.get("@dialog").shadow().find("[ui5-toolbar]")
+			.find("[ui5-toolbar-button]").eq(0)
+			.shadow().find("[ui5-button]").click();
+		cy.get("@saveEv").should("have.been.calledOnce");
+	});
+
+	it("fires the cancel event when the Cancel button is clicked", () => {
+		cy.mount(<UserSettingsDialog open saveMode>
+			<UserSettingsItem text="Setting">
+				<UserSettingsView>
+				</UserSettingsView>
+			</UserSettingsItem>
+		</UserSettingsDialog>);
+		cy.get("[ui5-user-settings-dialog]").as("dialog");
+		cy.get("@dialog").then($d => {
+			$d.get(0).addEventListener("cancel", cy.stub().as("cancelEv"));
+		});
+		cy.get("@dialog").shadow().find("[ui5-toolbar]")
+			.find("[ui5-toolbar-button]").eq(1)
+			.shadow().find("[ui5-button]").click();
+		cy.get("@cancelEv").should("have.been.calledOnce");
+	});
+
+	it("does not close the dialog automatically on Save or Cancel", () => {
+		cy.mount(<UserSettingsDialog open saveMode>
+			<UserSettingsItem text="Setting">
+				<UserSettingsView>
+				</UserSettingsView>
+			</UserSettingsItem>
+		</UserSettingsDialog>);
+		cy.get("[ui5-user-settings-dialog]").as("dialog");
+		cy.get("@dialog").shadow().find("[ui5-toolbar]")
+			.find("[ui5-toolbar-button]").eq(0)
+			.shadow().find("[ui5-button]").click();
+		cy.get("@dialog").should("have.attr", "open");
+		cy.get("@dialog").shadow().find("[ui5-toolbar]")
+			.find("[ui5-toolbar-button]").eq(1)
+			.shadow().find("[ui5-button]").click();
+		cy.get("@dialog").should("have.attr", "open");
+	});
+
+	it("still fires before-close on ESC in saveMode", () => {
+		cy.mount(<UserSettingsDialog open saveMode>
+			<UserSettingsItem text="Setting">
+				<UserSettingsView>
+				</UserSettingsView>
+			</UserSettingsItem>
+		</UserSettingsDialog>);
+		cy.get("[ui5-user-settings-dialog]").as("dialog");
+		cy.get("@dialog").then($d => {
+			$d.get(0).addEventListener("before-close", cy.stub().as("beforeClose"));
+		});
+		cy.realPress("Escape");
+		cy.get("@beforeClose").should("have.been.calledOnce");
+	});
+});

packages/fiori/src/UserSettingsDialog.ts

@@ -22,6 +22,8 @@ import {
 	USER_SETTINGS_DIALOG_ACCESSIBLE_NAME,
 	USER_SETTINGS_LIST_ARIA_ROLE_DESC,
 	USER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT,
+	USER_SETTINGS_DIALOG_SAVE_BUTTON_TEXT,
+	USER_SETTINGS_DIALOG_CANCEL_BUTTON_TEXT,
 	USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT,
 } from "./generated/i18n/i18n-defaults.js";
 
@@ -63,31 +65,52 @@ type UserSettingsBeforeCloseEventDetail = PopupBeforeCloseEventDetail;
 })
 
 /**
- * Fired when a settings dialog is open.
+ * Fired when the settings dialog is opened.
  * @public
  */
 @event("open")
 
 /**
  * Fired before the settings dialog is closed.
+ *
+ * **Note:** This event is cancelable via `preventDefault()`, allowing the application to keep the
+ * dialog open — for example, to prompt the user about unsaved changes before dismissal.
  * @public
  */
 @event("before-close", {
 	cancelable: true,
 })
 
 /**
- * Fired when a settings dialog is closed.
+ * Fired when the settings dialog is closed.
  * @public
  */
 @event("close")
 
+/**
+ * Fired when the Save button in the footer is clicked.
+ * The dialog does not close automatically — the application is responsible
+ * for closing it after persisting the changes.
+ * @public
+ */
+@event("save")
+
+/**
+ * Fired when the Cancel button in the footer is clicked.
+ * The dialog does not close automatically — the application is responsible
+ * for closing it after discarding the changes.
+ * @public
+ */
+@event("cancel")
+
 class UserSettingsDialog extends UI5Element {
 	eventDetails!: {
 		"selection-change": UserSettingsItemSelectEventDetail,
 		"open": void,
 		"before-close": UserSettingsBeforeCloseEventDetail,
 		"close": void,
+		"save": void,
+		"cancel": void,
 	};
 	/**
 	 * Defines, if the User Settings Dialog is opened.
@@ -117,6 +140,20 @@ class UserSettingsDialog extends UI5Element {
 	@property({ type: Boolean })
 	showSearchField = false;
 
+	/**
+	 * Defines whether the dialog offers Save and Cancel actions in its footer.
+	 *
+	 * When true, the footer renders a Save (Emphasized) and a Cancel button
+	 * instead of the default Close button. Save and Cancel each fire a
+	 * corresponding event; the application is responsible for closing the
+	 * dialog (typically after persisting or discarding the changes).
+	 *
+	 * @default false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	saveMode = false;
+
 	/**
 	 * Defines the user settings items.
 	 *
@@ -295,6 +332,12 @@ class UserSettingsDialog extends UI5Element {
 	get closeButtonText() {
 		return UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT);
 	}
+	get saveButtonText() {
+		return UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_SAVE_BUTTON_TEXT);
+	}
+	get cancelButtonText() {
+		return UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_CANCEL_BUTTON_TEXT);
+	}
 	get noSearchResultsText() {
 		return UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT);
 	}
@@ -315,6 +358,14 @@ class UserSettingsDialog extends UI5Element {
 		}
 	}
 
+	_handleSaveButtonClick() {
+		this.fireDecoratorEvent("save");
+	}
+
+	_handleCancelButtonClick() {
+		this.fireDecoratorEvent("cancel");
+	}
+
 	_handleCollapseClick() {
 		this._collapsed = false;
 	}

packages/fiori/src/UserSettingsDialogTemplate.tsx

@@ -53,7 +53,14 @@ export default function UserSettingsDialogTemplate(this: UserSettingsDialog) {
 			</div>
 
 			<Toolbar slot="footer" design="Transparent" data-sap-ui-fastnavgroup="true">
-				<ToolbarButton design="Transparent" text={this.closeButtonText} tooltip={this.closeButtonText} onClick={this._handleCloseButtonClick} />
+				{this.saveMode ? (
+					<>
+						<ToolbarButton design="Emphasized" text={this.saveButtonText} onClick={this._handleSaveButtonClick} />
+						<ToolbarButton design="Transparent" text={this.cancelButtonText} onClick={this._handleCancelButtonClick} />
+					</>
+				) : (
+					<ToolbarButton design="Transparent" text={this.closeButtonText} onClick={this._handleCloseButtonClick} />
+				)}
 			</Toolbar>
 		</Dialog>
 	);

packages/fiori/src/i18n/messagebundle.properties

@@ -605,6 +605,12 @@ USER_SETTINGS_LIST_ARIA_ROLE_DESC=User settings Item
 #XTXT: User settings dialog close button
 USER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT=Close
 
+#XTXT: User settings dialog save button
+USER_SETTINGS_DIALOG_SAVE_BUTTON_TEXT=Save
+
+#XTXT: User settings dialog cancel button
+USER_SETTINGS_DIALOG_CANCEL_BUTTON_TEXT=Cancel
+
 #XTXT: User settings dialog not result text
 USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT=No search results