Skip to content

Commit 7c92d74

Browse files
NHristov-sapnnaydenow
authored andcommitted
refactor(ui5-view-settings-dialog): API changes (#13486)
1 parent 0984ef9 commit 7c92d74

10 files changed

Lines changed: 67 additions & 65 deletions

File tree

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -534,10 +534,10 @@ describe("ViewSettingsDialog Tests", () => {
534534
<FilterItemOption slot="values" text="A"></FilterItemOption>
535535
</FilterItem>
536536
<GroupItem slot="groupItems" text="Department"></GroupItem>
537-
<ViewSettingsDialogCustomTab slot="customTabs" title="Advanced Settings" tooltip="Advanced" icon="action-settings">
537+
<ViewSettingsDialogCustomTab slot="customTabs" titleText="Advanced Settings" tooltip="Advanced" icon="action-settings">
538538
<div id="advanced-tab-content">Advanced settings</div>
539539
</ViewSettingsDialogCustomTab>
540-
<ViewSettingsDialogCustomTab slot="customTabs" title="Metrics Panel" tooltip="Metrics" icon="table-view">
540+
<ViewSettingsDialogCustomTab slot="customTabs" titleText="Metrics Panel" tooltip="Metrics" icon="table-view">
541541
<div id="metrics-tab-content">Metrics settings</div>
542542
</ViewSettingsDialogCustomTab>
543543
</ViewSettingsDialog>
@@ -601,10 +601,10 @@ describe("ViewSettingsDialog Tests", () => {
601601
it("should render only custom tabs when no built-in tabs are provided", () => {
602602
cy.mount(
603603
<ViewSettingsDialog id="vsdCustomOnly">
604-
<ViewSettingsDialogCustomTab slot="customTabs" title="General Settings" tooltip="General" icon="action-settings">
604+
<ViewSettingsDialogCustomTab slot="customTabs" titleText="General Settings" tooltip="General" icon="action-settings">
605605
<div id="general-tab-content">General content</div>
606606
</ViewSettingsDialogCustomTab>
607-
<ViewSettingsDialogCustomTab slot="customTabs" title="Extra Settings" tooltip="Extra" icon="table-view">
607+
<ViewSettingsDialogCustomTab slot="customTabs" titleText="Extra Settings" tooltip="Extra" icon="table-view">
608608
<div id="extra-tab-content">Extra content</div>
609609
</ViewSettingsDialogCustomTab>
610610
</ViewSettingsDialog>
@@ -663,9 +663,9 @@ describe("ViewSettingsDialog Tests", () => {
663663
.should("have.attr", "disabled");
664664
});
665665

666-
it("should keep Reset button always enabled when enableReset is set", () => {
666+
it("should keep Reset button always enabled when resetEnabled is set", () => {
667667
cy.mount(
668-
<ViewSettingsDialog id="vsd" enableReset={true}>
668+
<ViewSettingsDialog id="vsd" resetEnabled={true}>
669669
<SortItem slot="sortItems" text="Name"></SortItem>
670670
<SortItem slot="sortItems" text="Position"></SortItem>
671671
</ViewSettingsDialog>
@@ -681,9 +681,9 @@ describe("ViewSettingsDialog Tests", () => {
681681
.should("not.have.attr", "disabled");
682682
});
683683

684-
it("should fire reset-click event when Reset button is clicked", () => {
684+
it("should fire reset event when Reset button is clicked", () => {
685685
cy.mount(
686-
<ViewSettingsDialog id="vsd" enableReset={true} onResetClick={cy.stub().as("resetClick")}>
686+
<ViewSettingsDialog id="vsd" resetEnabled={true} onReset={cy.stub().as("resetClick")}>
687687
<SortItem slot="sortItems" text="Name"></SortItem>
688688
<SortItem slot="sortItems" text="Position"></SortItem>
689689
</ViewSettingsDialog>
@@ -707,9 +707,9 @@ describe("ViewSettingsDialog Tests", () => {
707707
.should("have.been.calledOnce");
708708
});
709709

710-
it("should reset built-in settings and fire reset-click when Reset is clicked", () => {
710+
it("should reset built-in settings and fire reset event when Reset is clicked", () => {
711711
cy.mount(
712-
<ViewSettingsDialog id="vsd" enableReset={true} onResetClick={cy.stub().as("resetClick")}>
712+
<ViewSettingsDialog id="vsd" resetEnabled={true} onReset={cy.stub().as("resetClick")}>
713713
<SortItem slot="sortItems" text="Name"></SortItem>
714714
<SortItem slot="sortItems" text="Position"></SortItem>
715715
</ViewSettingsDialog>

packages/fiori/src/ViewSettingsDialog.ts

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -190,12 +190,16 @@ type ViewSettingsDialogInternalMode = `${ViewSettingsDialogMode}` | ViewSettings
190190
/**
191191
* Fired when the Reset button is clicked.
192192
*
193-
* **Note:** Use this event to reset the state of custom tab content,
194-
* as the component cannot detect changes within custom tabs.
193+
* **Note:** This event is particularly relevant when the dialog contains custom tabs.
194+
* By default, the Reset button resets all built-in settings (sort, filter, group) to their
195+
* initial values. However, the component has no knowledge of the content or state inside
196+
* custom tabs — it cannot detect what has changed or what the "default" values are.
197+
* Therefore, when this event is fired, it is the application developer's responsibility
198+
* to listen for it and manually reset the custom tab content to its initial state.
195199
* @since 2.22.0
196200
* @public
197201
*/
198-
@event("reset-click", {
202+
@event("reset", {
199203
bubbles: true,
200204
})
201205
class ViewSettingsDialog extends UI5Element {
@@ -205,7 +209,7 @@ class ViewSettingsDialog extends UI5Element {
205209
"before-open": void,
206210
"open": void,
207211
"close": void,
208-
"reset-click": void,
212+
"reset": void,
209213
}
210214
/**
211215
* Defines the initial sort order.
@@ -234,18 +238,23 @@ class ViewSettingsDialog extends UI5Element {
234238
open = false;
235239

236240
/**
237-
* Defines whether the Reset button is always enabled.
241+
* Controls whether the Reset button is always enabled.
238242
*
239-
* **Note:** By default, the Reset button is only enabled when the dialog settings
240-
* differ from their initial state. Set this property to `true` to keep the Reset
241-
* button always enabled, which is useful when working with custom tabs
242-
* whose internal state changes cannot be detected by the component.
243+
* By default, the Reset button is enabled only when the built-in settings (Sort, Filter, Group)
244+
* differ from their initial state — the component can detect these changes automatically.
245+
* However, when the dialog contains custom tabs, the component has no way to detect
246+
* whether the custom tab content has been modified by the user.
247+
*
248+
* Set this property to `true` when the user has made changes inside a custom tab, so that
249+
* the Reset button becomes enabled and the user can trigger a reset.
250+
* Set it back to `false` once the custom tab content is back to its initial state
251+
* (e.g. after the user confirms or after a reset is applied).
243252
* @default false
244253
* @public
245254
* @since 2.22.0
246255
*/
247256
@property({ type: Boolean })
248-
enableReset = false;
257+
resetEnabled = false;
249258

250259
/**
251260
* Keeps recently focused list in order to focus it on next dialog open.
@@ -441,14 +450,7 @@ class ViewSettingsDialog extends UI5Element {
441450
}
442451

443452
get shouldBuildCustomTabs() {
444-
return !!this._renderableCustomTabs.length;
445-
}
446-
447-
/**
448-
* Returns only custom tabs that have an icon defined and can be rendered.
449-
*/
450-
get _renderableCustomTabs() {
451-
return this.customTabs.filter(tab => tab.icon);
453+
return !!this.customTabs.length;
452454
}
453455

454456
get hasPagination() {
@@ -457,7 +459,7 @@ class ViewSettingsDialog extends UI5Element {
457459
.length;
458460

459461
if (this.shouldBuildCustomTabs) {
460-
return builtInTabsCount + this._renderableCustomTabs.length > 1;
462+
return builtInTabsCount + this.customTabs.length > 1;
461463
}
462464

463465
return builtInTabsCount > 1;
@@ -477,7 +479,7 @@ class ViewSettingsDialog extends UI5Element {
477479
}
478480

479481
if (this.shouldBuildCustomTabs) {
480-
return this._customTabMode(this._renderableCustomTabs[0]);
482+
return this._customTabMode(this.customTabs[0]);
481483
}
482484

483485
return ViewSettingsDialogMode.Sort;
@@ -488,7 +490,7 @@ class ViewSettingsDialog extends UI5Element {
488490
return;
489491
}
490492

491-
return this._renderableCustomTabs.find(tab => this._customTabMode(tab) === this._currentMode);
493+
return this.customTabs.find(tab => this._customTabMode(tab) === this._currentMode);
492494
}
493495

494496
get _filterByTitle() {
@@ -574,7 +576,7 @@ class ViewSettingsDialog extends UI5Element {
574576
* Determines disabled state of the `Reset` button.
575577
*/
576578
get _disableResetButton() {
577-
if (this.enableReset) {
579+
if (this.resetEnabled) {
578580
return false;
579581
}
580582

@@ -903,7 +905,7 @@ class ViewSettingsDialog extends UI5Element {
903905
this._recentlyFocused = this._sortOrder!;
904906
this._focusRecentlyUsedControl();
905907
announce(this._resetButtonAction, InvisibleMessageMode.Assertive);
906-
this.fireDecoratorEvent("reset-click");
908+
this.fireDecoratorEvent("reset");
907909
}
908910

909911
/**
@@ -936,7 +938,7 @@ class ViewSettingsDialog extends UI5Element {
936938
}
937939

938940
if (this._isCustomMode(mode)) {
939-
return this._renderableCustomTabs.some(tab => this._customTabMode(tab) === mode);
941+
return this.customTabs.some(tab => this._customTabMode(tab) === mode);
940942
}
941943

942944
return false;

packages/fiori/src/ViewSettingsDialogCustomTab.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
55
import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
66
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
77
import ViewSettingsDialogCustomTabTemplate from "./ViewSettingsDialogCustomTabTemplate.js";
8+
import "@ui5/webcomponents-icons/dist/action-settings.js";
89

910
/**
1011
* @class
@@ -31,14 +32,14 @@ import ViewSettingsDialogCustomTabTemplate from "./ViewSettingsDialogCustomTabTe
3132
})
3233
class ViewSettingsDialogCustomTab extends UI5Element {
3334
/**
34-
* Defines the title of the custom tab.
35+
* Defines the title text of the custom tab.
3536
*
3637
* **Note:** It is displayed in the dialog header when this tab is selected.
3738
* @default ""
3839
* @public
3940
*/
4041
@property({ type: String })
41-
title = "";
42+
titleText = "";
4243

4344
/**
4445
* Defines the tooltip of the custom tab button.
@@ -51,14 +52,13 @@ class ViewSettingsDialogCustomTab extends UI5Element {
5152
tooltip = "";
5253

5354
/**
54-
* Defines the icon of the custom tab.
55+
* Defines the icon of the custom tab button in the segmented button.
5556
*
56-
* **Note:** If not provided, the tab should not be rendered.
57-
* @default ""
57+
* @default "action-settings"
5858
* @public
5959
*/
6060
@property({ type: String })
61-
icon = "";
61+
icon = "action-settings";
6262

6363
/**
6464
* Defines the custom tab content.

packages/fiori/src/ViewSettingsDialogTemplate.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ function _getSplitButtonItems(this: ViewSettingsDialog) {
9393
}
9494

9595
if (this.shouldBuildCustomTabs) {
96-
this._renderableCustomTabs.forEach(customTab => {
96+
this.customTabs.forEach(customTab => {
9797
buttonItems.push(
9898
<SegmentedButtonItem
9999
selected={this.isCurrentCustomTabMode(customTab)}
@@ -130,8 +130,8 @@ function ViewSettingsDialogTemplateContent(this: ViewSettingsDialog) {
130130

131131
{this.isModeCustom && this._selectedCustomTab && (
132132
<div class="ui5-vsd-custom-tab-content">
133-
{this._selectedCustomTab.title && (
134-
<div class="ui5-vsd-custom-tab-title">{this._selectedCustomTab.title}</div>
133+
{this._selectedCustomTab.titleText && (
134+
<div class="ui5-vsd-custom-tab-title">{this._selectedCustomTab.titleText}</div>
135135
)}
136136
<slot class="ui5-vsd-custom-tab-slot" name={this._selectedCustomTab._individualSlot}></slot>
137137
</div>

packages/fiori/test/pages/ViewSettingsDialog.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ <h3>ViewSettingsDialog with default + custom tabs</h3>
132132

133133
<ui5-button id="btnOpenDialogWithDefaultAndCustomTabs">VSD - Default + Custom Tabs</ui5-button>
134134
<pre id="defaultAndCustomTabsStateJson" class="vsd-custom-tab-state"></pre>
135-
<ui5-view-settings-dialog id="vsdDefaultAndCustomTabs" enable-reset>
135+
<ui5-view-settings-dialog id="vsdDefaultAndCustomTabs" reset-enabled>
136136

137137
<ui5-sort-item slot="sortItems" text="Title"></ui5-sort-item>
138138
<ui5-sort-item slot="sortItems" text="Author"></ui5-sort-item>
@@ -155,7 +155,7 @@ <h3>ViewSettingsDialog with default + custom tabs</h3>
155155
<ui5-filter-item-option slot="values" text="Blue" data-key="filterOptionBlue"></ui5-filter-item-option>
156156
</ui5-filter-item>
157157

158-
<ui5-view-settings-dialog-custom-tab slot="customTabs" title="Preferences" tooltip="Preferences" icon="action-settings">
158+
<ui5-view-settings-dialog-custom-tab slot="customTabs" title-text="Preferences" tooltip="Preferences" icon="action-settings">
159159
<div class="vsd-custom-tab-section">
160160
<div class="vsd-custom-tab-row">
161161
<span>Compact mode</span>
@@ -172,7 +172,7 @@ <h3>ViewSettingsDialog with default + custom tabs</h3>
172172
</div>
173173
</ui5-view-settings-dialog-custom-tab>
174174

175-
<ui5-view-settings-dialog-custom-tab slot="customTabs" title="Display" tooltip="Display" icon="palette">
175+
<ui5-view-settings-dialog-custom-tab slot="customTabs" title-text="Display" tooltip="Display" icon="palette">
176176
<div class="vsd-custom-tab-section">
177177
<ui5-segmented-button id="defaultAndCustomLayoutSegmented">
178178
<ui5-segmented-button-item selected>List</ui5-segmented-button-item>
@@ -193,8 +193,8 @@ <h3>ViewSettingsDialog with custom tabs only</h3>
193193

194194
<ui5-button id="btnOpenDialogWithJustCustomTabs">VSD - Custom Tabs Only</ui5-button>
195195
<pre id="justCustomTabsStateJson" class="vsd-custom-tab-state"></pre>
196-
<ui5-view-settings-dialog id="vsdJustCustomTabs" enable-reset>
197-
<ui5-view-settings-dialog-custom-tab slot="customTabs" title="Behavior" tooltip="Behavior" icon="action-settings">
196+
<ui5-view-settings-dialog id="vsdJustCustomTabs" reset-enabled>
197+
<ui5-view-settings-dialog-custom-tab slot="customTabs" title-text="Behavior" tooltip="Behavior" icon="action-settings">
198198
<div class="vsd-custom-tab-section">
199199
<div class="vsd-custom-tab-row">
200200
<span>Enable notifications</span>
@@ -211,7 +211,7 @@ <h3>ViewSettingsDialog with custom tabs only</h3>
211211
</div>
212212
</ui5-view-settings-dialog-custom-tab>
213213

214-
<ui5-view-settings-dialog-custom-tab slot="customTabs" title="Layout" tooltip="Layout" icon="palette">
214+
<ui5-view-settings-dialog-custom-tab slot="customTabs" title-text="Layout" tooltip="Layout" icon="palette">
215215
<div class="vsd-custom-tab-section">
216216
<ui5-segmented-button id="justCustomLayoutSegmented">
217217
<ui5-segmented-button-item selected>Cards</ui5-segmented-button-item>
@@ -388,7 +388,7 @@ <h3>ViewSettingsDialog with custom tabs only</h3>
388388
renderDefaultAndCustomTabsState(defaultAndCustomTabsState);
389389
});
390390

391-
vsdDefaultAndCustomTabs.addEventListener("ui5-reset-click", function() {
391+
vsdDefaultAndCustomTabs.addEventListener("ui5-reset", function() {
392392
alert("[vsdDefaultAndCustomTabs] Reset clicked - restoring custom tabs to initial state");
393393
applyDefaultAndCustomTabsState(defaultAndCustomTabsState);
394394
});
@@ -398,7 +398,7 @@ <h3>ViewSettingsDialog with custom tabs only</h3>
398398
renderJustCustomTabsState(justCustomTabsState);
399399
});
400400

401-
vsdJustCustomTabs.addEventListener("ui5-reset-click", function() {
401+
vsdJustCustomTabs.addEventListener("ui5-reset", function() {
402402
alert("[vsdJustCustomTabs] Reset clicked - restoring custom tabs to initial state");
403403
applyJustCustomTabsState(justCustomTabsState);
404404
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import "@ui5/webcomponents-fiori/dist/GroupItem.js";
1414
import "@ui5/webcomponents-fiori/dist/SortItem.js";
1515
import "@ui5/webcomponents-fiori/dist/FilterItem.js";
1616
import "@ui5/webcomponents-fiori/dist/FilterItemOption.js";
17-
import "@ui5/webcomponents-fiori/dist/ViewSettingsCustomTab.js";
17+
import "@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js";
1818

1919
var vsdResults = document.getElementById("vsdResults");
2020

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
<ui5-group-item slot="groupItems" text="Department"></ui5-group-item>
4545
<ui5-group-item slot="groupItems" text="(Not Grouped)"></ui5-group-item>
4646

47-
<ui5-view-settings-custom-tab slot="customTabs" title="Preferences" tooltip="Preferences" icon="action-settings" selected>
47+
<ui5-view-settings-dialog-custom-tab slot="customTabs" title-text="Preferences" tooltip="Preferences" icon="action-settings" selected>
4848
<div style="padding: 0.75rem; display: grid; gap: 0.75rem;">
4949
<div style="display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;">
5050
<span>Compact mode</span>
@@ -59,9 +59,9 @@
5959
<ui5-segmented-button-item>Compact</ui5-segmented-button-item>
6060
</ui5-segmented-button>
6161
</div>
62-
</ui5-view-settings-custom-tab>
62+
</ui5-view-settings-dialog-custom-tab>
6363

64-
<ui5-view-settings-custom-tab slot="customTabs" title="Display" tooltip="Display" icon="palette">
64+
<ui5-view-settings-dialog-custom-tab slot="customTabs" title-text="Display" tooltip="Display" icon="palette">
6565
<div style="padding: 0.75rem; display: grid; gap: 0.75rem;">
6666
<ui5-segmented-button id="displayLayout">
6767
<ui5-segmented-button-item selected>List</ui5-segmented-button-item>
@@ -74,7 +74,7 @@
7474
</ui5-combobox>
7575
<ui5-step-input id="displayRows" min="10" max="100" value="25"></ui5-step-input>
7676
</div>
77-
</ui5-view-settings-custom-tab>
77+
</ui5-view-settings-dialog-custom-tab>
7878
</ui5-view-settings-dialog>
7979
<br />
8080
<br />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import "@ui5/webcomponents-icons/dist/palette.js";
88

99
import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";
1010
import "@ui5/webcomponents-fiori/dist/SortItem.js";
11-
import "@ui5/webcomponents-fiori/dist/ViewSettingsCustomTab.js";
11+
import "@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js";
1212

1313
btnOpenDialog.addEventListener("click", function () {
1414
vsd.open = true;

0 commit comments

Comments
 (0)