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(tag): support custom icon variant

Browse source
This commit is contained in:
Eric Liu 2021-01-22 13:04:42 -08:00
commit b2560a21ac
6 changed files with 46 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -3593,6 +3593,7 @@ None.
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable a filterable tag |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| title | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag |
### Slots

9
docs/src/COMPONENT_API.json
View file

@ -7720,6 +7720,15 @@
"constant": false,
"reactive": false
},
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",

9
docs/src/pages/components/Tag.svx
View file

@ -1,5 +1,7 @@
<script>
import { Tag } from "carbon-components-svelte";
import IbmCloud16 from "carbon-icons-svelte/lib/IbmCloud16";
import Document16 from "carbon-icons-svelte/lib/Document16";
import Preview from "../../components/Preview.svelte";
</script>
@ -25,6 +27,13 @@
<Tag filter on:click>Filterable</Tag>
### Custom icon
Note: rendering a custom icon cannnot be used with the filterable variant.
<Tag icon={IbmCloud16}>IBM Cloud</Tag>
<Tag icon={Document16} type="blue">API documentation</Tag>
### Skeleton
<Tag skeleton />

18
src/Tag/Tag.svelte
View file

@ -19,6 +19,12 @@
/** Set the title for the close button in a filterable tag */
export let title = "Clear filter";
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let icon = undefined;
/** Set an id for the filterable tag */
export let id = "ccs-" + Math.random().toString(36);
@ -53,6 +59,7 @@
class:bx--tag--cool-gray="{type === 'cool-gray'}"
class:bx--tag--warm-gray="{type === 'warm-gray'}"
class:bx--tag--high-contrast="{type === 'high-contrast'}"
{...$$restProps}
>
<slot props="{{ class: 'bx--tag__label' }}">
<span class:bx--tag__label="{true}">{type}</span>
@ -71,7 +78,8 @@
</button>
</div>
{:else}
<span
<div
id="{id}"
class:bx--tag="{true}"
class:bx--tag--disabled="{disabled}"
class:bx--tag--red="{type === 'red'}"
@ -85,12 +93,20 @@
class:bx--tag--cool-gray="{type === 'cool-gray'}"
class:bx--tag--warm-gray="{type === 'warm-gray'}"
class:bx--tag--high-contrast="{type === 'high-contrast'}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
{#if icon}
<div class:bx--tag__custom-icon="{true}">
<svelte:component this="{icon}" />
</div>
{/if}
<span>
<slot />
</span>
</div>
{/if}
{/if}

3
tests/Tag.test.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts">
import { Tag } from "../types";
import Add16 from "carbon-icons-svelte/lib/Add16";
</script>
<Tag class="my-class" style="margin: 1rem;">IBM Cloud</Tag>
@ -28,4 +29,6 @@
<Tag filter on:click>Filterable</Tag>
<Tag icon="{Add16}">Custom icon</Tag>
<Tag skeleton />

5
types/Tag/Tag.d.ts vendored
View file

@ -43,6 +43,11 @@ export interface TagProps
*/
title?: string;
/**
* Specify the icon from `carbon-icons-svelte` to render
*/
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/**
* Set an id for the filterable tag
* @default "ccs-" + Math.random().toString(36)