mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: make icons slottable (#1186)

Browse source
This commit is contained in:
metonym 2022-03-19 11:37:20 -07:00 • committed by GitHub
commit e23b121143
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 139 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

22
COMPONENT_INDEX.md
View file

@ -861,8 +861,9 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :----------- | :------ | :---- | :-------------------------- |
| :----------- | :------ | :---- | :---------------------------------------------------- |
| -- | Yes | -- | -- |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
| labelText | No | -- | <code>{labelText}</code> |
| shortcutText | No | -- | <code>{shortcutText}</code> |
@ -1631,6 +1632,8 @@ None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :---------------------------------------------------------- |
| -- | Yes | -- | -- |
| closeIcon | No | -- | <code>&lt;svelte:component this="{closeIcon}" /&gt;</code> |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
| text | No | -- | <code>{#if text}&lt;span&gt;{text}&lt;/span&gt;{/if}</code> |
### Events
@ -1653,7 +1656,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :---------------------------------------------------- |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
### Events
@ -2036,8 +2041,9 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| :-------- | :------ | :---- | :---------------------------------------------------- |
| -- | Yes | -- | -- |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
### Events
@ -3436,7 +3442,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :---------------------------------------------------- |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
### Events
@ -3458,8 +3466,9 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| :-------- | :------ | :---- | :---------------------------------------------------- |
| -- | Yes | -- | -- |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
### Events
@ -4069,8 +4078,9 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :----------------------------------------------------- | :------- |
| :-------- | :------ | :----------------------------------------------------- | :---------------------------------------------------- |
| -- | Yes | <code>{ props: { class: 'bx--tag\_\_label' } } </code> | -- |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
### Events

62
docs/src/COMPONENT_API.json
View file

@ -2075,6 +2075,12 @@
"moduleExports": [],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "icon",
"default": false,
"fallback": "<svelte:component this=\"{icon}\" />",
"slot_props": "{}"
},
{
"name": "labelText",
"default": false,
@ -4621,6 +4627,18 @@
"moduleExports": [],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "closeIcon",
"default": false,
"fallback": "<svelte:component this=\"{closeIcon}\" />",
"slot_props": "{}"
},
{
"name": "icon",
"default": false,
"fallback": "<svelte:component this=\"{icon}\" />",
"slot_props": "{}"
},
{
"name": "text",
"default": false,
@ -4683,7 +4701,14 @@
}
],
"moduleExports": [],
"slots": [],
"slots": [
{
"name": "icon",
"default": false,
"fallback": "<svelte:component this=\"{icon}\" />",
"slot_props": "{}"
}
],
"events": [],
"typedefs": [],
"rest_props": { "type": "Element", "name": "a" }
@ -5507,7 +5532,15 @@
}
],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "icon",
"default": false,
"fallback": "<svelte:component this=\"{icon}\" />",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "p" },
{ "type": "forwarded", "name": "mouseover", "element": "p" },
@ -10117,7 +10150,14 @@
}
],
"moduleExports": [],
"slots": [],
"slots": [
{
"name": "icon",
"default": false,
"fallback": "<svelte:component this=\"{icon}\" />",
"slot_props": "{}"
}
],
"events": [{ "type": "forwarded", "name": "click", "element": "a" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "a" }
@ -10170,7 +10210,15 @@
}
],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "icon",
"default": false,
"fallback": "<svelte:component this=\"{icon}\" />",
"slot_props": "{}"
}
],
"events": [{ "type": "forwarded", "name": "click", "element": "button" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "button" }
@ -11546,6 +11594,12 @@
"name": "__default__",
"default": true,
"slot_props": "{ props: { class: 'bx--tag__label' } }"
},
{
"name": "icon",
"default": false,
"fallback": "<svelte:component this=\"{icon}\" />",
"slot_props": "{}"
}
],
"events": [

4
src/ContextMenu/ContextMenuOption.svelte
View file

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

21
src/Link/Link.svelte
View file

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

8
src/Tag/Tag.svelte
View file

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

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

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

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

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

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

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

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

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

2
types/ContextMenu/ContextMenuOption.svelte.d.ts vendored
View file

@ -77,5 +77,5 @@ export default class ContextMenuOption extends SvelteComponentTyped<
mouseleave: WindowEventMap["mouseleave"];
click: CustomEvent<any>;
},
{ default: {}; labelText: {}; shortcutText: {} }
{ default: {}; icon: {}; labelText: {}; shortcutText: {} }
> {}

2
types/Link/Link.svelte.d.ts vendored
View file

@ -55,5 +55,5 @@ export default class Link extends SvelteComponentTyped<
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
{ default: {}; icon: {} }
> {}

2
types/Tag/Tag.svelte.d.ts vendored
View file

@ -79,5 +79,5 @@ export default class Tag extends SvelteComponentTyped<
mouseleave: WindowEventMap["mouseleave"];
close: CustomEvent<any>;
},
{ default: { props: { class: "bx--tag__label" } } }
{ default: { props: { class: "bx--tag__label" } }; icon: {} }
> {}

2
types/UIShell/GlobalHeader/HeaderAction.svelte.d.ts vendored
View file

@ -45,5 +45,5 @@ export interface HeaderActionProps
export default class HeaderAction extends SvelteComponentTyped<
HeaderActionProps,
{ click: WindowEventMap["click"]; close: CustomEvent<any> },
{ default: {}; text: {} }
{ default: {}; closeIcon: {}; icon: {}; text: {} }
> {}

2
types/UIShell/GlobalHeader/HeaderActionLink.svelte.d.ts vendored
View file

@ -31,5 +31,5 @@ export interface HeaderActionLinkProps
export default class HeaderActionLink extends SvelteComponentTyped<
HeaderActionLinkProps,
{},
{}
{ icon: {} }
> {}

2
types/UIShell/SideNav/SideNavLink.svelte.d.ts vendored
View file

@ -37,5 +37,5 @@ export interface SideNavLinkProps
export default class SideNavLink extends SvelteComponentTyped<
SideNavLinkProps,
{ click: WindowEventMap["click"] },
{}
{ icon: {} }
> {}

2
types/UIShell/SideNav/SideNavMenu.svelte.d.ts vendored
View file

@ -31,5 +31,5 @@ export interface SideNavMenuProps
export default class SideNavMenu extends SvelteComponentTyped<
SideNavMenuProps,
{ click: WindowEventMap["click"] },
{ default: {} }
{ default: {}; icon: {} }
> {}