fix(ui5-page): correct background-design styles (#2862)

The styles used to rely on the property name backgroundDesign, which is not correct as in the DOM we use the attribute name background-design. In addition, the "Standard" background design is removed, because it's the same as "Solid". As a result the background Design default value is changed from "Standard" to "Solid". BREAKING_CHANGE: The backgroundDesign default value is changed from "Standard" to "Solid".
SAP · Mar 2, 2021 · b10ee4c · b10ee4c
1 parent 9e409e6
commit b10ee4c
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 29 deletions.
diff --git a/packages/fiori/src/Page.js b/packages/fiori/src/Page.js
@@ -26,24 +26,23 @@ const metadata = {
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
-		 * <li><code>List</code></li>
-		 * <li><code>Solid</code></li>
-		 * <li><code>Standard</code></li> (default)
+		 * <li><code>Solid</code></li> (default)
 		 * <li><code>Transparent</code></li>
+		 * <li><code>List</code></li>
 		 * </ul>
 		 * @type {PageBackgroundDesign}
-		 * @defaultvalue "Standard"
+		 * @defaultvalue "Solid"
 		 * @public
 		 */
 		backgroundDesign: {
 			type: String,
-			defaultValue: PageBackgroundDesign.Standard,
+			defaultValue: PageBackgroundDesign.Solid,
 		},
 
 		/**
-         * Disables vertical scrolling of page content.
-         * If set to true, there will be no vertical scrolling at all.
-         *
+		 * Disables vertical scrolling of page content.
+		 * If set to true, there will be no vertical scrolling at all.
+		 *
 		 * @type {Boolean}
 		 * @defaultvalue false
 		 * @public
@@ -65,8 +64,8 @@ const metadata = {
 		},
 
 		/**
-         * Defines the footer visibility.
-         *
+		 * Defines the footer visibility.
+		 *
 		 * @type {Boolean}
 		 * @defaultvalue false
 		 * @public

diff --git a/packages/fiori/src/themes/Page.css b/packages/fiori/src/themes/Page.css
@@ -60,19 +60,15 @@
 }
 
 /* BackgroundDesign */
-:host([backgroundDesign="Standard"]) {
-	background-color: var(--sapBackgroundColor);
+:host([background-design="Solid"]) {
+    background-color: var(--sapBackgroundColor);
 }
 
-:host([backgroundDesign="Solid"]) {
-	background-color: var(--sapBackgroundColor);
-}
-
-:host([backgroundDesign="Transparent"]) {
+:host([background-design="Transparent"]) {
     background-color: transparent;
 }
 
-:host([backgroundDesign="List"]) {
+:host([background-design="List"]) {
     background-color: var(--_ui5_page_list_bg);
 }
 

diff --git a/packages/fiori/src/types/PageBackgroundDesign.js b/packages/fiori/src/types/PageBackgroundDesign.js
@@ -7,14 +7,6 @@ import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
  */
 const PageBackgroundDesigns = {
 
-	/**
-	 * Standard Page background color.
-	 *
- 	 * @type {Standard}
-	 * @public
-	 */
-	Standard: "Standard",
-
 	/**
 	 * Page background color when a List is set as the Page content.
 	 *

diff --git a/packages/fiori/test/pages/Page.html b/packages/fiori/test/pages/Page.html
@@ -27,7 +27,7 @@
 </head>
 
 <body style="background-color: var(--sapBackgroundColor);"></body>
-	<ui5-page id="page" backgroundDesign="List" floating-footer show-footer>
+	<ui5-page id="page" background-design="List" floating-footer show-footer>
 		<div slot="header">
 			<ui5-bar design="Header">
 				<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>

diff --git a/packages/fiori/test/samples/Page.sample.html b/packages/fiori/test/samples/Page.sample.html
@@ -19,7 +19,7 @@
 <section>
 	<h3>Page with floating footer</h3>
 	<div class="snippet">
-        <ui5-page id="page" style="height: 700px; width: 500px" backgroundDesign="List" floating-footer show-footer>
+        <ui5-page id="page" style="height: 700px; width: 500px" background-design="List" floating-footer show-footer>
             <div slot="header">
                 <ui5-bar design="Header">
                     <ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
@@ -80,7 +80,7 @@ <h3>Page with floating footer</h3>
         </ui5-page>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
-<ui5-page id="page" backgroundDesign="List" floating-footer show-footer>
+<ui5-page id="page" background-design="List" floating-footer show-footer>
     <div slot="header">
         <ui5-bar design="Header">
             <ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>