feat(ui5-user-settings-item): 'pages' is default slot

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

@@ -178,9 +178,9 @@ describe("Initial rendering", () => {
 	it("tests setting tabs", () => {
 		cy.mount(<UserSettingsDialog open>
 			<UserSettingsItem>
-				<UserSettingsView text="Setting1">
+				<UserSettingsView text="Setting1" slot="tabs">
 						 </UserSettingsView>
-				<UserSettingsView text="Setting2">
+				<UserSettingsView text="Setting2" slot="tabs">
 				</UserSettingsView>
 			</UserSettingsItem>
 		</UserSettingsDialog>);
@@ -364,11 +364,11 @@ describe("Events", () => {
 	it("tests back-click event on secondary page", () => {
 		cy.mount(<UserSettingsDialog open>
 			<UserSettingsItem>
-				<UserSettingsView slot="pages">
+				<UserSettingsView>
 					<Button id="product1-button">Product 1</Button>
 					<Button id="product2-button">Product 2</Button>
 				</UserSettingsView>
-				<UserSettingsView slot="pages" text="Inner Page" id="notification-second-page" secondary selected>second page content
+				<UserSettingsView text="Inner Page" id="notification-second-page" secondary selected>second page content
 				</UserSettingsView>
 			</UserSettingsItem>
 		</UserSettingsDialog>);
@@ -394,11 +394,11 @@ describe("Events", () => {
 		cy.ui5SimulateDevice("phone");
 		cy.mount(<UserSettingsDialog open>
 			<UserSettingsItem>
-				<UserSettingsView slot="pages">
+				<UserSettingsView>
 					<Button id="product1-button">Product 1</Button>
 					<Button id="product2-button">Product 2</Button>
 				</UserSettingsView>
-				<UserSettingsView slot="pages" text="Inner Page" id="notification-second-page" secondary>second page content
+				<UserSettingsView text="Inner Page" id="notification-second-page" secondary>second page content
 				</UserSettingsView>
 			</UserSettingsItem>
 		</UserSettingsDialog>);
@@ -433,11 +433,11 @@ describe("Events", () => {
 	it("tests selection-change event", () => {
 		cy.mount(<UserSettingsDialog open>
 			<UserSettingsItem>
-				<UserSettingsView text="First tab">
+				<UserSettingsView text="First tab" slot="tabs">
 					<Button id="product1-button">Product 1</Button>
 					<Button id="product2-button">Product 2</Button>
 				</UserSettingsView>
-				<UserSettingsView text="Second tab" id="notification-second-page">second tab
+				<UserSettingsView text="Second tab" id="notification-second-page" slot="tabs">second tab
 				</UserSettingsView>
 			</UserSettingsItem>
 		</UserSettingsDialog>);
@@ -459,11 +459,11 @@ describe("Events", () => {
 	it("tests selection-change event prevented", () => {
 		cy.mount(<UserSettingsDialog open>
 			<UserSettingsItem>
-				<UserSettingsView text="First tab">
+				<UserSettingsView text="First tab" slot="tabs">
 					<Button id="product1-button">Product 1</Button>
 					<Button id="product2-button">Product 2</Button>
 				</UserSettingsView>
-				<UserSettingsView text="Second tab" id="notification-second-page">second tab
+				<UserSettingsView text="Second tab" id="notification-second-page" slot="tabs">second tab
 				</UserSettingsView>
 			</UserSettingsItem>
 		</UserSettingsDialog>);
@@ -574,9 +574,9 @@ describe("Responsiveness", () => {
 		cy.ui5SimulateDevice("phone");
 		cy.mount(<UserSettingsDialog open>
 			<UserSettingsItem>
-				<UserSettingsView text="Setting1">
+				<UserSettingsView text="Setting1" slot="tabs">
 						 </UserSettingsView>
-				<UserSettingsView text="Setting2">
+				<UserSettingsView text="Setting2" slot="tabs">
 				</UserSettingsView>
 			</UserSettingsItem>
 		</UserSettingsDialog>);

packages/fiori/src/UserSettingsItem.ts

@@ -149,9 +149,13 @@ class UserSettingsItem extends UI5Element {
 	accessibleName?: string;
 
 	/**
-	 * Defines the tab views of the user settings item.
+	 * Defines the page views of the user settings item.
+	 *
+	 * If there are no tab views, the first page view will be shown unless there is selected one. If there is selected page
+	 * view it will be shown no matter if there are tab views.
+	 *
+	 * The page views are displayed by default if there is no selected tab view.
 	 *
-	 * The tab views are displayed by default if there is no selected page view.
 	 * @public
 	 */
 	@slot({
@@ -163,13 +167,10 @@ class UserSettingsItem extends UI5Element {
 			slots: false,
 		},
 	})
-	tabs!: Array<UserSettingsView>;
+	pages!: Array<UserSettingsView>;
 
 	/**
-	 * Defines the page views of the user settings item.
-	 *
-	 * If there are no tab views, the first page view will be shown unless there is selected one. If there is selected page
-	 * view it will be shown no matter if there are tab views.
+	 * Defines the tab views of the user settings item.
 	 *
 	 * @public
 	 */
@@ -181,7 +182,7 @@ class UserSettingsItem extends UI5Element {
 			slots: false,
 		},
 	})
-	pages!: Array<UserSettingsView>;
+	tabs!: Array<UserSettingsView>;
 
 	/**
 	 * Indicates whether any of the element siblings have icon.

packages/fiori/src/themes/UserSettingsItem.css

@@ -15,7 +15,6 @@
 	padding: 1rem 1rem 0.5rem;
 	font-size: var(--sapFontHeader5Size);
 	font-family: var(--sapFontBoldFamily);
-	border-bottom: 0.0625rem solid var(--sapList_BorderColor);
 }
 
 .ui5-user-settings-item-loading-container {

packages/fiori/test/pages/UserSettingsDialog.html

@@ -40,7 +40,7 @@
 <ui5-button id="btnOpenSettings">User settings</ui5-button>
 <ui5-user-settings-dialog id="setting" header-text="Settings" show-search-field>
 	<ui5-user-settings-item icon="user-settings" text="User Account" tooltip="User Account" header-text="User Account">
-		<ui5-user-settings-view slot="pages">
+		<ui5-user-settings-view>
 			<ui5-icon name="person-placeholder"></ui5-icon><ui5-title level="H3" size="H3" class="ua-name">Alain Chevalier</ui5-title>
 			<div class="container">
 				<div class="ua-info-item">
@@ -67,7 +67,7 @@
 	</ui5-user-settings-item>
 
 	<ui5-user-settings-item icon="palette" text="Appearance" tooltip="Appearance" header-text="Appearance">
-		<ui5-user-settings-view text="Themes">
+		<ui5-user-settings-view text="Themes" slot="tabs">
 			<ui5-list separators="Inner">
 				<ui5-li icon="palette">SAP Morning Horizon</ui5-li>
 				<ui5-li icon="palette">SAP Evening Horizon</ui5-li>
@@ -77,7 +77,7 @@
 			<ui5-button id="themeSave" class="save-btn" design="Emphasized">Save</ui5-button>
 			<ui5-toast design="Emphasized">Changes applied.</ui5-toast>
 		</ui5-user-settings-view>
-		<ui5-user-settings-view text="Display settings">
+		<ui5-user-settings-view text="Display settings" slot="tabs">
 			<ui5-checkbox checked text="Optimized for Touch Input"></ui5-checkbox>
 			<ui5-panel fixed>
 				<ui5-label>
@@ -89,7 +89,7 @@
 	</ui5-user-settings-item>
 
 	<ui5-user-settings-item text="Language & Region" tooltip="Language & Region" header-text="Language & Region">
-		<ui5-user-settings-view slot="pages">
+		<ui5-user-settings-view>
 			<div class="container">
 			<div class="lr-item">
 			<ui5-label>Language and Region:</ui5-label>
@@ -127,12 +127,12 @@
 	</ui5-user-settings-item>
 
 	<ui5-user-settings-item icon="iphone" text="SAP Mobile Start Application" tooltip="SAP Mobile Start Application" header-text="SAP Mobile Start Application">
-		<ui5-user-settings-view slot="pages">
+		<ui5-user-settings-view >
 			<ui5-button id="mobile1-button">iOS</ui5-button>
 			<ui5-button id="mobile2-button">Android</ui5-button>
 		</ui5-user-settings-view>
 
-		<ui5-user-settings-view slot="pages" text="Inner Page" id="mobile-second-page" secondary>
+		<ui5-user-settings-view text="Inner Page" id="mobile-second-page" secondary>
 			<ui5-text>Enable access to your site from the SAP Mobile Start application.</ui5-text>
 			<ui5-button id="mobile-install">Install</ui5-button><ui5-button id="mobile-register">Register</ui5-button>
 			<ui5-text>Scan the QR Code to install the mobile application</ui5-text>
@@ -141,7 +141,7 @@
 	</ui5-user-settings-item>
 
 	<ui5-user-settings-item id="notifications" icon="bell" text="Notifications" tooltip="Notifications" header-text="Notifications">
-		<ui5-user-settings-view slot="pages">
+		<ui5-user-settings-view>
 			<ui5-list class="custom-list-main">
 
 				<ui5-li-custom>
@@ -192,7 +192,7 @@
 			</ui5-list>
 		</ui5-user-settings-view>
 
-		<ui5-user-settings-view slot="pages" id="notification-second-page" secondary>
+		<ui5-user-settings-view id="notification-second-page" secondary>
 			<ui5-li-custom class="ui5-list-secondary">
 				<div class="list-item">
 					<div class="item-left">
@@ -294,7 +294,7 @@
 			</ui5-list>
 		</ui5-user-settings-view>
 
-		<ui5-user-settings-view slot="pages" id="sales-order-second-page" secondary>
+		<ui5-user-settings-view id="sales-order-second-page" secondary>
 			<ui5-title class="list-header" level="H2" size="H2">Sales Order Updates</ui5-title>
 
 			<ui5-list class="ui5-list-secondary" separators="None">
@@ -402,6 +402,7 @@
 
 <ui5-dialog id="additionalDialog" state="Critical" header-text="Warning">
 	<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).
+	<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).
 		This action is irreversible.
 		Further changes in the dialog will not be applied.
 		Are you sure you want to proceed with the reset?</ui5-text>

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

@@ -38,7 +38,7 @@
 
 <ui5-user-settings-dialog id="settings" header-text="Settings" show-search-field>
 	<ui5-user-settings-item icon="user-settings" text="User Account" tooltip="User Account" header-text="User Account">
-		<ui5-user-settings-view slot="pages">
+		<ui5-user-settings-view>
 			<ui5-icon name="person-placeholder"></ui5-icon><ui5-title level="H3" size="H3" class="ua-name">Alain Chevalier</ui5-title>
 			<div class="container">
 				<div class="ua-info-item">
@@ -65,7 +65,7 @@
 	</ui5-user-settings-item>
 
 	<ui5-user-settings-item icon="palette" text="Appearance" tooltip="Appearance" header-text="Appearance">
-		<ui5-user-settings-view text="Themes">
+		<ui5-user-settings-view text="Themes" slot="tabs">
 			<ui5-list separators="Inner">
 				<ui5-li icon="palette">SAP Morning Horizon</ui5-li>
 				<ui5-li icon="palette">SAP Evening Horizon</ui5-li>
@@ -75,7 +75,7 @@
 			<ui5-button id="themeSave" class="save-btn" design="Emphasized">Save</ui5-button>
 			<ui5-toast design="Emphasized">Changes applied.</ui5-toast>
 		</ui5-user-settings-view>
-		<ui5-user-settings-view text="Display settings">
+		<ui5-user-settings-view text="Display settings" slot="tabs">
 			<ui5-checkbox checked text="Optimized for Touch Input"></ui5-checkbox>
 			<ui5-panel fixed>
 				<ui5-label>
@@ -87,7 +87,7 @@
 	</ui5-user-settings-item>
 
 	<ui5-user-settings-item text="Language & Region" tooltip="Language & Region" header-text="Language & Region">
-		<ui5-user-settings-view slot="pages">
+		<ui5-user-settings-view>
 			<div class="container">
 				<div class="lr-item">
 					<ui5-label>Language and Region:</ui5-label>
@@ -125,12 +125,12 @@
 	</ui5-user-settings-item>
 
 	<ui5-user-settings-item icon="iphone" text="SAP Mobile Start Application" tooltip="SAP Mobile Start Application" header-text="SAP Mobile Start Application">
-		<ui5-user-settings-view slot="pages">
+		<ui5-user-settings-view>
 			<ui5-button id="mobile1-button">iOS</ui5-button>
 			<ui5-button id="mobile2-button">Android</ui5-button>
 		</ui5-user-settings-view>
 
-		<ui5-user-settings-view slot="pages" text="Inner Page" id="mobile-second-page" secondary>
+		<ui5-user-settings-view text="Inner Page" id="mobile-second-page" secondary>
 			<ui5-text>Enable access to your site from the SAP Mobile Start application.</ui5-text>
 			<ui5-button id="mobile-install">Install</ui5-button><ui5-button id="mobile-register">Register</ui5-button>
 			<ui5-text>Scan the QR Code to install the mobile application</ui5-text>
@@ -139,7 +139,7 @@
 	</ui5-user-settings-item>
 
 	<ui5-user-settings-item icon="bell" text="Notifications" tooltip="Notifications" header-text="Notifications">
-		<ui5-user-settings-view slot="pages">
+		<ui5-user-settings-view>
 			<ui5-checkbox checked text="Show High-Priority Notification Alerts"></ui5-checkbox>
 		</ui5-user-settings-view>
 	</ui5-user-settings-item>

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

@@ -268,7 +268,7 @@
 
 	<ui5-user-settings-dialog id="settings" header-text="Settings" show-search-field>
 		<ui5-user-settings-item icon="user-settings" text="User Account" tooltip="User Account" header-text="User Account">
-			<ui5-user-settings-view slot="pages">
+			<ui5-user-settings-view>
 
 				<div class="container">
 					<ui5-avatar size="L" class="ua-info-profile">
@@ -299,7 +299,7 @@
 		</ui5-user-settings-item>
 
 		<ui5-user-settings-item icon="palette" text="Appearance" tooltip="Appearance" header-text="Appearance">
-			<ui5-user-settings-view text="Themes">
+			<ui5-user-settings-view text="Themes" slot="tabs">
 				<ui5-list separators="Inner" selection-mode="Single">
 					<ui5-li icon="palette" selected>SAP Morning Horizon</ui5-li>
 					<ui5-li icon="palette">SAP Evening Horizon</ui5-li>
@@ -309,7 +309,7 @@
 				<ui5-button id="themeSave" class="save-btn" design="Emphasized">Save</ui5-button>
 				<ui5-toast id="toastThemeSave">Changes applied.</ui5-toast>
 			</ui5-user-settings-view>
-			<ui5-user-settings-view text="Display settings">
+			<ui5-user-settings-view text="Display settings" slot="tabs">
 				<ui5-checkbox checked text="Optimized for Touch Input"></ui5-checkbox>
 				<ui5-panel fixed>
 					<ui5-label>
@@ -321,7 +321,7 @@
 		</ui5-user-settings-item>
 
 		<ui5-user-settings-item text="Language & Region" tooltip="Language & Region" header-text="Language & Region">
-			<ui5-user-settings-view slot="pages">
+			<ui5-user-settings-view>
 				<div class="container">
 					<div class="lr-item">
 						<ui5-label>Language and Region:</ui5-label>
@@ -359,12 +359,12 @@
 		</ui5-user-settings-item>
 
 		<ui5-user-settings-item icon="iphone" text="SAP Mobile Start Application" tooltip="SAP Mobile Start Application" header-text="SAP Mobile Start Application">
-			<ui5-user-settings-view slot="pages">
+			<ui5-user-settings-view>
 				<ui5-button id="mobile1-button">iOS</ui5-button>
 				<ui5-button id="mobile2-button">Android</ui5-button>
 			</ui5-user-settings-view>
 
-			<ui5-user-settings-view slot="pages" text="Inner Page" id="mobile-second-page" secondary>
+			<ui5-user-settings-view text="Inner Page" id="mobile-second-page" secondary>
 				<ui5-text>Enable access to your site from the SAP Mobile Start application.</ui5-text>
 				<ui5-button id="mobile-install">Install</ui5-button><ui5-button id="mobile-register">Register</ui5-button>
 				<ui5-text>Scan the QR Code to install the mobile application</ui5-text>
@@ -373,7 +373,7 @@
 		</ui5-user-settings-item>
 
 		<ui5-user-settings-item icon="bell" text="Notifications" tooltip="Notifications" header-text="Notifications">
-			<ui5-user-settings-view slot="pages">
+			<ui5-user-settings-view>
 				<ui5-checkbox checked text="Show High-Priority Notification Alerts"></ui5-checkbox>
 			</ui5-user-settings-view>
 		</ui5-user-settings-item>