mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(button): adopt v11 styles

Browse source 
- 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
This commit is contained in:
Enrico Sacchetti 2023-01-28 21:08:55 -05:00
commit a1302baa44
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
7 changed files with 70 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

36
COMPONENT_INDEX.md
View file

@ -372,23 +372,23 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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;) | | 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 | | 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 | | 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 | | 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 | | 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 | | type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
### Slots ### Slots
@ -404,6 +404,8 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| mouseover | forwarded | -- | | mouseover | forwarded | -- |
| mouseenter | forwarded | -- | | mouseenter | forwarded | -- |
| mouseleave | forwarded | -- | | mouseleave | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
## `ButtonSet` ## `ButtonSet`

6
docs/src/COMPONENT_API.json
View file

@ -453,7 +453,7 @@
"name": "kind", "name": "kind",
"kind": "let", "kind": "let",
"description": "Specify the kind of button", "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\"", "value": "\"primary\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -651,7 +651,9 @@
"type": "forwarded", "type": "forwarded",
"name": "mouseleave", "name": "mouseleave",
"element": "ButtonSkeleton" "element": "ButtonSkeleton"
} },
{ "type": "forwarded", "name": "focus", "element": "ButtonSkeleton" },
{ "type": "forwarded", "name": "blur", "element": "ButtonSkeleton" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "button | a | div" }, "rest_props": { "type": "Element", "name": "button | a | div" },

6
docs/src/pages/components/Button.svx
View file

@ -30,7 +30,7 @@
## Danger tertiary button ## Danger tertiary button
<Button kind="danger-tertiary">Danger tertiary button</Button> <Button kind="danger--tertiary">Danger tertiary button</Button>
## Danger tertiary, icon-only button ## Danger tertiary, icon-only button
@ -40,11 +40,11 @@
</div> </div>
</InlineNotification> </InlineNotification>
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} /> <Button kind="danger--tertiary"iconDescription="Delete" icon={TrashCan} />
## Danger ghost button ## Danger ghost button
<Button kind="danger-ghost">Danger ghost button</Button> <Button kind="danger--ghost">Danger ghost button</Button>
## Button with icon ## Button with icon

51
src/carbon-components-svelte/Button/Button.svelte
View file

@ -7,7 +7,7 @@
/** /**
* Specify the kind of button * 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"; export let kind = "primary";
@ -79,6 +79,7 @@
import { getContext } from "svelte"; import { getContext } from "svelte";
import ButtonSkeleton from "./ButtonSkeleton.svelte"; import ButtonSkeleton from "./ButtonSkeleton.svelte";
import "@carbon/styles/scss/components/button/_index.scss";
const ctx = getContext("ComposedModal"); const ctx = getContext("ComposedModal");
@ -95,30 +96,30 @@
hasIconOnly && kind === "ghost" && !href ? isSelected : undefined, hasIconOnly && kind === "ghost" && !href ? isSelected : undefined,
...$$restProps, ...$$restProps,
class: [ class: [
"bx--btn", "cds--btn",
expressive && "bx--btn--expressive", expressive && "cds--btn--expressive",
((size === "small" && !expressive) || ((size === "small" && !expressive) ||
(size === "sm" && !expressive) || (size === "sm" && !expressive) ||
(size === "small" && !expressive)) && (size === "small" && !expressive)) &&
"bx--btn--sm", "cds--btn--sm",
(size === "field" && !expressive) || (size === "field" && !expressive) ||
(size === "md" && !expressive && "bx--btn--md"), (size === "md" && !expressive && "cds--btn--md"),
size === "field" && "bx--btn--field", size === "field" && "cds--btn--field",
size === "small" && "bx--btn--sm", size === "small" && "cds--btn--sm",
size === "lg" && "bx--btn--lg", size === "lg" && "cds--btn--lg",
size === "xl" && "bx--btn--xl", size === "xl" && "cds--btn--xl",
kind && `bx--btn--${kind}`, kind && `cds--btn--${kind}`,
disabled && "bx--btn--disabled", disabled && "cds--btn--disabled",
hasIconOnly && "bx--btn--icon-only", hasIconOnly && "cds--btn--icon-only",
hasIconOnly && "bx--tooltip__trigger", hasIconOnly && "cds--tooltip__trigger",
hasIconOnly && "bx--tooltip--a11y", hasIconOnly && "cds--tooltip--a11y",
hasIconOnly && hasIconOnly &&
tooltipPosition && tooltipPosition &&
`bx--btn--icon-only--${tooltipPosition}`, `cds--btn--icon-only--${tooltipPosition}`,
hasIconOnly && hasIconOnly &&
tooltipAlignment && tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`, `cds--tooltip--align-${tooltipAlignment}`,
hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected", hasIconOnly && isSelected && kind === "ghost" && "cds--btn--selected",
$$restProps.class, $$restProps.class,
] ]
.filter(Boolean) .filter(Boolean)
@ -137,9 +138,11 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
on:focus
on:blur
/> />
{:else if as} {:else if as}
<slot props="{buttonProps}" /> <slot props="{{ role: 'button', ...buttonProps }}" />
{:else if href && !disabled} {:else if href && !disabled}
<!-- svelte-ignore a11y-missing-attribute --> <!-- svelte-ignore a11y-missing-attribute -->
<a <a
@ -149,14 +152,16 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
on:focus
on:blur
> >
{#if hasIconOnly} {#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span> <span class:cds--assistive-text="{true}">{iconDescription}</span>
{/if} {/if}
<slot /><svelte:component <slot /><svelte:component
this="{icon}" this="{icon}"
aria-hidden="true" aria-hidden="true"
class="bx--btn__icon" class="cds--btn__icon"
aria-label="{iconDescription}" aria-label="{iconDescription}"
/> />
</a> </a>
@ -168,14 +173,16 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
on:focus
on:blur
> >
{#if hasIconOnly} {#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span> <span class:cds--assistive-text="{true}">{iconDescription}</span>
{/if} {/if}
<slot /><svelte:component <slot /><svelte:component
this="{icon}" this="{icon}"
aria-hidden="true" aria-hidden="true"
class="bx--btn__icon" class="cds--btn__icon"
style="{hasIconOnly ? 'margin-left: 0' : undefined}" style="{hasIconOnly ? 'margin-left: 0' : undefined}"
aria-label="{iconDescription}" aria-label="{iconDescription}"
/> />

4
src/carbon-components-svelte/Button/ButtonSet.svelte
View file

@ -4,8 +4,8 @@
</script> </script>
<div <div
class:bx--btn-set="{true}" class:cds--btn-set="{true}"
class:bx--btn-set--stacked="{stacked}" class:cds--btn-set--stacked="{stacked}"
{...$$restProps} {...$$restProps}
> >
<slot /> <slot />

24
src/carbon-components-svelte/Button/ButtonSkeleton.svelte
View file

@ -18,12 +18,12 @@
href="{href}" href="{href}"
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}" rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
role="button" role="button"
class:bx--skeleton="{true}" class:cds--skeleton="{true}"
class:bx--btn="{true}" class:cds--btn="{true}"
class:bx--btn--field="{size === 'field'}" class:cds--btn--field="{size === 'field'}"
class:bx--btn--sm="{size === 'small'}" class:cds--btn--sm="{size === 'small'}"
class:bx--btn--lg="{size === 'lg'}" class:cds--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}" class:cds--btn--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -34,12 +34,12 @@
</a> </a>
{:else} {:else}
<div <div
class:bx--skeleton="{true}" class:cds--skeleton="{true}"
class:bx--btn="{true}" class:cds--btn="{true}"
class:bx--btn--field="{size === 'field'}" class:cds--btn--field="{size === 'field'}"
class:bx--btn--sm="{size === 'small'}" class:cds--btn--sm="{size === 'small'}"
class:bx--btn--lg="{size === 'lg'}" class:cds--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}" class:cds--btn--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

6
tests/Button.test.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Button } from "../types"; import { Button } from "../package";
import Add from "carbon-icons-svelte/lib/Add.svelte"; import Add from "carbon-icons-svelte/lib/Add.svelte";
</script> </script>
@ -28,10 +28,6 @@
<Button href="#">Link button</Button> <Button href="#">Link button</Button>
<Button as let:props>
<p {...props}>Custom element</p>
</Button>
<Button size="field">Primary</Button> <Button size="field">Primary</Button>
<Button size="field" kind="secondary">Secondary</Button> <Button size="field" kind="secondary">Secondary</Button>