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

feat: upgrade Button to v11 styles

Browse source 
Button changes

##BREAKING CHANGES

- `skeleton` prop has been removed. Use `ButtonSkeleton` component instead
- `size` prop has new values
- `kind` prop has new values
- `isSelected` is now `selected
- `on:mouseover`, `on:mouseenter`, and `on:mouseleave` forwarded events were replaced with `on:pointerover`, `on:pointerenter`, and `on:pointerleave`
- `as` no longer accepts boolean types

## Features

- New `2xl` size
- `expressive` styles now apply to all button sizes
- `as` accepts a string to specify a desired HTML element
This commit is contained in:
Enrico Sacchetti 2024-01-16 16:30:06 -05:00
commit 997cc1fa5e
6 changed files with 184 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

57
COMPONENT_INDEX.md
View file

@ -372,40 +372,41 @@ 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; HTMLElement</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>"sm" &#124; "md" &#124; "lg" &#124; "xl" &#124; "2xl"</code> | <code>"lg"</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 | | selected | 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 |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon | | iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
| tooltipAlignment | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons | | tooltipAlignment | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
| tooltipPosition | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon | | tooltipPosition | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
| as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />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;) | | as | No | <code>let</code> | No | <code>keyof import('svelte/elements').SvelteHTMLElements</code> | <code>undefined</code> | Specify an element name to render as the button.<br />Be sure to provide |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button | | href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link | | tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex | | type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
| type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element | | buttonAttributes | No | <code>let</code> | No | <code>import('svelte/elements').HTMLAnchorAttributes &#124; |
| import('svelte/elements').HTMLButtonAttributes &#124; import('svelte/elements').HTMLAttributes</code> | <code>{}</code> | Button, anchor, or div attributes |
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- | | :-------- | :------ | :---- | :------- |
| -- | Yes | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | -- | | -- | Yes | -- | -- |
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :-------- | :----- | | :----------- | :-------- | :----- |
| click | forwarded | -- | | click | forwarded | -- |
| focus | forwarded | -- | | focus | forwarded | -- |
| blur | forwarded | -- | | blur | forwarded | -- |
| mouseover | forwarded | -- | | pointerover | forwarded | -- |
| mouseenter | forwarded | -- | | pointerenter | forwarded | -- |
| mouseleave | forwarded | -- | | pointerleave | forwarded | -- |
## `ButtonSet` ## `ButtonSet`

8
css/all.scss
View file

@ -1,7 +1,9 @@
$prefix: 'bx';
// Use all Carbon themes // Use all Carbon themes
@use '@carbon/styles/scss/config' with ( @use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true, $use-akamai-cdn: true,
$prefix: 'bx' $prefix: $prefix
); );
@use "@carbon/styles" as styles; @use "@carbon/styles" as styles;
@use "@carbon/styles/scss/utilities" as *; @use "@carbon/styles/scss/utilities" as *;
@ -22,9 +24,9 @@
@include styles.theme(styles.$g100); @include styles.theme(styles.$g100);
} }
.bx--text-truncate-end { .#{$prefix}--text-truncate-end {
@include text-truncate-end; @include text-truncate-end;
} }
.bx--text-truncate-front { .#{$prefix}--text-truncate-front {
@include text-truncate-front; @include text-truncate-front;
} }

66
docs/src/COMPONENT_API.json
View file

@ -486,7 +486,7 @@
"reactive": false "reactive": false
}, },
{ {
"name": "isSelected", "name": "selected",
"kind": "let", "kind": "let",
"description": "Set to `true` to enable the selected state for an icon-only, ghost button", "description": "Set to `true` to enable the selected state for an icon-only, ghost button",
"type": "boolean", "type": "boolean",
@ -546,21 +546,8 @@
{ {
"name": "as", "name": "as",
"kind": "let", "kind": "let",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)", "description": "Specify an element name to render as the button.\nBe sure to provide",
"type": "boolean", "type": "keyof import('svelte/elements').SvelteHTMLElements",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "skeleton",
"kind": "let",
"description": "Set to `true` to display the skeleton state",
"type": "boolean",
"value": "false",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -618,49 +605,50 @@
"name": "ref", "name": "ref",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the HTML element", "description": "Obtain a reference to the HTML element",
"type": "null | HTMLAnchorElement | HTMLButtonElement", "type": "null | HTMLElement",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
"constant": false, "constant": false,
"reactive": true "reactive": true
},
{
"name": "buttonAttributes",
"kind": "let",
"description": "Button, anchor, or div attributes",
"type": "import('svelte/elements').HTMLAnchorAttributes |\nimport('svelte/elements').HTMLButtonAttributes | import('svelte/elements').HTMLAttributes",
"value": "{}",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
} }
], ],
"moduleExports": [], "moduleExports": [],
"slots": [ "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
{
"name": "__default__",
"default": true,
"slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }"
}
],
"events": [ "events": [
{ "type": "forwarded", "name": "click", "element": "ButtonSkeleton" }, { "type": "forwarded", "name": "click", "element": "svelte:element" },
{ "type": "forwarded", "name": "focus", "element": "ButtonSkeleton" }, { "type": "forwarded", "name": "focus", "element": "svelte:element" },
{ "type": "forwarded", "name": "blur", "element": "ButtonSkeleton" }, { "type": "forwarded", "name": "blur", "element": "svelte:element" },
{ {
"type": "forwarded", "type": "forwarded",
"name": "mouseover", "name": "pointerover",
"element": "ButtonSkeleton" "element": "svelte:element"
}, },
{ {
"type": "forwarded", "type": "forwarded",
"name": "mouseenter", "name": "pointerenter",
"element": "ButtonSkeleton" "element": "svelte:element"
}, },
{ {
"type": "forwarded", "type": "forwarded",
"name": "mouseleave", "name": "pointerleave",
"element": "ButtonSkeleton" "element": "svelte:element"
} }
], ],
"typedefs": [], "typedefs": []
"rest_props": { "type": "Element", "name": "button | a | div" },
"extends": {
"interface": "ButtonSkeletonProps",
"import": "\"./ButtonSkeleton.svelte\""
}
}, },
{ {
"moduleName": "ButtonSet", "moduleName": "ButtonSet",

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

@ -36,7 +36,7 @@
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
You must provide an <strong>iconDescription</strong> for the button tooltip. You must provide an <strong>iconDescription</strong> for screen readers.
</div> </div>
</InlineNotification> </InlineNotification>
@ -54,7 +54,7 @@
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
You must provide an <strong>iconDescription</strong> for the button tooltip. You must provide an <strong>iconDescription</strong> for screen readers.
</div> </div>
</InlineNotification> </InlineNotification>
@ -84,41 +84,20 @@ If an `href` value is specified, the component will render an [anchor element](h
## Custom element ## Custom element
<Button as let:props> <Button as="div">
<p {...props}>Custom element</p> Custom element
</Button> </Button>
## Field size ## Sizes
<Button size="md">Primary</Button> Button is available in small, medium, large, extra-large, and double-extra-large.
<Button size="md" kind="secondary">Secondary</Button> Use `md` (default) when used with form fields.
<Button size="md" kind="tertiary">Tertiary</Button>
<Button size="md" kind="ghost">Ghost</Button>
<Button size="md" kind="danger">Danger</Button>
## Small size <Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="sm">Primary</Button> <Button size="lg">Large</Button>
<Button size="sm" kind="secondary">Secondary</Button> <Button size="xl">Extra Large</Button>
<Button size="sm" kind="tertiary">Tertiary</Button> <Button size="2xl">Double extra Large</Button>
<Button size="sm" kind="ghost">Ghost</Button>
<Button size="sm" kind="danger">Danger</Button>
## Large size
<Button size="xl">Primary</Button>
<Button size="xl" kind="secondary">Secondary</Button>
<Button size="xl" kind="tertiary">Tertiary</Button>
<Button size="xl" kind="ghost">Ghost</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
@ -129,12 +108,6 @@ If an `href` value is specified, the component will render an [anchor element](h
Set `expressive` to `true` to use Carbon's expressive typesetting. Set `expressive` to `true` to use Carbon's expressive typesetting.
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
Expressive styles only work with the default, "lg", and "xl" button sizes.
</div>
</InlineNotification>
<Button expressive size="xl">Primary</Button> <Button expressive size="xl">Primary</Button>
<Button expressive size="xl" kind="secondary">Secondary</Button> <Button expressive size="xl" kind="secondary">Secondary</Button>
<Button expressive size="xl" kind="tertiary">Tertiary</Button> <Button expressive size="xl" kind="tertiary">Tertiary</Button>
@ -153,13 +126,19 @@ Set `expressive` to `true` to use Carbon's expressive typesetting.
<Button expressive kind="ghost">Ghost</Button> <Button expressive kind="ghost">Ghost</Button>
<Button expressive kind="danger">Danger</Button> <Button expressive kind="danger">Danger</Button>
## Additional attributes
Use `buttonAttributes` to pass any additional attributes.
<Button buttonAttributes={{class: 'ready'}}>Ready</Button>
## Skeleton ## Skeleton
<Button size="xl" skeleton /> <!-- <Button size="xl" skeleton />
<Button size="lg" skeleton /> <Button size="lg" skeleton />
<Button skeleton /> <Button skeleton />
<Button skeleton size="field" /> <Button skeleton size="field" />
<Button skeleton size="small" /> <Button skeleton size="small" /> -->
## Programmatic focus ## Programmatic focus

173
src/Button/Button.svelte
View file

@ -1,10 +1,4 @@
<script> <script>
/**
* @extends {"./ButtonSkeleton.svelte"} ButtonSkeletonProps
* @restProps {button | a | div}
* @slot {{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }}
*/
/** /**
* 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"}
@ -23,7 +17,7 @@
/** /**
* Set to `true` to enable the selected state for an icon-only, ghost button * Set to `true` to enable the selected state for an icon-only, ghost button
*/ */
export let isSelected = false; export let selected = false;
/** /**
* Specify the icon to render * Specify the icon to render
@ -51,13 +45,11 @@
export let tooltipPosition = "bottom"; export let tooltipPosition = "bottom";
/** /**
* Set to `true` to render a custom HTML element * Specify an element name to render as the button.
* Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) * Be sure to provide
* @type {keyof import('svelte/elements').SvelteHTMLElements}
*/ */
export let as = false; export let as = undefined;
/** Set to `true` to display the skeleton state */
export let skeleton = false;
/** Set to `true` to disable the button */ /** Set to `true` to disable the button */
export let disabled = false; export let disabled = false;
@ -77,8 +69,14 @@
/** Obtain a reference to the HTML element */ /** Obtain a reference to the HTML element */
export let ref = null; export let ref = null;
/**
* Button, anchor, or div attributes
* @type {import('svelte/elements').HTMLAnchorAttributes |
* import('svelte/elements').HTMLButtonAttributes | import('svelte/elements').HTMLAttributes}
*/
export let buttonAttributes = {};
import { getContext } from "svelte"; import { getContext } from "svelte";
import ButtonSkeleton from "./ButtonSkeleton.svelte";
const ctx = getContext("ComposedModal"); const ctx = getContext("ComposedModal");
@ -92,21 +90,12 @@
disabled: disabled === true ? true : undefined, disabled: disabled === true ? true : undefined,
href, href,
"aria-pressed": "aria-pressed":
hasIconOnly && kind === "ghost" && !href ? isSelected : undefined, hasIconOnly && kind === "ghost" && !href ? selected : undefined,
...$$restProps,
class: [ class: [
"bx--btn", "bx--btn",
expressive && "bx--btn--expressive", expressive && "bx--btn--expressive",
((size === "small" && !expressive) || `bx--layout--size-${size}`,
(size === "sm" && !expressive) || `bx--btn--${kind}`,
(size === "small" && !expressive)) &&
"bx--btn--sm",
((size === "field" && !expressive) || (size === "md" && !expressive)) &&
"bx--btn--md",
size === "small" && "bx--btn--sm",
size === "xl" && "bx--btn--xl",
size === "2xl" && "bx--btn--2xl",
kind && `bx--btn--${kind}`,
disabled && "bx--btn--disabled", disabled && "bx--btn--disabled",
hasIconOnly && "bx--btn--icon-only", hasIconOnly && "bx--btn--icon-only",
hasIconOnly && "bx--tooltip__trigger", hasIconOnly && "bx--tooltip__trigger",
@ -117,73 +106,79 @@
hasIconOnly && hasIconOnly &&
tooltipAlignment && tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`, `bx--tooltip--align-${tooltipAlignment}`,
hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected", hasIconOnly && selected && kind === "ghost" && "bx--btn--selected",
$$restProps.class,
] ]
.filter(Boolean) .filter(Boolean)
.join(" "), .join(" "),
}; };
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-no-static-element-interactions -->
{#if skeleton} <svelte:element
<ButtonSkeleton this="{as || (href && 'a') || 'button'}"
href="{href}" bind:this="{ref}"
size="{size}" type="{href && !disabled ? undefined : type}"
{...$$restProps} tab-index="{tabindex}"
style="{hasIconOnly && 'width: 3rem;'}" disabled="{disabled}"
on:click href="{href}"
on:focus aria-pressed="{hasIconOnly && kind === 'ghost' && !href
on:blur ? selected
on:mouseover : undefined}"
on:mouseenter class:bx--btn="{true}"
on:mouseleave class:bx--btn--expressive="{expressive}"
class:bx--layout--size-sm="{size === 'sm'}"
class:bx--layout--size-md="{size === 'md'}"
class:bx--layout--size-lg="{size === 'lg'}"
class:bx--layout--size-xl="{size === 'xl'}"
class:bx--layout--size-2xl="{size === '2xl'}"
class:bx--btn--primary="{kind === 'primary'}"
class:bx--btn--secondary="{kind === 'secondary'}"
class:bx--btn--tertiary="{kind === 'tertiary'}"
class:bx--btn--ghost="{kind === 'ghost'}"
class:bx--btn--danger="{kind === 'danger'}"
class:bx--btn--danger--tertiary="{kind === 'danger--tertiary'}"
class:bx--btn--danger--ghost="{kind === 'danger--ghost'}"
class:bx--btn--icon-only="{hasIconOnly}"
class:bx--btn--icon-only--top="{hasIconOnly &&
tooltipPosition &&
tooltipPosition === 'top'}"
class:bx--btn--icon-only--right="{hasIconOnly &&
tooltipPosition &&
tooltipPosition === 'right'}"
class:bx--btn--icon-only--bottom="{hasIconOnly &&
tooltipPosition &&
tooltipPosition === 'bottom'}"
class:bx--btn--icon-only--left="{hasIconOnly &&
tooltipPosition &&
tooltipPosition === 'left'}"
class:bx--btn--icon-only--start="{hasIconOnly &&
tooltipAlignment &&
tooltipAlignment === 'start'}"
class:bx--btn--icon-only--center="{hasIconOnly &&
tooltipAlignment &&
tooltipAlignment === 'center'}"
class:bx--btn--icon-only--end="{hasIconOnly &&
tooltipAlignment &&
tooltipAlignment === 'end'}"
class:bx--tooltip="{hasIconOnly}"
{...buttonAttributes}
on:click
on:focus
on:blur
on:pointerover
on:pointerenter
on:pointerleave
>
{#if hasIconOnly}
<span class:bx--assistive-text="{true}" class:bx--tooltip-content="{true}"
>{iconDescription}</span
>
{/if}
<slot /><svelte:component
this="{icon}"
aria-hidden="true"
class="bx--btn__icon"
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
aria-label="{iconDescription}"
/> />
{:else if as} </svelte:element>
<slot props="{buttonProps}" />
{:else if href && !disabled}
<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<a
bind:this="{ref}"
{...buttonProps}
on:click
on:focus
on:blur
on:mouseover
on:mouseenter
on:mouseleave
>
{#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if}
<slot /><svelte:component
this="{icon}"
aria-hidden="true"
class="bx--btn__icon"
aria-label="{iconDescription}"
/>
</a>
{:else}
<button
bind:this="{ref}"
{...buttonProps}
on:click
on:focus
on:blur
on:mouseover
on:mouseenter
on:mouseleave
>
{#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if}
<slot /><svelte:component
this="{icon}"
aria-hidden="true"
class="bx--btn__icon"
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
aria-label="{iconDescription}"
/>
</button>
{/if}

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

@ -1,13 +1,6 @@
import type { SvelteComponentTyped } from "svelte"; import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
import type { ButtonSkeletonProps } from "./ButtonSkeleton.svelte"; export interface ButtonProps {
type RestProps = SvelteHTMLElements["button"] &
SvelteHTMLElements["a"] &
SvelteHTMLElements["div"];
export interface ButtonProps extends ButtonSkeletonProps, RestProps {
/** /**
* Specify the kind of button * Specify the kind of button
* @default "primary" * @default "primary"
@ -37,7 +30,7 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
* Set to `true` to enable the selected state for an icon-only, ghost button * Set to `true` to enable the selected state for an icon-only, ghost button
* @default false * @default false
*/ */
isSelected?: boolean; selected?: boolean;
/** /**
* Specify the icon to render * Specify the icon to render
@ -65,17 +58,11 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
tooltipPosition?: "top" | "right" | "bottom" | "left"; tooltipPosition?: "top" | "right" | "bottom" | "left";
/** /**
* Set to `true` to render a custom HTML element * Specify an element name to render as the button.
* Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) * Be sure to provide
* @default false * @default undefined
*/ */
as?: boolean; as?: keyof import("svelte/elements").SvelteHTMLElements;
/**
* Set to `true` to display the skeleton state
* @default false
*/
skeleton?: boolean;
/** /**
* Set to `true` to disable the button * Set to `true` to disable the button
@ -105,9 +92,16 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
* Obtain a reference to the HTML element * Obtain a reference to the HTML element
* @default null * @default null
*/ */
ref?: null | HTMLAnchorElement | HTMLButtonElement; ref?: null | HTMLElement;
[key: `data-${string}`]: any; /**
* Button, anchor, or div attributes
* @default {}
*/
buttonAttributes?:
| import("svelte/elements").HTMLAnchorAttributes
| import("svelte/elements").HTMLButtonAttributes
| import("svelte/elements").HTMLAttributes;
} }
export default class Button extends SvelteComponentTyped< export default class Button extends SvelteComponentTyped<
@ -116,21 +110,9 @@ export default class Button extends SvelteComponentTyped<
click: WindowEventMap["click"]; click: WindowEventMap["click"];
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
mouseover: WindowEventMap["mouseover"]; pointerover: WindowEventMap["pointerover"];
mouseenter: WindowEventMap["mouseenter"]; pointerenter: WindowEventMap["pointerenter"];
mouseleave: WindowEventMap["mouseleave"]; pointerleave: WindowEventMap["pointerleave"];
}, },
{ { default: {} }
default: {
props: {
role: "button";
type?: string;
tabindex: any;
disabled: boolean;
href?: string;
class: string;
[key: string]: any;
};
};
}
> {} > {}