fix(ui5-side-navigation): allow overstyling of width and border-radius (

#8081) * fix(ui5-side-navigation): allow overstyling of width and border-radius
SAP · Jan 19, 2024 · 392f118 · 392f118
1 parent bc035bb
commit 392f118
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 19 deletions.
diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts
@@ -197,6 +197,12 @@ class SideNavigation extends UI5Element {
 	@property({ type: Object, multiple: true })
 	_menuPopoverItems!: Array<HTMLElement>;
 
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	isTouchDevice!: boolean;
+
 	static i18nBundle: I18nBundle;
 
 	constructor() {
@@ -338,9 +344,6 @@ class SideNavigation extends UI5Element {
 	get classes() {
 		return {
 			root: {
-				"ui5-sn-phone": isPhone(),
-				"ui5-sn-tablet": isTablet(),
-				"ui5-sn-combi": isCombi(),
 				"ui5-sn-collapsed": this.collapsed,
 				"ui5-sn-in-popover": this._inPopover,
 			},
@@ -420,6 +423,8 @@ class SideNavigation extends UI5Element {
 
 	onEnterDOM() {
 		ResizeHandler.register(this, this._handleResizeBound);
+
+		this.isTouchDevice = isPhone() || (isTablet() && !isCombi());
 	}
 
 	onExitDOM() {

diff --git a/packages/fiori/src/themes/SideNavigation.css b/packages/fiori/src/themes/SideNavigation.css
@@ -1,6 +1,20 @@
 :host(:not([hidden])) {
 	display: inline-block;
 	height: 100%;
+	min-width: var(--_ui5_side_navigation_width);
+	width: var(--_ui5_side_navigation_width);
+	max-width: 100%;
+	transition: width 0.3s, min-width 0.3s;
+	border-radius: var(--_ui5_side_navigation_border_radius);
+}
+
+:host([collapsed]) {
+	min-width: var(--_ui5_side_navigation_collapsed_width);
+	width: var(--_ui5_side_navigation_collapsed_width);
+}
+
+:host([is-touch-device]) {
+	border-radius: var(--_ui5_side_navigation_phone_border_radius);
 }
 
 .ui5-sn-root {
@@ -10,25 +24,10 @@
 	box-sizing: border-box;
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
-
 	background: var(--sapList_Background);
 	border-inline-end: var(--_ui5_side_navigation_border_right);
 	box-shadow: var(--_ui5_side_navigation_box_shadow);
-	border-radius: var(--_ui5_side_navigation_border_radius);
-	min-width: var(--_ui5_side_navigation_width);
-	max-width: 100%;
-	width: var(--_ui5_side_navigation_width);
-	transition: width 0.3s, min-width 0.3s;
-}
-
-:host([collapsed]) .ui5-sn-root {
-	min-width: var(--_ui5_side_navigation_collapsed_width);
-	width: var(--_ui5_side_navigation_collapsed_width);
-}
-
-.ui5-sn-root.ui5-sn-phone .ui5-sn-root,
-.ui5-sn-root.ui5-sn-tablet:not(.ui5-sn-combi) .ui5-sn-root {
-	border-radius:  var(--_ui5_side_navigation_phone_border_radius);
+	border-radius: inherit;
 }
 
 .ui5-sn-spacer {