mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-17 03:01:25 +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
|
|
@ -372,40 +372,41 @@ 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 | HTMLAnchorElement | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
||||
| kind | No | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg" | "xl" | "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 |
|
||||
| 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" | "center" | "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" | "right" | "bottom" | "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., <Button let:props><div {...props}>...</div></Button>) |
|
||||
| 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 |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------------------------------------------------------------------------------------------------- | :-------------- | :-------------------------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
||||
| kind | No | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg" | "xl" | "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" | "center" | "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" | "right" | "bottom" | "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 | |
|
||||
| import('svelte/elements').HTMLButtonAttributes | import('svelte/elements').HTMLAttributes</code> | <code>{}</code> | Button, anchor, or div attributes |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
|
||||
| -- | Yes | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | -- |
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------- |
|
||||
| -- | Yes | -- | -- |
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| Event name | Type | Detail |
|
||||
| :----------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
| pointerover | forwarded | -- |
|
||||
| pointerenter | forwarded | -- |
|
||||
| pointerleave | forwarded | -- |
|
||||
|
||||
## `ButtonSet`
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue