Skip to content

Commit

Permalink
fix(Button): fixed default loading jank
Browse files Browse the repository at this point in the history 
fix(Loader): stroke is now currentColor
docs(button): added examples, props, and slots tables
  • Loading branch information
Craig Howell authored and Craig Howell committed Oct 6, 2022
1 parent 6be091b commit c19dded
Show file tree
Hide file tree
Showing 6 changed files with 333 additions and 68 deletions.
7 changes: 3 additions & 4 deletions src/lib/components/button-group/Button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
export let active = false;
export let loading = false;
export let defaultLoading = true;
export let buttonLoaderColor = '#ffffff';
export let disabled = false;
useContext({
Expand Down Expand Up @@ -66,7 +65,7 @@
<slot name="leading" />
</svelte:fragment>
<svelte:fragment slot="off">
<ButtonLoader color={buttonLoaderColor} />
<ButtonLoader />
</svelte:fragment>
</Swap>
</div>
Expand All @@ -79,15 +78,15 @@
<slot name="icon" />
</svelte:fragment>
<svelte:fragment slot="off">
<ButtonLoader color={buttonLoaderColor} />
<ButtonLoader />
</svelte:fragment>
</Swap>
</div>
<slot />
<slot name="trailing" />
{:else if loading && defaultLoading && !$$slots.leading && !$$slots.icon}
<div transition:scale|local class="mr-2 flex justify-center items-center relative">
<ButtonLoader color={buttonLoaderColor} />
<ButtonLoader />
</div>
<slot />
<slot name="trailing" />
Expand Down
17 changes: 9 additions & 8 deletions src/lib/components/button-group/Loader.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
<script lang="ts">
export let color: string;
import { twMerge } from 'tailwind-merge';
const defaultClass = 'button-loader';
const finalClass = twMerge(defaultClass, $$props.class);
</script>

<svg
class="button-loader{$$props.class ? ` ${$$props.class}` : ''}"
viewBox="25 25 50 50"
stroke-width="5"
>
<circle class="background-circle" stroke={color} cx="50" cy="50" r="20" />
<circle class="animated" stroke={color} cx="50" cy="50" r="20" />
<svg class={finalClass} viewBox="25 25 50 50" stroke-width="5">
<circle class="background-circle" cx="50" cy="50" r="20" />
<circle class="animated" cx="50" cy="50" r="20" />
</svg>

<style>
Expand All @@ -30,9 +29,11 @@
.background-circle {
fill: none;
opacity: 0.25;
stroke: currentColor;
}
.animated {
fill: none;
stroke: currentColor;
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke-linecap: round;
Expand Down
90 changes: 49 additions & 41 deletions src/lib/components/button/Button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,20 +29,9 @@
| 'text'
| 'dark'
| undefined = undefined;
export let loaderColor: string | undefined = undefined;
export let shape: 'square' | 'circle' | 'rounded' | 'pill' = 'rounded';
export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'fab' = 'md';
const buttonLoaderColor = loaderColor
? loaderColor
: type === 'primary'
? '#ffffff'
: type === 'danger'
? '#ffffff'
: type === 'link'
? '#2563eb'
: '#000000';
setContext(BUTTON_CONTEXT_ID, {
button: true,
size
Expand Down Expand Up @@ -93,36 +82,55 @@
use:forwardEvents
{...exclude($$props, ['use', 'class'])}
>
{#if defaultLoading && $$slots.leading}
<div class="mr-2 flex justify-center items-center relative">
<Swap {loading}>
<svelte:fragment slot="on">
<slot name="leading" />
</svelte:fragment>
<svelte:fragment slot="off">
<ButtonLoader color={buttonLoaderColor} />
</svelte:fragment>
</Swap>
</div>
<slot />
<slot name="trailing" />
{:else if defaultLoading && $$slots.icon}
<div class="flex justify-center items-center relative">
<Swap {loading}>
<svelte:fragment slot="on">
<slot name="icon" />
</svelte:fragment>
<svelte:fragment slot="off">
<ButtonLoader color={buttonLoaderColor} />
</svelte:fragment>
</Swap>
</div>
<slot />
<slot name="trailing" />
{:else if loading && defaultLoading && !$$slots.leading && !$$slots.icon}
<div transition:scale|local class="mr-2 flex justify-center items-center relative">
<ButtonLoader color={buttonLoaderColor} />
</div>
{#if defaultLoading}
{#if $$slots.leading && $$slots.icon}
<div class="mr-2 flex justify-center items-center relative">
<Swap {loading}>
<svelte:fragment slot="on">
<slot name="leading" />
</svelte:fragment>
<svelte:fragment slot="off">
<ButtonLoader />
</svelte:fragment>
</Swap>
</div>
<div class="flex justify-center items-center relative">
<Swap {loading}>
<svelte:fragment slot="on">
<slot name="icon" />
</svelte:fragment>
<svelte:fragment slot="off">
<ButtonLoader />
</svelte:fragment>
</Swap>
</div>
{:else if $$slots.leading}
<div class="mr-2 flex justify-center items-center relative">
<Swap {loading}>
<svelte:fragment slot="on">
<slot name="leading" />
</svelte:fragment>
<svelte:fragment slot="off">
<ButtonLoader />
</svelte:fragment>
</Swap>
</div>
{:else if $$slots.icon}
<div class="flex justify-center items-center relative">
<Swap {loading}>
<svelte:fragment slot="on">
<slot name="icon" />
</svelte:fragment>
<svelte:fragment slot="off">
<ButtonLoader />
</svelte:fragment>
</Swap>
</div>
{:else if loading}
<div transition:scale|local class="mr-2 flex justify-center items-center relative">
<ButtonLoader />
</div>
{/if}
<slot />
<slot name="trailing" />
{:else}
Expand Down
17 changes: 9 additions & 8 deletions src/lib/components/button/Loader.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
<script lang="ts">
export let color: string;
import { twMerge } from 'tailwind-merge';
const defaultClass = 'button-loader';
const finalClass = twMerge(defaultClass, $$props.class);
</script>

<svg
class="button-loader{$$props.class ? ` ${$$props.class}` : ''}"
viewBox="25 25 50 50"
stroke-width="5"
>
<circle class="background-circle" stroke={color} cx="50" cy="50" r="20" />
<circle class="animated" stroke={color} cx="50" cy="50" r="20" />
<svg class={finalClass} viewBox="25 25 50 50" stroke-width="5">
<circle class="background-circle" cx="50" cy="50" r="20" />
<circle class="animated" cx="50" cy="50" r="20" />
</svg>

<style>
Expand All @@ -30,9 +29,11 @@
.background-circle {
fill: none;
opacity: 0.25;
stroke: currentColor;
}
.animated {
fill: none;
stroke: currentColor;
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke-linecap: round;
Expand Down
82 changes: 75 additions & 7 deletions src/routes/button/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,22 @@
<script lang="ts">
import { Button, Card, Col, Icon, Swap } from '../../lib';
import CodeBlock from '../../docs/components/code-block';
import {
exampleDefault,
exampleLoading,
exampleDisabled,
exampleLeadingTrailing,
exampleShape,
exampleSwap,
props,
slots,
leadingTrailingIconSlots,
iconProps
} from './examples';
import { PropsTable, SlotsTable } from '../../docs';
let loading = false;
function handleClick() {
console.log('button clicked!');
}
function toggleLoading() {
loading = !loading;
}
Expand All @@ -16,7 +26,7 @@
<Card bordered>
<Card.Header slot="header">Basic</Card.Header>
<Card.Content slot="content" class="p-4">
<Button on:click={handleClick}>Default button</Button>
<Button on:click={() => console.log("I've been clicked!")}>Default button</Button>

<Button type="primary">I am primary</Button>

Expand All @@ -25,6 +35,11 @@
<Button type="ghost">Boo I am a ghost</Button>

<Button type="link">I am a link</Button>

<br />
<br />

<CodeBlock language="typescript" code={exampleDefault} />
</Card.Content>
</Card>
</Col>
Expand All @@ -42,6 +57,11 @@
<Button type="ghost" loading>Boo I am a ghost</Button>

<Button type="link" loading>I am a link</Button>

<br />
<br />

<CodeBlock language="typescript" code={exampleLoading} />
</Card.Content>
</Card>
</Col>
Expand All @@ -59,6 +79,11 @@
<Button type="ghost" disabled>Boo I am a ghost</Button>

<Button type="link" disabled>I am a link</Button>

<br />
<br />

<CodeBlock language="typescript" code={exampleDisabled} />
</Card.Content>
</Card>
</Col>
Expand Down Expand Up @@ -100,6 +125,11 @@
<Button.Trailing.Icon icon="paid" />
</Button.Trailing>
</Button>

<br />
<br />

<CodeBlock language="typescript" code={exampleLeadingTrailing} />
</Card.Content>
</Card>
</Col>
Expand All @@ -119,6 +149,11 @@
<Button type="ghost">Boo I am a ghost</Button>

<Button type="link">I am a link</Button>

<br />
<br />

<CodeBlock language="typescript" code={exampleShape} />
</Card.Content>
</Card>
</Col>
Expand All @@ -141,8 +176,13 @@
<Icon slot="off" icon="close" />
</Swap>
</Button.Leading>
I am primary</Button
>
I am primary
</Button>

<br />
<br />

<CodeBlock language="typescript" code={exampleSwap} />
</Card.Content>
</Card>
</Col>
Expand Down Expand Up @@ -214,3 +254,31 @@
</Card.Content>
</Card>
</Col>

<Col class="col-24">
<PropsTable component="Button" {props} />
</Col>

<Col class="col-24">
<SlotsTable component="Button" {slots} />
</Col>

<Col class="col-24">
<SlotsTable component="Button.Leading" slots={leadingTrailingIconSlots} />
</Col>

<Col class="col-24">
<PropsTable component="Button.Leading.Icon" props={iconProps} />
</Col>

<Col class="col-24">
<PropsTable component="Button.Icon" props={iconProps} />
</Col>

<Col class="col-24">
<SlotsTable component="Button.Trailing" slots={leadingTrailingIconSlots} />
</Col>

<Col class="col-24">
<PropsTable component="Button.Trailing.Icon" props={iconProps} />
</Col>
Loading

1 comment on commit c19dded

@vercel
Copy link

@vercel vercel bot commented on c19dded Oct 6, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

stwui – ./

stwui.vercel.app
stwui-n00nday.vercel.app
stwui-git-main-n00nday.vercel.app

Please sign in to comment.