Skip to content

Commit d303627

Browse files
dobromiraboychevadobromiraboycheva
authored
feat(ui5-user-settings-item): 'pages' is default slot (#12610)
1 parent 4e2c4d8 commit d303627

File tree

6 files changed

+45
-44
lines changed

6 files changed

+45
-44
lines changed

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -178,9 +178,9 @@ describe("Initial rendering", () => {
178178
it("tests setting tabs", () => {
179179
cy.mount(<UserSettingsDialog open>
180180
<UserSettingsItem>
181-
<UserSettingsView text="Setting1">
181+
<UserSettingsView text="Setting1" slot="tabs">
182182
</UserSettingsView>
183-
<UserSettingsView text="Setting2">
183+
<UserSettingsView text="Setting2" slot="tabs">
184184
</UserSettingsView>
185185
</UserSettingsItem>
186186
</UserSettingsDialog>);
@@ -364,11 +364,11 @@ describe("Events", () => {
364364
it("tests back-click event on secondary page", () => {
365365
cy.mount(<UserSettingsDialog open>
366366
<UserSettingsItem>
367-
<UserSettingsView slot="pages">
367+
<UserSettingsView>
368368
<Button id="product1-button">Product 1</Button>
369369
<Button id="product2-button">Product 2</Button>
370370
</UserSettingsView>
371-
<UserSettingsView slot="pages" text="Inner Page" id="notification-second-page" secondary selected>second page content
371+
<UserSettingsView text="Inner Page" id="notification-second-page" secondary selected>second page content
372372
</UserSettingsView>
373373
</UserSettingsItem>
374374
</UserSettingsDialog>);
@@ -394,11 +394,11 @@ describe("Events", () => {
394394
cy.ui5SimulateDevice("phone");
395395
cy.mount(<UserSettingsDialog open>
396396
<UserSettingsItem>
397-
<UserSettingsView slot="pages">
397+
<UserSettingsView>
398398
<Button id="product1-button">Product 1</Button>
399399
<Button id="product2-button">Product 2</Button>
400400
</UserSettingsView>
401-
<UserSettingsView slot="pages" text="Inner Page" id="notification-second-page" secondary>second page content
401+
<UserSettingsView text="Inner Page" id="notification-second-page" secondary>second page content
402402
</UserSettingsView>
403403
</UserSettingsItem>
404404
</UserSettingsDialog>);
@@ -433,11 +433,11 @@ describe("Events", () => {
433433
it("tests selection-change event", () => {
434434
cy.mount(<UserSettingsDialog open>
435435
<UserSettingsItem>
436-
<UserSettingsView text="First tab">
436+
<UserSettingsView text="First tab" slot="tabs">
437437
<Button id="product1-button">Product 1</Button>
438438
<Button id="product2-button">Product 2</Button>
439439
</UserSettingsView>
440-
<UserSettingsView text="Second tab" id="notification-second-page">second tab
440+
<UserSettingsView text="Second tab" id="notification-second-page" slot="tabs">second tab
441441
</UserSettingsView>
442442
</UserSettingsItem>
443443
</UserSettingsDialog>);
@@ -459,11 +459,11 @@ describe("Events", () => {
459459
it("tests selection-change event prevented", () => {
460460
cy.mount(<UserSettingsDialog open>
461461
<UserSettingsItem>
462-
<UserSettingsView text="First tab">
462+
<UserSettingsView text="First tab" slot="tabs">
463463
<Button id="product1-button">Product 1</Button>
464464
<Button id="product2-button">Product 2</Button>
465465
</UserSettingsView>
466-
<UserSettingsView text="Second tab" id="notification-second-page">second tab
466+
<UserSettingsView text="Second tab" id="notification-second-page" slot="tabs">second tab
467467
</UserSettingsView>
468468
</UserSettingsItem>
469469
</UserSettingsDialog>);
@@ -574,9 +574,9 @@ describe("Responsiveness", () => {
574574
cy.ui5SimulateDevice("phone");
575575
cy.mount(<UserSettingsDialog open>
576576
<UserSettingsItem>
577-
<UserSettingsView text="Setting1">
577+
<UserSettingsView text="Setting1" slot="tabs">
578578
</UserSettingsView>
579-
<UserSettingsView text="Setting2">
579+
<UserSettingsView text="Setting2" slot="tabs">
580580
</UserSettingsView>
581581
</UserSettingsItem>
582582
</UserSettingsDialog>);

‎packages/fiori/src/UserSettingsItem.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -149,9 +149,13 @@ class UserSettingsItem extends UI5Element {
149149
accessibleName?: string;
150150

151151
/**
152-
* Defines the tab views of the user settings item.
152+
* Defines the page views of the user settings item.
153+
*
154+
* If there are no tab views, the first page view will be shown unless there is selected one. If there is selected page
155+
* view it will be shown no matter if there are tab views.
156+
*
157+
* The page views are displayed by default if there is no selected tab view.
153158
*
154-
* The tab views are displayed by default if there is no selected page view.
155159
* @public
156160
*/
157161
@slot({
@@ -163,13 +167,10 @@ class UserSettingsItem extends UI5Element {
163167
slots: false,
164168
},
165169
})
166-
tabs!: Array<UserSettingsView>;
170+
pages!: Array<UserSettingsView>;
167171

168172
/**
169-
* Defines the page views of the user settings item.
170-
*
171-
* If there are no tab views, the first page view will be shown unless there is selected one. If there is selected page
172-
* view it will be shown no matter if there are tab views.
173+
* Defines the tab views of the user settings item.
173174
*
174175
* @public
175176
*/
@@ -181,7 +182,7 @@ class UserSettingsItem extends UI5Element {
181182
slots: false,
182183
},
183184
})
184-
pages!: Array<UserSettingsView>;
185+
tabs!: Array<UserSettingsView>;
185186

186187
/**
187188
* Indicates whether any of the element siblings have icon.

‎packages/fiori/src/themes/UserSettingsItem.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
padding: 1rem 1rem 0.5rem;
1616
font-size: var(--sapFontHeader5Size);
1717
font-family: var(--sapFontBoldFamily);
18-
border-bottom: 0.0625rem solid var(--sapList_BorderColor);
1918
}
2019

2120
.ui5-user-settings-item-loading-container {

‎packages/fiori/test/pages/UserSettingsDialog.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
<ui5-button id="btnOpenSettings">User settings</ui5-button>
4141
<ui5-user-settings-dialog id="setting" header-text="Settings" show-search-field>
4242
<ui5-user-settings-item icon="user-settings" text="User Account" tooltip="User Account" header-text="User Account">
43-
<ui5-user-settings-view slot="pages">
43+
<ui5-user-settings-view>
4444
<ui5-icon name="person-placeholder"></ui5-icon><ui5-title level="H3" size="H3" class="ua-name">Alain Chevalier</ui5-title>
4545
<div class="container">
4646
<div class="ua-info-item">
@@ -67,7 +67,7 @@
6767
</ui5-user-settings-item>
6868

6969
<ui5-user-settings-item icon="palette" text="Appearance" tooltip="Appearance" header-text="Appearance">
70-
<ui5-user-settings-view text="Themes">
70+
<ui5-user-settings-view text="Themes" slot="tabs">
7171
<ui5-list separators="Inner">
7272
<ui5-li icon="palette">SAP Morning Horizon</ui5-li>
7373
<ui5-li icon="palette">SAP Evening Horizon</ui5-li>
@@ -77,7 +77,7 @@
7777
<ui5-button id="themeSave" class="save-btn" design="Emphasized">Save</ui5-button>
7878
<ui5-toast design="Emphasized">Changes applied.</ui5-toast>
7979
</ui5-user-settings-view>
80-
<ui5-user-settings-view text="Display settings">
80+
<ui5-user-settings-view text="Display settings" slot="tabs">
8181
<ui5-checkbox checked text="Optimized for Touch Input"></ui5-checkbox>
8282
<ui5-panel fixed>
8383
<ui5-label>
@@ -89,7 +89,7 @@
8989
</ui5-user-settings-item>
9090

9191
<ui5-user-settings-item text="Language & Region" tooltip="Language & Region" header-text="Language & Region">
92-
<ui5-user-settings-view slot="pages">
92+
<ui5-user-settings-view>
9393
<div class="container">
9494
<div class="lr-item">
9595
<ui5-label>Language and Region:</ui5-label>
@@ -127,12 +127,12 @@
127127
</ui5-user-settings-item>
128128

129129
<ui5-user-settings-item icon="iphone" text="SAP Mobile Start Application" tooltip="SAP Mobile Start Application" header-text="SAP Mobile Start Application">
130-
<ui5-user-settings-view slot="pages">
130+
<ui5-user-settings-view >
131131
<ui5-button id="mobile1-button">iOS</ui5-button>
132132
<ui5-button id="mobile2-button">Android</ui5-button>
133133
</ui5-user-settings-view>
134134

135-
<ui5-user-settings-view slot="pages" text="Inner Page" id="mobile-second-page" secondary>
135+
<ui5-user-settings-view text="Inner Page" id="mobile-second-page" secondary>
136136
<ui5-text>Enable access to your site from the SAP Mobile Start application.</ui5-text>
137137
<ui5-button id="mobile-install">Install</ui5-button><ui5-button id="mobile-register">Register</ui5-button>
138138
<ui5-text>Scan the QR Code to install the mobile application</ui5-text>
@@ -141,7 +141,7 @@
141141
</ui5-user-settings-item>
142142

143143
<ui5-user-settings-item id="notifications" icon="bell" text="Notifications" tooltip="Notifications" header-text="Notifications">
144-
<ui5-user-settings-view slot="pages">
144+
<ui5-user-settings-view>
145145
<ui5-list class="custom-list-main">
146146

147147
<ui5-li-custom>
@@ -192,7 +192,7 @@
192192
</ui5-list>
193193
</ui5-user-settings-view>
194194

195-
<ui5-user-settings-view slot="pages" id="notification-second-page" secondary>
195+
<ui5-user-settings-view id="notification-second-page" secondary>
196196
<ui5-li-custom class="ui5-list-secondary">
197197
<div class="list-item">
198198
<div class="item-left">
@@ -294,7 +294,7 @@
294294
</ui5-list>
295295
</ui5-user-settings-view>
296296

297-
<ui5-user-settings-view slot="pages" id="sales-order-second-page" secondary>
297+
<ui5-user-settings-view id="sales-order-second-page" secondary>
298298
<ui5-title class="list-header" level="H2" size="H2">Sales Order Updates</ui5-title>
299299

300300
<ui5-list class="ui5-list-secondary" separators="None">
@@ -402,6 +402,7 @@
402402

403403
<ui5-dialog id="additionalDialog" state="Critical" header-text="Warning">
404404
<ui5-text>Clicking on reset will delete your personalization settings for the launchpad (e.g. theme, language, user activities, and home page content) and for apps using the launchpad personalization features (e.g. filter settings, table columns).
405+
<ui5-text>Clicking on reset will delete your personalization settslotings for the launchpad (e.g. theme, language, user activities, and home page content) and for apps using the launchpad personalization features (e.g. filter settings, table columns).
405406
This action is irreversible.
406407
Further changes in the dialog will not be applied.
407408
Are you sure you want to proceed with the reset?</ui5-text>

‎packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838

3939
<ui5-user-settings-dialog id="settings" header-text="Settings" show-search-field>
4040
<ui5-user-settings-item icon="user-settings" text="User Account" tooltip="User Account" header-text="User Account">
41-
<ui5-user-settings-view slot="pages">
41+
<ui5-user-settings-view>
4242
<ui5-icon name="person-placeholder"></ui5-icon><ui5-title level="H3" size="H3" class="ua-name">Alain Chevalier</ui5-title>
4343
<div class="container">
4444
<div class="ua-info-item">
@@ -65,7 +65,7 @@
6565
</ui5-user-settings-item>
6666

6767
<ui5-user-settings-item icon="palette" text="Appearance" tooltip="Appearance" header-text="Appearance">
68-
<ui5-user-settings-view text="Themes">
68+
<ui5-user-settings-view text="Themes" slot="tabs">
6969
<ui5-list separators="Inner">
7070
<ui5-li icon="palette">SAP Morning Horizon</ui5-li>
7171
<ui5-li icon="palette">SAP Evening Horizon</ui5-li>
@@ -75,7 +75,7 @@
7575
<ui5-button id="themeSave" class="save-btn" design="Emphasized">Save</ui5-button>
7676
<ui5-toast design="Emphasized">Changes applied.</ui5-toast>
7777
</ui5-user-settings-view>
78-
<ui5-user-settings-view text="Display settings">
78+
<ui5-user-settings-view text="Display settings" slot="tabs">
7979
<ui5-checkbox checked text="Optimized for Touch Input"></ui5-checkbox>
8080
<ui5-panel fixed>
8181
<ui5-label>
@@ -87,7 +87,7 @@
8787
</ui5-user-settings-item>
8888

8989
<ui5-user-settings-item text="Language & Region" tooltip="Language & Region" header-text="Language & Region">
90-
<ui5-user-settings-view slot="pages">
90+
<ui5-user-settings-view>
9191
<div class="container">
9292
<div class="lr-item">
9393
<ui5-label>Language and Region:</ui5-label>
@@ -125,12 +125,12 @@
125125
</ui5-user-settings-item>
126126

127127
<ui5-user-settings-item icon="iphone" text="SAP Mobile Start Application" tooltip="SAP Mobile Start Application" header-text="SAP Mobile Start Application">
128-
<ui5-user-settings-view slot="pages">
128+
<ui5-user-settings-view>
129129
<ui5-button id="mobile1-button">iOS</ui5-button>
130130
<ui5-button id="mobile2-button">Android</ui5-button>
131131
</ui5-user-settings-view>
132132

133-
<ui5-user-settings-view slot="pages" text="Inner Page" id="mobile-second-page" secondary>
133+
<ui5-user-settings-view text="Inner Page" id="mobile-second-page" secondary>
134134
<ui5-text>Enable access to your site from the SAP Mobile Start application.</ui5-text>
135135
<ui5-button id="mobile-install">Install</ui5-button><ui5-button id="mobile-register">Register</ui5-button>
136136
<ui5-text>Scan the QR Code to install the mobile application</ui5-text>
@@ -139,7 +139,7 @@
139139
</ui5-user-settings-item>
140140

141141
<ui5-user-settings-item icon="bell" text="Notifications" tooltip="Notifications" header-text="Notifications">
142-
<ui5-user-settings-view slot="pages">
142+
<ui5-user-settings-view>
143143
<ui5-checkbox checked text="Show High-Priority Notification Alerts"></ui5-checkbox>
144144
</ui5-user-settings-view>
145145
</ui5-user-settings-item>

‎packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -268,7 +268,7 @@
268268

269269
<ui5-user-settings-dialog id="settings" header-text="Settings" show-search-field>
270270
<ui5-user-settings-item icon="user-settings" text="User Account" tooltip="User Account" header-text="User Account">
271-
<ui5-user-settings-view slot="pages">
271+
<ui5-user-settings-view>
272272

273273
<div class="container">
274274
<ui5-avatar size="L" class="ua-info-profile">
@@ -299,7 +299,7 @@
299299
</ui5-user-settings-item>
300300

301301
<ui5-user-settings-item icon="palette" text="Appearance" tooltip="Appearance" header-text="Appearance">
302-
<ui5-user-settings-view text="Themes">
302+
<ui5-user-settings-view text="Themes" slot="tabs">
303303
<ui5-list separators="Inner" selection-mode="Single">
304304
<ui5-li icon="palette" selected>SAP Morning Horizon</ui5-li>
305305
<ui5-li icon="palette">SAP Evening Horizon</ui5-li>
@@ -309,7 +309,7 @@
309309
<ui5-button id="themeSave" class="save-btn" design="Emphasized">Save</ui5-button>
310310
<ui5-toast id="toastThemeSave">Changes applied.</ui5-toast>
311311
</ui5-user-settings-view>
312-
<ui5-user-settings-view text="Display settings">
312+
<ui5-user-settings-view text="Display settings" slot="tabs">
313313
<ui5-checkbox checked text="Optimized for Touch Input"></ui5-checkbox>
314314
<ui5-panel fixed>
315315
<ui5-label>
@@ -321,7 +321,7 @@
321321
</ui5-user-settings-item>
322322

323323
<ui5-user-settings-item text="Language & Region" tooltip="Language & Region" header-text="Language & Region">
324-
<ui5-user-settings-view slot="pages">
324+
<ui5-user-settings-view>
325325
<div class="container">
326326
<div class="lr-item">
327327
<ui5-label>Language and Region:</ui5-label>
@@ -359,12 +359,12 @@
359359
</ui5-user-settings-item>
360360

361361
<ui5-user-settings-item icon="iphone" text="SAP Mobile Start Application" tooltip="SAP Mobile Start Application" header-text="SAP Mobile Start Application">
362-
<ui5-user-settings-view slot="pages">
362+
<ui5-user-settings-view>
363363
<ui5-button id="mobile1-button">iOS</ui5-button>
364364
<ui5-button id="mobile2-button">Android</ui5-button>
365365
</ui5-user-settings-view>
366366

367-
<ui5-user-settings-view slot="pages" text="Inner Page" id="mobile-second-page" secondary>
367+
<ui5-user-settings-view text="Inner Page" id="mobile-second-page" secondary>
368368
<ui5-text>Enable access to your site from the SAP Mobile Start application.</ui5-text>
369369
<ui5-button id="mobile-install">Install</ui5-button><ui5-button id="mobile-register">Register</ui5-button>
370370
<ui5-text>Scan the QR Code to install the mobile application</ui5-text>
@@ -373,7 +373,7 @@
373373
</ui5-user-settings-item>
374374

375375
<ui5-user-settings-item icon="bell" text="Notifications" tooltip="Notifications" header-text="Notifications">
376-
<ui5-user-settings-view slot="pages">
376+
<ui5-user-settings-view>
377377
<ui5-checkbox checked text="Show High-Priority Notification Alerts"></ui5-checkbox>
378378
</ui5-user-settings-view>
379379
</ui5-user-settings-item>

0 commit comments

Comments
 (0)