gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-24 05:29:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Kiril Videlov 2023-03-28 16:20:07 +02:00
parent ac7d613127
commit 9679073710
3 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/ButtonGroup.svelte
View File

@ -17,13 +17,13 @@
</div> </div>
{:else} {:else}
<div class="flex"> <div class="flex">
<button class="joined-base border-l border-t border-b rounded-l-lg" on:click={leftAction}> <button class="joined-base rounded-l-lg border-l border-t border-b" on:click={leftAction}>
<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{leftLabel}</span> <span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{leftLabel}</span>
</button> </button>
<button class="joined-base border" on:click={middleAction}> <button class="joined-base border" on:click={middleAction}>
<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{middleLabel}</span> <span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{middleLabel}</span>
</button> </button>
<button class="joined-base border-r border-t border-b rounded-r-lg" on:click={rightAction}> <button class="joined-base rounded-r-lg border-r border-t border-b" on:click={rightAction}>
<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{rightLabel}</span> <span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{rightLabel}</span>
</button> </button>
</div> </div>

1
src/stories/Button.stories.ts
View File

@ -61,7 +61,6 @@ export const PrimarySmallWide: Story = {
} }
}; };
export const PrimaryFilledSmall: Story = { export const PrimaryFilledSmall: Story = {
args: { args: {
primary: true, primary: true,

30
src/stories/ButtonGroup.stories.ts
View File

@ -8,9 +8,9 @@ const meta: Meta<ButtonGroup> = {
component: ButtonGroup, component: ButtonGroup,
tags: ['autodocs'], tags: ['autodocs'],
argTypes: { argTypes: {
leftLabel: { control: 'text' }, leftLabel: { control: 'text' },
rightLabel: { control: 'text' }, rightLabel: { control: 'text' },
middleLabel: { control: 'text' }, middleLabel: { control: 'text' }
} }
}; };
@ -19,32 +19,32 @@ type Story = StoryObj<ButtonGroup>;
export const TwoButtons: Story = { export const TwoButtons: Story = {
args: { args: {
leftLabel: 'Cancel', leftLabel: 'Cancel',
rightLabel: 'Submit', rightLabel: 'Submit'
} }
}; };
export const TwoButtonsWide: Story = { export const TwoButtonsWide: Story = {
args: { args: {
leftLabel: 'Cancel', leftLabel: 'Cancel',
rightLabel: 'Submit', rightLabel: 'Submit',
wide: true, wide: true
} }
}; };
export const ThreeButtons: Story = { export const ThreeButtons: Story = {
args: { args: {
leftLabel: 'Left', leftLabel: 'Left',
middleLabel: 'Middle', middleLabel: 'Middle',
rightLabel: 'Right', rightLabel: 'Right'
} }
}; };
export const ThreeButtonsWide: Story = { export const ThreeButtonsWide: Story = {
args: { args: {
leftLabel: 'Left', leftLabel: 'Left',
middleLabel: 'Middle', middleLabel: 'Middle',
rightLabel: 'Right', rightLabel: 'Right',
wide: true, wide: true
} }
}; };