colin
/
sticky-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve NoteTags component semantics

This commit is contained in:
Dallas Hoffman 2023-09-22 00:07:38 -04:00
parent 68ac26e991
commit c3ee1f807a
No known key found for this signature in database
1 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/lib/components/notes/note-tags.svelte
View File

@ -26,23 +26,32 @@
</script>
<div class="note-tags">
{#each $noteTags as tag (tag.id)}
<div class="note-tags__tag">
{tag.label}
<Button
plain
icon
size="sm"
label="Remove tag"
tooltipPlacement={null}
on:click={() => removeTag(tag.id)}
>
<FaXmark />
</Button>
</div>
{/each}
<ul class="note-tags__tag-list" aria-label="Note tags">
{#each $noteTags as tag (tag.id)}
<li class="note-tags__tag">
{tag.label}
<Button
plain
icon
size="sm"
label="Remove tag"
tooltipPlacement={null}
on:click={() => removeTag(tag.id)}
>
<FaXmark />
</Button>
</li>
{/each}
</ul>
<div class="note-tags__textbox" data-tooltip="Add tag">
<input type="text" bind:this={textbox} bind:value={newTagLabel} on:keypress={addTag} />
<input
type="text"
bind:this={textbox}
name="newTag"
aria-label="New tag"
bind:value={newTagLabel}
on:keypress={addTag}
/>
</div>
</div>
@ -55,6 +64,16 @@
padding: 0.4rem 0.75rem;
border-bottom: 1px solid hsl(0 0% 0% / 0.15);
&__tag-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem;
margin: 0;
padding: 0;
color: inherit;
}
&__tag,
&__textbox input {
font-size: 1rem;