refactor(ui5-view-settings-dialog): API changes

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

@@ -534,10 +534,10 @@ describe("ViewSettingsDialog Tests", () => {
 					<FilterItemOption slot="values" text="A"></FilterItemOption>
 				</FilterItem>
 				<GroupItem slot="groupItems" text="Department"></GroupItem>
-				<ViewSettingsDialogCustomTab slot="customTabs" title="Advanced Settings" tooltip="Advanced" icon="action-settings">
+				<ViewSettingsDialogCustomTab slot="customTabs" titleText="Advanced Settings" tooltip="Advanced" icon="action-settings">
 					<div id="advanced-tab-content">Advanced settings</div>
 				</ViewSettingsDialogCustomTab>
-				<ViewSettingsDialogCustomTab slot="customTabs" title="Metrics Panel" tooltip="Metrics" icon="table-view">
+				<ViewSettingsDialogCustomTab slot="customTabs" titleText="Metrics Panel" tooltip="Metrics" icon="table-view">
 					<div id="metrics-tab-content">Metrics settings</div>
 				</ViewSettingsDialogCustomTab>
 			</ViewSettingsDialog>
@@ -601,10 +601,10 @@ describe("ViewSettingsDialog Tests", () => {
 	it("should render only custom tabs when no built-in tabs are provided", () => {
 		cy.mount(
 			<ViewSettingsDialog id="vsdCustomOnly">
-				<ViewSettingsDialogCustomTab slot="customTabs" title="General Settings" tooltip="General" icon="action-settings">
+				<ViewSettingsDialogCustomTab slot="customTabs" titleText="General Settings" tooltip="General" icon="action-settings">
 					<div id="general-tab-content">General content</div>
 				</ViewSettingsDialogCustomTab>
-				<ViewSettingsDialogCustomTab slot="customTabs" title="Extra Settings" tooltip="Extra" icon="table-view">
+				<ViewSettingsDialogCustomTab slot="customTabs" titleText="Extra Settings" tooltip="Extra" icon="table-view">
 					<div id="extra-tab-content">Extra content</div>
 				</ViewSettingsDialogCustomTab>
 			</ViewSettingsDialog>
@@ -663,9 +663,9 @@ describe("ViewSettingsDialog Tests", () => {
 			.should("have.attr", "disabled");
 	});
 
-	it("should keep Reset button always enabled when enableReset is set", () => {
+	it("should keep Reset button always enabled when resetEnabled is set", () => {
 		cy.mount(
-			<ViewSettingsDialog id="vsd" enableReset={true}>
+			<ViewSettingsDialog id="vsd" resetEnabled={true}>
 				<SortItem slot="sortItems" text="Name"></SortItem>
 				<SortItem slot="sortItems" text="Position"></SortItem>
 			</ViewSettingsDialog>
@@ -681,9 +681,9 @@ describe("ViewSettingsDialog Tests", () => {
 			.should("not.have.attr", "disabled");
 	});
 
-	it("should fire reset-click event when Reset button is clicked", () => {
+	it("should fire reset event when Reset button is clicked", () => {
 		cy.mount(
-			<ViewSettingsDialog id="vsd" enableReset={true} onResetClick={cy.stub().as("resetClick")}>
+			<ViewSettingsDialog id="vsd" resetEnabled={true} onReset={cy.stub().as("resetClick")}>
 				<SortItem slot="sortItems" text="Name"></SortItem>
 				<SortItem slot="sortItems" text="Position"></SortItem>
 			</ViewSettingsDialog>
@@ -707,9 +707,9 @@ describe("ViewSettingsDialog Tests", () => {
 			.should("have.been.calledOnce");
 	});
 
-	it("should reset built-in settings and fire reset-click when Reset is clicked", () => {
+	it("should reset built-in settings and fire reset event when Reset is clicked", () => {
 		cy.mount(
-			<ViewSettingsDialog id="vsd" enableReset={true} onResetClick={cy.stub().as("resetClick")}>
+			<ViewSettingsDialog id="vsd" resetEnabled={true} onReset={cy.stub().as("resetClick")}>
 				<SortItem slot="sortItems" text="Name"></SortItem>
 				<SortItem slot="sortItems" text="Position"></SortItem>
 			</ViewSettingsDialog>

packages/fiori/src/ViewSettingsDialog.ts

@@ -190,12 +190,16 @@ type ViewSettingsDialogInternalMode = `${ViewSettingsDialogMode}` | ViewSettings
 /**
  * Fired when the Reset button is clicked.
  *
- * **Note:** Use this event to reset the state of custom tab content,
- * as the component cannot detect changes within custom tabs.
+ * **Note:** This event is particularly relevant when the dialog contains custom tabs.
+ * By default, the Reset button resets all built-in settings (sort, filter, group) to their
+ * initial values. However, the component has no knowledge of the content or state inside
+ * custom tabs — it cannot detect what has changed or what the "default" values are.
+ * Therefore, when this event is fired, it is the application developer's responsibility
+ * to listen for it and manually reset the custom tab content to its initial state.
  * @since 2.22.0
  * @public
  */
-@event("reset-click", {
+@event("reset", {
 	bubbles: true,
 })
 class ViewSettingsDialog extends UI5Element {
@@ -205,7 +209,7 @@ class ViewSettingsDialog extends UI5Element {
 		"before-open": void,
 		"open": void,
 		"close": void,
-		"reset-click": void,
+		"reset": void,
 	}
 	/**
 	 * Defines the initial sort order.
@@ -234,18 +238,23 @@ class ViewSettingsDialog extends UI5Element {
 	open = false;
 
 	/**
-	 * Defines whether the Reset button is always enabled.
+	 * Controls whether the Reset button is always enabled.
 	 *
-	 * **Note:** By default, the Reset button is only enabled when the dialog settings
-	 * differ from their initial state. Set this property to `true` to keep the Reset
-	 * button always enabled, which is useful when working with custom tabs
-	 * whose internal state changes cannot be detected by the component.
+	 * By default, the Reset button is enabled only when the built-in settings (Sort, Filter, Group)
+	 * differ from their initial state — the component can detect these changes automatically.
+	 * However, when the dialog contains custom tabs, the component has no way to detect
+	 * whether the custom tab content has been modified by the user.
+	 *
+	 * Set this property to `true` when the user has made changes inside a custom tab, so that
+	 * the Reset button becomes enabled and the user can trigger a reset.
+	 * Set it back to `false` once the custom tab content is back to its initial state
+	 * (e.g. after the user confirms or after a reset is applied).
 	 * @default false
 	 * @public
 	 * @since 2.22.0
 	 */
 	@property({ type: Boolean })
-	enableReset = false;
+	resetEnabled = false;
 
 	/**
 	 * Keeps recently focused list in order to focus it on next dialog open.
@@ -441,14 +450,7 @@ class ViewSettingsDialog extends UI5Element {
 	}
 
 	get shouldBuildCustomTabs() {
-		return !!this._renderableCustomTabs.length;
-	}
-
-	/**
-	 * Returns only custom tabs that have an icon defined and can be rendered.
-	 */
-	get _renderableCustomTabs() {
-		return this.customTabs.filter(tab => tab.icon);
+		return !!this.customTabs.length;
 	}
 
 	get hasPagination() {
@@ -457,7 +459,7 @@ class ViewSettingsDialog extends UI5Element {
 			.length;
 
 		if (this.shouldBuildCustomTabs) {
-			return builtInTabsCount + this._renderableCustomTabs.length > 1;
+			return builtInTabsCount + this.customTabs.length > 1;
 		}
 
 		return builtInTabsCount > 1;
@@ -477,7 +479,7 @@ class ViewSettingsDialog extends UI5Element {
 		}
 
 		if (this.shouldBuildCustomTabs) {
-			return this._customTabMode(this._renderableCustomTabs[0]);
+			return this._customTabMode(this.customTabs[0]);
 		}
 
 		return ViewSettingsDialogMode.Sort;
@@ -488,7 +490,7 @@ class ViewSettingsDialog extends UI5Element {
 			return;
 		}
 
-		return this._renderableCustomTabs.find(tab => this._customTabMode(tab) === this._currentMode);
+		return this.customTabs.find(tab => this._customTabMode(tab) === this._currentMode);
 	}
 
 	get _filterByTitle() {
@@ -574,7 +576,7 @@ class ViewSettingsDialog extends UI5Element {
 	 * Determines disabled state of the `Reset` button.
 	 */
 	get _disableResetButton() {
-		if (this.enableReset) {
+		if (this.resetEnabled) {
 			return false;
 		}
 
@@ -903,7 +905,7 @@ class ViewSettingsDialog extends UI5Element {
 		this._recentlyFocused = this._sortOrder!;
 		this._focusRecentlyUsedControl();
 		announce(this._resetButtonAction, InvisibleMessageMode.Assertive);
-		this.fireDecoratorEvent("reset-click");
+		this.fireDecoratorEvent("reset");
 	}
 
 	/**
@@ -936,7 +938,7 @@ class ViewSettingsDialog extends UI5Element {
 		}
 
 		if (this._isCustomMode(mode)) {
-			return this._renderableCustomTabs.some(tab => this._customTabMode(tab) === mode);
+			return this.customTabs.some(tab => this._customTabMode(tab) === mode);
 		}
 
 		return false;

packages/fiori/src/ViewSettingsDialogCustomTab.ts

@@ -5,6 +5,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ViewSettingsDialogCustomTabTemplate from "./ViewSettingsDialogCustomTabTemplate.js";
+import "@ui5/webcomponents-icons/dist/action-settings.js";
 
 /**
  * @class
@@ -31,14 +32,14 @@ import ViewSettingsDialogCustomTabTemplate from "./ViewSettingsDialogCustomTabTe
 })
 class ViewSettingsDialogCustomTab extends UI5Element {
 	/**
-	 * Defines the title of the custom tab.
+	 * Defines the title text of the custom tab.
 	 *
 	 * **Note:** It is displayed in the dialog header when this tab is selected.
 	 * @default ""
 	 * @public
 	 */
 	@property({ type: String })
-	title = "";
+	titleText = "";
 
 	/**
 	 * Defines the tooltip of the custom tab button.
@@ -51,14 +52,13 @@ class ViewSettingsDialogCustomTab extends UI5Element {
 	tooltip = "";
 
 	/**
-	 * Defines the icon of the custom tab.
+	 * Defines the icon of the custom tab button in the segmented button.
 	 *
-	 * **Note:** If not provided, the tab should not be rendered.
-	 * @default ""
+	 * @default "action-settings"
 	 * @public
 	 */
 	@property({ type: String })
-	icon = "";
+	icon = "action-settings";
 
 	/**
 	 * Defines the custom tab content.

packages/fiori/src/ViewSettingsDialogTemplate.tsx

@@ -93,7 +93,7 @@ function _getSplitButtonItems(this: ViewSettingsDialog) {
 	}
 
 	if (this.shouldBuildCustomTabs) {
-		this._renderableCustomTabs.forEach(customTab => {
+		this.customTabs.forEach(customTab => {
 			buttonItems.push(
 				<SegmentedButtonItem
 					selected={this.isCurrentCustomTabMode(customTab)}
@@ -130,8 +130,8 @@ function ViewSettingsDialogTemplateContent(this: ViewSettingsDialog) {
 
 			{this.isModeCustom && this._selectedCustomTab && (
 				<div class="ui5-vsd-custom-tab-content">
-					{this._selectedCustomTab.title && (
-						<div class="ui5-vsd-custom-tab-title">{this._selectedCustomTab.title}</div>
+					{this._selectedCustomTab.titleText && (
+						<div class="ui5-vsd-custom-tab-title">{this._selectedCustomTab.titleText}</div>
 					)}
 					<slot class="ui5-vsd-custom-tab-slot" name={this._selectedCustomTab._individualSlot}></slot>
 				</div>

packages/fiori/test/pages/ViewSettingsDialog.html

@@ -132,7 +132,7 @@ <h3>ViewSettingsDialog with default + custom tabs</h3>
 
 	<ui5-button id="btnOpenDialogWithDefaultAndCustomTabs">VSD - Default + Custom Tabs</ui5-button>
 	<pre id="defaultAndCustomTabsStateJson" class="vsd-custom-tab-state"></pre>
-	<ui5-view-settings-dialog id="vsdDefaultAndCustomTabs" enable-reset>
+	<ui5-view-settings-dialog id="vsdDefaultAndCustomTabs" reset-enabled>
 
 		<ui5-sort-item slot="sortItems" text="Title"></ui5-sort-item>
 		<ui5-sort-item slot="sortItems" text="Author"></ui5-sort-item>
@@ -155,7 +155,7 @@ <h3>ViewSettingsDialog with default + custom tabs</h3>
 			<ui5-filter-item-option slot="values" text="Blue" data-key="filterOptionBlue"></ui5-filter-item-option>
 		</ui5-filter-item>
 
-		<ui5-view-settings-dialog-custom-tab slot="customTabs" title="Preferences" tooltip="Preferences" icon="action-settings">
+		<ui5-view-settings-dialog-custom-tab slot="customTabs" title-text="Preferences" tooltip="Preferences" icon="action-settings">
 			<div class="vsd-custom-tab-section">
 				<div class="vsd-custom-tab-row">
 					<span>Compact mode</span>
@@ -172,7 +172,7 @@ <h3>ViewSettingsDialog with default + custom tabs</h3>
 			</div>
 		</ui5-view-settings-dialog-custom-tab>
 
-		<ui5-view-settings-dialog-custom-tab slot="customTabs" title="Display" tooltip="Display" icon="palette">
+		<ui5-view-settings-dialog-custom-tab slot="customTabs" title-text="Display" tooltip="Display" icon="palette">
 			<div class="vsd-custom-tab-section">
 				<ui5-segmented-button id="defaultAndCustomLayoutSegmented">
 					<ui5-segmented-button-item selected>List</ui5-segmented-button-item>
@@ -193,8 +193,8 @@ <h3>ViewSettingsDialog with custom tabs only</h3>
 
 	<ui5-button id="btnOpenDialogWithJustCustomTabs">VSD - Custom Tabs Only</ui5-button>
 	<pre id="justCustomTabsStateJson" class="vsd-custom-tab-state"></pre>
-	<ui5-view-settings-dialog id="vsdJustCustomTabs" enable-reset>
-		<ui5-view-settings-dialog-custom-tab slot="customTabs" title="Behavior" tooltip="Behavior" icon="action-settings">
+	<ui5-view-settings-dialog id="vsdJustCustomTabs" reset-enabled>
+		<ui5-view-settings-dialog-custom-tab slot="customTabs" title-text="Behavior" tooltip="Behavior" icon="action-settings">
 			<div class="vsd-custom-tab-section">
 				<div class="vsd-custom-tab-row">
 					<span>Enable notifications</span>
@@ -211,7 +211,7 @@ <h3>ViewSettingsDialog with custom tabs only</h3>
 			</div>
 		</ui5-view-settings-dialog-custom-tab>
 
-		<ui5-view-settings-dialog-custom-tab slot="customTabs" title="Layout" tooltip="Layout" icon="palette">
+		<ui5-view-settings-dialog-custom-tab slot="customTabs" title-text="Layout" tooltip="Layout" icon="palette">
 			<div class="vsd-custom-tab-section">
 				<ui5-segmented-button id="justCustomLayoutSegmented">
 					<ui5-segmented-button-item selected>Cards</ui5-segmented-button-item>
@@ -388,7 +388,7 @@ <h3>ViewSettingsDialog with custom tabs only</h3>
 			renderDefaultAndCustomTabsState(defaultAndCustomTabsState);
 		});
 
-		vsdDefaultAndCustomTabs.addEventListener("ui5-reset-click", function() {
+		vsdDefaultAndCustomTabs.addEventListener("ui5-reset", function() {
 			alert("[vsdDefaultAndCustomTabs] Reset clicked - restoring custom tabs to initial state");
 			applyDefaultAndCustomTabsState(defaultAndCustomTabsState);
 		});
@@ -398,7 +398,7 @@ <h3>ViewSettingsDialog with custom tabs only</h3>
 			renderJustCustomTabsState(justCustomTabsState);
 		});
 
-		vsdJustCustomTabs.addEventListener("ui5-reset-click", function() {
+		vsdJustCustomTabs.addEventListener("ui5-reset", function() {
 			alert("[vsdJustCustomTabs] Reset clicked - restoring custom tabs to initial state");
 			applyJustCustomTabsState(justCustomTabsState);
 		});

packages/website/docs/_samples/fiori/ViewSettingsDialog/Basic/main.js

@@ -14,7 +14,7 @@ import "@ui5/webcomponents-fiori/dist/GroupItem.js";
 import "@ui5/webcomponents-fiori/dist/SortItem.js";
 import "@ui5/webcomponents-fiori/dist/FilterItem.js";
 import "@ui5/webcomponents-fiori/dist/FilterItemOption.js";
-import "@ui5/webcomponents-fiori/dist/ViewSettingsCustomTab.js";
+import "@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js";
 
 var vsdResults = document.getElementById("vsdResults");
 

packages/website/docs/_samples/fiori/ViewSettingsDialog/Basic/sample.html

@@ -44,7 +44,7 @@
         <ui5-group-item slot="groupItems" text="Department"></ui5-group-item>
         <ui5-group-item slot="groupItems" text="(Not Grouped)"></ui5-group-item>
 
-        <ui5-view-settings-custom-tab slot="customTabs" title="Preferences" tooltip="Preferences" icon="action-settings" selected>
+        <ui5-view-settings-dialog-custom-tab slot="customTabs" title-text="Preferences" tooltip="Preferences" icon="action-settings" selected>
             <div style="padding: 0.75rem; display: grid; gap: 0.75rem;">
                 <div style="display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;">
                     <span>Compact mode</span>
@@ -59,9 +59,9 @@
                     <ui5-segmented-button-item>Compact</ui5-segmented-button-item>
                 </ui5-segmented-button>
             </div>
-        </ui5-view-settings-custom-tab>
+        </ui5-view-settings-dialog-custom-tab>
 
-        <ui5-view-settings-custom-tab slot="customTabs" title="Display" tooltip="Display" icon="palette">
+        <ui5-view-settings-dialog-custom-tab slot="customTabs" title-text="Display" tooltip="Display" icon="palette">
             <div style="padding: 0.75rem; display: grid; gap: 0.75rem;">
                 <ui5-segmented-button id="displayLayout">
                     <ui5-segmented-button-item selected>List</ui5-segmented-button-item>
@@ -74,7 +74,7 @@
                 </ui5-combobox>
                 <ui5-step-input id="displayRows" min="10" max="100" value="25"></ui5-step-input>
             </div>
-        </ui5-view-settings-custom-tab>
+        </ui5-view-settings-dialog-custom-tab>
     </ui5-view-settings-dialog>
     <br />
     <br />

packages/website/docs/_samples/fiori/ViewSettingsDialog/CustomTabs/main.js

@@ -8,7 +8,7 @@ import "@ui5/webcomponents-icons/dist/palette.js";
 
 import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";
 import "@ui5/webcomponents-fiori/dist/SortItem.js";
-import "@ui5/webcomponents-fiori/dist/ViewSettingsCustomTab.js";
+import "@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js";
 
 btnOpenDialog.addEventListener("click", function () {
 	vsd.open = true;