mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21: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

32
COMPONENT_INDEX.md
View file

@ -431,22 +431,22 @@ import { Button } from "carbon-components-svelte";
### Props
| Prop name | Type | Default value | Description |
| :--------------- | :----------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| kind | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger"</code> | `"primary"` | Specify the kind 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. |
| icon | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- | Specify the icon from `carbon-icons-svelte` to render. |
| iconDescription | <code>string</code> | -- | Specify the ARIA label for the button icon. |
| tooltipAlignment | <code>"start" &#124; "center" &#124; "end"</code> | -- | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`. |
| tooltipPosition | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | -- | Set the position of the tooltip relative to the icon. |
| as | <code>boolean</code> | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. &lt;Button let:props&gt;&lt;div {...props}&gt;...&lt;/div&gt;&lt;/Button&gt;). |
| skeleton | <code>boolean</code> | `false` | Set to `true` to display the skeleton state. |
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the button. |
| href | <code>string</code> | -- | Set the `href` to use an anchor link. |
| tabindex | <code>string</code> | `"0"` | Specify the tabindex. |
| type | <code>string</code> | `"button"` | Specify the `type` attribute for the button element. |
| ref | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | `null` | Obtain a reference to the HTML element. |
| Prop name | Type | Default value | Description |
| :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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. |
| 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. |
| iconDescription | <code>string</code> | -- | Specify the ARIA label for the button icon. |
| tooltipAlignment | <code>"start" &#124; "center" &#124; "end"</code> | -- | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`. |
| tooltipPosition | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | -- | Set the position of the tooltip relative to the icon. |
| as | <code>boolean</code> | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. &lt;Button let:props&gt;&lt;div {...props}&gt;...&lt;/div&gt;&lt;/Button&gt;). |
| skeleton | <code>boolean</code> | `false` | Set to `true` to display the skeleton state. |
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the button. |
| href | <code>string</code> | -- | Set the `href` to use an anchor link. |
| tabindex | <code>string</code> | `"0"` | Specify the tabindex. |
| type | <code>string</code> | `"button"` | Specify the `type` attribute for the button element. |
| ref | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | `null` | Obtain a reference to the HTML element. |
### Slots

18
docs/src/PUBLIC_API.json
View file

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

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

@ -28,6 +28,14 @@ description: High-level description
<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 icon={Add16}>With icon</Button>

2
src/Button/Button.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* 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";

9
types/index.d.ts vendored
View file

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