fix(pagination): bumping scale of chevron icon to M when host is scal…

…e L (#6338) **Related Issue:** #5698 ## Summary Bumping the `scale` of the `chevron` to M when host is `scale="l"` for a visual distinction between larger and smaller components without affecting the height of the component when icon(s) are added or removed. Added a _testOnly snapshot. Co-authored-by: Ben Elan <[email protected]>
Esri · Jan 25, 2023 · 433e8d4 · 433e8d4
1 parent b83654c
commit 433e8d4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/src/components/pagination/pagination.stories.ts b/src/components/pagination/pagination.stories.ts
@@ -27,17 +27,20 @@ export const simple = (): string => html`
   </calcite-pagination>
 `;
 
-export const darkModeFrenchLocale_TestOnly = (): string => html`<calcite-pagination
-  class="calcite-mode-dark"
-  start-item="1"
-  lang="fr"
-  group-separator
-  total-items="123456789"
-  page-size="10"
->
-</calcite-pagination>`;
+export const darkModeFrenchLocaleAndLargeScaleGetsMediumChevron_TestOnly = (): string => html`
+  <calcite-pagination
+    class="calcite-mode-dark"
+    start-item="1"
+    lang="fr"
+    group-separator
+    total-items="123456789"
+    page-size="10"
+    scale="l"
+  >
+  </calcite-pagination>
+`;
 
-darkModeFrenchLocale_TestOnly.parameters = { modes: modesDarkDefault };
+darkModeFrenchLocaleAndLargeScaleGetsMediumChevron_TestOnly.parameters = { modes: modesDarkDefault };
 
 export const arabicNumberingSystemAndRTL_TestOnly = (): string => html`<calcite-pagination
   dir="rtl"

diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
@@ -302,7 +302,7 @@ export class Pagination implements LocalizedComponent, LocalizedComponent, T9nCo
           disabled={prevDisabled}
           onClick={this.previousClicked}
         >
-          <calcite-icon flipRtl icon="chevronLeft" scale="s" />
+          <calcite-icon flipRtl icon="chevronLeft" scale={this.scale === "l" ? "m" : "s"} />
         </button>
         {totalItems > pageSize ? this.renderPage(1) : null}
         {this.renderLeftEllipsis()}
@@ -318,7 +318,7 @@ export class Pagination implements LocalizedComponent, LocalizedComponent, T9nCo
           disabled={nextDisabled}
           onClick={this.nextClicked}
         >
-          <calcite-icon flipRtl icon="chevronRight" scale="s" />
+          <calcite-icon flipRtl icon="chevronRight" scale={this.scale === "l" ? "m" : "s"} />
         </button>
       </Fragment>
     );