mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: make icons slottable

Browse source
This commit is contained in:
Eric Liu 2022-03-19 11:30:51 -07:00
commit 8591c592fe
7 changed files with 48 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/ContextMenu/ContextMenuOption.svelte
View file

@ -245,7 +245,9 @@
> >
{#if indented} {#if indented}
<div class:bx--menu-option__icon="{true}"> <div class:bx--menu-option__icon="{true}">
<svelte:component this="{icon}" /> <slot name="icon">
<svelte:component this="{icon}" />
</slot>
</div> </div>
{/if} {/if}
<span class:bx--menu-option__label="{true}" title="{labelText}"> <span class:bx--menu-option__label="{true}" title="{labelText}">
@ -268,7 +270,9 @@
> >
{#if indented} {#if indented}
<div class:bx--menu-option__icon="{true}"> <div class:bx--menu-option__icon="{true}">
<svelte:component this="{icon}" /> <slot name="icon">
<svelte:component this="{icon}" />
</slot>
</div> </div>
{/if} {/if}
<span class:bx--menu-option__label="{true}" title="{labelText}"> <span class:bx--menu-option__label="{true}" title="{labelText}">

23
src/Link/Link.svelte
View file

@ -45,9 +45,14 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<slot />{#if !inline && icon}<div class:bx--link__icon="{true}"> <slot />
<svelte:component this="{icon}" /> {#if !inline && ($$slots.icon || icon)}
</div>{/if} <div class:bx--link__icon="{true}">
<slot name="icon">
<svelte:component this="{icon}" />
</slot>
</div>
{/if}
</p> </p>
{:else} {:else}
<a <a
@ -65,8 +70,14 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
><slot />{#if !inline && icon}<div class:bx--link__icon="{true}">
<svelte:component this="{icon}" />
</div>{/if}</a
> >
<slot />
{#if !inline && ($$slots.icon || icon)}
<div class:bx--link__icon="{true}">
<slot name="icon">
<svelte:component this="{icon}" />
</slot>
</div>
{/if}
</a>
{/if} {/if}

12
src/Tag/Tag.svelte
View file

@ -120,9 +120,11 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
{#if icon} {#if $$slots.icon || icon}
<div class:bx--tag__custom-icon="{true}"> <div class:bx--tag__custom-icon="{true}">
<svelte:component this="{icon}" /> <slot name="icon">
<svelte:component this="{icon}" />
</slot>
</div> </div>
{/if} {/if}
<span> <span>
@ -153,9 +155,11 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
{#if icon} {#if $$slots.icon || icon}
<div class:bx--tag__custom-icon="{true}"> <div class:bx--tag__custom-icon="{true}">
<svelte:component this="{icon}" /> <slot name="icon">
<svelte:component this="{icon}" />
</slot>
</div> </div>
{/if} {/if}
<span> <span>

8
src/UIShell/GlobalHeader/HeaderAction.svelte
View file

@ -64,9 +64,13 @@
}}" }}"
> >
{#if isOpen} {#if isOpen}
<svelte:component this="{closeIcon}" /> <slot name="closeIcon">
<svelte:component this="{closeIcon}" />
</slot>
{:else} {:else}
<svelte:component this="{icon}" /> <slot name="icon">
<svelte:component this="{icon}" />
</slot>
{/if} {/if}
<slot name="text"> <slot name="text">
{#if text}<span>{text}</span>{/if} {#if text}<span>{text}</span>{/if}

4
src/UIShell/GlobalHeader/HeaderActionLink.svelte
View file

@ -26,7 +26,9 @@
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}" rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
{...$$restProps} {...$$restProps}
> >
<svelte:component this="{icon}" /> <slot name="icon">
<svelte:component this="{icon}" />
</slot>
</a> </a>
<style> <style>

6
src/UIShell/SideNav/SideNavLink.svelte
View file

@ -35,12 +35,14 @@
{...$$restProps} {...$$restProps}
on:click on:click
> >
{#if icon} {#if $$slots.icon || icon}
<div <div
class:bx--side-nav__icon="{true}" class:bx--side-nav__icon="{true}"
class:bx--side-nav__icon--small="{true}" class:bx--side-nav__icon--small="{true}"
> >
<svelte:component this="{icon}" /> <slot name="icon">
<svelte:component this="{icon}" />
</slot>
</div> </div>
{/if} {/if}
<span class:bx--side-nav__link-text="{true}">{text}</span> <span class:bx--side-nav__link-text="{true}">{text}</span>

6
src/UIShell/SideNav/SideNavMenu.svelte
View file

@ -32,9 +32,11 @@
expanded = !expanded; expanded = !expanded;
}}" }}"
> >
{#if icon} {#if $$slots.icon || icon}
<div class:bx--side-nav__icon="{true}"> <div class:bx--side-nav__icon="{true}">
<svelte:component this="{icon}" /> <slot name="icon">
<svelte:component this="{icon}" />
</slot>
</div> </div>
{/if} {/if}
<span class:bx--side-nav__submenu-title="{true}">{text}</span> <span class:bx--side-nav__submenu-title="{true}">{text}</span>