From 1c38d803ba685d2789eeaffb5de9b8b1431a7644 Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Tue, 23 Jul 2019 21:55:58 +0300
Subject: [PATCH 1/3] refactor(ui5-popover, ui5-dialog): clean styles

---
 packages/main/src/Dialog.hbs                  | 12 +--
 packages/main/src/Dialog.js                   | 24 ++----
 packages/main/src/Popover.hbs                 | 10 +--
 packages/main/src/Popover.js                  | 42 +++------
 packages/main/src/Popup.hbs                   |  6 +-
 packages/main/src/Popup.js                    | 17 ++--
 .../main/src/features/InputSuggestions.js     |  2 +-
 packages/main/src/themes/Dialog.css           | 37 ++++++--
 packages/main/src/themes/Popover.css          | 86 +++++++++++++++----
 packages/main/src/themes/Popup.css            | 26 +++---
 .../main/test/pageobjects/DatePickerFGPage.js |  2 +-
 .../test/pageobjects/DatePickerTestPage.js    |  2 +-
 .../ui/webcomponents/main/pages/Popover.html  |  5 +-
 .../webcomponents/main/qunit/Dialog.qunit.js  |  4 +-
 .../webcomponents/main/qunit/Popover.qunit.js |  4 +-
 .../main/test/specs/DatePicker-fg.spec.js     |  2 +-
 packages/main/test/specs/Dialog.spec.js       |  2 +-
 packages/main/test/specs/Input.spec.js        |  2 +-
 packages/main/test/specs/Popover.spec.js      |  4 +-
 packages/main/test/specs/Select.spec.js       |  8 +-
 20 files changed, 177 insertions(+), 120 deletions(-)

diff --git a/packages/main/src/Dialog.hbs b/packages/main/src/Dialog.hbs
index f8455b044687..8b0e5959df8b 100644
--- a/packages/main/src/Dialog.hbs
+++ b/packages/main/src/Dialog.hbs
@@ -1,13 +1,13 @@
 {{>include "./Popup.hbs"}}
 
-<span class="{{classes.frame}}">
+<span class="ui5-popup-frame">
 	<span id="{{_id}}-firstfe" tabindex="0"></span>
-	<div style="{{zindex}}" class="{{classes.dialogParent}}">
-		<div tabindex="-1" aria-labelledby="{{headerId}}" role="dialog" class="{{classes.main}}">
+	<div style="{{zindex}}" class="ui5-dialog-root-parent {{classes.dialogParent}}">
+		<div tabindex="-1" aria-labelledby="{{headerId}}" role="dialog" class="ui5-popup-root ui5-dialog-root">
 			{{> header}}
-			<section class="ui5-dialog-wrapper-section">
-				<div class="ui5-popup-wrapper-content">
-					<div class="ui5-popup-wrapper-scroll">
+			<section class="ui5-dialog-section">
+				<div class="ui5-popup-content">
+					<div class="ui5-popup-scroll">
 						<slot></slot>
 					</div>
 				</div>
diff --git a/packages/main/src/Dialog.js b/packages/main/src/Dialog.js
index 89345e1dd436..8043dc0a8a64 100644
--- a/packages/main/src/Dialog.js
+++ b/packages/main/src/Dialog.js
@@ -85,7 +85,7 @@ class Dialog extends Popup {
 	* @public
 	*/
 	open() {
-		if (this._isOpen) {
+		if (this.opened) {
 			return;
 		}
 
@@ -96,7 +96,7 @@ class Dialog extends Popup {
 
 		this.storeCurrentFocus();
 
-		this._isOpen = true;
+		this.opened = true;
 	}
 
 	/**
@@ -104,7 +104,7 @@ class Dialog extends Popup {
 	* @public
 	*/
 	close() {
-		if (!this._isOpen) {
+		if (!this.opened) {
 			return;
 		}
 
@@ -113,7 +113,7 @@ class Dialog extends Popup {
 			return;
 		}
 
-		this._isOpen = false;
+		this.opened = false;
 
 		this.resetFocus();
 
@@ -122,23 +122,13 @@ class Dialog extends Popup {
 
 	get classes() {
 		return {
-			frame: {
-				"ui5-popup-wrapper-frame": true,
-				"ui5-popup-wrapper-frame--open": this._isOpen,
-			},
 			dialogParent: {
-				"ui5-dialog-wrapper-parent": true,
-				"ui5-dialog-wrapper--stretched": this.stretch,
 				"ui5-phone": isPhone(),
 			},
-			main: {
-				"ui5-popup-wrapper": true,
-				"ui5-dialog-wrapper": true,
-			},
 			blockLayer: {
-				sapUiBLy: true,
-				"ui5-popup-wrapper-blockLayer": true,
-				"ui5-popup-wrapper-blockLayer--hidden": this._hideBlockLayer,
+				"ui5-popup-BLy": true,
+				"ui5-popup-blockLayer": true,
+				"ui5-popup-blockLayer--hidden": this._hideBlockLayer,
 			},
 		};
 	}
diff --git a/packages/main/src/Popover.hbs b/packages/main/src/Popover.hbs
index 0107365de8c3..ef44497e86d1 100644
--- a/packages/main/src/Popover.hbs
+++ b/packages/main/src/Popover.hbs
@@ -1,16 +1,16 @@
 {{>include "./Popup.hbs"}}
 
-<span class="{{classes.frame}}" @focusin="{{onfocusin}}">
+<span class="ui5-popup-frame" @focusin="{{onfocusin}}">
 	<span id="{{_id}}-firstfe" tabindex="0" @focusin={{focusHelper.forwardToLast}}></span>	
-	<div style="{{styles.main}}" role="dialog" aria-labelledby="{{headerId}}" tabindex="-1" class="{{classes.main}}">
+	<div style="{{styles.main}}" role="dialog" aria-labelledby="{{headerId}}" tabindex="-1" class="ui5-popup-root ui5-popover-root">
 			{{> header}}
-			<div id="{{_id}}-content" role="application" style="{{styles.content}}" class="ui5-popup-wrapper-content">
-				<div class="ui5-popup-wrapper-scroll">
+			<div id="{{_id}}-content" role="application" style="{{styles.content}}" class="ui5-popup-content">
+				<div class="ui5-popup-scroll">
 					<slot></slot>
 				</div>
 			</div>
 			{{> footer}}
-			<span id="{{_id}}-arrow" style="{{styles.arrow}}" class="{{classes.arrow}}"></span>
+			<span id="{{_id}}-arrow" style="{{styles.arrow}}" class="ui5-popover-arr"></span>
 		</div>
 	<span id="{{_id}}-lastfe" tabindex="0" @focusin={{focusHelper.forwardToFirst}}></span>
 	<div tabindex="0" id="{{_id}}-blocklayer" style="{{styles.blockLayer}}" class="{{classes.blockLayer}}"></div>
diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js
index ce34ca8ecfb3..cf811689b004 100644
--- a/packages/main/src/Popover.js
+++ b/packages/main/src/Popover.js
@@ -468,7 +468,7 @@ class Popover extends Popup {
 		let maxContentHeight = Math.round(maxHeight);
 
 		if (this.hasHeader) {
-			const headerDomRef = this.getPopupDomRef().querySelector(".ui5-popup-wrapper-header");
+			const headerDomRef = this.getPopupDomRef().querySelector(".ui5-popup-header");
 			if (headerDomRef) {
 				maxContentHeight = Math.round(maxHeight - headerDomRef.offsetHeight);
 			}
@@ -502,7 +502,7 @@ class Popover extends Popup {
 	 * @public
 	 */
 	openBy(element) {
-		if (this._isOpen) {
+		if (this.opened) {
 			return;
 		}
 
@@ -523,16 +523,16 @@ class Popover extends Popup {
 
 		this.setLocation(targetRect, popoverSize);
 
-		this._isOpen = true;
+		this.opened = true;
 
 		setTimeout(_ => {
-			if (this._isOpen) {
+			if (this.opened) {
 				this._dockInterval = setInterval(this.checkDocking.bind(this), dockInterval);
 			}
 		}, 0);
 
 		setTimeout(_ => {
-			if (this._isOpen) {
+			if (this.opened) {
 				document.addEventListener("mousedown", this._documentMouseDownHandler, true);
 				document.addEventListener("touchstart", this._documentMouseDownHandler, true);
 			}
@@ -544,7 +544,7 @@ class Popover extends Popup {
 	 * @public
 	 */
 	close() {
-		if (!this._isOpen) {
+		if (!this.opened) {
 			return;
 		}
 
@@ -553,7 +553,7 @@ class Popover extends Popup {
 			return;
 		}
 
-		this._isOpen = false;
+		this.opened = false;
 
 		clearInterval(this._dockInterval);
 
@@ -569,8 +569,8 @@ class Popover extends Popup {
 	}
 
 	getPopoverSize() {
-		const popoverFrameDomRef = this.shadowRoot.querySelector(".ui5-popup-wrapper-frame"); // this.getDomRef();
-		const popoverDomRef = popoverFrameDomRef.querySelector(".ui5-popover-wrapper");
+		const popoverFrameDomRef = this.shadowRoot.querySelector(".ui5-popup-frame"); // this.getDomRef();
+		const popoverDomRef = popoverFrameDomRef.querySelector(".ui5-popover-root");
 
 		popoverFrameDomRef.style.visibility = "hidden";
 		popoverFrameDomRef.style.display = "block";
@@ -596,29 +596,11 @@ class Popover extends Popup {
 	}
 
 	get classes() {
-		const placementType = this._actualPlacementType;
-
 		return {
-			frame: {
-				"ui5-popup-wrapper-frame": true,
-				"ui5-popup-wrapper-frame--open": this._isOpen,
-			},
-			main: {
-				"ui5-popup-wrapper": true,
-				"ui5-popover-wrapper": true,
-			},
 			blockLayer: {
-				sapUiBLy: true,
-				"ui5-popup-wrapper-blockLayer": true,
-				"ui5-popup-wrapper-blockLayer--hidden": !this.modal || this._hideBlockLayer,
-			},
-			arrow: {
-				"ui5-popover-wrapper-arr": true,
-				"ui5-popover-wrapper-arr--hidden": this.noArrow,
-				"ui5-popover-wrapper-arrLeft": placementType === PopoverPlacementType.Right,
-				"ui5-popover-wrapper-arrRight": placementType === PopoverPlacementType.Left,
-				"ui5-popover-wrapper-arrUp": placementType === PopoverPlacementType.Bottom,
-				"ui5-popover-wrapper-arrDown": placementType === PopoverPlacementType.Top,
+				"ui5-popup-BLy": true,
+				"ui5-popup-blockLayer": true,
+				"ui5-popup-blockLayer--hidden": !this.modal || this._hideBlockLayer,
 			},
 		};
 	}
diff --git a/packages/main/src/Popup.hbs b/packages/main/src/Popup.hbs
index e9a69ba94532..e27456d196e2 100644
--- a/packages/main/src/Popup.hbs
+++ b/packages/main/src/Popup.hbs
@@ -2,11 +2,11 @@
 	{{#if hasHeader}}
 		<header>
 			{{#if header.length}}
-				<div role="{{role}}" class="ui5-popup-wrapper-header">
+				<div role="{{role}}" class="ui5-popup-header">
 					<slot name="header"></slot>
 				</div>
 			{{else}}
-				<h2 role="{{role}}" class="ui5-popup-wrapper-header ui5-popup-wrapper-headerText">{{headerText}}</h2>
+				<h2 role="{{role}}" class="ui5-popup-header ui5-popup-headerText">{{headerText}}</h2>
 			{{/if}}
 		</header>
 	{{/if}}
@@ -15,7 +15,7 @@
 {{#*inline "footer"}}
 	{{#if hasFooter}}
 		<footer>
-			<div class="ui5-popup-wrapper-footer">
+			<div class="ui5-popup-footer">
 				<slot name="footer"></slot>
 			</div>
 		</footer>
diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js
index fbb4e0c57b77..4e3785f6b87b 100644
--- a/packages/main/src/Popup.js
+++ b/packages/main/src/Popup.js
@@ -70,9 +70,14 @@ const metadata = {
 			type: String,
 		},
 
-		_isOpen: {
+		/**
+		 * Indicates if the elements is on focus
+		 * @private
+		 */
+		opened: {
 			type: Boolean,
 		},
+
 		_zIndex: {
 			type: Integer,
 		},
@@ -143,7 +148,7 @@ function createBLyBackStyle() {
 	const bodyStyleSheet = document.createElement("style");
 	bodyStyleSheet.type = "text/css";
 	bodyStyleSheet.innerHTML = `
-		.sapUiBLyBack {
+		.ui5-popup-BLy--back {
 			width: 100%;
 			height: 100%;
 			position: fixed;
@@ -190,11 +195,11 @@ function updateBodyScrolling(hasModal) {
 
 function addBodyStyles() {
 	document.body.style.top = `-${window.pageYOffset}px`;
-	document.body.classList.add("sapUiBLyBack");
+	document.body.classList.add("ui5-popup-BLy--back");
 }
 
 function removeBodyStyles() {
-	document.body.classList.remove("sapUiBLyBack");
+	document.body.classList.remove("ui5-popup-BLy--back");
 	window.scrollTo(0, -parseFloat(document.body.style.top));
 	document.body.style.top = "";
 }
@@ -271,7 +276,7 @@ class Popup extends UI5Element {
 
 	getPopupDomRef() {
 		const domRef = this.getDomRef();
-		return domRef && domRef.querySelector(".ui5-popup-wrapper");
+		return domRef && domRef.querySelector(".ui5-popup-root");
 	}
 
 	hitTest(_event) {
@@ -334,7 +339,7 @@ class Popup extends UI5Element {
 	}
 
 	onAfterRendering() {
-		if (!this._isOpen) {
+		if (!this.opened) {
 			return;
 		}
 
diff --git a/packages/main/src/features/InputSuggestions.js b/packages/main/src/features/InputSuggestions.js
index 5979ae6d945e..07d9b86ee3ac 100644
--- a/packages/main/src/features/InputSuggestions.js
+++ b/packages/main/src/features/InputSuggestions.js
@@ -239,7 +239,7 @@ class Suggestions {
 	_getScrollContainer() {
 		if (!this._scrollContainer) {
 			const popover = this._getPopover();
-			this._scrollContainer = popover.getDomRef().querySelector(".ui5-popup-wrapper-content");
+			this._scrollContainer = popover.getDomRef().querySelector(".ui5-popup-content");
 		}
 
 		return this._scrollContainer;
diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css
index 1f066c2570c2..0d5e323d8ef9 100644
--- a/packages/main/src/themes/Dialog.css
+++ b/packages/main/src/themes/Dialog.css
@@ -1,4 +1,4 @@
-.ui5-dialog-wrapper-parent {
+.ui5-dialog-root-parent {
 	position: fixed;
 	left: 0;
 	right: 0;
@@ -10,34 +10,55 @@
 	overflow: hidden;
 }
 
-.ui5-dialog-wrapper--stretched .ui5-dialog-wrapper {
+:host([stretch]) .ui5-dialog-root {
 	width: 90%;
 	height: 93%;
 	min-width: 0;
 	min-height: 0;
 }
 
-.ui5-phone.ui5-dialog-wrapper-parent.ui5-dialog-wrapper--stretched .ui5-dialog-wrapper {
+:host([stretch]) .ui5-phone.ui5-dialog-root-parent .ui5-dialog-root {
 	width: 100%;
 	height: 100%;
 	box-shadow: none;
 	border-radius: 0;
 }
 
-
-.ui5-dialog-wrapper {
+.ui5-dialog-root {
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
 }
 
-.ui5-dialog-wrapper header,
-.ui5-dialog-wrapper footer {
+.ui5-dialog-root header,
+.ui5-dialog-root footer {
 	flex-shrink: 0;
 }
 
-.ui5-dialog-wrapper-section {
+.ui5-dialog-section {
 	overflow: hidden;
 	flex: 1 1 auto;
 	display: flex;
+}
+
+/*
+ * IE pair of styles
+ * to be removed later on
+ */
+ui5-dialog[stretch] .ui5-dialog-root {
+	width: 90%;
+	height: 93%;
+	min-width: 0;
+	min-height: 0;
+}
+
+ui5-dialog[stretch] .ui5-phone.ui5-dialog-root-parent .ui5-dialog-root {
+	width: 100%;
+	height: 100%;
+	box-shadow: none;
+	border-radius: 0;
+}
+
+ui5-dialog[opened] .ui5-popup-frame {
+	display: inline;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/Popover.css b/packages/main/src/themes/Popover.css
index e32a7f5d2b71..fcd123451a6e 100644
--- a/packages/main/src/themes/Popover.css
+++ b/packages/main/src/themes/Popover.css
@@ -1,9 +1,10 @@
-.ui5-popover-wrapper {
+.ui5-popover-root {
 	position: fixed;
 	z-index: 10;
+	transform: translate3d(0,0,0); /* Fixes z-index issue on iOS within iframe without side effect in the rest of the browsers */
 }
 
-.ui5-popover-wrapper-arr {
+.ui5-popover-arr {
 	pointer-events: none;
 	display: block;
 	width: 1rem;
@@ -12,7 +13,7 @@
 	overflow: hidden;
 }
 
-.ui5-popover-wrapper-arr:after {
+.ui5-popover-arr:after {
 	content: " ";
 	display: block;
 	width: 0.7rem;
@@ -22,58 +23,113 @@
 }
 
 /* pointing upward arrow */
-.ui5-popover-wrapper-arrUp {
+:host([placement-type="Bottom"]) .ui5-popover-arr {
 	left: calc(50% - 0.5625rem);
 	top: -0.5rem;
 	height: 0.5625rem;
 
 }
-.ui5-popover-wrapper-arrUp:after {
+:host([placement-type="Bottom"]) .ui5-popover-arr:after {
 	margin: 0.1875rem 0 0 0.1875rem;
 	box-shadow: -0.375rem 0.375rem 0.75rem 0 var(--_ui5_popover_arrow_shadow_color), 0 0 0.125rem 0 var(--_ui5_popover_arrow_shadow_color);
 }
 
 /* pointing right arrow */
-.ui5-popover-wrapper-arrRight {
+:host([placement-type="Left"]) .ui5-popover-arr {
 	top: calc(50% - 0.5625rem);
 	right: -0.5625rem;
 	width: 0.5625rem;
 }
 
-.ui5-popover-wrapper-arrRight:after {
+:host([placement-type="Left"]) .ui5-popover-arr:after {
 	margin: 0.1875rem 0 0 -0.375rem;
 	box-shadow: -0.375rem -0.375rem 0.75rem 0 var(--_ui5_popover_arrow_shadow_color), 0 0 0.125rem 0 var(--_ui5_popover_arrow_shadow_color);
 }
 
 /* pointing downward arrow */
-.ui5-popover-wrapper-arrDown {
+:host([placement-type="Top"]) .ui5-popover-arr {
 	left: calc(50% - 0.5625rem);
 	height: 0.5625rem;
 }
 
-.ui5-popover-wrapper-arrDown:after {
+:host([placement-type="Top"]) .ui5-popover-arr:after {
 	margin: -0.375rem 0 0 0.125rem;
 	box-shadow: 0.375rem -0.375rem 0.75rem 0 var(--_ui5_popover_arrow_shadow_color), 0 0 0.125rem 0 var(--_ui5_popover_arrow_shadow_color);
 }
 
 /* pointing left arrow */
-.ui5-popover-wrapper-arrLeft {
+:host(:not([placement-type])) .ui5-popover-arr,
+:host([placement-type="Right"]) .ui5-popover-arr {
 	left: -0.5625rem;
 	top: calc(50% - 0.5625rem);
 	width: 0.5625rem;
 	height: 1rem;
 }
 
-.ui5-popover-wrapper-arrLeft:after {
+:host(:not([placement-type])) .ui5-popover-arr:after,
+:host([placement-type="Right"]) .ui5-popover-arr:after {
 	margin: 0.125rem 0 0 0.25rem;
 	box-shadow: 0.375rem 0.375rem 0.75rem 0 var(--_ui5_popover_arrow_shadow_color), 0 0 0.125rem 0 var(--_ui5_popover_arrow_shadow_color);
 }
 
-.ui5-popover-wrapper-arr.ui5-popover-wrapper-arr--hidden {
+:host([no-arrow]) .ui5-popover-arr {
 	display: none;
 }
 
-/* Fixes z-index issue on iOS within iframe without side effect in the rest of the browsers */
-.ui5-popover-wrapper {
-	transform: translate3d(0,0,0);
+/*
+ * IE pair of styles
+ * to be removed later on
+ */
+ui5-popover[opened] .ui5-popup-frame {
+	display: inline;
+}
+
+ui5-popover[no-arrow] .ui5-popover-arr {
+	display: none;
+}
+
+ui5-popover[placement-type="Top"] .ui5-popover-arr {
+	left: calc(50% - 0.5625rem);
+	top: -0.5rem;
+	height: 0.5625rem;
+
+}
+ui5-popover[placement-type="Top"] .ui5-popover-arr:after {
+	margin: 0.1875rem 0 0 0.1875rem;
+	box-shadow: -0.375rem 0.375rem 0.75rem 0 var(--_ui5_popover_arrow_shadow_color), 0 0 0.125rem 0 var(--_ui5_popover_arrow_shadow_color);
+}
+
+/* pointing right arrow */
+ui5-popover[placement-type="Left"] .ui5-popover-arr {
+	top: calc(50% - 0.5625rem);
+	right: -0.5625rem;
+	width: 0.5625rem;
+}
+
+ui5-popover[placement-type="Left"] .ui5-popover-arr:after {
+	margin: 0.1875rem 0 0 -0.375rem;
+	box-shadow: -0.375rem -0.375rem 0.75rem 0 var(--_ui5_popover_arrow_shadow_color), 0 0 0.125rem 0 var(--_ui5_popover_arrow_shadow_color);
+}
+
+ui5-popover[placement-type="Bottom"] .ui5-popover-arr {
+	left: calc(50% - 0.5625rem);
+	height: 0.5625rem;
+}
+
+ui5-popover[placement-type="Bottom"] .ui5-popover-arr:after {
+	margin: -0.375rem 0 0 0.125rem;
+	box-shadow: 0.375rem -0.375rem 0.75rem 0 var(--_ui5_popover_arrow_shadow_color), 0 0 0.125rem 0 var(--_ui5_popover_arrow_shadow_color);
+}
+
+ui5-popover:not([placement-type]) .ui5-popover-arr,
+ui5-popover[placement-type="Right"] .ui5-popover-arr {
+	left: -0.5625rem;
+	top: calc(50% - 0.5625rem);
+	width: 0.5625rem;
+	height: 1rem;
+}
+ui5-popover:not([placement-type]) .ui5-popover-arr:after,
+ui5-popover[placement-type="Right"] .ui5-popover-arr:after {
+	margin: 0.125rem 0 0 0.25rem;
+	box-shadow: 0.375rem 0.375rem 0.75rem 0 var(--_ui5_popover_arrow_shadow_color), 0 0 0.125rem 0 var(--_ui5_popover_arrow_shadow_color);
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/Popup.css b/packages/main/src/themes/Popup.css
index 52b77642f767..e3d6f3f2f23d 100644
--- a/packages/main/src/themes/Popup.css
+++ b/packages/main/src/themes/Popup.css
@@ -1,15 +1,15 @@
-.ui5-popup-wrapper-frame {
+.ui5-popup-frame {
 	width: 0;
 	height: 0;
 	display: none;
 	visibility: visible;
 }
 
-.ui5-popup-wrapper-frame--open {
+:host([opened]) .ui5-popup-frame {
 	display: inline;
 }
 
-.ui5-popup-wrapper {
+.ui5-popup-root {
 	min-width: 6.25rem;
 	box-sizing: border-box;
 	outline: none;
@@ -22,7 +22,7 @@
 	min-height: 2rem;
 }
 
-.ui5-popup-wrapper .ui5-popup-wrapper-header {
+.ui5-popup-root .ui5-popup-header {
 	margin: 0;
 	color: var(--sapUiPageHeaderTextColor);
 	font-size: 1rem;
@@ -31,14 +31,14 @@
 	border-bottom: 1px solid var(--sapUiPageFooterBorderColor);
 }
 
-.ui5-popup-wrapper .ui5-popup-wrapper-headerText {
+.ui5-popup-root .ui5-popup-headerText {
 	padding: 0 0.25rem;
 	text-align: center;
 	height: 3rem;
 	line-height: 3rem;
 }
 
-.ui5-popup-wrapper .ui5-popup-wrapper-footer {
+.ui5-popup-root .ui5-popup-footer {
 	font-size: 1rem;
 	font-weight: 400;
 	font-family: var(--sapUiFontFamily);
@@ -48,7 +48,7 @@
 	color: var(--sapUiPageFooterTextColor);
 }
 
-.ui5-popup-wrapper .ui5-popup-wrapper-content {
+.ui5-popup-root .ui5-popup-content {
 	overflow: auto;
 	position: relative;
 	box-sizing: border-box;
@@ -56,19 +56,19 @@
 	border-radius: 0.25rem;
 }
 
-.ui5-popup-wrapper .ui5-popup-wrapper-content,
-.ui5-popup-wrapper .ui5-popup-wrapper-footer {
+.ui5-popup-root .ui5-popup-content,
+.ui5-popup-root .ui5-popup-footer {
 	border-bottom-left-radius: .25rem;
 	border-bottom-right-radius: .25rem;
 }
 
-.ui5-popup-wrapper .ui5-popup-wrapper-scroll {
+.ui5-popup-root .ui5-popup-scroll {
 	vertical-align: middle;
 	box-sizing: border-box;
 	padding: var(--_ui5_popover_content_padding);
 }
 
-.sapUiBLy {
+.ui5-popup-BLy {
 	background-color: #000000;
 	opacity: 0.6;
 	filter: alpha(opacity=60);
@@ -80,10 +80,10 @@
 	outline: 0 none;
 }
 
-.ui5-popup-wrapper-blockLayer {
+.ui5-popup-blockLayer {
 	visibility: visible;
 }
 
-.ui5-popup-wrapper-blockLayer--hidden {
+.ui5-popup-blockLayer--hidden {
 	display: none;
 }
\ No newline at end of file
diff --git a/packages/main/test/pageobjects/DatePickerFGPage.js b/packages/main/test/pageobjects/DatePickerFGPage.js
index 466f0d04e7a5..43ff7b8f213a 100644
--- a/packages/main/test/pageobjects/DatePickerFGPage.js
+++ b/packages/main/test/pageobjects/DatePickerFGPage.js
@@ -1,7 +1,7 @@
 class DatePickerFGPage {
 
     get dpStart() { return $('#ui5-datepicker--startDate'); }
-    get startPopoverContent() { return browser.findElementDeep("#ui5-datepicker--startDate >>> ui5-popover >>> .ui5-popup-wrapper"); }
+    get startPopoverContent() { return browser.findElementDeep("#ui5-datepicker--startDate >>> ui5-popover >>> .ui5-popup-root"); }
     get startInnerInput() { return browser.findElementDeep("#ui5-datepicker--startDate >>> ui5-input >>> input"); }
     get dpEnd() { return $('#ui5-datepicker--endDate'); }
 
diff --git a/packages/main/test/pageobjects/DatePickerTestPage.js b/packages/main/test/pageobjects/DatePickerTestPage.js
index 9b8c59ff14c3..ea4ce170de94 100644
--- a/packages/main/test/pageobjects/DatePickerTestPage.js
+++ b/packages/main/test/pageobjects/DatePickerTestPage.js
@@ -20,7 +20,7 @@ class DatePickerTestPage {
 	}
 
 	get popoverContent() {
-		return browser.findElementDeep(this._sut + " >>> ui5-popover >>> .ui5-popup-wrapper");
+		return browser.findElementDeep(this._sut + " >>> ui5-popover >>> .ui5-popup-root");
 	}
 
 	get calendar() {
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Popover.html b/packages/main/test/sap/ui/webcomponents/main/pages/Popover.html
index a227056f68c3..3f8cfbee1059 100644
--- a/packages/main/test/sap/ui/webcomponents/main/pages/Popover.html
+++ b/packages/main/test/sap/ui/webcomponents/main/pages/Popover.html
@@ -23,7 +23,10 @@
 	</script>
 </head>
 
-<body>
+<body style="display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;">
 	<ui5-button id="btnOpenPopover" design="Emphasized" icon="sap-icon://employee">Open Popover</ui5-button>
 
 	<ui5-popover id="popoverToOpen" header-text="Popover">
diff --git a/packages/main/test/sap/ui/webcomponents/main/qunit/Dialog.qunit.js b/packages/main/test/sap/ui/webcomponents/main/qunit/Dialog.qunit.js
index 84038adb8b26..2ba2e9fa7ac6 100644
--- a/packages/main/test/sap/ui/webcomponents/main/qunit/Dialog.qunit.js
+++ b/packages/main/test/sap/ui/webcomponents/main/qunit/Dialog.qunit.js
@@ -49,7 +49,7 @@ TestHelper.ready(function () {
 		this.dialog.addEventListener('afterOpen', function (event) {
 			var shadowRoot = this.dialog.shadowRoot;
 
-			assert.ok(shadowRoot.querySelector('.ui5-popup-wrapper-frame--open'), "Dialog is opened");
+			assert.ok(this.dialog.hasAttribute('opened'), "Dialog is opened");
 
 			// header
 			var header = shadowRoot.host.children[0];
@@ -68,7 +68,7 @@ TestHelper.ready(function () {
 
 		this.dialog.addEventListener('afterClose', function (event) {
 			RenderScheduler.whenFinished().then(function() {
-				assert.notOk(this.dialog.shadowRoot.querySelector('.ui5-popup-wrapper-frame--open'), "Dialog is closed");
+				assert.notOk(this.dialog.hasAttribute('opened'), "Dialog is closed");
 				done();
 			}.bind(this));
 		}.bind(this));
diff --git a/packages/main/test/sap/ui/webcomponents/main/qunit/Popover.qunit.js b/packages/main/test/sap/ui/webcomponents/main/qunit/Popover.qunit.js
index 798b23cc4fbb..d7bd4ec285ba 100644
--- a/packages/main/test/sap/ui/webcomponents/main/qunit/Popover.qunit.js
+++ b/packages/main/test/sap/ui/webcomponents/main/qunit/Popover.qunit.js
@@ -52,7 +52,7 @@ TestHelper.ready(function () {
 		this.popover.addEventListener('afterOpen', function (event) {
 			var shadowRoot = this.shadowRoot;
 
-			assert.ok(shadowRoot.querySelector('.ui5-popup-wrapper-frame--open'), "Popover is opened");
+			assert.ok(this.popover.hasAttribute('opened'), "Popover is opened");
 
 			// header
 			var header = shadowRoot.host.children[0];
@@ -71,7 +71,7 @@ TestHelper.ready(function () {
 
 		this.popover.addEventListener('afterClose', function (event) {
 			RenderScheduler.whenFinished().then(function () {
-				assert.notOk(this.popover.shadowRoot.querySelector('.ui5-popup-wrapper-frame--open'), "Popover is closed");
+				assert.notOk(this.popover.hasAttribute('opened'), "Popover is closed");
 				done();
 			}.bind(this));
 		}.bind(this));
diff --git a/packages/main/test/specs/DatePicker-fg.spec.js b/packages/main/test/specs/DatePicker-fg.spec.js
index 6dc4f5461456..bf71d8b4f84a 100644
--- a/packages/main/test/specs/DatePicker-fg.spec.js
+++ b/packages/main/test/specs/DatePicker-fg.spec.js
@@ -5,7 +5,7 @@ describe('Date Picker Field Glass modifications', () => {
     it('direct usage for comparison', () => {
         browser.url('http://localhost:8080/test-resources/sap/ui/webcomponents/main/pages/DatePicker_fg.html');
 
-        let popoverContent = browser.findElementDeep("#ui5-datepicker--startDate >>> ui5-popover >>> .ui5-popup-wrapper");
+        let popoverContent = browser.findElementDeep("#ui5-datepicker--startDate >>> ui5-popover >>> .ui5-popup-root");
         assert.ok(!popoverContent.isDisplayedInViewport(), "popover is initially hidden");
 
         const innerInput = browser.findElementDeep("#ui5-datepicker--startDate >>> ui5-input >>> input");
diff --git a/packages/main/test/specs/Dialog.spec.js b/packages/main/test/specs/Dialog.spec.js
index 1c0742409e96..2fe55f9a209f 100644
--- a/packages/main/test/specs/Dialog.spec.js
+++ b/packages/main/test/specs/Dialog.spec.js
@@ -9,7 +9,7 @@ describe("Dialog general interaction", () => {
 
 		btnOpenDialog.click();
 
-		const dialog = browser.findElementDeep("ui5-dialog >>> .ui5-dialog-wrapper");
+		const dialog = browser.findElementDeep("ui5-dialog >>> .ui5-dialog-root");
 		assert.ok(dialog.isDisplayedInViewport(), "Dialog is opened.");
 
 		btnCloseDialog.click();
diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js
index 4c1150d1e83a..e3b87b583bb5 100644
--- a/packages/main/test/specs/Input.spec.js
+++ b/packages/main/test/specs/Input.spec.js
@@ -59,7 +59,7 @@ describe("Input general interaction", () => {
 		let item;
 		const suggestionsInput = browser.findElementDeep("#myInput >>> input");
 		const inputResult = browser.findElementDeep("#inputResult >>> input");
-		const popover = browser.findElementDeep("#myInput >>> ui5-popover >>> .ui5-popover-wrapper");
+		const popover = browser.findElementDeep("#myInput >>> ui5-popover >>> .ui5-popover-root");
 
 		suggestionsInput.click();
 		suggestionsInput.keys("p");
diff --git a/packages/main/test/specs/Popover.spec.js b/packages/main/test/specs/Popover.spec.js
index fd53016aed31..490700354b6b 100644
--- a/packages/main/test/specs/Popover.spec.js
+++ b/packages/main/test/specs/Popover.spec.js
@@ -9,7 +9,7 @@ describe("Popover general interaction", () => {
 
 		btnOpenPopover.click();
 
-		const popover = browser.findElementDeep("ui5-popover >>> .ui5-popover-wrapper");
+		const popover = browser.findElementDeep("ui5-popover >>> .ui5-popover-root");
 		assert.ok(popover.isDisplayedInViewport(), "Popover is opened.");
 
 		field.click();
@@ -22,7 +22,7 @@ describe("Popover general interaction", () => {
 
 		btnOpenPopover.click();
 
-		const popover = browser.findElementDeep("ui5-popover >>> .ui5-popover-wrapper");
+		const popover = browser.findElementDeep("ui5-popover >>> .ui5-popover-root");
 		assert.ok(popover.isDisplayedInViewport(), "Popover is opened.");
 
 		btnInPopover.click();
diff --git a/packages/main/test/specs/Select.spec.js b/packages/main/test/specs/Select.spec.js
index ddca0e748445..40a20de526f1 100644
--- a/packages/main/test/specs/Select.spec.js
+++ b/packages/main/test/specs/Select.spec.js
@@ -71,7 +71,7 @@ describe("Select general interaction", () => {
 	it("opens upon space", () => {
 		const btn = $("#myBtn2");
 		const select = $("#mySelect");
-		const popover = browser.findElementDeep("#mySelect >>> ui5-popover >>> .ui5-popover-wrapper");
+		const popover = browser.findElementDeep("#mySelect >>> ui5-popover >>> .ui5-popup-root");
 
 		btn.click();
 		btn.keys("Tab");
@@ -83,7 +83,7 @@ describe("Select general interaction", () => {
 	it("toggles upon F4", () => {
 		const btn = $("#myBtn2");
 		const select = $("#mySelect");
-		const popover = browser.findElementDeep("#mySelect >>> ui5-popover >>> .ui5-popover-wrapper");
+		const popover = browser.findElementDeep("#mySelect >>> ui5-popover >>> .ui5-popup-root");
 
 		btn.click();
 		btn.keys("Tab");
@@ -98,7 +98,7 @@ describe("Select general interaction", () => {
 	it("toggles upon ALT + UP", () => {
 		const btn = $("#myBtn2");
 		const select = $("#mySelect");
-		const popover = browser.findElementDeep("#mySelect >>> ui5-popover >>> .ui5-popover-wrapper");
+		const popover = browser.findElementDeep("#mySelect >>> ui5-popover >>> .ui5-popup-root");
 
 		btn.click();
 		btn.keys("Tab");
@@ -112,7 +112,7 @@ describe("Select general interaction", () => {
 
 	it("toggles upon ALT + DOWN", () => {
 		const btn = $("#myBtn2");
-		const popover = browser.findElementDeep("#mySelect >>> ui5-popover >>> .ui5-popover-wrapper");
+		const popover = browser.findElementDeep("#mySelect >>> ui5-popover >>> .ui5-popup-root");
 
 		btn.click();
 		btn.keys("Tab");

From 51a28e1a530fa9b929c7c90de4ad930438776605 Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Tue, 23 Jul 2019 22:04:11 +0300
Subject: [PATCH 2/3] fix qunit test

---
 .../main/test/sap/ui/webcomponents/main/qunit/Popover.qunit.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/test/sap/ui/webcomponents/main/qunit/Popover.qunit.js b/packages/main/test/sap/ui/webcomponents/main/qunit/Popover.qunit.js
index d7bd4ec285ba..8f7f76f3eaae 100644
--- a/packages/main/test/sap/ui/webcomponents/main/qunit/Popover.qunit.js
+++ b/packages/main/test/sap/ui/webcomponents/main/qunit/Popover.qunit.js
@@ -52,7 +52,7 @@ TestHelper.ready(function () {
 		this.popover.addEventListener('afterOpen', function (event) {
 			var shadowRoot = this.shadowRoot;
 
-			assert.ok(this.popover.hasAttribute('opened'), "Popover is opened");
+			assert.ok(this.hasAttribute('opened'), "Popover is opened");
 
 			// header
 			var header = shadowRoot.host.children[0];

From d81b874a4b67738d22c167acb74935f06ad3d23d Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Wed, 24 Jul 2019 09:14:48 +0300
Subject: [PATCH 3/3] fix Input and Select wdio tests

---
 packages/main/src/Select.js                    | 2 +-
 packages/main/src/features/InputSuggestions.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js
index b69fc650616e..67b48b659891 100644
--- a/packages/main/src/Select.js
+++ b/packages/main/src/Select.js
@@ -186,7 +186,7 @@ class Select extends UI5Element {
 	get _isPickerOpen() {
 		const popover = this.shadowRoot.querySelector("#ui5-select--popover");
 
-		return popover && popover._isOpen;
+		return popover && popover.opened;
 	}
 
 	_togglePopover() {
diff --git a/packages/main/src/features/InputSuggestions.js b/packages/main/src/features/InputSuggestions.js
index 07d9b86ee3ac..233ef071629b 100644
--- a/packages/main/src/features/InputSuggestions.js
+++ b/packages/main/src/features/InputSuggestions.js
@@ -162,7 +162,7 @@ class Suggestions {
 
 	isOpened() {
 		const popover = this._getPopover();
-		return !!(popover && popover._isOpen);
+		return !!(popover && popover.opened);
 	}
 
 	_handleItemNavigation(forward) {