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

View File

@ -17,13 +17,13 @@
</div>
{:else}
<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>
</button>
<button class="joined-base border" on:click={middleAction}>
<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{middleLabel}</span>
</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>
</button>
</div>

View File

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

View File

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