mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
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:
parent
17d97d1dbf
commit
192f98dc5d
1 changed files with 22 additions and 21 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue