diff --git a/packages/calcite-components/src/components/pagination/pagination.e2e.ts b/packages/calcite-components/src/components/pagination/pagination.e2e.ts
index cb85037d336..2ec4ba3dadd 100644
--- a/packages/calcite-components/src/components/pagination/pagination.e2e.ts
+++ b/packages/calcite-components/src/components/pagination/pagination.e2e.ts
@@ -41,6 +41,17 @@ describe("calcite-pagination", () => {
});
});
+ describe("semantics", () => {
+ it("should render a list internally", async () => {
+ const page = await newE2EPage();
+ await page.setContent(``);
+ const list = await page.find(`calcite-pagination >>> ul`);
+ expect(list).not.toBeNull();
+ const listItems = await page.findAll(`calcite-pagination >>> li`);
+ expect(listItems.length).toBe(10);
+ });
+ });
+
describe("ellipsis rendering", () => {
it("should not render either ellipsis when total pages is less than or equal to 5", async () => {
const page = await newE2EPage();
diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
index 3e99f956fe9..f93b9066903 100644
--- a/packages/calcite-components/src/components/pagination/pagination.scss
+++ b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -3,6 +3,14 @@
writing-mode: horizontal-tb;
}
+ul {
+ @apply flex list-none m-0 p-0;
+}
+
+li {
+ @apply flex m-0 p-0;
+}
+
:host([scale="s"]) {
& .chevron,
& .page,
diff --git a/packages/calcite-components/src/components/pagination/pagination.tsx b/packages/calcite-components/src/components/pagination/pagination.tsx
index 11b8592b738..89133095810 100644
--- a/packages/calcite-components/src/components/pagination/pagination.tsx
+++ b/packages/calcite-components/src/components/pagination/pagination.tsx
@@ -3,7 +3,6 @@ import {
Element,
Event,
EventEmitter,
- Fragment,
h,
Method,
Prop,
@@ -447,17 +446,19 @@ export class Pagination
const selected = start === this.startItem;
return (
-
+
+
+
);
}
@@ -467,19 +468,21 @@ export class Pagination
const disabled = pageSize === 1 ? startItem <= pageSize : startItem < pageSize;
return (
-
+
+
+
);
}
@@ -490,19 +493,21 @@ export class Pagination
pageSize === 1 ? startItem + pageSize > totalItems : startItem + pageSize > totalItems;
return (
-
+
+
+
);
}
@@ -512,18 +517,20 @@ export class Pagination
const disabled = startItem === 1;
return isXXSmall ? (
-
+
+
+
) : null;
}
@@ -533,30 +540,32 @@ export class Pagination
const disabled = startItem === lastStartItem;
return isXXSmall ? (
-
+
+
+
) : null;
}
render(): VNode {
return (
-
+
{this.renderFirstChevron()}
{this.renderPreviousChevron()}
{this.renderItems()}
{this.renderNextChevron()}
{this.renderLastChevron()}
-
+
);
}
}