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

fix: only apply v11 change to button

Browse source
This commit is contained in:
Enrico Sacchetti 2024-01-19 15:50:47 -05:00
commit 018d780bc3
4 changed files with 201 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

25
COMPONENT_INDEX.md
View file

@ -373,40 +373,39 @@ 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; HTMLElement</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>"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>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</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 |
| 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 | | 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 |
| 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>keyof import('svelte/elements').SvelteHTMLElements</code> | <code>undefined</code> | Specify an element name to render as the button.<br />Be sure to provide | | 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;) |
| 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 | -- | -- | | -- | Yes | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | -- |
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :----------- | :-------- | :----- | | :--------- | :-------- | :----- |
| click | forwarded | -- | | click | forwarded | -- |
| focus | forwarded | -- | | focus | forwarded | -- |
| blur | forwarded | -- | | blur | forwarded | -- |
| pointerover | forwarded | -- | | mouseover | forwarded | -- |
| pointerenter | forwarded | -- | | mouseenter | forwarded | -- |
| pointerleave | forwarded | -- | | mouseleave | forwarded | -- |
## `ButtonSet` ## `ButtonSet`

86
docs/src/COMPONENT_API.json
View file

@ -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": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"", "type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
"value": "\"lg\"", "value": "\"default\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -486,7 +486,7 @@
"reactive": false "reactive": false
}, },
{ {
"name": "selected", "name": "isSelected",
"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,8 +546,21 @@
{ {
"name": "as", "name": "as",
"kind": "let", "kind": "let",
"description": "Specify an element name to render as the button.\nBe sure to provide", "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>)",
"type": "keyof import('svelte/elements').SvelteHTMLElements", "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, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -605,50 +618,49 @@
"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 | HTMLElement", "type": "null | HTMLAnchorElement | HTMLButtonElement",
"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": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [
"events": [
{ "type": "forwarded", "name": "click", "element": "svelte:element" },
{ "type": "forwarded", "name": "focus", "element": "svelte:element" },
{ "type": "forwarded", "name": "blur", "element": "svelte:element" },
{ {
"type": "forwarded", "name": "__default__",
"name": "pointerover", "default": true,
"element": "svelte:element" "slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }"
},
{
"type": "forwarded",
"name": "pointerenter",
"element": "svelte:element"
},
{
"type": "forwarded",
"name": "pointerleave",
"element": "svelte:element"
} }
], ],
"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", "moduleName": "ButtonSet",

141
src/Button/Button.svelte
View file

@ -1,4 +1,10 @@
<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"}
@ -7,9 +13,9 @@
/** /**
* Specify the size of button * Specify the size of button
* @type {"sm" | "md" | "lg" | "xl" | "2xl"} * @type {"default" | "field" | "small" | "lg" | "xl"}
*/ */
export let size = "lg"; export let size = "default";
/** 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;
@ -17,7 +23,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 selected = false; export let isSelected = false;
/** /**
* Specify the icon to render * Specify the icon to render
@ -45,11 +51,13 @@
export let tooltipPosition = "bottom"; export let tooltipPosition = "bottom";
/** /**
* Specify an element name to render as the button. * Set to `true` to render a custom HTML element
* Be sure to provide * Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)
* @type {keyof import('svelte/elements').SvelteHTMLElements}
*/ */
export let as = undefined; export let as = false;
/** 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;
@ -69,14 +77,8 @@
/** 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");
@ -90,10 +92,15 @@
disabled: disabled === true ? true : undefined, disabled: disabled === true ? true : undefined,
href, href,
"aria-pressed": "aria-pressed":
hasIconOnly && kind === "ghost" && !href ? selected : undefined, hasIconOnly && kind === "ghost" && !href ? isSelected : undefined,
...$$restProps,
class: [ class: [
"bx--btn", "bx--btn",
expressive && "bx--btn--expressive", expressive && "bx--btn--expressive",
((size === "small" && !expressive) ||
(size === "sm" && !expressive) ||
(size === "small" && !expressive)) &&
"bx--btn--sm",
`bx--layout--size-${size}`, `bx--layout--size-${size}`,
`bx--btn--${kind}`, `bx--btn--${kind}`,
disabled && "bx--btn--disabled", disabled && "bx--btn--disabled",
@ -106,73 +113,66 @@
hasIconOnly && hasIconOnly &&
tooltipAlignment && tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`, `bx--tooltip--align-${tooltipAlignment}`,
hasIconOnly && selected && kind === "ghost" && "bx--btn--selected", hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected",
$$restProps.class,
] ]
.filter(Boolean) .filter(Boolean)
.join(" "), .join(" "),
}; };
</script> </script>
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svelte:element {#if skeleton}
this="{as || (href && 'a') || 'button'}" <ButtonSkeleton
bind:this="{ref}"
type="{href && !disabled ? undefined : type}"
tab-index="{tabindex}"
disabled="{disabled}"
href="{href}" href="{href}"
aria-pressed="{hasIconOnly && kind === 'ghost' && !href size="{size}"
? selected {...$$restProps}
: undefined}" style="{hasIconOnly && 'width: 3rem;'}"
class:bx--btn="{true}"
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:click
on:focus on:focus
on:blur on:blur
on:pointerover on:mouseover
on:pointerenter on:mouseenter
on:pointerleave on:mouseleave
/>
{:else if as}
<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} {#if hasIconOnly}
<span class:bx--assistive-text="{true}" class:bx--tooltip-content="{true}" <span class:bx--assistive-text="{true}">{iconDescription}</span>
>{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} {/if}
<slot /><svelte:component <slot /><svelte:component
this="{icon}" this="{icon}"
@ -181,4 +181,5 @@
style="{hasIconOnly ? 'margin-left: 0' : undefined}" style="{hasIconOnly ? 'margin-left: 0' : undefined}"
aria-label="{iconDescription}" aria-label="{iconDescription}"
/> />
</svelte:element> </button>
{/if}

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

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