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

66
docs/src/COMPONENT_API.json
View file

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