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> </script>
<div class="note-tags"> <div class="note-tags">
{#each $noteTags as tag (tag.id)} <ul class="note-tags__tag-list" aria-label="Note tags">
<div class="note-tags__tag"> {#each $noteTags as tag (tag.id)}
{tag.label} <li class="note-tags__tag">
<Button {tag.label}
plain <Button
icon plain
size="sm" icon
label="Remove tag" size="sm"
tooltipPlacement={null} label="Remove tag"
on:click={() => removeTag(tag.id)} tooltipPlacement={null}
> on:click={() => removeTag(tag.id)}
<FaXmark /> >
</Button> <FaXmark />
</div> </Button>
{/each} </li>
{/each}
</ul>
<div class="note-tags__textbox" data-tooltip="Add tag"> <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>
</div> </div>
@ -55,6 +64,16 @@
padding: 0.4rem 0.75rem; padding: 0.4rem 0.75rem;
border-bottom: 1px solid hsl(0 0% 0% / 0.15); 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, &__tag,
&__textbox input { &__textbox input {
font-size: 1rem; font-size: 1rem;