mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
feat: upgrade Button to v11 styles
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
parent
50f24b882a
commit
997cc1fa5e
6 changed files with 184 additions and 237 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||
<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>
|
||||
</InlineNotification>
|
||||
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||
<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>
|
||||
</InlineNotification>
|
||||
|
||||
|
|
@ -84,41 +84,20 @@ If an `href` value is specified, the component will render an [anchor element](h
|
|||
|
||||
## Custom element
|
||||
|
||||
<Button as let:props>
|
||||
<p {...props}>Custom element</p>
|
||||
<Button as="div">
|
||||
Custom element
|
||||
</Button>
|
||||
|
||||
## Field size
|
||||
## Sizes
|
||||
|
||||
<Button size="md">Primary</Button>
|
||||
<Button size="md" kind="secondary">Secondary</Button>
|
||||
<Button size="md" kind="tertiary">Tertiary</Button>
|
||||
<Button size="md" kind="ghost">Ghost</Button>
|
||||
<Button size="md" kind="danger">Danger</Button>
|
||||
Button is available in small, medium, large, extra-large, and double-extra-large.
|
||||
Use `md` (default) when used with form fields.
|
||||
|
||||
## Small size
|
||||
|
||||
<Button size="sm">Primary</Button>
|
||||
<Button size="sm" kind="secondary">Secondary</Button>
|
||||
<Button size="sm" kind="tertiary">Tertiary</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>
|
||||
<Button size="sm">Small</Button>
|
||||
<Button size="md">Medium</Button>
|
||||
<Button size="lg">Large</Button>
|
||||
<Button size="xl">Extra Large</Button>
|
||||
<Button size="2xl">Double extra Large</Button>
|
||||
|
||||
## 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.
|
||||
|
||||
<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" kind="secondary">Secondary</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="danger">Danger</Button>
|
||||
|
||||
## Additional attributes
|
||||
|
||||
Use `buttonAttributes` to pass any additional attributes.
|
||||
|
||||
<Button buttonAttributes={{class: 'ready'}}>Ready</Button>
|
||||
|
||||
## Skeleton
|
||||
|
||||
<Button size="xl" skeleton />
|
||||
<!-- <Button size="xl" skeleton />
|
||||
<Button size="lg" skeleton />
|
||||
<Button skeleton />
|
||||
<Button skeleton size="field" />
|
||||
<Button skeleton size="small" />
|
||||
<Button skeleton size="small" /> -->
|
||||
|
||||
## Programmatic focus
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue