mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
feat(button): add v11 styles (#1642)
* feat(button): adopt v11 styles - forward focus and blur events - provide button role for custom elements using 'as' BREAKING CHANGE: danger-tertiary and danger-ghost props were renamed to danger--tertiary and danger--ghost BREAKING CHANGE: buttons now have a larger minimum width * test: update button test
This commit is contained in:
Enrico Sacchetti
parent
058f3205e9
commit
6fc0ab3290
7 changed files with 72 additions and 61 deletions
|
|
@ -372,23 +372,23 @@ 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>"default" | "field" | "small" | "lg" | "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</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 | 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>"default" | "field" | "small" | "lg" | "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</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 |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -404,6 +404,8 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
|||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
|
||||
## `ButtonSet`
|
||||
|
||||
|
|
|
|||
|
|
@ -453,7 +453,7 @@
|
|||
"name": "kind",
|
||||
"kind": "let",
|
||||
"description": "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\"",
|
||||
"value": "\"primary\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
|
|
@ -651,7 +651,9 @@
|
|||
"type": "forwarded",
|
||||
"name": "mouseleave",
|
||||
"element": "ButtonSkeleton"
|
||||
}
|
||||
},
|
||||
{ "type": "forwarded", "name": "focus", "element": "ButtonSkeleton" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "ButtonSkeleton" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "button | a | div" },
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
## Danger tertiary button
|
||||
|
||||
<Button kind="danger-tertiary">Danger tertiary button</Button>
|
||||
<Button kind="danger--tertiary">Danger tertiary button</Button>
|
||||
|
||||
## Danger tertiary, icon-only button
|
||||
|
||||
|
|
@ -40,11 +40,11 @@
|
|||
</div>
|
||||
</InlineNotification>
|
||||
|
||||
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
|
||||
<Button kind="danger--tertiary"iconDescription="Delete" icon={TrashCan} />
|
||||
|
||||
## Danger ghost button
|
||||
|
||||
<Button kind="danger-ghost">Danger ghost button</Button>
|
||||
<Button kind="danger--ghost">Danger ghost button</Button>
|
||||
|
||||
## Button with icon
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
/**
|
||||
* 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"}
|
||||
*/
|
||||
export let kind = "primary";
|
||||
|
||||
|
|
@ -79,6 +79,7 @@
|
|||
|
||||
import { getContext } from "svelte";
|
||||
import ButtonSkeleton from "./ButtonSkeleton.svelte";
|
||||
import "@carbon/styles/scss/components/button/_index.scss";
|
||||
|
||||
const ctx = getContext("ComposedModal");
|
||||
|
||||
|
|
@ -95,30 +96,30 @@
|
|||
hasIconOnly && kind === "ghost" && !href ? isSelected : undefined,
|
||||
...$$restProps,
|
||||
class: [
|
||||
"bx--btn",
|
||||
expressive && "bx--btn--expressive",
|
||||
"cds--btn",
|
||||
expressive && "cds--btn--expressive",
|
||||
((size === "small" && !expressive) ||
|
||||
(size === "sm" && !expressive) ||
|
||||
(size === "small" && !expressive)) &&
|
||||
"bx--btn--sm",
|
||||
"cds--btn--sm",
|
||||
(size === "field" && !expressive) ||
|
||||
(size === "md" && !expressive && "bx--btn--md"),
|
||||
size === "field" && "bx--btn--field",
|
||||
size === "small" && "bx--btn--sm",
|
||||
size === "lg" && "bx--btn--lg",
|
||||
size === "xl" && "bx--btn--xl",
|
||||
kind && `bx--btn--${kind}`,
|
||||
disabled && "bx--btn--disabled",
|
||||
hasIconOnly && "bx--btn--icon-only",
|
||||
hasIconOnly && "bx--tooltip__trigger",
|
||||
hasIconOnly && "bx--tooltip--a11y",
|
||||
(size === "md" && !expressive && "cds--btn--md"),
|
||||
size === "field" && "cds--btn--field",
|
||||
size === "small" && "cds--btn--sm",
|
||||
size === "lg" && "cds--btn--lg",
|
||||
size === "xl" && "cds--btn--xl",
|
||||
kind && `cds--btn--${kind}`,
|
||||
disabled && "cds--btn--disabled",
|
||||
hasIconOnly && "cds--btn--icon-only",
|
||||
hasIconOnly && "cds--tooltip__trigger",
|
||||
hasIconOnly && "cds--tooltip--a11y",
|
||||
hasIconOnly &&
|
||||
tooltipPosition &&
|
||||
`bx--btn--icon-only--${tooltipPosition}`,
|
||||
`cds--btn--icon-only--${tooltipPosition}`,
|
||||
hasIconOnly &&
|
||||
tooltipAlignment &&
|
||||
`bx--tooltip--align-${tooltipAlignment}`,
|
||||
hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected",
|
||||
`cds--tooltip--align-${tooltipAlignment}`,
|
||||
hasIconOnly && isSelected && kind === "ghost" && "cds--btn--selected",
|
||||
$$restProps.class,
|
||||
]
|
||||
.filter(Boolean)
|
||||
|
|
@ -137,9 +138,11 @@
|
|||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:focus
|
||||
on:blur
|
||||
/>
|
||||
{:else if as}
|
||||
<slot props="{buttonProps}" />
|
||||
<slot props="{{ role: 'button', ...buttonProps }}" />
|
||||
{:else if href && !disabled}
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a
|
||||
|
|
@ -149,14 +152,16 @@
|
|||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:focus
|
||||
on:blur
|
||||
>
|
||||
{#if hasIconOnly}
|
||||
<span class:bx--assistive-text="{true}">{iconDescription}</span>
|
||||
<span class:cds--assistive-text="{true}">{iconDescription}</span>
|
||||
{/if}
|
||||
<slot /><svelte:component
|
||||
this="{icon}"
|
||||
aria-hidden="true"
|
||||
class="bx--btn__icon"
|
||||
class="cds--btn__icon"
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
</a>
|
||||
|
|
@ -168,14 +173,16 @@
|
|||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:focus
|
||||
on:blur
|
||||
>
|
||||
{#if hasIconOnly}
|
||||
<span class:bx--assistive-text="{true}">{iconDescription}</span>
|
||||
<span class:cds--assistive-text="{true}">{iconDescription}</span>
|
||||
{/if}
|
||||
<slot /><svelte:component
|
||||
this="{icon}"
|
||||
aria-hidden="true"
|
||||
class="bx--btn__icon"
|
||||
class="cds--btn__icon"
|
||||
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--btn-set="{true}"
|
||||
class:bx--btn-set--stacked="{stacked}"
|
||||
class:cds--btn-set="{true}"
|
||||
class:cds--btn-set--stacked="{stacked}"
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -18,12 +18,12 @@
|
|||
href="{href}"
|
||||
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
|
||||
role="button"
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--field="{size === 'field'}"
|
||||
class:bx--btn--sm="{size === 'small'}"
|
||||
class:bx--btn--lg="{size === 'lg'}"
|
||||
class:bx--btn--xl="{size === 'xl'}"
|
||||
class:cds--skeleton="{true}"
|
||||
class:cds--btn="{true}"
|
||||
class:cds--btn--field="{size === 'field'}"
|
||||
class:cds--btn--sm="{size === 'small'}"
|
||||
class:cds--btn--lg="{size === 'lg'}"
|
||||
class:cds--btn--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -34,12 +34,12 @@
|
|||
</a>
|
||||
{:else}
|
||||
<div
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--field="{size === 'field'}"
|
||||
class:bx--btn--sm="{size === 'small'}"
|
||||
class:bx--btn--lg="{size === 'lg'}"
|
||||
class:bx--btn--xl="{size === 'xl'}"
|
||||
class:cds--skeleton="{true}"
|
||||
class:cds--btn="{true}"
|
||||
class:cds--btn--field="{size === 'field'}"
|
||||
class:cds--btn--sm="{size === 'small'}"
|
||||
class:cds--btn--lg="{size === 'lg'}"
|
||||
class:cds--btn--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Button } from "../types";
|
||||
import { Button } from "../package";
|
||||
import Add from "carbon-icons-svelte/lib/Add.svelte";
|
||||
</script>
|
||||
|
||||
|
|
@ -13,9 +13,9 @@
|
|||
|
||||
<Button kind="danger">Danger button</Button>
|
||||
|
||||
<Button kind="danger-tertiary">Danger tertiary button</Button>
|
||||
<Button kind="danger--tertiary">Danger tertiary button</Button>
|
||||
|
||||
<Button kind="danger-ghost">Danger ghost button</Button>
|
||||
<Button kind="danger--ghost">Danger ghost button</Button>
|
||||
|
||||
<Button icon="{Add}">With icon</Button>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue