fix(pagination): add classes for better testing

Esri · Jun 18, 2024 · c1e7945 · c1e7945
1 parent 6929b4c
commit c1e7945
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",
 };