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

Button: "icon" named slot added as an alternative to the icon prop

Browse source
This commit is contained in:
militant_gnome 2024-01-15 18:06:21 +02:00 • committed by Eric Liu
commit 24c6d0a2fc
1 changed files with 28 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/Button/Button.svelte
View file

@ -27,6 +27,8 @@
/** /**
* Specify the icon to render * Specify the icon to render
* Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`)
*
* @type {typeof import("svelte").SvelteComponent<any>} * @type {typeof import("svelte").SvelteComponent<any>}
*/ */
export let icon = undefined; export let icon = undefined;
@ -85,7 +87,12 @@
$: if (ctx && ref) { $: if (ctx && ref) {
ctx.declareRef(ref); ctx.declareRef(ref);
} }
$: hasIconOnly = icon && !$$slots.default; $: hasIconOnly = (icon || $$slots.icon) && !$$slots.default;
$: iconProps = {
"aria-hidden": "true",
class: "bx--btn__icon",
"aria-label": iconDescription,
};
$: buttonProps = { $: buttonProps = {
type: href && !disabled ? undefined : type, type: href && !disabled ? undefined : type,
tabindex, tabindex,
@ -158,12 +165,12 @@
{#if hasIconOnly} {#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span> <span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if} {/if}
<slot /><svelte:component <slot />
this="{icon}" {#if $$slots.icon}
aria-hidden="true" <svelte:component this="{icon}" {...iconProps} />
class="bx--btn__icon" {:else if icon}
aria-label="{iconDescription}" <slot name="icon" {...iconProps} />
/> {/if}
</a> </a>
{:else} {:else}
<button <button
@ -179,12 +186,19 @@
{#if hasIconOnly} {#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span> <span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if} {/if}
<slot /><svelte:component <slot />
this="{icon}" {#if $$slots.icon}
aria-hidden="true" <slot
class="bx--btn__icon" name="icon"
style="{hasIconOnly ? 'margin-left: 0' : undefined}" style="{hasIconOnly ? 'margin-left: 0' : undefined}"
aria-label="{iconDescription}" {...iconProps}
/> />
{:else if icon}
<svelte:component
this="{icon}"
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
{...iconProps}
/>
{/if}
</button> </button>
{/if} {/if}