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

feat(tag): add interactive prop

Browse source
This commit is contained in:
Eric Y Liu 2021-03-05 14:55:09 -08:00
commit c8d295e5d7
6 changed files with 75 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

21
COMPONENT_INDEX.md
View file

@ -3650,16 +3650,17 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------ | | :---------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
| type | <code>let</code> | No | <code>"red" &#124; "magenta" &#124; "purple" &#124; "blue" &#124; "cyan" &#124; "teal" &#124; "green" &#124; "gray" &#124; "cool-gray" &#124; "warm-gray" &#124; "high-contrast"</code> | -- | Specify the type of tag | | type | <code>let</code> | No | <code>"red" &#124; "magenta" &#124; "purple" &#124; "blue" &#124; "cyan" &#124; "teal" &#124; "green" &#124; "gray" &#124; "cool-gray" &#124; "warm-gray" &#124; "high-contrast"</code> | -- | Specify the type of tag |
| size | <code>let</code> | No | <code>"sm" &#124; "default"</code> | <code>"default"</code> | -- | | size | <code>let</code> | No | <code>"sm" &#124; "default"</code> | <code>"default"</code> | -- |
| filter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use filterable variant | | filter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use filterable variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable a filterable tag | | 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 | | interactive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a `button` element instead of a `div` |
| title | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag | | skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | title | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the 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 ### Slots

10
docs/src/COMPONENT_API.json
View file

@ -9060,6 +9060,16 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "interactive",
"kind": "let",
"description": "Set to `true` to render a `button` element instead of a `div`",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "skeleton", "name": "skeleton",
"kind": "let", "kind": "let",

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

@ -44,6 +44,13 @@ Note: rendering a custom icon cannnot be used with the filterable variant.
<Tag icon={IbmCloud16}>IBM Cloud</Tag> <Tag icon={IbmCloud16}>IBM Cloud</Tag>
### Interactive variant
Set `interactive` to `true` to render a `button` element instead of a `div`.
<Tag interactive>Machine learning</Tag>
<Tag interactive disabled>Machine learning</Tag>
### Skeleton ### Skeleton
<Tag skeleton /> <Tag skeleton />

41
src/Tag/Tag.svelte
View file

@ -16,6 +16,9 @@
/** Set to `true` to disable a filterable tag */ /** Set to `true` to disable a filterable tag */
export let disabled = false; export let disabled = false;
/** Set to `true` to render a `button` element instead of a `div` */
export let interactive = false;
/** Set to `true` to display the skeleton state */ /** Set to `true` to display the skeleton state */
export let skeleton = false; export let skeleton = false;
@ -31,11 +34,10 @@
/** Set an id for the filterable tag */ /** Set an id for the filterable tag */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
import { createEventDispatcher } from "svelte";
import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte"; import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
import TagSkeleton from "./TagSkeleton.svelte"; import TagSkeleton from "./TagSkeleton.svelte";
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
</script> </script>
@ -88,6 +90,41 @@
<Close16 /> <Close16 />
</button> </button>
</div> </div>
{:else if interactive}
<button
id="{id}"
aria-disabled="{disabled}"
tabindex="{disabled ? '-1' : undefined}"
class:bx--tag="{true}"
class:bx--tag--interactive="{true}"
class:bx--tag--disabled="{disabled}"
class:bx--tag--sm="{size === 'sm'}"
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'}"
{...$$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>
</button>
{:else} {:else}
<div <div
id="{id}" id="{id}"

2
tests/Tag.test.svelte
View file

@ -31,4 +31,6 @@
<Tag icon="{Add16}">Custom icon</Tag> <Tag icon="{Add16}">Custom icon</Tag>
<Tag interactive>Text</Tag>
<Tag skeleton /> <Tag skeleton />

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

@ -37,6 +37,12 @@ export interface TagProps
*/ */
disabled?: boolean; disabled?: boolean;
/**
* Set to `true` to render a `button` element instead of a `div`
* @default false
*/
interactive?: boolean;
/** /**
* Set to `true` to display the skeleton state * Set to `true` to display the skeleton state
* @default false * @default false