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

ilhan007 · web-flow · commit b10ee4ccdd0b · 2021-03-02T11:54:46.000+02:00
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".
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>

Original file line number	Diff line number	Diff line change
`@@ -60,19 +60,15 @@`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`/* BackgroundDesign */`
`63`		`-:host([backgroundDesign="Standard"]) {`
`64`		`- background-color: var(--sapBackgroundColor);`
	`63`	`+:host([background-design="Solid"]) {`
	`64`	`+ background-color: var(--sapBackgroundColor);`
`65`	`65`	`}`
`66`	`66`
`67`		`-:host([backgroundDesign="Solid"]) {`
`68`		`- background-color: var(--sapBackgroundColor);`
`69`		`-}`
`70`		`-`
`71`		`-:host([backgroundDesign="Transparent"]) {`
	`67`	`+:host([background-design="Transparent"]) {`
`72`	`68`	`background-color: transparent;`
`73`	`69`	`}`
`74`	`70`
`75`		`-:host([backgroundDesign="List"]) {`
	`71`	`+:host([background-design="List"]) {`
`76`	`72`	`background-color: var(--_ui5_page_list_bg);`
`77`	`73`	`}`
`78`	`74`