diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 043fca30..fd5141de 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -372,41 +372,40 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :---------------------------------------------------------------------------------------------------- | :-------------- | :-------------------------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLElement | null | Obtain a reference to the HTML element | -| kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost" | "primary" | Specify the kind of button | -| size | No | let | No | "sm" | "md" | "lg" | "xl" | "2xl" | "lg" | Specify the size of button | -| expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | -| selected | No | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| iconDescription | No | let | No | string | undefined | Specify the ARIA label for the button icon | -| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.
Only applies to icon-only buttons | -| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon | -| as | No | let | No | keyof import('svelte/elements').SvelteHTMLElements | undefined | Specify an element name to render as the button.
Be sure to provide | -| disabled | No | let | No | boolean | false | Set to `true` to disable the button | -| href | No | let | No | string | undefined | Set the `href` to use an anchor link | -| tabindex | No | let | No | string | "0" | Specify the tabindex | -| type | No | let | No | string | "button" | Specify the `type` attribute for the button element | -| buttonAttributes | No | let | No | import('svelte/elements').HTMLAnchorAttributes | | -| import('svelte/elements').HTMLButtonAttributes | import('svelte/elements').HTMLAttributes | {} | Button, anchor, or div attributes | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | +| kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost" | "primary" | Specify the kind of button | +| size | No | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button | +| expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | +| isSelected | No | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| iconDescription | No | let | No | string | undefined | Specify the ARIA label for the button icon | +| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.
Only applies to icon-only buttons | +| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon | +| as | No | let | No | boolean | 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 | No | let | No | boolean | false | Set to `true` to display the skeleton state | +| disabled | No | let | No | boolean | false | Set to `true` to disable the button | +| href | No | let | No | string | undefined | Set the `href` to use an anchor link | +| tabindex | No | let | No | string | "0" | Specify the tabindex | +| type | No | let | No | string | "button" | Specify the `type` attribute for the button element | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- | +| -- | Yes | { props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } | -- | ### Events -| Event name | Type | Detail | -| :----------- | :-------- | :----- | -| click | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | -| pointerover | forwarded | -- | -| pointerenter | forwarded | -- | -| pointerleave | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | ## `ButtonSet` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 706aea11..814290d4 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -465,8 +465,8 @@ "name": "size", "kind": "let", "description": "Specify the size of button", - "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"", - "value": "\"lg\"", + "type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"", + "value": "\"default\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -486,7 +486,7 @@ "reactive": false }, { - "name": "selected", + "name": "isSelected", "kind": "let", "description": "Set to `true` to enable the selected state for an icon-only, ghost button", "type": "boolean", @@ -546,8 +546,21 @@ { "name": "as", "kind": "let", - "description": "Specify an element name to render as the button.\nBe sure to provide", - "type": "keyof import('svelte/elements').SvelteHTMLElements", + "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., )", + "type": "boolean", + "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, "isFunctionDeclaration": false, "isRequired": false, @@ -605,50 +618,49 @@ "name": "ref", "kind": "let", "description": "Obtain a reference to the HTML element", - "type": "null | HTMLElement", + "type": "null | HTMLAnchorElement | HTMLButtonElement", "value": "null", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, "constant": false, "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": [], - "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], - "events": [ - { "type": "forwarded", "name": "click", "element": "svelte:element" }, - { "type": "forwarded", "name": "focus", "element": "svelte:element" }, - { "type": "forwarded", "name": "blur", "element": "svelte:element" }, + "slots": [ { - "type": "forwarded", - "name": "pointerover", - "element": "svelte:element" - }, - { - "type": "forwarded", - "name": "pointerenter", - "element": "svelte:element" - }, - { - "type": "forwarded", - "name": "pointerleave", - "element": "svelte:element" + "name": "__default__", + "default": true, + "slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }" } ], - "typedefs": [] + "events": [ + { "type": "forwarded", "name": "click", "element": "ButtonSkeleton" }, + { "type": "forwarded", "name": "focus", "element": "ButtonSkeleton" }, + { "type": "forwarded", "name": "blur", "element": "ButtonSkeleton" }, + { + "type": "forwarded", + "name": "mouseover", + "element": "ButtonSkeleton" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "ButtonSkeleton" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "ButtonSkeleton" + } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button | a | div" }, + "extends": { + "interface": "ButtonSkeletonProps", + "import": "\"./ButtonSkeleton.svelte\"" + } }, { "moduleName": "ButtonSet", diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index a6f997de..821862c7 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -1,4 +1,10 @@ - - - {#if hasIconOnly} - {iconDescription} - {/if} - +{:else if as} + +{:else if href && !disabled} + + + + {#if hasIconOnly} + {iconDescription} + {/if} + +{:else} + +{/if} diff --git a/types/Button/Button.svelte.d.ts b/types/Button/Button.svelte.d.ts index f4127dd2..8a6335d7 100644 --- a/types/Button/Button.svelte.d.ts +++ b/types/Button/Button.svelte.d.ts @@ -1,6 +1,13 @@ import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; -export interface ButtonProps { +import type { ButtonSkeletonProps } from "./ButtonSkeleton.svelte"; + +type RestProps = SvelteHTMLElements["button"] & + SvelteHTMLElements["a"] & + SvelteHTMLElements["div"]; + +export interface ButtonProps extends ButtonSkeletonProps, RestProps { /** * Specify the kind of button * @default "primary" @@ -16,9 +23,9 @@ export interface ButtonProps { /** * Specify the size of button - * @default "lg" + * @default "default" */ - size?: "sm" | "md" | "lg" | "xl" | "2xl"; + size?: "default" | "field" | "small" | "lg" | "xl"; /** * Set to `true` to use Carbon's expressive typesetting @@ -30,7 +37,7 @@ export interface ButtonProps { * Set to `true` to enable the selected state for an icon-only, ghost button * @default false */ - selected?: boolean; + isSelected?: boolean; /** * Specify the icon to render @@ -58,11 +65,17 @@ export interface ButtonProps { tooltipPosition?: "top" | "right" | "bottom" | "left"; /** - * Specify an element name to render as the button. - * Be sure to provide - * @default undefined + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g., ) + * @default false */ - as?: keyof import("svelte/elements").SvelteHTMLElements; + as?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; /** * Set to `true` to disable the button @@ -92,16 +105,9 @@ export interface ButtonProps { * Obtain a reference to the HTML element * @default null */ - ref?: null | HTMLElement; + ref?: null | HTMLAnchorElement | HTMLButtonElement; - /** - * Button, anchor, or div attributes - * @default {} - */ - buttonAttributes?: - | import("svelte/elements").HTMLAnchorAttributes - | import("svelte/elements").HTMLButtonAttributes - | import("svelte/elements").HTMLAttributes; + [key: `data-${string}`]: any; } export default class Button extends SvelteComponentTyped< @@ -110,9 +116,21 @@ export default class Button extends SvelteComponentTyped< click: WindowEventMap["click"]; focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; - pointerover: WindowEventMap["pointerover"]; - pointerenter: WindowEventMap["pointerenter"]; - pointerleave: WindowEventMap["pointerleave"]; + mouseover: WindowEventMap["mouseover"]; + mouseenter: WindowEventMap["mouseenter"]; + mouseleave: WindowEventMap["mouseleave"]; }, - { default: {} } + { + default: { + props: { + role: "button"; + type?: string; + tabindex: any; + disabled: boolean; + href?: string; + class: string; + [key: string]: any; + }; + }; + } > {}