Skip to content

Commit

Permalink
feat(button): add v11 styles (#1642)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@theetrain
theetrain committed Feb 11, 2023
1 parent 058f320 commit 6fc0ab3
Show file tree
Hide file tree
Showing 7 changed files with 72 additions and 61 deletions.
36 changes: 19 additions & 17 deletions COMPONENT_INDEX.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 &#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</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 |
| 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</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

Expand All @@ -404,6 +404,8 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |

## `ButtonSet`

Expand Down
6 changes: 4 additions & 2 deletions docs/src/COMPONENT_API.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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" },
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/Button.svx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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

Expand Down
51 changes: 29 additions & 22 deletions src/carbon-components-svelte/Button/Button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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");
Expand All @@ -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)
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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}"
/>
Expand Down
4 changes: 2 additions & 2 deletions src/carbon-components-svelte/Button/ButtonSet.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
Loading

0 comments on commit 6fc0ab3

Please sign in to comment.