fix: Correct <Button> semantics by not wrapping the content (#221)

refactor: simplify <Button>
This commit is contained in:
Kendell R 2024-01-12 16:58:32 -08:00 committed by GitHub
parent 599c7c2414
commit 1ad639d60f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 21 deletions

View File

@ -6,23 +6,21 @@
export let label = ''; export let label = '';
</script> </script>
<button on:click> {#if href}
{#if href} <a {href} {target} class={`button-${type}`} aria-label={label}>
<a {href} {target} {...$$restProps} class={`button-${type}`} aria-label={label}> {#if icon}
{#if icon} <img src="../icons/{icon}.svg" alt={icon} />
<img src="../icons/{icon}.svg" alt={icon} /> {/if}
{/if} <slot />
<slot /> </a>
</a> {:else}
{:else} <button on:click class={`button-${type}`} aria-label={label}>
<div {...$$restProps} class={`button-${type}`} aria-label={label}> {#if icon}
{#if icon} <img src="../icons/{icon}.svg" alt={icon} />
<img src="../icons/{icon}.svg" alt={icon} /> {/if}
{/if} <slot />
<slot /> </button>
</div> {/if}
{/if}
</button>
<style> <style>
button { button {
@ -33,7 +31,7 @@
} }
a, a,
div { button {
min-width: max-content; min-width: max-content;
font-size: 0.95rem; font-size: 0.95rem;
text-decoration: none; text-decoration: none;
@ -72,7 +70,7 @@
letter-spacing: 0.01rem; letter-spacing: 0.01rem;
} }
div:hover, button:hover,
a:hover { a:hover {
filter: brightness(85%); filter: brightness(85%);
} }

View File

@ -77,7 +77,6 @@
<Button <Button
type="text" type="text"
href={data.assets[0].browser_download_url} href={data.assets[0].browser_download_url}
download
on:click={() => (warningDialogue = false)}>Okay</Button on:click={() => (warningDialogue = false)}>Okay</Button
> >
</Query> </Query>
@ -100,7 +99,6 @@
type="filled" type="filled"
icon="download" icon="download"
href={data.assets[0].browser_download_url} href={data.assets[0].browser_download_url}
download
> >
{data.metadata.tag_name} {data.metadata.tag_name}
</Button> </Button>