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 small size variant

Browse source
This commit is contained in:
Eric Liu 2021-02-03 16:05:13 -08:00
commit ce3a34ac9c
7 changed files with 56 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

5
COMPONENT_INDEX.md
View file

@ -3629,6 +3629,7 @@ None.
| 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 |
| 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 |
| 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 |
@ -3656,7 +3657,9 @@ None.
### Props
None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ----------- |
| size | <code>let</code> | No | <code>"sm" &#124; "default"</code> | <code>"default"</code> | -- |
### Slots

21
docs/src/COMPONENT_API.json
View file

@ -7803,7 +7803,17 @@
{
"moduleName": "TagSkeleton",
"filePath": "/src/Tag/TagSkeleton.svelte",
"props": [],
"props": [
{
"name": "size",
"kind": "let",
"type": "\"sm\" | \"default\"",
"value": "\"default\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "span" },
@ -7827,6 +7837,15 @@
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"type": "\"sm\" | \"default\"",
"value": "\"default\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "filter",
"kind": "let",

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

@ -9,6 +9,10 @@
<Tag>IBM Cloud</Tag>
### Small size
<Tag size="sm">IBM Cloud</Tag>
### Tag types
<Tag type="red">red</Tag>
@ -32,8 +36,11 @@
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 />
<Tag skeleton />
### Skeleton (small)
<Tag size="sm" skeleton />

6
src/Tag/Tag.svelte
View file

@ -7,6 +7,9 @@
*/
export let type = undefined;
/** @type {"sm" | "default"} */
export let size = "default";
/** Set to `true` to use filterable variant */
export let filter = false;
@ -38,6 +41,7 @@
{#if skeleton}
<TagSkeleton
size="{size}"
{...$$restProps}
on:click
on:mouseover
@ -52,6 +56,7 @@
class:bx--tag="{true}"
class:bx--tag--disabled="{disabled}"
class:bx--tag--filter="{filter}"
class:bx--tag--sm="{size === 'sm'}"
class:bx--tag--red="{type === 'red'}"
class:bx--tag--magenta="{type === 'magenta'}"
class:bx--tag--purple="{type === 'purple'}"
@ -89,6 +94,7 @@
id="{id}"
class:bx--tag="{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'}"

6
src/Tag/TagSkeleton.svelte
View file

@ -1,5 +1,11 @@
<script>
/** @type {"sm" | "default"} */
export let size = "default";
</script>
<span
class:bx--tag="{true}"
class:bx--tag--sm="{size === 'sm'}"
class:bx--skeleton="{true}"
{...$$restProps}
on:click

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

@ -19,6 +19,11 @@ export interface TagProps
| "warm-gray"
| "high-contrast";
/**
* @default "default"
*/
size?: "sm" | "default";
/**
* Set to `true` to use filterable variant
* @default false

7
types/Tag/TagSkeleton.d.ts vendored
View file

@ -1,6 +1,11 @@
/// <reference types="svelte" />
export interface TagSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> {}
export interface TagSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> {
/**
* @default "default"
*/
size?: "sm" | "default";
}
export default class TagSkeleton {
$$prop_def: TagSkeletonProps;