fix(ui5-carousel): hide arrows and dots when single page (#1414)

The navigation arrows and page indicator bar should be hidden when there is
a single page displayed within the Carousel.Reported by the "MDK" users.

Author: ilhan007

packages/main/src/Carousel.hbs

@@ -35,7 +35,7 @@
             </div>
         {{/if}}
 
-        {{#unless hideNavigation}}
+        {{#if showNavigationArrows}}
             <div class="{{classes.navigation}}">
                 {{#if arrows.navigation}}
                 <ui5-button
@@ -70,6 +70,6 @@
                     ></ui5-button>
                 {{/if}}
             </div>
-        {{/unless}}
+        {{/if}}
     </div>
 </section>

packages/main/src/Carousel.js

@@ -277,12 +277,12 @@ class Carousel extends UI5Element {
 			content: {
 				"ui5-carousel-content": true,
 				"ui5-carousel-content-no-animation": this.shouldAnimate,
-				"ui5-carousel-content-has-navigation": !this.hideNavigation,
-				"ui5-carousel-content-has-navigation-and-buttons": !this.hideNavigation && this.arrowsPlacement === CarouselArrowsPlacement.Navigation,
+				"ui5-carousel-content-has-navigation": this.showNavigationArrows,
+				"ui5-carousel-content-has-navigation-and-buttons": this.showNavigationArrows && this.arrowsPlacement === CarouselArrowsPlacement.Navigation,
 			},
 			navigation: {
 				"ui5-carousel-navigation-wrapper": true,
-				"ui5-carousel-navigation-with-buttons": this.arrowsPlacement === CarouselArrowsPlacement.Navigation,
+				"ui5-carousel-navigation-with-buttons": this.showNavigationArrows && this.arrowsPlacement === CarouselArrowsPlacement.Navigation,
 			},
 			page: {
 				"ui5-carousel-page": true,
@@ -304,9 +304,11 @@ class Carousel extends UI5Element {
 	}
 
 	get arrows() {
+		const showArrows = this.showNavigationArrows && isDesktop();
+
 		return {
-			content: isDesktop() && this.arrowsPlacement === CarouselArrowsPlacement.Content,
-			navigation: isDesktop() && this.arrowsPlacement === CarouselArrowsPlacement.Navigation,
+			content: showArrows && this.arrowsPlacement === CarouselArrowsPlacement.Content,
+			navigation: showArrows && this.arrowsPlacement === CarouselArrowsPlacement.Navigation,
 		};
 	}
 
@@ -318,6 +320,10 @@ class Carousel extends UI5Element {
 		return this.selectedIndex + 1;
 	}
 
+	get showNavigationArrows() {
+		return !this.hideNavigation && this.pages.length > 1;
+	}
+
 	static async onDefine() {
 		await Promise.all([
 			fetchI18nBundle("@ui5/webcomponents"),

packages/main/test/pages/Carousel.html

@@ -225,5 +225,15 @@
 	<ui5-button>Button 7</ui5-button>
 	<ui5-button>Button 8</ui5-button>
 </ui5-carousel>
+
+<ui5-title>Carousel with one page</ui5-title>
+<ui5-label>The arrows and dots are not displayed</ui5-label>
+
+<ui5-carousel id="carousel6" items-per-page="3">
+	<ui5-button>Button 1</ui5-button>
+	<ui5-button>Button 2</ui5-button>
+	<ui5-button>Button 3</ui5-button>
+</ui5-carousel>
+
 </body>
 </html>

packages/main/test/specs/Carousel.spec.js

@@ -54,4 +54,14 @@ describe("Carousel general interaction", () => {
 		assert.strictEqual(pages, 3, "There are only 3 pages.");
 	});
 
+	it("Arrows and Dots not displayed in case of single page", () => {
+		const carousel = browser.$("#carousel6");
+		const pages = carousel.getProperty("pages").length;
+		const pageIndicator = carousel.shadow$(".ui5-carousel-navigation-wrapper");
+		const navigationArrows = carousel.shadow$(".ui5-carousel-navigation-arrows");
+
+		assert.ok(!pageIndicator.isExisting(), "Navigation is rendered");
+		assert.ok(!navigationArrows.isExisting(), "Navigation is rendered");
+		assert.strictEqual(pages, 1, "There are only 3 pages.");
+	});
 });