Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(carousel): Improve support for high item counts #10315

Merged
merged 20 commits into from
Sep 18, 2024
Merged

feat(carousel): Improve support for high item counts #10315

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
0018fe6
feat(carousel): Improve support for high item counts
macandcheese Sep 14, 2024
b9b6a7d
WIP
macandcheese Sep 14, 2024
667ef0f
WIP
macandcheese Sep 14, 2024
99d2bfd
Clean up
macandcheese Sep 15, 2024
ae0785a
Merge branch 'dev' into macandcheese/9121-carousel-support-limiting-p…
macandcheese Sep 15, 2024
a95e908
Clean up
macandcheese Sep 15, 2024
cfd91b1
Clean up
macandcheese Sep 15, 2024
869b497
Merge branch 'dev' into macandcheese/9121-carousel-support-limiting-p…
macandcheese Sep 15, 2024
d53f47c
Merge branch 'dev' into macandcheese/9121-carousel-support-limiting-p…
macandcheese Sep 16, 2024
abf9ab0
Design feedback
macandcheese Sep 17, 2024
9c0b12f
Merge branch 'dev' into macandcheese/9121-carousel-support-limiting-p…
macandcheese Sep 17, 2024
6599ed0
Clean up
macandcheese Sep 17, 2024
2fe1d50
Pr feedback
macandcheese Sep 17, 2024
87eea24
Merge branch 'dev' into macandcheese/9121-carousel-support-limiting-p…
macandcheese Sep 17, 2024
1dcb23a
Pr feedback
macandcheese Sep 17, 2024
2f60187
Pr feedback
macandcheese Sep 17, 2024
851a04f
Clean up
macandcheese Sep 17, 2024
e6cb3e4
Pr feedback
macandcheese Sep 17, 2024
48a46d1
Clean up
macandcheese Sep 17, 2024
367216a
Clean up
macandcheese Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 58 additions & 1 deletion packages/calcite-components/src/components/carousel/carousel.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { newE2EPage } from "@stencil/core/testing";
import { accessible, hidden, renders, t9n } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { CSS, DURATION } from "./resources";
import { breakpoints } from "../../utils/responsive";
import { CSS, DURATION, maxItemBreakpoints } from "./resources";

const slideDurationWaitTimer = DURATION + 250;

Expand Down Expand Up @@ -1055,3 +1056,59 @@ describe("calcite-carousel", () => {
expect(animationEndSpy).toHaveReceivedEventTimes(8);
});
});
describe("handles overflow of pagination items", () => {
it("correctly limits the number of slide pagination items shown when overflowing xxsmall first selected", async () => {
const page = await newE2EPage();
await page.setContent(
html`<calcite-carousel label="carousel" style="width:${breakpoints.width["xxsmall"]}px">
<calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
<calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
<calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
<calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
<calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
<calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
<calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
<calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
</calcite-carousel>`,
);

const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
expect(items).toHaveLength(maxItemBreakpoints["xxsmall"] + 2);
});
it("correctly limits the number of slide pagination items shown when overflowing xsmall middle selected", async () => {
const page = await newE2EPage();
await page.setContent(
html`<calcite-carousel label="carousel" style="width:${breakpoints.width["xsmall"]}px">
<calcite-carousel-item label="item 1"><p>first</p></calcite-carousel-item>
<calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
<calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
<calcite-carousel-item label="item 4" selected><p>fourth</p></calcite-carousel-item>
<calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
<calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
<calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
<calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
</calcite-carousel>`,
);

const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
expect(items).toHaveLength(maxItemBreakpoints["xsmall"] + 2);
macandcheese marked this conversation as resolved.
Show resolved Hide resolved
});
it("correctly limits the number of slide pagination items shown when overflowing small last selected", async () => {
const page = await newE2EPage();
await page.setContent(
html`<calcite-carousel label="carousel" style="width:${breakpoints.width["small"]}px">
<calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
<calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
<calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
<calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
<calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
<calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
<calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
<calcite-carousel-item label="item 8" selected><p>eighth</p></calcite-carousel-item>
</calcite-carousel>`,
);

const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
expect(items).toHaveLength(maxItemBreakpoints["small"] + 2);
});
});
19 changes: 19 additions & 0 deletions packages/calcite-components/src/components/carousel/carousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,25 @@ calcite-carousel-item:not([selected]) {
}
}

.pagination-item--individual {
@apply w-0 p-0 opacity-0 pointer-events-none;
visibility: hidden;
transition:
var(--calcite-animation-timing) ease-in-out inline-size,
var(--calcite-animation-timing) ease-in-out padding,
var(--calcite-internal-animation-timing-slow) ease-in-out opacity;

&.pagination-item--visible {
@apply w-8 opacity-100 pointer-events-auto;
visibility: visible;
}
}

.pagination-item--range-edge calcite-icon {
scale: 0.75;
transition: var(--calcite-internal-animation-timing-slow) ease-in-out scale;
}

.container--overlaid .pagination-item {
background-color: var(--calcite-internal-internal-carousel-item-background-color);
&:hover {
Expand Down
82 changes: 76 additions & 6 deletions packages/calcite-components/src/components/carousel/carousel.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,82 @@ export const simple = (args: CarouselStoryArgs): string =>
</calcite-carousel>
</div>`;

export const simpleManyItems = (args: CarouselStoryArgs): string =>
html` <div style="width:600px;height:400px;">
<calcite-carousel
control-overlay="${args.controlOverlay}"
${boolean("disabled", args.disabled)}
autoplay-duration="${args.autoplayDuration}"
${args.autoplay ? "autoplay" : ""}
macandcheese marked this conversation as resolved.
Show resolved Hide resolved
label="${args.label}"
arrow-type="${args.arrowType}"
>
<calcite-carousel-item label="Carousel Item 1">
<calcite-card>
<span slot="title">Some kind of carousel item content</span>
<span slot="subtitle">In this case, in a card</span>
<calcite-icon scale="s" slot="footer-start" icon="number-circle-1"></calcite-icon>
</calcite-card>
</calcite-carousel-item>
<calcite-carousel-item label="Carousel Item 2">
<calcite-card>
<span slot="title">Some kind of carousel item content</span>
<span slot="subtitle">In this case, in a card</span>
<calcite-icon scale="s" slot="footer-start" icon="number-circle-2"></calcite-icon>
</calcite-card>
</calcite-carousel-item>
<calcite-carousel-item label="Carousel Item 3">
<calcite-card>
<span slot="title">Some kind of carousel item content</span>
<span slot="subtitle">In this case, in a card</span>
<calcite-icon scale="s" slot="footer-start" icon="number-circle-3"></calcite-icon>
</calcite-card>
</calcite-carousel-item>
<calcite-carousel-item label="Carousel Item 4">
<calcite-card>
<span slot="title">Some kind of carousel item content</span>
<span slot="subtitle">In this case, in a card</span>
<calcite-icon scale="s" slot="footer-start" icon="number-circle-4"></calcite-icon>
</calcite-card>
</calcite-carousel-item>
<calcite-carousel-item label="Carousel Item 5">
<calcite-card>
<span slot="title">Some kind of carousel item content</span>
<span slot="subtitle">In this case, in a card</span>
<calcite-icon scale="s" slot="footer-start" icon="number-circle-5"></calcite-icon>
</calcite-card>
</calcite-carousel-item>
<calcite-carousel-item label="Carousel Item 6">
<calcite-card>
<span slot="title">Some kind of carousel item content</span>
<span slot="subtitle">In this case, in a card</span>
<calcite-icon scale="s" slot="footer-start" icon="number-circle-6"></calcite-icon>
</calcite-card>
</calcite-carousel-item>
<calcite-carousel-item label="Carousel Item 7">
<calcite-card>
<span slot="title">Some kind of carousel item content</span>
<span slot="subtitle">In this case, in a card</span>
<calcite-icon scale="s" slot="footer-start" icon="number-circle-7"></calcite-icon>
</calcite-card>
</calcite-carousel-item>
<calcite-carousel-item label="Carousel Item 8">
<calcite-card>
<span slot="title">Some kind of carousel item content</span>
<span slot="subtitle">In this case, in a card</span>
<calcite-icon scale="s" slot="footer-start" icon="number-circle-8"></calcite-icon>
</calcite-card>
</calcite-carousel-item>
<calcite-carousel-item label="Carousel Item 9">
<calcite-card>
<span slot="title">Some kind of carousel item content</span>
<span slot="subtitle">In this case, in a card</span>
<calcite-icon scale="s" slot="footer-start" icon="number-circle-9"></calcite-icon>
</calcite-card>
</calcite-carousel-item>
</calcite-carousel>
</div>`;

export const carouselAutoplayFullImageWithOverlayAndEdge = (): string =>
html` <div style="width:600px;height:400px;">
<style>
Expand Down Expand Up @@ -173,9 +249,6 @@ export const carouselWithAutoplayNoOverlay = (): string =>
margin: 2rem auto 1rem;
display: block;
}
calcite-carousel {
width: 400px;
}
calcite-carousel-item p {
text-align: center;
margin: 0 auto 1rem;
Expand Down Expand Up @@ -330,9 +403,6 @@ export const darkModeRTL = (): string =>
margin: 2rem auto 1rem;
display: block;
}
calcite-carousel {
width: 400px;
}
calcite-carousel-item p {
text-align: center;
margin: 0 auto 1rem;
Expand Down
Loading
Loading