| kostajh | |
| May 25 2025, 7:14 PM |
| F60897129: image.png | |
| May 30 2025, 4:04 PM |
The existing icon button uses OOUI's ButtonWidget to display the icon button. This is difficult to scale down to 16px. Convert this to use a Codex CSS / HTML button instead.
| Subject | Author | Repo | Branch | Lines +/- | |
|---|---|---|---|---|---|
| UserInfoCard: Use Codex styles for button instead of OOUI | Eric Gardner | mediawiki/extensions/CheckUser | master | +60 -33 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | KColeman-WMF | T384725 [Epic] WE4.2.18 UserInfoCard experiment for assisting patrollers and moderators | |||
| Resolved | Mimurawil | T395210 UserInfoCard: Convert icon button to use Codex CSS style, 16px x 16px size |
Change #1149730 had a related patch set uploaded (by Kosta Harlan; author: Eric Gardner):
[mediawiki/extensions/CheckUser@master] [WIP] User info card: Use Codex instead of OOUI
Hi @Mimurawil and @kostajh - I've just been talking to the DST designer about the icon size.
The latest small button design sets the icon at 14px when displayed in small font size mode. Recent changes is always set to small font size mode, therefore it makes sense to me that the icon should in fact be 14px on this page, not 16px.
However, if the icon (and popover) displays on pages where the 2 other font size modes are available, it will need to scale up accordingly.
The following mock-up uses a 14px icon set within a 24px small icon button (figma):
The icon will use design token color-subtle rather than blue, as this is less overwhelming.
Hi @Mimurawil and @kostajh - I've just been talking to the DST designer about the icon size.
The latest small button design sets the icon at 14px when displayed in small font size mode. Recent changes is always set to small font size mode, therefore it makes sense to me that the icon should in fact be 14px on this page, not 16px.
However, if the icon (and popover) displays on pages where the 2 other font size modes are available, it will need to scale up accordingly.
The following mock-up uses a 14px icon set within a 24px small icon button (figma):
The icon will use design token color-subtle rather than blue, as this is less overwhelming.
Thanks @KColeman-WMF! I believe I applied those styles in this patch. I found the design tokens in this Figma, so it was easy to match the proper styles in the code. I'm investigating a failed build now, but I'll have the patch ready as soon as I fix it.
Change #1149730 merged by jenkins-bot:
[mediawiki/extensions/CheckUser@master] UserInfoCard: Use Codex styles for button instead of OOUI
Change #1163024 had a related patch set uploaded (by Kosta Harlan; author: Kosta Harlan):
[mediawiki/extensions/CheckUser@master] UserInfoCard: Apply small margin after button