mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Merge pull request #377 from IBM/tertiary-ghost-buttons
Button: add "danger-tertiary", "danger-ghost" kinds
This commit is contained in:
Eric Liu
GitHub
commit
18cbd5c781
7 changed files with 44 additions and 30 deletions
|
|
@ -431,22 +431,22 @@ import { Button } from "carbon-components-svelte";
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Type | Default value | Description |
|
||||
| :--------------- | :----------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| kind | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger"</code> | `"primary"` | Specify the kind of button. |
|
||||
| size | <code>"default" | "field" | "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" | "center" | "end"</code> | -- | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`. |
|
||||
| tooltipPosition | <code>"top" | "right" | "bottom" | "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. <Button let:props><div {...props}>...</div></Button>). |
|
||||
| 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 | HTMLAnchorElement | HTMLButtonElement</code> | `null` | Obtain a reference to the HTML element. |
|
||||
| Prop name | Type | Default value | Description |
|
||||
| :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| kind | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"</code> | `"primary"` | Specify the kind of button. |
|
||||
| size | <code>"default" | "field" | "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" | "center" | "end"</code> | -- | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`. |
|
||||
| tooltipPosition | <code>"top" | "right" | "bottom" | "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. <Button let:props><div {...props}>...</div></Button>). |
|
||||
| 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 | HTMLAnchorElement | HTMLButtonElement</code> | `null` | Obtain a reference to the HTML element. |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
"build:svite": "svite build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@carbon/themes": "^10.20.0",
|
||||
"@sveltech/routify": "^1.9.9",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"carbon-components": "^10.23.0",
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" global>
|
||||
@import "carbon-components/scss/globals/scss/_theme.scss";
|
||||
|
||||
$feature-flags: (
|
||||
enable-css-custom-properties: true,
|
||||
grid-columns-16: true
|
||||
);
|
||||
|
||||
@import "@carbon/themes/scss/themes";
|
||||
|
||||
:root {
|
||||
@include carbon--theme($carbon--theme--white, true);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": [],
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
9
types/index.d.ts
vendored
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue