mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 09:51:36 +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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
|
|
@ -429,10 +429,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" | "field" | "small" | "lg" | "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" | "md" | "lg" | "xl" | "2xl"</code> | <code>"lg"</code> | Specify the size of button skeleton |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -466,7 +466,7 @@
|
|||
"kind": "let",
|
||||
"description": "Specify the size of button",
|
||||
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
|
||||
"value": "\"default\"",
|
||||
"value": "\"lg\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -134,11 +134,11 @@ Use `buttonAttributes` to pass any additional attributes.
|
|||
|
||||
## 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
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
* Specify the size of button
|
||||
* @type {"sm" | "md" | "lg" | "xl" | "2xl"}
|
||||
*/
|
||||
export let size = "default";
|
||||
export let size = "lg";
|
||||
|
||||
/** Set to `true` to use Carbon's expressive typesetting */
|
||||
export let expressive = false;
|
||||
|
|
@ -97,10 +97,6 @@
|
|||
class: [
|
||||
"bx--btn",
|
||||
expressive && "bx--btn--expressive",
|
||||
((size === "small" && !expressive) ||
|
||||
(size === "sm" && !expressive) ||
|
||||
(size === "small" && !expressive)) &&
|
||||
"bx--btn--sm",
|
||||
`bx--layout--size-${size}`,
|
||||
`bx--btn--${kind}`,
|
||||
disabled && "bx--btn--disabled",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
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
|
||||
* @default "default"
|
||||
* @default "lg"
|
||||
*/
|
||||
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
|
||||
* @default "default"
|
||||
* @default "lg"
|
||||
*/
|
||||
size?: "default" | "field" | "small" | "lg" | "xl";
|
||||
size?: "sm" | "md" | "lg" | "xl" | "2xl";
|
||||
|
||||
[key: `data-${string}`]: any;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue