From c8d295e5d7058e185760453480ac174e53a9afd0 Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Fri, 5 Mar 2021 14:55:09 -0800 Subject: [PATCH] feat(tag): add interactive prop --- COMPONENT_INDEX.md | 21 ++++++++-------- docs/src/COMPONENT_API.json | 10 ++++++++ docs/src/pages/components/Tag.svx | 7 ++++++ src/Tag/Tag.svelte | 41 +++++++++++++++++++++++++++++-- tests/Tag.test.svelte | 2 ++ types/Tag/Tag.d.ts | 6 +++++ 6 files changed, 75 insertions(+), 12 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 12677ee2..98997501 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3650,16 +3650,17 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------ | -| type | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | Specify the type of tag | -| size | let | No | "sm" | "default" | "default" | -- | -| filter | let | No | boolean | false | Set to `true` to use filterable variant | -| disabled | let | No | boolean | false | Set to `true` to disable a filterable tag | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | -| title | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- | +| type | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | Specify the type of tag | +| size | let | No | "sm" | "default" | "default" | -- | +| filter | let | No | boolean | false | Set to `true` to use filterable variant | +| disabled | let | No | boolean | false | Set to `true` to disable a filterable tag | +| interactive | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| title | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 2dc351c2..18d8a86e 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -9060,6 +9060,16 @@ "constant": 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", "kind": "let", diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx index 7b94bf13..1c15daf1 100644 --- a/docs/src/pages/components/Tag.svx +++ b/docs/src/pages/components/Tag.svx @@ -44,6 +44,13 @@ Note: rendering a custom icon cannnot be used with the filterable variant. IBM Cloud +### Interactive variant + +Set `interactive` to `true` to render a `button` element instead of a `div`. + +Machine learning +Machine learning + ### Skeleton diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte index add6c1fb..b11f7df2 100644 --- a/src/Tag/Tag.svelte +++ b/src/Tag/Tag.svelte @@ -16,6 +16,9 @@ /** Set to `true` to disable a filterable tag */ 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 */ export let skeleton = false; @@ -31,11 +34,10 @@ /** Set an id for the filterable tag */ export let id = "ccs-" + Math.random().toString(36); + import { createEventDispatcher } from "svelte"; import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte"; import TagSkeleton from "./TagSkeleton.svelte"; - import { createEventDispatcher } from "svelte"; - const dispatch = createEventDispatcher(); @@ -88,6 +90,41 @@ +{:else if interactive} + {:else}
Custom icon +Text + diff --git a/types/Tag/Tag.d.ts b/types/Tag/Tag.d.ts index 2421b196..f9d1ed8d 100644 --- a/types/Tag/Tag.d.ts +++ b/types/Tag/Tag.d.ts @@ -37,6 +37,12 @@ export interface TagProps */ 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 * @default false