fix(pagination): use correct size icons for buttons

- use 16 instead of 24 variant for Caret icons
- use icon ghost Button
This commit is contained in:
Eric Liu 2020-09-14 07:16:01 -07:00
commit 192f98dc5d

View file

@ -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>