mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Align v10.35 (#694)

Browse source 
* chore(deps-dev): upgrade carbon-components to v10.35

* feat(tooltip-icon): add icon prop

This allows consumers to pass a Carbon icon as a prop instead of using the default slot.

* fix(tooltip): make screenreader description less verbose

Ref: b5f40d8fc

* feat(search): allow custom search icon

Allows consumers to render a different Carbon icon instead of the default Search16 icon.

* feat(number-input): add hideSteppers prop

Allows consumers to hide the input stepper buttons.

* feat: support expressive styles for Button, UnorderedList, OrderedList

* feat(button): support large size button

Set size to "lg" to use the large size.

* feat(button-skeleton): support xl, lg sizes

* docs(button): add "lg" size to expressive styles example

* feat(file-uploader-item): support field, small sizes

* feat(tooltip-icon): support disabled state
This commit is contained in:
Eric Liu 2021-06-26 07:13:28 -07:00 • committed by GitHub
commit db645c30f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 396 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/Button/Button.svelte
View file

@ -13,10 +13,13 @@
/**
* Specify the size of button
* @type {"default" | "field" | "small" | "xl"}
* @type {"default" | "field" | "small" | "lg" | "xl"}
*/
export let size = "default";
/** Set to `true` to use Carbon's expressive typesetting */
export let expressive = false;
/**
* Set to `true` to enable the selected state for an icon-only, ghost button
*/
@ -98,8 +101,16 @@
...$$restProps,
class: [
"bx--btn",
expressive && "bx--btn--expressive",
((size === "small" && !expressive) ||
(size === "sm" && !expressive) ||
(size === "small" && !expressive)) &&
"bx--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",

6
src/Button/ButtonSkeleton.svelte
View file

@ -7,7 +7,7 @@
/**
* Specify the size of button skeleton
* @type {"default" | "field" | "small"}
* @type {"default" | "field" | "small" | "lg" | "xl"}
*/
export let size = "default";
@ -27,6 +27,8 @@
class:bx--btn="{true}"
class:bx--btn--field="{size === 'field'}"
class:bx--btn--sm="{size === 'small' || small}"
class:bx--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}"
{...$$restProps}
on:click
on:mouseover
@ -41,6 +43,8 @@
class:bx--btn="{true}"
class:bx--btn--field="{size === 'field'}"
class:bx--btn--sm="{size === 'small' || small}"
class:bx--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}"
{...$$restProps}
on:click
on:mouseover