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

feat(button): add "danger-tertiary", "danger-ghost" kinds

Browse source
This commit is contained in:
Eric Liu 2020-10-29 13:31:18 -07:00
commit 55214aa38b
5 changed files with 42 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

4
COMPONENT_INDEX.md
View file

@ -432,8 +432,8 @@ import { Button } from "carbon-components-svelte";
### Props ### Props
| Prop name | Type | Default value | Description | | Prop name | Type | Default value | Description |
| :--------------- | :----------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| kind | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger"</code> | `"primary"` | Specify the kind of button. | | kind | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | `"primary"` | Specify the kind of button. |
| size | <code>"default" &#124; "field" &#124; "small"</code> | `"default"` | Specify the size of button. | | size | <code>"default" &#124; "field" &#124; "small"</code> | `"default"` | Specify the size of button. |
| hasIconOnly | <code>boolean</code> | `false` | Set to `true` for the icon-only variant. | | hasIconOnly | <code>boolean</code> | `false` | Set to `true` for the icon-only variant. |
| icon | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- | Specify the icon from `carbon-icons-svelte` to render. | | icon | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- | Specify the icon from `carbon-icons-svelte` to render. |

18
docs/src/PUBLIC_API.json
View file

@ -791,7 +791,7 @@
{ {
"kind": "let", "kind": "let",
"value": "\"primary\"", "value": "\"primary\"",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\"", "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger-tertiary\" | \"danger-ghost\"",
"description": "Specify the kind of button" "description": "Specify the kind of button"
} }
], ],
@ -923,8 +923,8 @@
[ [
"click", "click",
{ {
"start": 3947, "start": 3984,
"end": 3955, "end": 3992,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": [], "modifiers": [],
@ -934,8 +934,8 @@
[ [
"mouseover", "mouseover",
{ {
"start": 3962, "start": 3999,
"end": 3974, "end": 4011,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseover", "name": "mouseover",
"modifiers": [], "modifiers": [],
@ -945,8 +945,8 @@
[ [
"mouseenter", "mouseenter",
{ {
"start": 3981, "start": 4018,
"end": 3994, "end": 4031,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseenter", "name": "mouseenter",
"modifiers": [], "modifiers": [],
@ -956,8 +956,8 @@
[ [
"mouseleave", "mouseleave",
{ {
"start": 4001, "start": 4038,
"end": 4014, "end": 4051,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseleave", "name": "mouseleave",
"modifiers": [], "modifiers": [],

8
docs/src/pages/components/Button.svx
View file

@ -28,6 +28,14 @@ description: High-level description
<Button kind="danger">Danger button</Button> <Button kind="danger">Danger button</Button>
### Danger tertiary button
<Button kind="danger-tertiary">Danger tertiary button</Button>
### Danger ghost button
<Button kind="danger-ghost">Danger ghost button</Button>
### Button with icon ### Button with icon
<Button icon={Add16}>With icon</Button> <Button icon={Add16}>With icon</Button>

2
src/Button/Button.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* Specify the kind of button * Specify the kind of button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"} [kind="primary"] * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"} [kind="primary"]
*/ */
export let kind = "primary"; export let kind = "primary";

9
types/index.d.ts vendored
View file

@ -166,7 +166,14 @@ export class Button extends CarbonSvelteComponent {
* Specify the kind of button * Specify the kind of button
* @default "primary" * @default "primary"
*/ */
kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; kind?:
| "primary"
| "secondary"
| "tertiary"
| "ghost"
| "danger"
| "danger-tertiary"
| "danger-ghost";
/** /**
* Specify the size of button * Specify the size of button