mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21: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

57
COMPONENT_INDEX.md
View file

@ -372,41 +372,40 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
### Props
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
| -- | Yes | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | -- |
### 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`

86
docs/src/COMPONENT_API.json
View file

@ -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., <Button let:props><div {...props}>...</div></Button>)",
"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",

169
src/Button/Button.svelte
View file

@ -1,4 +1,10 @@
<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
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"}
@ -7,9 +13,9 @@
/**
* 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 */
export let expressive = false;
@ -17,7 +23,7 @@
/**
* 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
@ -45,11 +51,13 @@
export let tooltipPosition = "bottom";
/**
* Specify an element name to render as the button.
* Be sure to provide
* @type {keyof import('svelte/elements').SvelteHTMLElements}
* 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>)
*/
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 */
export let disabled = false;
@ -69,14 +77,8 @@
/** Obtain a reference to the HTML element */
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 ButtonSkeleton from "./ButtonSkeleton.svelte";
const ctx = getContext("ComposedModal");
@ -90,10 +92,15 @@
disabled: disabled === true ? true : undefined,
href,
"aria-pressed":
hasIconOnly && kind === "ghost" && !href ? selected : undefined,
hasIconOnly && kind === "ghost" && !href ? isSelected : undefined,
...$$restProps,
class: [
"bx--btn",
expressive && "bx--btn--expressive",
((size === "small" && !expressive) ||
(size === "sm" && !expressive) ||
(size === "small" && !expressive)) &&
"bx--btn--sm",
`bx--layout--size-${size}`,
`bx--btn--${kind}`,
disabled && "bx--btn--disabled",
@ -106,79 +113,73 @@
hasIconOnly &&
tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`,
hasIconOnly && selected && kind === "ghost" && "bx--btn--selected",
hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected",
$$restProps.class,
]
.filter(Boolean)
.join(" "),
};
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<svelte:element
this="{as || (href && 'a') || 'button'}"
bind:this="{ref}"
type="{href && !disabled ? undefined : type}"
tab-index="{tabindex}"
disabled="{disabled}"
href="{href}"
aria-pressed="{hasIconOnly && kind === 'ghost' && !href
? selected
: undefined}"
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: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}"
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if skeleton}
<ButtonSkeleton
href="{href}"
size="{size}"
{...$$restProps}
style="{hasIconOnly && 'width: 3rem;'}"
on:click
on:focus
on:blur
on:mouseover
on:mouseenter
on:mouseleave
/>
</svelte:element>
{: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}
<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}

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

@ -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., <Button let:props><div {...props}>...</div></Button>)
* @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;
};
};
}
> {}