fix(ui5-carousel): hide navigation arrows on mouse out (#3174)

Author: kskondov

packages/main/src/Carousel.hbs

@@ -4,6 +4,8 @@
     role="listbox"
     aria-activedescendant="{{ariaActiveDescendant}}"
     @keydown={{_onkeydown}}
+    @mouseout="{{_onmouseout}}"
+    @mouseover="{{_onmouseover}}"
 >
     <div class="ui5-carousel-viewport {{classes.viewport}}">
         <div class="{{classes.content}}" style="{{styles.content}}">
@@ -28,7 +30,7 @@
             </div>
         {{/if}}
 
-        {{#if showNavigationArrows}}
+        {{#if showNavigation}}
             <div class="{{classes.navigation}}">
                 {{#if arrows.navigation}}
                     {{> arrow-back}}

packages/main/src/Carousel.js

@@ -152,6 +152,16 @@ const metadata = {
 		_itemWidth: {
 			type: Integer,
 		},
+
+		/**
+		 * If set to true navigation arrows are shown
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		_visibleNavigationArrows: {
+			type: Boolean,
+			noAttribute: true,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.Carousel.prototype */ {
@@ -335,6 +345,14 @@ class Carousel extends UI5Element {
 		}
 	}
 
+	_onmouseout() {
+		this._visibleNavigationArrows = false;
+	}
+
+	_onmouseover() {
+		this._visibleNavigationArrows = true;
+	}
+
 	navigateLeft() {
 		this._resizing = false;
 
@@ -432,12 +450,12 @@ class Carousel extends UI5Element {
 			content: {
 				"ui5-carousel-content": true,
 				"ui5-carousel-content-no-animation": this.supressAimation,
-				"ui5-carousel-content-has-navigation": this.showNavigationArrows,
-				"ui5-carousel-content-has-navigation-and-buttons": this.showNavigationArrows && this.arrowsPlacement === CarouselArrowsPlacement.Navigation,
+				"ui5-carousel-content-has-navigation": this.showNavigation,
+				"ui5-carousel-content-has-navigation-and-buttons": this.showNavigation && this.arrowsPlacement === CarouselArrowsPlacement.Navigation,
 			},
 			navigation: {
 				"ui5-carousel-navigation-wrapper": true,
-				"ui5-carousel-navigation-with-buttons": this.showNavigationArrows && this.arrowsPlacement === CarouselArrowsPlacement.Navigation,
+				"ui5-carousel-navigation-with-buttons": this.showNavigation && this.arrowsPlacement === CarouselArrowsPlacement.Navigation,
 			},
 			navPrevButton: {
 				"ui5-carousel-navigation-button--hidden": !this.hasPrev,
@@ -472,7 +490,7 @@ class Carousel extends UI5Element {
 	}
 
 	get arrows() {
-		const showArrows = this.showNavigationArrows && isDesktop();
+		const showArrows = this._visibleNavigationArrows && this.showNavigation && isDesktop();
 
 		return {
 			content: showArrows && this.arrowsPlacement === CarouselArrowsPlacement.Content,
@@ -500,7 +518,7 @@ class Carousel extends UI5Element {
 		return this._isRTL ? this.pagesCount - (this.pagesCount - this.selectedIndex) + 1 : this.selectedIndex + 1;
 	}
 
-	get showNavigationArrows() {
+	get showNavigation() {
 		return !this.hideNavigation && this.pagesCount > 1;
 	}
 

packages/main/src/themes/Carousel.css

@@ -74,7 +74,7 @@
 
 .ui5-carousel-navigation-arrows {
     width: 100%;
-    padding:0 1.5rem;
+    padding:0 0.5rem;
     position: absolute;
     top: calc(50% - 2.5rem);
     left: 0;

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

@@ -15,6 +15,8 @@ describe("Carousel general interaction", () => {
 
 	it("Carousel navigates left", () => {
 		const carousel = browser.$("#carousel1");
+		carousel.scrollIntoView();
+		carousel.moveTo();
 		const carouselRightButton = carousel.shadow$$(".ui5-carousel-navigation-button")[0];
 
 		carouselRightButton.click();
@@ -23,6 +25,8 @@ describe("Carousel general interaction", () => {
 
 	it("Carousel navigates right", () => {
 		const carousel = browser.$("#carousel1");
+		carousel.scrollIntoView();
+		carousel.moveTo();
 		const carouselLeftButton = carousel.shadow$$(".ui5-carousel-navigation-button")[1];
 
 		carouselLeftButton.click();
@@ -31,20 +35,26 @@ describe("Carousel general interaction", () => {
 
 	it("Navigation is rendered for carousel with less than 9 elements", () => {
 		const carousel = browser.$("#carousel1");
+		carousel.moveTo();
+
 		const navigation = carousel.shadow$(".ui5-carousel-navigation > div");
 
 		assert.ok(navigation.isExisting(), "Navigation is rendered");
 	});
 
 	it("Navigation is rendered for carousel with more than 9 elements", () => {
 		const carousel = browser.$("#carousel2");
+		carousel.scrollIntoView();
+		carousel.moveTo();
 		const navigation = carousel.shadow$(".ui5-carousel-navigation > ui5-label");
 
 		assert.ok(navigation.isExisting(), "Navigation is rendered");
 	});
 
 	it("Buttons are rendered in the navigation(arrows-placement)", () => {
 		const carousel = browser.$("#carousel3");
+		carousel.scrollIntoView();
+		carousel.moveTo();
 		const buttons = carousel.shadow$$(".ui5-carousel-navigation-wrapper ui5-button");
 
 		assert.strictEqual(buttons.length, 2, "Navigation is rendered");
@@ -59,7 +69,9 @@ describe("Carousel general interaction", () => {
 
 	it("Aria attributes are set", () => {
 		const carousel = browser.$("#carousel5");
-		const pageIndicatorDot1 = carousel.shadow$(".ui5-carousel-navigation-dot:first-child");
+		carousel.scrollIntoView();
+		carousel.moveTo();
+		const pageIndicatorDot1 = $('#carousel5').shadow$(".ui5-carousel-navigation-dot:first-child");
 		const pageIndicatorDot2 = carousel.shadow$(".ui5-carousel-navigation-dot:nth-child(2)");
 		const PAGE_INDICATOR_ARIA_LABEL1 = "Item 1 of 5 displayed";
 		const PAGE_INDICATOR_ARIA_LABEL2 = "Item 2 of 5 displayed";
@@ -130,6 +142,8 @@ describe("Carousel general interaction", () => {
 
 	it("Event navigate fired when pressing navigation arrows", () => {
 		const carousel = browser.$("#carousel8");
+		carousel.scrollIntoView();
+		carousel.moveTo();
 		const selectedIndex = browser.$("#result");
 		const eventCounter = browser.$("#resultCounter");
 		const navigationArrowForward = carousel.shadow$("ui5-button[arrow-forward]");
@@ -170,6 +184,8 @@ describe("Carousel general interaction", () => {
 	it("loadMore event is fired only when neccessary", () => {
 		const carousel = browser.$("#carousel9");
 		const eventCounter = browser.$("#loadmore-result");
+		carousel.scrollIntoView();
+		carousel.moveTo();
 		const navigationArrowForward = carousel.shadow$("ui5-button[arrow-forward]");
 
 		navigationArrowForward.click();