Use nldd-icon-button for the outgoing-post row actions #242
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "style/outbox-row-icon-buttons"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
The three outgoing-post actions - Bewerken, Verzend nu, Annuleren - appear twice, in
QueuedRowand inScheduledStrip, and the two copies had drifted apart:QueuedRow--semantics-content-secondary-colorScheduledStripQueuedRow's was not even square: a 16px icon plus 16px of horizontal padding exceeds the 28pxmin-width.Both are now
nldd-icon-button size="sm", so 32x32 in both places, measured. The rows grow accordingly - accepted deliberately, in favour of one reusable control over per-surface bespoke.22 lines of dead CSS go from
ScheduledStrip.QueuedRowkeeps.btn, which still serves its two labelled buttons ("Opnieuw", "Zet terug naar concept") - those are annldd-buttoncase, not an icon button, and are left for a separate step.Two things a mechanical swap would have got wrong
The danger hover.
.btnDanger:hoverturned the trash icon red, and a document-level rule cannot reach into a shadow root.variant="critical-transparent"would fix that but paints the trash red at rest, which it never was. Scoping the component's own--semantics-buttons-neutral-transparent-is-hovered-content-coloron the host keeps today's behaviour through a public token.The tests. Every selector in
QueuedRow.test.tswasbutton[title=...]orbutton[aria-label=...], and NLDD sets neither on the host. Two tests failed loudly; the ones asserting.toBe(false)would have stayed green while matching nothing at all. They now go through oneiconBtn()helper targetingnldd-icon-button[accessible-label^=...], with a comment saying why.ScheduledStriphas no spec at all, which is worth knowing.display: flexon the hosts for the same reason as in #236::hostisinline-blockand rendered the buttons 32x33.Verification
vue-tsc, eslint (0 errors), vitest 689 in 94 files,vite build. Box size and colour measured in Chromium on the built bundle: 32x32 on both surfaces, all icons on the same colour as the card rows.271ed8ddacff1ddc527dClosing: handled elsewhere, like #236 and #239.
What was in here: Bewerken, Verzend nu and Annuleren exist twice, in
QueuedRowandScheduledStrip, and the two copies had drifted to 32x28 (not even square - a 16px icon plus 16px padding exceeds the 28px min-width) and 26x26. Both went tonldd-icon-button size="sm", so 32x32 in both places, and 22 lines of dead CSS leftScheduledStrip.Two traps for whoever redoes it:
.btnDanger:hoverturned the trash red, and a document rule cannot reach a shadow root.critical-transparentfixes that but paints the trash red at rest, which it never was. Scoping the component's own--semantics-buttons-neutral-transparent-is-hovered-content-coloron the host keeps today's behaviour with a public token.QueuedRow.test.tswasbutton[title=...]orbutton[aria-label=...], and NLDD sets neither on the host. Two failed loudly; the ones asserting.toBe(false)would have stayed green while matching nothing. They need to targetnldd-icon-button[accessible-label^=...].ScheduledStriphas no spec at all.Also:
display: flexon the hosts, or:host { display: inline-block }renders them 32x33.Opgegaan in #245, samen met #236 en #239. De commit is ongewijzigd overgenomen; #245 wijzigt daarbovenop het icoon van 'Verzend nu' (media-forward-end in plaats van de terugdraaiende klok) en van 'Opnieuw' (arrow-clockwise in plaats van het sync-icoon).
Pull request closed