Skip to content

Commit 997cc1f

Browse files
theetraintheetrain
committed
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
1 parent 50f24b8 commit 997cc1f

File tree

6 files changed

+184
-237
lines changed

6 files changed

+184
-237
lines changed

‎COMPONENT_INDEX.md‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -372,40 +372,41 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
372372

373373
### Props
374374

375-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
376-
| :--------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
377-
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
378-
| 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 |
379-
| size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg" &#124; "xl" &#124; "2xl"</code> | <code>"lg"</code> | Specify the size of button |
380-
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
381-
| 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 |
382-
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
383-
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
384-
| 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 |
385-
| 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 |
386-
| 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;) |
387-
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
388-
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
389-
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
390-
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
391-
| type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
375+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
376+
| :---------------------------------------------------------------------------------------------------- | :-------------- | :-------------------------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------- |
377+
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLElement</code> | <code>null</code> | Obtain a reference to the HTML element |
378+
| 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 |
379+
| size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg" &#124; "xl" &#124; "2xl"</code> | <code>"lg"</code> | Specify the size of button |
380+
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
381+
| 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 |
382+
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
383+
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
384+
| 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 |
385+
| 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 |
386+
| 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 |
387+
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
388+
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
389+
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
390+
| type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
391+
| buttonAttributes | No | <code>let</code> | No | <code>import('svelte/elements').HTMLAnchorAttributes &#124; |
392+
| import('svelte/elements').HTMLButtonAttributes &#124; import('svelte/elements').HTMLAttributes</code> | <code>{}</code> | Button, anchor, or div attributes |
392393

393394
### Slots
394395

395-
| Slot name | Default | Props | Fallback |
396-
| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
397-
| -- | Yes | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | -- |
396+
| Slot name | Default | Props | Fallback |
397+
| :-------- | :------ | :---- | :------- |
398+
| -- | Yes | -- | -- |
398399

399400
### Events
400401

401-
| Event name | Type | Detail |
402-
| :--------- | :-------- | :----- |
403-
| click | forwarded | -- |
404-
| focus | forwarded | -- |
405-
| blur | forwarded | -- |
406-
| mouseover | forwarded | -- |
407-
| mouseenter | forwarded | -- |
408-
| mouseleave | forwarded | -- |
402+
| Event name | Type | Detail |
403+
| :----------- | :-------- | :----- |
404+
| click | forwarded | -- |
405+
| focus | forwarded | -- |
406+
| blur | forwarded | -- |
407+
| pointerover | forwarded | -- |
408+
| pointerenter | forwarded | -- |
409+
| pointerleave | forwarded | -- |
409410

410411
## `ButtonSet`
411412

‎css/all.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
$prefix: 'bx';
2+
13
// Use all Carbon themes
24
@use '@carbon/styles/scss/config' with (
35
$use-akamai-cdn: true,
4-
$prefix: 'bx'
6+
$prefix: $prefix
57
);
68
@use "@carbon/styles" as styles;
79
@use "@carbon/styles/scss/utilities" as *;
@@ -22,9 +24,9 @@
2224
@include styles.theme(styles.$g100);
2325
}
2426

25-
.bx--text-truncate-end {
27+
.#{$prefix}--text-truncate-end {
2628
@include text-truncate-end;
2729
}
28-
.bx--text-truncate-front {
30+
.#{$prefix}--text-truncate-front {
2931
@include text-truncate-front;
3032
}

0 commit comments

Comments
 (0)