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

Merge pull request #377 from IBM/tertiary-ghost-buttons

Browse source 
Button: add "danger-tertiary", "danger-ghost" kinds
This commit is contained in:
Eric Liu 2020-10-29 13:37:44 -07:00 • committed by GitHub
commit 18cbd5c781
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 44 additions and 30 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. |

1
docs/package.json
View file

@ -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
docs/src/App.svelte
View file

@ -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);
} }

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