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

Merge a581231d16 into 9fac25dc10

Browse source
This commit is contained in:
Enrico Sacchetti 2024-03-31 17:25:49 +00:00 • committed by GitHub
commit f44f8f159a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 73 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

8
COMPONENT_INDEX.md
View file

@ -430,10 +430,10 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
| 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 skeleton |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | ------------------------------------ |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
| 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 skeleton |
### Slots

6
css/all.css
View file

File diff suppressed because one or more lines are too long

23
css/all.scss
View file

@ -1,35 +1,32 @@
$prefix: 'bx';
// Use all Carbon themes
@use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true,
$prefix: 'bx'
$prefix: $prefix
);
@use "@carbon/styles/scss/theme" as *;
@use "@carbon/styles/scss/themes" as *;
@use "@carbon/styles/scss/fonts";
@use "@carbon/styles" as styles;
@use "@carbon/styles/scss/utilities" as *;
:root {
@include theme($white);
@include styles.theme(styles.$white);
}
[data-carbon-theme='g10'] {
@include theme($g10);
@include styles.theme(styles.$g10);
}
[data-carbon-theme='g90'] {
@include theme($g90);
@include styles.theme(styles.$g90);
}
[data-carbon-theme='g100'] {
@include theme($g100);
@include styles.theme(styles.$g100);
}
@import "@carbon/styles/scss/reset";
@import "@carbon/styles/scss/components";
.bx--text-truncate-end {
.#{$prefix}--text-truncate-end {
@include text-truncate-end;
}
.bx--text-truncate-front {
.#{$prefix}--text-truncate-front {
@include text-truncate-front;
}

6
css/g10.css
View file

File diff suppressed because one or more lines are too long

10
css/g10.scss
View file

@ -1,20 +1,14 @@
// Use g10 theme
@use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true,
$prefix: 'bx'
);
@use "@carbon/styles/scss/theme" as *;
@use "@carbon/styles/scss/themes" as *;
@use "@carbon/styles/scss/fonts";
@use "@carbon/styles" as styles;
@use "@carbon/styles/scss/utilities" as *;
:root {
@include theme($g10);
@include styles.theme(styles.$g10);
}
@import "@carbon/styles/scss/reset";
@import "@carbon/styles/scss/components";
.bx--text-truncate-end {
@include text-truncate-end;
}

6
css/g100.css
View file

File diff suppressed because one or more lines are too long

10
css/g100.scss
View file

@ -1,20 +1,14 @@
// Use g10 theme
@use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true,
$prefix: 'bx'
);
@use "@carbon/styles/scss/theme" as *;
@use "@carbon/styles/scss/themes" as *;
@use "@carbon/styles/scss/fonts";
@use "@carbon/styles" as styles;
@use "@carbon/styles/scss/utilities" as *;
:root {
@include theme($g100);
@include styles.theme(styles.$g100);
}
@import "@carbon/styles/scss/reset";
@import "@carbon/styles/scss/components";
.bx--text-truncate-end {
@include text-truncate-end;
}

6
css/g90.css
View file

File diff suppressed because one or more lines are too long

10
css/g90.scss
View file

@ -1,20 +1,14 @@
// Use g10 theme
@use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true,
$prefix: 'bx'
);
@use "@carbon/styles/scss/theme" as *;
@use "@carbon/styles/scss/themes" as *;
@use "@carbon/styles/scss/fonts";
@use "@carbon/styles" as styles;
@use "@carbon/styles/scss/utilities" as *;
:root {
@include theme($g90);
@include styles.theme(styles.$g90);
}
@import "@carbon/styles/scss/reset";
@import "@carbon/styles/scss/components";
.bx--text-truncate-end {
@include text-truncate-end;
}

4
docs/src/COMPONENT_API.json
View file

@ -704,8 +704,8 @@
"name": "size",
"kind": "let",
"description": "Specify the size of button skeleton",
"type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
"value": "\"default\"",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
"value": "\"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,

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

@ -36,7 +36,7 @@
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
You must provide an <strong>iconDescription</strong> for the button tooltip.
You must provide an <strong>iconDescription</strong> for screen readers.
</div>
</InlineNotification>
@ -54,7 +54,7 @@
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
You must provide an <strong>iconDescription</strong> for the button tooltip.
You must provide an <strong>iconDescription</strong> for screen readers.
</div>
</InlineNotification>
@ -84,41 +84,20 @@ If an `href` value is specified, the component will render an [anchor element](h
## Custom element
<Button as let:props>
<p {...props}>Custom element</p>
<Button as="div">
Custom element
</Button>
## Field size
## Sizes
<Button size="md">Primary</Button>
<Button size="md" kind="secondary">Secondary</Button>
<Button size="md" kind="tertiary">Tertiary</Button>
<Button size="md" kind="ghost">Ghost</Button>
<Button size="md" kind="danger">Danger</Button>
Button is available in small, medium, large, extra-large, and double-extra-large.
Use `md` (default) when used with form fields.
## Small size
<Button size="sm">Primary</Button>
<Button size="sm" kind="secondary">Secondary</Button>
<Button size="sm" kind="tertiary">Tertiary</Button>
<Button size="sm" kind="ghost">Ghost</Button>
<Button size="sm" kind="danger">Danger</Button>
## Large size
<Button size="xl">Primary</Button>
<Button size="xl" kind="secondary">Secondary</Button>
<Button size="xl" kind="tertiary">Tertiary</Button>
<Button size="xl" kind="ghost">Ghost</Button>
<Button size="xl" kind="danger">Danger</Button>
## Extra-large size
<Button size="2xl">Primary</Button>
<Button size="2xl" kind="secondary">Secondary</Button>
<Button size="2xl" kind="tertiary">Tertiary</Button>
<Button size="2xl" kind="ghost">Ghost</Button>
<Button size="2xl" kind="danger">Danger</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
<Button size="2xl">Double extra Large</Button>
## Disabled state
@ -129,12 +108,6 @@ If an `href` value is specified, the component will render an [anchor element](h
Set `expressive` to `true` to use Carbon's expressive typesetting.
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
Expressive styles only work with the default, "lg", and "xl" button sizes.
</div>
</InlineNotification>
<Button expressive size="xl">Primary</Button>
<Button expressive size="xl" kind="secondary">Secondary</Button>
<Button expressive size="xl" kind="tertiary">Tertiary</Button>
@ -153,13 +126,19 @@ Set `expressive` to `true` to use Carbon's expressive typesetting.
<Button expressive kind="ghost">Ghost</Button>
<Button expressive kind="danger">Danger</Button>
## Additional attributes
Use `buttonAttributes` to pass any additional attributes.
<Button buttonAttributes={{class: 'ready'}}>Ready</Button>
## Skeleton
<Button size="xl" skeleton />
<Button size="lg" skeleton />
<Button skeleton />
<Button skeleton size="field" />
<Button skeleton size="small" />
<Button skeleton size="2xl" />
<Button skeleton size="xl" />
<Button skeleton size="lg" />
<Button skeleton size="md" />
<Button skeleton size="sm" />
## Programmatic focus

12
src/Button/Button.svelte
View file

@ -97,16 +97,8 @@
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 === "small" && "bx--btn--sm",
size === "xl" && "bx--btn--xl",
size === "2xl" && "bx--btn--2xl",
kind && `bx--btn--${kind}`,
`bx--layout--size-${size}`,
`bx--btn--${kind}`,
disabled && "bx--btn--disabled",
hasIconOnly && "bx--btn--icon-only",
hasIconOnly && "bx--tooltip__trigger",

22
src/Button/ButtonSkeleton.svelte
View file

@ -7,9 +7,9 @@
/**
* Specify the size of button skeleton
* @type {"default" | "field" | "small" | "lg" | "xl"}
* @type {"sm" | "md" | "lg" | "xl" | "2xl"}
*/
export let size = "default";
export let size = "lg";
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
@ -20,10 +20,11 @@
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:bx--layout--size-sm="{size === 'sm'}"
class:bx--layout--size-md="{size === 'md'}"
class:bx--layout--size-lg="{size === 'lg'}"
class:bx--layout--size-xl="{size === 'xl'}"
class:bx--layout--size-2xl="{size === '2xl'}"
{...$$restProps}
on:click
on:focus
@ -39,10 +40,11 @@
<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:bx--layout--size-sm="{size === 'sm'}"
class:bx--layout--size-md="{size === 'md'}"
class:bx--layout--size-lg="{size === 'lg'}"
class:bx--layout--size-xl="{size === 'xl'}"
class:bx--layout--size-2xl="{size === '2xl'}"
{...$$restProps}
on:click
on:focus

4
types/Button/ButtonSkeleton.svelte.d.ts vendored
View file

@ -12,9 +12,9 @@ export interface ButtonSkeletonProps extends RestProps {
/**
* Specify the size of button skeleton
* @default "default"
* @default "lg"
*/
size?: "default" | "field" | "small" | "lg" | "xl";
size?: "sm" | "md" | "lg" | "xl" | "2xl";
[key: `data-${string}`]: any;
}