refactor(ui5-side-navigation): remove "design" property (SAP#11219)

* refactor(ui5-side-navigation): remove "design" property

Author: TeodorTaushanov

packages/fiori/src/SideNavigation.ts

@@ -31,7 +31,6 @@ import { isInstanceOfSideNavigationItem } from "./SideNavigationItem.js";
 import type SideNavigationItem from "./SideNavigationItem.js";
 import type SideNavigationSubItem from "./SideNavigationSubItem.js";
 import type SideNavigationGroup from "./SideNavigationGroup.js";
-import type SideNavigationDesign from "./types/SideNavigationDesign.js";
 import SideNavigationTemplate from "./SideNavigationTemplate.js";
 
 import {
@@ -142,16 +141,6 @@ class SideNavigation extends UI5Element {
 	@property({ type: Boolean })
 	collapsed = false;
 
-	/**
-	 * Defines whether the control should have container styling or not.
-	 * **Note** In order to achieve the best user experience, it is recommended to use "Plain" value if SideNavigation is placed inside a responsive popover.
-	 *
-	 * @public
-	 * @default "Decorated"
-	 */
-	@property()
-	design: `${SideNavigationDesign}` = "Decorated";
-
 	/**
 	 * Defines the accessible ARIA name of the component.
 	 * @default undefined

packages/fiori/src/themes/NavigationLayout.css

@@ -17,7 +17,6 @@
 }
 
 .ui5-nl-header {
-	box-shadow: var(--sapShell_Shadow);
 	z-index: 2;
 }
 
@@ -41,6 +40,10 @@
 	width: 100%;
 }
 
+:host(:not([is-phone])) ::slotted([ui5-side-navigation][slot="sideContent"]) {
+	box-shadow: var(--_ui5_nl_side_navigation_box_shadow);
+}
+
 :host([is-phone]) ::slotted([ui5-side-navigation][slot="sideContent"]) {
 	width: 100%;
 	box-shadow: none;

packages/fiori/src/themes/SideNavigation.css

@@ -7,7 +7,6 @@
 	width: var(--_ui5_side_navigation_width);
 	max-width: 100%;
 	transition: width 0.3s, min-width 0.3s;
-	box-shadow: var(--_ui5_side_navigation_box_shadow);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	background: var(--sapList_Background);
@@ -18,12 +17,7 @@
 	width: var(--_ui5_side_navigation_collapsed_width);
 }
 
-/* SideNavigationDesign */
-:host([design="Plain"]) {
-	box-shadow: none;
-}
-
-:host([design="Plain"][is-phone]) {
+:host([is-phone]) {
 	width: 100%;
 }
 

packages/fiori/src/themes/base/NavigationLayout-parameters.css

@@ -0,0 +1,3 @@
+:root {
+	--_ui5_nl_side_navigation_box_shadow: none;
+}

packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css

@@ -7,6 +7,7 @@
 @import "../base/ProductSwitchItem-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "../base/SideNavigation-parameters.css";
+@import "../base/NavigationLayout-parameters.css";
 @import "../base/TimelineItem-parameters.css";
 @import "../base/UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";

packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -7,6 +7,7 @@
 @import "../base/ProductSwitchItem-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "../base/SideNavigation-parameters.css";
+@import "../base/NavigationLayout-parameters.css";
 @import "../base/TimelineItem-parameters.css";
 @import "../base/UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";

packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -7,6 +7,7 @@
 @import "./ProductSwitchItem-parameters.css";
 @import "../base/ShellBar-parameters.css";
 @import "../base/SideNavigation-parameters.css";
+@import "../base/NavigationLayout-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";

packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -7,6 +7,7 @@
 @import "./ProductSwitchItem-parameters.css";
 @import "../base/ShellBar-parameters.css";
 @import "../base/SideNavigation-parameters.css";
+@import "../base/NavigationLayout-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";

packages/fiori/src/themes/sap_horizon/NavigationLayout-parameters.css

@@ -0,0 +1,3 @@
+:root {
+	--_ui5_nl_side_navigation_box_shadow: var(--sapContent_Shadow0);
+}

packages/fiori/src/themes/sap_horizon/parameters-bundle.css

@@ -10,6 +10,7 @@
 @import "./ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./SideNavigation-parameters.css";
+@import "./NavigationLayout-parameters.css";
 @import "./UploadCollection-parameters.css";
 @import "./Wizard-parameters.css";
 @import "./WizardTab-parameters.css";