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
|
### Props
|
||||||
|
|
||||||
| Prop name | Type | Default value | Description |
|
| Prop name | Type | Default value | Description |
|
||||||
| :--------------- | :----------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| kind | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger"</code> | `"primary"` | Specify the kind of button. |
|
| 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. |
|
| 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. |
|
| 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. |
|
||||||
| iconDescription | <code>string</code> | -- | Specify the ARIA label for the button icon. |
|
| 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`. |
|
| 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. |
|
| 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>). |
|
| 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. |
|
| 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. |
|
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the button. |
|
||||||
| href | <code>string</code> | -- | Set the `href` to use an anchor link. |
|
| href | <code>string</code> | -- | Set the `href` to use an anchor link. |
|
||||||
| tabindex | <code>string</code> | `"0"` | Specify the tabindex. |
|
| tabindex | <code>string</code> | `"0"` | Specify the tabindex. |
|
||||||
| type | <code>string</code> | `"button"` | Specify the `type` attribute for the button element. |
|
| 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. |
|
| ref | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | `null` | Obtain a reference to the HTML element. |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,6 @@
|
||||||
"build:svite": "svite build"
|
"build:svite": "svite build"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@carbon/themes": "^10.20.0",
|
|
||||||
"@sveltech/routify": "^1.9.9",
|
"@sveltech/routify": "^1.9.9",
|
||||||
"autoprefixer": "^10.0.1",
|
"autoprefixer": "^10.0.1",
|
||||||
"carbon-components": "^10.23.0",
|
"carbon-components": "^10.23.0",
|
||||||
|
|
|
||||||
|
|
@ -4,13 +4,13 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" global>
|
<style lang="scss" global>
|
||||||
|
@import "carbon-components/scss/globals/scss/_theme.scss";
|
||||||
|
|
||||||
$feature-flags: (
|
$feature-flags: (
|
||||||
enable-css-custom-properties: true,
|
enable-css-custom-properties: true,
|
||||||
grid-columns-16: true
|
grid-columns-16: true
|
||||||
);
|
);
|
||||||
|
|
||||||
@import "@carbon/themes/scss/themes";
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@include carbon--theme($carbon--theme--white, true);
|
@include carbon--theme($carbon--theme--white, true);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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": [],
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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
9
types/index.d.ts
vendored
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue