mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-11-24 05:29:51 +03:00
button component can be wide
This commit is contained in:
parent
74ddc05509
commit
cb3432292d
@ -2,6 +2,7 @@
|
|||||||
export let primary = false;
|
export let primary = false;
|
||||||
export let filled = true;
|
export let filled = true;
|
||||||
export let small = false;
|
export let small = false;
|
||||||
|
export let wide = false;
|
||||||
export let label: string;
|
export let label: string;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -34,7 +35,8 @@ And the following optional props:
|
|||||||
: filled
|
: filled
|
||||||
? 'default-filled'
|
? 'default-filled'
|
||||||
: 'default-nofill'}
|
: 'default-nofill'}
|
||||||
{small ? 'size-small' : 'size-normal'}
|
{small ? 'short' : ''}
|
||||||
|
{wide ? 'wide' : ''}
|
||||||
"
|
"
|
||||||
type="button"
|
type="button"
|
||||||
on:click
|
on:click
|
||||||
@ -98,4 +100,7 @@ And the following optional props:
|
|||||||
.size-small {
|
.size-small {
|
||||||
@apply px-2 py-1;
|
@apply px-2 py-1;
|
||||||
}
|
}
|
||||||
|
.wide {
|
||||||
|
width: 119.5px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -40,6 +40,24 @@ export const PrimarySmall: Story = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const PrimaryWide: Story = {
|
||||||
|
args: {
|
||||||
|
primary: true,
|
||||||
|
wide: true,
|
||||||
|
label: 'Button'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const PrimarySmallWide: Story = {
|
||||||
|
args: {
|
||||||
|
primary: true,
|
||||||
|
wide: true,
|
||||||
|
small: true,
|
||||||
|
label: 'Button'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
export const PrimaryFilledSmall: Story = {
|
export const PrimaryFilledSmall: Story = {
|
||||||
args: {
|
args: {
|
||||||
primary: true,
|
primary: true,
|
||||||
|
Loading…
Reference in New Issue
Block a user