From c1e79452fd29903c2138e4d1f8cbb1bce58bcb51 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Tue, 18 Jun 2024 08:55:50 -0700
Subject: [PATCH] fix(pagination): add classes for better testing

---
 .../calcite-components/src/components.d.ts     | 18 ++++++++++++++++++
 .../src/components/pagination/pagination.scss  |  5 ++++-
 .../src/components/pagination/pagination.tsx   | 16 ++++++++++++----
 .../src/components/pagination/resources.ts     |  4 ++++
 4 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index af91005d058..4c163bdf1c3 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -4562,6 +4562,10 @@ export namespace Components {
           * Accessible name for the dropdown menu.
          */
         "dropdownLabel": string;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements": FlipPlacement[];
         /**
           * Specifies the kind of the component, which will apply to border and background, if applicable.
          */
@@ -4574,6 +4578,11 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * Determines where the component will be positioned relative to the container element.
+          * @default "bottom-end"
+         */
+        "placement": MenuPlacement;
         /**
           * Specifies an icon to display at the end of the primary button.
          */
@@ -12509,6 +12518,10 @@ declare namespace LocalJSX {
           * Accessible name for the dropdown menu.
          */
         "dropdownLabel"?: string;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: FlipPlacement[];
         /**
           * Specifies the kind of the component, which will apply to border and background, if applicable.
          */
@@ -12529,6 +12542,11 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * Determines where the component will be positioned relative to the container element.
+          * @default "bottom-end"
+         */
+        "placement"?: MenuPlacement;
         /**
           * Specifies an icon to display at the end of the primary button.
          */
diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
index 90163470d88..117a0d53bf6 100644
--- a/packages/calcite-components/src/components/pagination/pagination.scss
+++ b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -139,7 +139,10 @@
     --calcite-pagination-arrow-background-color,
     var(--calcite-pagination-item-background-color, transparent)
   );
-  color: var(--calcite-pagination-item-text-color, var(--calcite-color-text-3));
+  color: var(
+    --calcite-pagination-arrow-icon-color,
+    var(--calcite-pagination-item-text-color, var(--calcite-color-text-3))
+  );
   &:hover {
     background-color: var(--calcite-pagination-arrow-background-color-hover);
     color: var(--calcite-pagination-arrow-icon-color-hover, var(--calcite-color-brand));
diff --git a/packages/calcite-components/src/components/pagination/pagination.tsx b/packages/calcite-components/src/components/pagination/pagination.tsx
index 4c606191cfd..ecc9913503e 100644
--- a/packages/calcite-components/src/components/pagination/pagination.tsx
+++ b/packages/calcite-components/src/components/pagination/pagination.tsx
@@ -552,11 +552,19 @@ export class Pagination
   render(): VNode {
     return (
       <ul class={CSS.list}>
-        <li class={CSS.listItem}>{this.renderFirstChevron()}</li>
-        <li class={CSS.listItem}>{this.renderPreviousChevron()}</li>
+        <li class={{ [CSS.listItem]: true, [CSS.chevronFirst]: true }}>
+          {this.renderFirstChevron()}
+        </li>
+        <li class={{ [CSS.listItem]: true, [CSS.chevronPrevious]: true }}>
+          {this.renderPreviousChevron()}
+        </li>
         {this.renderItems()}
-        <li class={CSS.listItem}>{this.renderNextChevron()}</li>
-        <li class={CSS.listItem}>{this.renderLastChevron()}</li>
+        <li class={{ [CSS.listItem]: true, [CSS.chevronNext]: true }}>
+          {this.renderNextChevron()}
+        </li>
+        <li class={{ [CSS.listItem]: true, [CSS.chevronLast]: true }}>
+          {this.renderLastChevron()}
+        </li>
       </ul>
     );
   }
diff --git a/packages/calcite-components/src/components/pagination/resources.ts b/packages/calcite-components/src/components/pagination/resources.ts
index 3ba74cdb169..1c3a3af7e11 100644
--- a/packages/calcite-components/src/components/pagination/resources.ts
+++ b/packages/calcite-components/src/components/pagination/resources.ts
@@ -4,6 +4,10 @@ export const CSS = {
   page: "page",
   selected: "selected",
   chevron: "chevron",
+  chevronFirst: "chevron--first",
+  chevronPrevious: "chevron--previous",
+  chevronNext: "chevron--next",
+  chevronLast: "chevron--last",
   disabled: "disabled",
   ellipsis: "ellipsis",
 };