mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(pagination): use correct size icons for buttons

Browse source 
- 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
1 changed files with 22 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/Pagination/Pagination.svelte
View file

@ -91,10 +91,11 @@
*/ */
export let id = "ccs-" + Math.random().toString(36); 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 { 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(); const dispatch = createEventDispatcher();
@ -154,29 +155,29 @@
{:else}{pageRangeText(page, totalPages)}{/if} {:else}{pageRangeText(page, totalPages)}{/if}
</span> </span>
{/if} {/if}
<button <Button
type="button" hasIconOnly
aria-label="{backwardText}" kind="ghost"
tooltipAlignment="center"
tooltipPosition="top"
icon="{CaretLeft16}"
iconDescription="{backwardText}"
disabled="{backButtonDisabled}" disabled="{backButtonDisabled}"
class:bx--pagination__button="{true}" class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled ? 'bx--pagination__button--no-index' : ''}"
class:bx--pagination__button--backward="{true}"
class:bx--pagination__button--no-index="{backButtonDisabled}"
on:click="{() => { on:click="{() => {
page--; page--;
}}"> }}" />
<CaretLeft24 /> <Button
</button> hasIconOnly
<button kind="ghost"
type="button" tooltipAlignment="end"
aria-label="{forwardText}" tooltipPosition="top"
icon="{CaretRight16}"
iconDescription="{forwardText}"
disabled="{forwardButtonDisabled}" disabled="{forwardButtonDisabled}"
class:bx--pagination__button="{true}" class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled ? 'bx--pagination__button--no-index' : ''}"
class:bx--pagination__button--forward="{true}"
class:bx--pagination__button--no-index="{forwardButtonDisabled}"
on:click="{() => { on:click="{() => {
page++; page++;
}}"> }}" />
<CaretRight24 />
</button>
</div> </div>
</div> </div>