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

refactor(tag): use class name directive for tag types, resolve svelte icon path

Browse source
This commit is contained in:
Eric Liu 2020-12-05 14:46:04 -08:00
commit ea23277600
1 changed files with 25 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/Tag/Tag.svelte
View file

@ -1,11 +1,9 @@
<script>
/**
* @restProps {div | span}
*/
/** @restProps {div | span} */
/**
* Specify the type of tag
* @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"} [type]
* @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"}
*/
export let type = undefined;
@ -24,7 +22,7 @@
/** Set an id for the filterable tag */
export let id = "ccs-" + Math.random().toString(36);
import Close16 from "carbon-icons-svelte/lib/Close16";
import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
import TagSkeleton from "./TagSkeleton.svelte";
</script>
@ -44,8 +42,17 @@
class:bx--tag="{true}"
class:bx--tag--disabled="{disabled}"
class:bx--tag--filter="{filter}"
{...$$restProps}
class="{type && `bx--tag--${type}`} {$$restProps.class}"
class:bx--tag--red="{type === 'red'}"
class:bx--tag--magenta="{type === 'magenta'}"
class:bx--tag--purple="{type === 'purple'}"
class:bx--tag--blue="{type === 'blue'}"
class:bx--tag--cyan="{type === 'cyan'}"
class:bx--tag--teal="{type === 'teal'}"
class:bx--tag--green="{type === 'green'}"
class:bx--tag--gray="{type === 'gray'}"
class:bx--tag--cool-gray="{type === 'cool-gray'}"
class:bx--tag--warm-gray="{type === 'warm-gray'}"
class:bx--tag--high-contrast="{type === 'high-contrast'}"
>
<slot props="{{ class: 'bx--tag__label' }}">
<span class:bx--tag__label="{true}">{type}</span>
@ -67,8 +74,17 @@
<span
class:bx--tag="{true}"
class:bx--tag--disabled="{disabled}"
{...$$restProps}
class="{type && `bx--tag--${type}`} {$$restProps.class}"
class:bx--tag--red="{type === 'red'}"
class:bx--tag--magenta="{type === 'magenta'}"
class:bx--tag--purple="{type === 'purple'}"
class:bx--tag--blue="{type === 'blue'}"
class:bx--tag--cyan="{type === 'cyan'}"
class:bx--tag--teal="{type === 'teal'}"
class:bx--tag--green="{type === 'green'}"
class:bx--tag--gray="{type === 'gray'}"
class:bx--tag--cool-gray="{type === 'cool-gray'}"
class:bx--tag--warm-gray="{type === 'warm-gray'}"
class:bx--tag--high-contrast="{type === 'high-contrast'}"
on:click
on:mouseover
on:mouseenter