mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 10:51:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: v11 Button

Browse source
This commit is contained in:
Gregor Wassmann 2023-03-26 22:34:04 +02:00 • committed by Enrico Sacchetti
commit 96805c2aa1
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
7 changed files with 67 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

6
COMPONENT_INDEX.md
View file

@ -373,10 +373,10 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :--------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
| kind | No | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button | | kind | No | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger--tertiary" &#124; "danger--ghost"</code> | <code>"primary"</code> | Specify the kind of button |
| size | No | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button | | size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg" &#124; "xl" &#124; "2xl"</code> | <code>"lg"</code> | Specify the size of button |
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting | | expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button | | isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render | | icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |

6
docs/src/COMPONENT_API.json
View file

@ -453,7 +453,7 @@
"name": "kind", "name": "kind",
"kind": "let", "kind": "let",
"description": "Specify the kind of button", "description": "Specify the kind of button",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger-tertiary\" | \"danger-ghost\"", "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger--tertiary\" | \"danger--ghost\"",
"value": "\"primary\"", "value": "\"primary\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -465,8 +465,8 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of button", "description": "Specify the size of button",
"type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"", "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
"value": "\"default\"", "value": "\"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,

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

@ -30,7 +30,7 @@
## Danger tertiary button ## Danger tertiary button
<Button kind="danger-tertiary">Danger tertiary button</Button> <Button kind="danger--tertiary">Danger tertiary button</Button>
## Danger tertiary, icon-only button ## Danger tertiary, icon-only button
@ -40,11 +40,11 @@
</div> </div>
</InlineNotification> </InlineNotification>
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} /> <Button kind="danger--tertiary"iconDescription="Delete" icon={TrashCan} />
## Danger ghost button ## Danger ghost button
<Button kind="danger-ghost">Danger ghost button</Button> <Button kind="danger--ghost">Danger ghost button</Button>
## Button with icon ## Button with icon
@ -90,36 +90,36 @@ If an `href` value is specified, the component will render an [anchor element](h
## Field size ## Field size
<Button size="field">Primary</Button> <Button size="md">Primary</Button>
<Button size="field" kind="secondary">Secondary</Button> <Button size="md" kind="secondary">Secondary</Button>
<Button size="field" kind="tertiary">Tertiary</Button> <Button size="md" kind="tertiary">Tertiary</Button>
<Button size="field" kind="ghost">Ghost</Button> <Button size="md" kind="ghost">Ghost</Button>
<Button size="field" kind="danger">Danger</Button> <Button size="md" kind="danger">Danger</Button>
## Small size ## Small size
<Button size="small">Primary</Button> <Button size="sm">Primary</Button>
<Button size="small" kind="secondary">Secondary</Button> <Button size="sm" kind="secondary">Secondary</Button>
<Button size="small" kind="tertiary">Tertiary</Button> <Button size="sm" kind="tertiary">Tertiary</Button>
<Button size="small" kind="ghost">Ghost</Button> <Button size="sm" kind="ghost">Ghost</Button>
<Button size="small" kind="danger">Danger</Button> <Button size="sm" kind="danger">Danger</Button>
## Large size ## Large size
<Button size="lg">Primary</Button>
<Button size="lg" kind="secondary">Secondary</Button>
<Button size="lg" kind="tertiary">Tertiary</Button>
<Button size="lg" kind="ghost">Ghost</Button>
<Button size="lg" kind="danger">Danger</Button>
## Extra-large size
<Button size="xl">Primary</Button> <Button size="xl">Primary</Button>
<Button size="xl" kind="secondary">Secondary</Button> <Button size="xl" kind="secondary">Secondary</Button>
<Button size="xl" kind="tertiary">Tertiary</Button> <Button size="xl" kind="tertiary">Tertiary</Button>
<Button size="xl" kind="ghost">Ghost</Button> <Button size="xl" kind="ghost">Ghost</Button>
<Button size="xl" kind="danger">Danger</Button> <Button size="xl" kind="danger">Danger</Button>
## Extra-large size
<Button size="2xl">Primary</Button>
<Button size="2xl" kind="secondary">Secondary</Button>
<Button size="2xl" kind="tertiary">Tertiary</Button>
<Button size="2xl" kind="ghost">Ghost</Button>
<Button size="2xl" kind="danger">Danger</Button>
## Disabled state ## Disabled state
<Button disabled>Disabled button</Button> <Button disabled>Disabled button</Button>

13
src/Button/Button.svelte
View file

@ -7,15 +7,15 @@
/** /**
* Specify the kind of button * Specify the kind of button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"} * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"}
*/ */
export let kind = "primary"; export let kind = "primary";
/** /**
* Specify the size of button * Specify the size of button
* @type {"default" | "field" | "small" | "lg" | "xl"} * @type {"sm" | "md" | "lg" | "xl" | "2xl"}
*/ */
export let size = "default"; export let size = "lg";
/** Set to `true` to use Carbon's expressive typesetting */ /** Set to `true` to use Carbon's expressive typesetting */
export let expressive = false; export let expressive = false;
@ -101,12 +101,11 @@
(size === "sm" && !expressive) || (size === "sm" && !expressive) ||
(size === "small" && !expressive)) && (size === "small" && !expressive)) &&
"bx--btn--sm", "bx--btn--sm",
(size === "field" && !expressive) || ((size === "field" && !expressive) || (size === "md" && !expressive)) &&
(size === "md" && !expressive && "bx--btn--md"), "bx--btn--md",
size === "field" && "bx--btn--field",
size === "small" && "bx--btn--sm", size === "small" && "bx--btn--sm",
size === "lg" && "bx--btn--lg",
size === "xl" && "bx--btn--xl", size === "xl" && "bx--btn--xl",
size === "2xl" && "bx--btn--2xl",
kind && `bx--btn--${kind}`, kind && `bx--btn--${kind}`,
disabled && "bx--btn--disabled", disabled && "bx--btn--disabled",
hasIconOnly && "bx--btn--icon-only", hasIconOnly && "bx--btn--icon-only",

28
tests/Button.test.svelte
View file

@ -13,9 +13,9 @@
<Button kind="danger">Danger button</Button> <Button kind="danger">Danger button</Button>
<Button kind="danger-tertiary">Danger tertiary button</Button> <Button kind="danger--tertiary">Danger tertiary button</Button>
<Button kind="danger-ghost">Danger ghost button</Button> <Button kind="danger--ghost">Danger ghost button</Button>
<Button icon="{Add}">With icon</Button> <Button icon="{Add}">With icon</Button>
@ -32,30 +32,30 @@
<p {...props}>Custom element</p> <p {...props}>Custom element</p>
</Button> </Button>
<Button size="field">Primary</Button> <Button size="md">Primary</Button>
<Button size="field" kind="secondary">Secondary</Button> <Button size="md" kind="secondary">Secondary</Button>
<Button size="field" kind="tertiary">Tertiary</Button> <Button size="md" kind="tertiary">Tertiary</Button>
<Button size="field" kind="ghost">Ghost</Button> <Button size="md" kind="ghost">Ghost</Button>
<Button size="field" kind="danger">Danger</Button> <Button size="md" kind="danger">Danger</Button>
<Button size="small">Primary</Button> <Button size="sm">Primary</Button>
<Button size="small" kind="secondary">Secondary</Button> <Button size="sm" kind="secondary">Secondary</Button>
<Button size="small" kind="tertiary">Tertiary</Button> <Button size="sm" kind="tertiary">Tertiary</Button>
<Button size="small" kind="ghost">Ghost</Button> <Button size="sm" kind="ghost">Ghost</Button>
<Button size="small" kind="danger">Danger</Button> <Button size="sm" kind="danger">Danger</Button>
<Button disabled>Disabled button</Button> <Button disabled>Disabled button</Button>
<Button skeleton /> <Button skeleton />
<Button skeleton size="field" /> <Button skeleton size="md" />
<Button skeleton size="small" /> <Button skeleton size="sm" />

4
tests/Tooltip.test.svelte
View file

@ -33,13 +33,13 @@
<p>Resources are provisioned based on your account's organization.</p> <p>Resources are provisioned based on your account's organization.</p>
<div class="bx--tooltip__footer"> <div class="bx--tooltip__footer">
<Link href="/">Learn more</Link> <Link href="/">Learn more</Link>
<Button size="small">Manage</Button> <Button size="sm">Manage</Button>
</div> </div>
</Tooltip> </Tooltip>
<Link href="/">Learn more</Link> <Link href="/">Learn more</Link>
<Button size="small">Manage</Button> <Button size="sm">Manage</Button>
<Tooltip triggerText="Resource list" icon="{Catalog}"> <Tooltip triggerText="Resource list" icon="{Catalog}">
<p>Resources are provisioned based on your account's organization.</p> <p>Resources are provisioned based on your account's organization.</p>

8
types/Button/Button.svelte.d.ts vendored
View file

@ -18,14 +18,14 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
| "tertiary" | "tertiary"
| "ghost" | "ghost"
| "danger" | "danger"
| "danger-tertiary" | "danger--tertiary"
| "danger-ghost"; | "danger--ghost";
/** /**
* Specify the size of button * Specify the size of button
* @default "default" * @default "lg"
*/ */
size?: "default" | "field" | "small" | "lg" | "xl"; size?: "sm" | "md" | "lg" | "xl" | "2xl";
/** /**
* Set to `true` to use Carbon's expressive typesetting * Set to `true` to use Carbon's expressive typesetting