Replace the compact "Add" buttons with a plus icon
The kanban column, sidebar inbox, and add-status forms all had their
own "Add" submit button; with a column-per-status now, that's a lot of
identical labels on screen at once. Replaced with a small square "+"
icon button (.btn-icon), each keeping a descriptive title + aria-label
(dynamic, so it reads "Adding…" while the request is in flight) since
the visible glyph alone isn't an accessible name.
.btn-icon is excluded (":not(.btn-icon)") from the generic submit
button rule and the .field-row/.kanban__new compact-button overrides,
rather than out-specificity'd -- same reasoning as .field's low
specificity against input:focus: it shouldn't depend on source order
which one wins. .kanban__new's own override is now dead (both of its
two buttons are icons) and removed outright.
Left the "Add card" button on the "All tasks" tab as text -- it's a
lone, full-width primary action in a larger form, not one of several
compact icon-sized ones crowded together.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -252,9 +252,13 @@ async function onCreateInColumn(column: Column) {
|
||||
placeholder="New card"
|
||||
:aria-label="`New card in ${column.title}`"
|
||||
/>
|
||||
<button type="submit" :disabled="addingToStatusId === column.statusId">
|
||||
{{ addingToStatusId === column.statusId ? 'Adding…' : 'Add' }}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn-icon"
|
||||
:disabled="addingToStatusId === column.statusId"
|
||||
:title="addingToStatusId === column.statusId ? 'Adding…' : `Add card to ${column.title}`"
|
||||
:aria-label="addingToStatusId === column.statusId ? 'Adding…' : `Add card to ${column.title}`"
|
||||
>+</button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user