mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-10-26 13:12:25 +03:00
support buttons with icons
This commit is contained in:
parent
b514bb4400
commit
f56362929e
@ -13,7 +13,7 @@
|
||||
class="button-home group cursor-default rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200"
|
||||
href="/"
|
||||
>
|
||||
<IconHome class="group-hover:fill-zinc-300 group-hover:text-zinc-200" />
|
||||
<IconHome class="hover:fill-zinc-300 hover:text-zinc-200" />
|
||||
</a>
|
||||
|
||||
{#if $project}
|
||||
|
@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Meta, Story } from '@storybook/addon-svelte-csf';
|
||||
import { IconHome } from '../icons';
|
||||
|
||||
import Button from './Button.svelte';
|
||||
|
||||
@ -12,6 +13,31 @@
|
||||
<Button on:click={() => count++} label="You clicked: {count}" />
|
||||
</Story>
|
||||
|
||||
<Story name="Basic With Icon">
|
||||
<Button on:click={() => count++} label="You clicked: {count}">
|
||||
<svelte:fragment slot="icon">
|
||||
<IconHome />
|
||||
</svelte:fragment>
|
||||
</Button>
|
||||
</Story>
|
||||
|
||||
<Story name="Small With Icon">
|
||||
<Button on:click={() => count++} label="You clicked: {count}" small>
|
||||
<svelte:fragment slot="icon">
|
||||
<IconHome />
|
||||
</svelte:fragment>
|
||||
</Button>
|
||||
</Story>
|
||||
|
||||
<Story name="Wide With Icon">
|
||||
<Button on:click={() => count++} label="You clicked: {count}" wide>
|
||||
<svelte:fragment slot="icon">
|
||||
<IconHome />
|
||||
</svelte:fragment>
|
||||
</Button>
|
||||
</Story>
|
||||
|
||||
|
||||
<Story name="Basic Outlined">
|
||||
<Button on:click={() => count++} label="You clicked: {count}" outlined />
|
||||
</Story>
|
||||
@ -43,3 +69,7 @@
|
||||
<Story name="Primary Outlined Small">
|
||||
<Button on:click={() => count++} label="You clicked: {count}" primary outlined small />
|
||||
</Story>
|
||||
|
||||
<Story name="Link button">
|
||||
<Button href="https://gitbutler.com" label="GitButler" />
|
||||
</Story>
|
||||
|
@ -62,19 +62,28 @@ And the following optional props:
|
||||
class:btn-width-normal={wide}
|
||||
class:btn-width-small={!wide}
|
||||
>
|
||||
{#if $$slots.icon}
|
||||
<div class="icon">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
{/if}
|
||||
{label}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<style lang="postcss">
|
||||
.icon {
|
||||
@apply h-4 w-4 text-zinc-50;
|
||||
}
|
||||
|
||||
.btn-base {
|
||||
@apply flex items-center justify-center rounded text-base text-zinc-50 shadow transition ease-in-out;
|
||||
@apply flex w-fit items-center justify-center gap-2 whitespace-nowrap rounded text-base text-zinc-50 shadow transition ease-in-out;
|
||||
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-left: 1px solid rgba(255, 255, 255, 0);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0);
|
||||
text-shadow: 0px 2px #00000021;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-disabled {
|
||||
|
@ -5,15 +5,15 @@
|
||||
|
||||
<svg
|
||||
class={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.5547 0.16795C7.2188 -0.0559832 6.7812 -0.0559832 6.4453 0.16795L0.8906 3.87108C0.334202 4.24201 0 4.86648 0 5.53518V12C0 13.1046 0.895431 14 2 14H4C4.55228 14 5 13.5523 5 13V9H9V13C9 13.5523 9.44771 14 10 14H12C13.1046 14 14 13.1046 14 12V5.53518C14 4.86648 13.6658 4.24202 13.1094 3.87108L7.5547 0.16795Z"
|
||||
fill="#5C5F62"
|
||||
class={className}
|
||||
stroke-width="0"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
Loading…
Reference in New Issue
Block a user