mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
chore: adjust types
- Fix ButtonSkeleton sizes - Apply v11 `size` props
This commit is contained in:
Enrico Sacchetti
parent
c51c40c9f4
commit
a581231d16
7 changed files with 29 additions and 31 deletions
|
|
@ -376,7 +376,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
||||||
| :--------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :--------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
||||||
| kind | No | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
| kind | No | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
||||||
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg" | "xl" | "2xl"</code> | <code>"default"</code> | Specify the size of button |
|
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg" | "xl" | "2xl"</code> | <code>"lg"</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<any></code> | <code>undefined</code> | Specify the icon to render |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||||
|
|
@ -429,10 +429,10 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| 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 |
|
| 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" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button skeleton |
|
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg" | "xl" | "2xl"</code> | <code>"lg"</code> | Specify the size of button skeleton |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -466,7 +466,7 @@
|
||||||
"kind": "let",
|
"kind": "let",
|
||||||
"description": "Specify the size of button",
|
"description": "Specify the size of button",
|
||||||
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
|
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
|
||||||
"value": "\"default\"",
|
"value": "\"lg\"",
|
||||||
"isFunction": false,
|
"isFunction": false,
|
||||||
"isFunctionDeclaration": false,
|
"isFunctionDeclaration": false,
|
||||||
"isRequired": false,
|
"isRequired": false,
|
||||||
|
|
@ -704,8 +704,8 @@
|
||||||
"name": "size",
|
"name": "size",
|
||||||
"kind": "let",
|
"kind": "let",
|
||||||
"description": "Specify the size of button skeleton",
|
"description": "Specify the size of button skeleton",
|
||||||
"type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
|
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
|
||||||
"value": "\"default\"",
|
"value": "\"lg\"",
|
||||||
"isFunction": false,
|
"isFunction": false,
|
||||||
"isFunctionDeclaration": false,
|
"isFunctionDeclaration": false,
|
||||||
"isRequired": false,
|
"isRequired": false,
|
||||||
|
|
|
||||||
|
|
@ -134,11 +134,11 @@ Use `buttonAttributes` to pass any additional attributes.
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
<!-- <Button size="xl" skeleton />
|
<Button skeleton size="2xl" />
|
||||||
<Button size="lg" skeleton />
|
<Button skeleton size="xl" />
|
||||||
<Button skeleton />
|
<Button skeleton size="lg" />
|
||||||
<Button skeleton size="field" />
|
<Button skeleton size="md" />
|
||||||
<Button skeleton size="small" /> -->
|
<Button skeleton size="sm" />
|
||||||
|
|
||||||
## Programmatic focus
|
## Programmatic focus
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
* Specify the size of button
|
* Specify the size of button
|
||||||
* @type {"sm" | "md" | "lg" | "xl" | "2xl"}
|
* @type {"sm" | "md" | "lg" | "xl" | "2xl"}
|
||||||
*/
|
*/
|
||||||
export let size = "default";
|
export let size = "lg";
|
||||||
|
|
||||||
/** Set to `true` to use Carbon's expressive typesetting */
|
/** Set to `true` to use Carbon's expressive typesetting */
|
||||||
export let expressive = false;
|
export let expressive = false;
|
||||||
|
|
@ -97,10 +97,6 @@
|
||||||
class: [
|
class: [
|
||||||
"bx--btn",
|
"bx--btn",
|
||||||
expressive && "bx--btn--expressive",
|
expressive && "bx--btn--expressive",
|
||||||
((size === "small" && !expressive) ||
|
|
||||||
(size === "sm" && !expressive) ||
|
|
||||||
(size === "small" && !expressive)) &&
|
|
||||||
"bx--btn--sm",
|
|
||||||
`bx--layout--size-${size}`,
|
`bx--layout--size-${size}`,
|
||||||
`bx--btn--${kind}`,
|
`bx--btn--${kind}`,
|
||||||
disabled && "bx--btn--disabled",
|
disabled && "bx--btn--disabled",
|
||||||
|
|
|
||||||
|
|
@ -7,9 +7,9 @@
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specify the size of button skeleton
|
* 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>
|
</script>
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||||
|
|
@ -20,10 +20,11 @@
|
||||||
role="button"
|
role="button"
|
||||||
class:bx--skeleton="{true}"
|
class:bx--skeleton="{true}"
|
||||||
class:bx--btn="{true}"
|
class:bx--btn="{true}"
|
||||||
class:bx--btn--field="{size === 'field'}"
|
class:bx--layout--size-sm="{size === 'sm'}"
|
||||||
class:bx--btn--sm="{size === 'small'}"
|
class:bx--layout--size-md="{size === 'md'}"
|
||||||
class:bx--btn--lg="{size === 'lg'}"
|
class:bx--layout--size-lg="{size === 'lg'}"
|
||||||
class:bx--btn--xl="{size === 'xl'}"
|
class:bx--layout--size-xl="{size === 'xl'}"
|
||||||
|
class:bx--layout--size-2xl="{size === '2xl'}"
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
on:click
|
on:click
|
||||||
on:focus
|
on:focus
|
||||||
|
|
@ -39,10 +40,11 @@
|
||||||
<div
|
<div
|
||||||
class:bx--skeleton="{true}"
|
class:bx--skeleton="{true}"
|
||||||
class:bx--btn="{true}"
|
class:bx--btn="{true}"
|
||||||
class:bx--btn--field="{size === 'field'}"
|
class:bx--layout--size-sm="{size === 'sm'}"
|
||||||
class:bx--btn--sm="{size === 'small'}"
|
class:bx--layout--size-md="{size === 'md'}"
|
||||||
class:bx--btn--lg="{size === 'lg'}"
|
class:bx--layout--size-lg="{size === 'lg'}"
|
||||||
class:bx--btn--xl="{size === 'xl'}"
|
class:bx--layout--size-xl="{size === 'xl'}"
|
||||||
|
class:bx--layout--size-2xl="{size === '2xl'}"
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
on:click
|
on:click
|
||||||
on:focus
|
on:focus
|
||||||
|
|
|
||||||
2
types/Button/Button.svelte.d.ts
vendored
2
types/Button/Button.svelte.d.ts
vendored
|
|
@ -23,7 +23,7 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specify the size of button
|
* Specify the size of button
|
||||||
* @default "default"
|
* @default "lg"
|
||||||
*/
|
*/
|
||||||
size?: "sm" | "md" | "lg" | "xl" | "2xl";
|
size?: "sm" | "md" | "lg" | "xl" | "2xl";
|
||||||
|
|
||||||
|
|
|
||||||
4
types/Button/ButtonSkeleton.svelte.d.ts
vendored
4
types/Button/ButtonSkeleton.svelte.d.ts
vendored
|
|
@ -12,9 +12,9 @@ export interface ButtonSkeletonProps extends RestProps {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specify the size of button skeleton
|
* 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;
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue