Use nldd-icon-button for the card-detail modal source link #239

Closed

robbertbos wants to merge 1 commit from style/modal-header-icon-button into main

pull from: style/modal-header-icon-button

merge into: robbertbos:main

robbertbos:main

robbertbos:renovate/major-npm-dev

robbertbos:renovate/ci

robbertbos:renovate/python

robbertbos:staging-ingress-docs

robbertbos:renovate/nldd

robbertbos:worktree-text-editor-verbeteren

Conversation 2 Commits 1 Files changed 1 +5 -28

robbertbos commented 2026-08-06 14:01:40 +00:00

Owner

Copy link

The card-detail modal header held two controls at very different sizes.

	Box	Icon	Hover	Cursor
Close (Modal.vue)	44x44	24px	none	arrow
"Open in Mattermost"	24x24	16px	grey plate	hand

Modal.vue:85 renders the close button as an nldd-icon-button with no size, so it gets NLDD's md default. The source link was hand-rolled with its own box, its own hover rule and its own colour.

The swap

nldd-icon-button supplies all of it, so the 15 lines of .iconButton CSS go with it. No size attribute, matching the close button: both land on md, the header stays 60px, and NLDD uses neutral-transparent at md for a panel dismissal in its own components (banner, just-in-time-education).

:rel and :title fall away - the component sets rel="noopener noreferrer" under target="_blank" and renders its own tooltip from the accessible label.

If you want them smaller instead

size="sm" on both would make the header 49px instead of 60px, but that shrinks it in Sneltoetsen, RecoveryKey and ComposeOverlay too, since they share Modal.vue. Worth deciding deliberately rather than as a side effect; not done here.

Verification

vue-tsc, eslint (0 errors), vitest 691 in 94 files, vite build.

The card-detail modal header held two controls at very different sizes. | | Box | Icon | Hover | Cursor | |---|---|---|---|---| | Close (`Modal.vue`) | 44x44 | 24px | none | arrow | | "Open in Mattermost" | 24x24 | 16px | grey plate | hand | `Modal.vue:85` renders the close button as an `nldd-icon-button` with no `size`, so it gets NLDD's `md` default. The source link was hand-rolled with its own box, its own hover rule and its own colour. ## The swap `nldd-icon-button` supplies all of it, so the 15 lines of `.iconButton` CSS go with it. **No `size` attribute**, matching the close button: both land on `md`, the header stays 60px, and NLDD uses `neutral-transparent` at `md` for a panel dismissal in its own components (`banner`, `just-in-time-education`). `:rel` and `:title` fall away - the component sets `rel="noopener noreferrer"` under `target="_blank"` and renders its own tooltip from the accessible label. ## If you want them smaller instead `size="sm"` on **both** would make the header 49px instead of 60px, but that shrinks it in Sneltoetsen, RecoveryKey and ComposeOverlay too, since they share `Modal.vue`. Worth deciding deliberately rather than as a side effect; not done here. ## Verification `vue-tsc`, eslint (0 errors), vitest 691 in 94 files, `vite build`.

robbertbos added 1 commit 2026-08-06 14:01:40 +00:00

Use nldd-icon-button for the card-detail modal source link ... 25179d5d52

The modal header held two controls at very different sizes: Modal.vue's close
button is an nldd-icon-button with no size, so NLDD's md default (44x44, 24px
icon), while the "Open in Mattermost" link beside it was hand-rolled at 24x24
with a 16px icon. It was also the only one of the two with a hover plate, and
the only one taking the link cursor.

The component supplies all of it, so 15 lines of CSS go with the swap. No size
attribute, matching the close button: both land on md, the header stays 60px,
and NLDD uses neutral-transparent on md for a panel dismissal itself.

:rel and :title fall away - the component sets rel="noopener noreferrer" under
target="_blank" and renders its own tooltip from the accessible label.

robbertbos force-pushed style/modal-header-icon-button from 25179d5d52 to 73a30f3fba 2026-08-06 18:20:59 +00:00 Compare

robbertbos commented 2026-08-06 18:24:28 +00:00

Author

Owner

Copy link

Closing: this is being handled elsewhere, like #236.

What was in here: the card-detail modal header had two controls at very different sizes. Modal.vue's close button is an nldd-icon-button with no size, so NLDD's md default (44x44, 24px icon); the "Open in Mattermost" link beside it was hand-rolled at 24x24 with a 16px icon, and it was the only one of the two with a hover plate and the link cursor.

The change made it an nldd-icon-button with no size attribute, matching the close button, and dropped the 15 lines of .iconButton CSS. :rel and :title fall away because the component sets rel="noopener noreferrer" under target="_blank" and renders its own tooltip from the accessible label.

One thing to decide if you want them smaller instead: size="sm" on both makes the header 49px instead of 60px, but Modal.vue is shared, so that also shrinks Sneltoetsen, RecoveryKey and ComposeOverlay. Worth deciding deliberately rather than as a side effect.

Closing: this is being handled elsewhere, like #236. What was in here: the card-detail modal header had two controls at very different sizes. `Modal.vue`'s close button is an `nldd-icon-button` with no `size`, so NLDD's `md` default (44x44, 24px icon); the "Open in Mattermost" link beside it was hand-rolled at 24x24 with a 16px icon, and it was the only one of the two with a hover plate and the link cursor. The change made it an `nldd-icon-button` with **no size attribute**, matching the close button, and dropped the 15 lines of `.iconButton` CSS. `:rel` and `:title` fall away because the component sets `rel="noopener noreferrer"` under `target="_blank"` and renders its own tooltip from the accessible label. One thing to decide if you want them smaller instead: `size="sm"` on **both** makes the header 49px instead of 60px, but `Modal.vue` is shared, so that also shrinks Sneltoetsen, RecoveryKey and ComposeOverlay. Worth deciding deliberately rather than as a side effect.

robbertbos closed this pull request 2026-08-06 18:24:28 +00:00

robbertbos referenced this pull request 2026-08-06 18:24:47 +00:00

Use nldd-icon-button for the outgoing-post row actions #242

robbertbos referenced this pull request 2026-08-06 19:49:58 +00:00

NLDD icon buttons, and an icon per concept that exists and means it #245

robbertbos referenced this pull request 2026-08-06 19:50:09 +00:00

Use nldd-icon-button and nldd-activity-indicator for the card actions #236

robbertbos commented 2026-08-06 19:50:17 +00:00

Author

Owner

Copy link

Opgegaan in #245, samen met #236 en #242. De commit is ongewijzigd overgenomen.

Opgegaan in #245, samen met #236 en #242. De commit is ongewijzigd overgenomen.

robbertbos referenced this pull request 2026-08-06 19:50:19 +00:00

Use nldd-icon-button for the outgoing-post row actions #242

All checks were successful

Hide all checks

CI / release-scripts (pull_request) Successful in 9s

Required

Details

security-scan / Filesystem scan (trivy fs) (pull_request) Successful in 22s

Required

Details

security-scan / Python SAST (bandit) (pull_request) Successful in 33s

Required

Details

security-scan / JS SCA (npm audit) (pull_request) Successful in 27s

Required

Details

security-scan / SBOM (trivy) (pull_request) Successful in 14s

Required

Details

CI / pre-commit (pull_request) Successful in 46s

Required

Details

security-scan / Python SCA (pip-audit) (pull_request) Successful in 52s

Required

Details

CI / frontend-test (pull_request) Successful in 1m31s

Required

Details

test-build / build (backend) (pull_request) Successful in 1m3s

Details

test-build / build (frontend) (pull_request) Successful in 1m7s

Details

test-build / build (pull_request) Successful in 0s

Details

CI / backend-test (pull_request) Successful in 2m25s

Required

Details

CI / e2e (pull_request) Successful in 4m22s

Required

Details

Pull request closed

This pull request cannot be reopened because the branch was deleted.

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

bug

Something is not working

  

duplicate

This issue or pull request already exists

  

enhancement

New feature

  

help wanted

Need some help

  

invalid

Something is wrong

  

nldd ds

  

question

More information is needed

  

wontfix

This won't be fixed

No labels

bug

duplicate

enhancement

help wanted

invalid

nldd ds

question

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

robbertbos/waggle!239

No description provided.