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

feat(button): add iconPosition

Browse source
This commit is contained in:
albert 2020-10-04 18:27:01 +02:00
commit 01494e60ba
2 changed files with 29 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/Button/Button.svelte
View file

@ -23,6 +23,12 @@
*/ */
export let icon = undefined; export let icon = undefined;
/**
* Specify the position of the icon
* @type {"left" | "right"} [iconPosition="right"]
*/
export let iconPosition = undefined;
/** /**
* Specify the ARIA label for the button icon * Specify the ARIA label for the button icon
* @type {string} [iconDescription] * @type {string} [iconDescription]
@ -144,11 +150,19 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
{#if icon && iconPosition === "left"}
<svelte:component
this="{icon}"
aria-hidden="true"
class="bx--btn__icon"
aria-label="{iconDescription}"
/>
{/if}
{#if hasIconOnly} {#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span> <span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if} {/if}
<slot /> <slot />
{#if icon} {#if icon && iconPosition === "right"}
<svelte:component <svelte:component
this="{icon}" this="{icon}"
aria-hidden="true" aria-hidden="true"
@ -166,11 +180,19 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
{#if icon && iconPosition=== "left"}
<svelte:component
this="{icon}"
aria-hidden="true"
class="bx--btn__icon"
aria-label="{iconDescription}"
/>
{/if}
{#if hasIconOnly} {#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span> <span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if} {/if}
<slot /> <slot />
{#if icon} {#if icon && iconPosition=== "right"}
<svelte:component <svelte:component
this="{icon}" this="{icon}"
aria-hidden="true" aria-hidden="true"

5
types/index.d.ts vendored
View file

@ -145,6 +145,11 @@ export class Button extends CarbonSvelteComponent {
*/ */
icon?: typeof import("carbon-icons-svelte/lib/Add16").default; icon?: typeof import("carbon-icons-svelte/lib/Add16").default;
/**
* Specify the position of the icon
*/
iconPosition?: "left" | "right";
/** /**
* Specify the ARIA label for the button icon * Specify the ARIA label for the button icon
*/ */