refactor(ui5-color-palette-popover): deprecate openPopover (#4613)

Deprecate openPopover in favour of "showAt" to be consistent with Popover, ResponsivePopover

Author: ilhan007

packages/main/src/ColorPalettePopover.js

@@ -169,11 +169,30 @@ class ColorPalettePopover extends UI5Element {
 		return this.responsivePopover.content[0].querySelector("[ui5-color-palette]");
 	}
 
-	closePopover() {
-		this.responsivePopover.close();
+	/**
+	 * Shows the ColorPalettePopover.
+	 * @param {HTMLElement} opener the element that the popover is shown at
+	 * @public
+	 * @since 1.1.1
+	 */
+	showAt(opener) {
+		this._openPopover(opener);
 	}
 
+	/**
+	 * Shows the ColorPalettePopover.
+	 * <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.
+	 * @param {HTMLElement} opener the element that the popover is shown at
+	 * @public
+	 * @since 1.0.0-rc.16
+	 * @deprecated The method is deprecated in favour of <code>showAt</code>.
+	 */
 	openPopover(opener) {
+		console.warn("The method 'openPopover' is deprecated and will be removed in future, use 'showAt' instead."); // eslint-disable-line
+		this._openPopover(opener);
+	}
+
+	_openPopover(opener) {
 		this._respPopover();
 
 		this.responsivePopover.showAt(opener, true);
@@ -185,6 +204,10 @@ class ColorPalettePopover extends UI5Element {
 		}
 	}
 
+	closePopover() {
+		this.responsivePopover.close();
+	}
+
 	onSelectedColor(event) {
 		this.closePopover();
 		this.fireEvent("item-click", event.detail);

packages/main/test/pages/ColorPalettePopover.html

@@ -119,22 +119,22 @@
 	</ui5-color-palette-popover>
 	<script>
 		colorPaletteBtn.addEventListener("click", function(event) {
-			colorPalettePopover.openPopover(this);
+			colorPalettePopover.showAt(this);
 		});
 		colorPaletteBtn1.addEventListener("click", function(event) {
-			colorPalettePopover1.openPopover(this);
+			colorPalettePopover1.showAt(this);
 		});
 		colorPaletteBtn2.addEventListener("click", function(event) {
-			colorPalettePopover2.openPopover(this);
+			colorPalettePopover2.showAt(this);
 		});
 		colorPaletteBtn3.addEventListener("click", function(event) {
-			colorPalettePopover3.openPopover(this);
+			colorPalettePopover3.showAt(this);
 		});
 		colorPaletteBtn4.addEventListener("click", function(event) {
-			colorPalettePopover4.openPopover(this);
+			colorPalettePopover4.showAt(this);
 		});
 		colorPaletteBtn5.addEventListener("click", function(event) {
-			colorPalettePopover5.openPopover(this);
+			colorPalettePopover5.showAt(this);
 		});
 	</script>
 </html>

packages/main/test/samples/ColorPalettePopover.sample.html

@@ -27,7 +27,7 @@ <h3>Color Palette Popover with recent colors, default color and more colors feat
 	</div>
 	<script>
 		colorPaletteBtn.addEventListener("click", function(event) {
-			colorPalettePopover.openPopover(this);
+			colorPalettePopover.showAt(this);
 		});
 	</script>
 	<pre class="prettyprint lang-html"><xmp>
@@ -48,7 +48,7 @@ <h3>Color Palette Popover with recent colors, default color and more colors feat
 </ui5-color-palette-popover>
 <script>
 	colorPaletteBtn.addEventListener("click", (event) => {
-		colorPalettePopover.openPopover(this);
+		colorPalettePopover.showAt(this);
 	});
 </script>
 </xmp></pre>
@@ -75,7 +75,7 @@ <h3>Color Palette Popover without any additional features</h3>
 	</div>
 	<script>
 		colorPaletteBtn1.addEventListener("click", function (event) {
-			colorPalettePopover1.openPopover(this);
+			colorPalettePopover1.showAt(this);
 		});
 	</script>
 	<pre class="prettyprint lang-html"><xmp>
@@ -96,7 +96,7 @@ <h3>Color Palette Popover without any additional features</h3>
 </ui5-color-palette-popover>
 <script>
 	colorPaletteBtn1.addEventListener("click", (event) => {
-		colorPalettePopover1.openPopover(this);
+		colorPalettePopover1.showAt(this);
 	});
 </script>
 </xmp></pre>