Skip to content

Commit

Permalink
fix(ui5-carousel): hide arrows and dots when single page (#1414)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
ilhan007 authored Apr 2, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 4e2112f commit f6c46be
Showing 4 changed files with 33 additions and 7 deletions.
4 changes: 2 additions & 2 deletions packages/main/src/Carousel.hbs
Original file line number Diff line number Diff line change
@@ -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>
16 changes: 11 additions & 5 deletions packages/main/src/Carousel.js
Original file line number Diff line number Diff line change
@@ -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"),
10 changes: 10 additions & 0 deletions packages/main/test/pages/Carousel.html
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 10 additions & 0 deletions packages/main/test/specs/Carousel.spec.js
Original file line number Diff line number Diff line change
@@ -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.");
});
});

0 comments on commit f6c46be

Please sign in to comment.