From 192f98dc5deb68013c2eecfffdf60f6c59e2c688 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 14 Sep 2020 07:16:01 -0700
Subject: [PATCH] fix(pagination): use correct size icons for buttons

- use 16 instead of 24 variant for Caret icons
- use icon ghost Button
---
 src/Pagination/Pagination.svelte | 43 ++++++++++++++++----------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index f23f8659..83af6f2e 100644
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@@ -91,10 +91,11 @@
    */
   export let id = "ccs-" + Math.random().toString(36);
 
-  import CaretLeft24 from "carbon-icons-svelte/lib/CaretLeft24";
-  import CaretRight24 from "carbon-icons-svelte/lib/CaretRight24";
-  import { Select, SelectItem } from "../Select";
   import { afterUpdate, createEventDispatcher } from "svelte";
+  import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16";
+  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16";
+  import { Button } from "../Button";
+  import { Select, SelectItem } from "../Select";
 
   const dispatch = createEventDispatcher();
 
@@ -154,29 +155,29 @@
         {:else}{pageRangeText(page, totalPages)}{/if}
       </span>
     {/if}
-    <button
-      type="button"
-      aria-label="{backwardText}"
+    <Button
+      hasIconOnly
+      kind="ghost"
+      tooltipAlignment="center"
+      tooltipPosition="top"
+      icon="{CaretLeft16}"
+      iconDescription="{backwardText}"
       disabled="{backButtonDisabled}"
-      class:bx--pagination__button="{true}"
-      class:bx--pagination__button--backward="{true}"
-      class:bx--pagination__button--no-index="{backButtonDisabled}"
+      class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled ? 'bx--pagination__button--no-index' : ''}"
       on:click="{() => {
         page--;
-      }}">
-      <CaretLeft24 />
-    </button>
-    <button
-      type="button"
-      aria-label="{forwardText}"
+      }}" />
+    <Button
+      hasIconOnly
+      kind="ghost"
+      tooltipAlignment="end"
+      tooltipPosition="top"
+      icon="{CaretRight16}"
+      iconDescription="{forwardText}"
       disabled="{forwardButtonDisabled}"
-      class:bx--pagination__button="{true}"
-      class:bx--pagination__button--forward="{true}"
-      class:bx--pagination__button--no-index="{forwardButtonDisabled}"
+      class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled ? 'bx--pagination__button--no-index' : ''}"
       on:click="{() => {
         page++;
-      }}">
-      <CaretRight24 />
-    </button>
+      }}" />
   </div>
 </div>