Page MenuHomePhabricator

EditCheck + Suggestions: Update footer styles
Closed, ResolvedPublic

Description

As flagged in T424203#11934833, the footer text in Edit Check + Suggestions should include the following:

  • cdxIconRobot in icon-size-small
  • Footer text size should be font-size-x-small (12px on Vector22, 14px on Minerva)
  • 6px padding between icon and text

image.png (714×584 px, 130 KB)

Event Timeline

Change #1289377 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/VisualEditor@master] EditCheckActionWidget: support setting an icon next to the footer

https://gerrit.wikimedia.org/r/1289377

Change #1289377 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] EditCheckActionWidget: support setting an icon next to the footer

https://gerrit.wikimedia.org/r/1289377

bmartinezcalvo updated the task description. (Show Details)
El T426770#11942935, @DLynch escribió:

@DLynch the footer is not following all requirements from the task:

  • cdxIconRobot in icon-size-small
  • Footer text size should be font-size-small (12px on Vector22, 14px on Minerva)
  • 6px padding between icon and text

Reopening the task to fix the remaining fixes neeed.

Footer text size should be font-size-small (12px on Vector22, 14px on Minerva)

It is currently using font-size-small.

CleanShot 2026-05-21 at 08.00.30@2x.png (498×562 px, 65 KB)

6px padding between icon and text

This wasn't a requirement in the task before you reopened it, but I can tweak the margins. It's a bit of a pain because we're resizing an OOUI icon which doesn't really support that.

Change #1290762 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/VisualEditor@master] EditCheckActionWidget: make the footer icon size independent of page font

https://gerrit.wikimedia.org/r/1290762

Icon spacing issue was that icon-size-small reacts to the vector appearance menu's content-size setting, and the rest of this widget does not. Spacing was fine when that was set to small (which is where I leave it locally), but at standard/large it looked off. I changed the token used to get an equivalent size across all settings.

El T426770#11944756, @DLynch escribió:

Footer text size should be font-size-small (12px on Vector22, 14px on Minerva)

It is currently using font-size-small.

CleanShot 2026-05-21 at 08.00.30@2x.png (498×562 px, 65 KB)

Both description and footer text are currently using 14px. The footer text should be 12px instead.

Captura de pantalla 2026-05-21 a las 16.54.39.png (866×734 px, 155 KB)
Captura de pantalla 2026-05-21 a las 16.54.52.png (632×516 px, 72 KB)
descriptionfooter text

Ah, the joys of the token life. Since using the token isn't giving it the size you want, fixing this one might involve either ignoring the token or doing a bunch of digging into the CSS stack.

In this context, the font-size on that element is set to use @font-size-small, which correctly evaluates to 0.875rem (per codex), which in this document becomes 14px. I cannot say exactly why that isn't the 12px you specify, but that isn't the token-meaning so it does make sense.

CleanShot 2026-05-21 at 10.54.09@2x.png (630×128 px, 26 KB)

Separately, all text inside the VE UI is set to font-size: 0.875rem in vector 2022 (hardcoded, not with the font-size token), to stop its appearance-menu scaling from making the UI fluctuate wildly. (See: T373875.)

So, I think that gets us back to: if you want the footer text to be smaller (or the main label size to be larger) I can make that happen, but I don't think I can do it by using the codex token as-specified.

Next step(s)

  • @bmartinezcalvo to talk with Derek to understand what might explain token producing an unexpected font size

The only thing that would automatically change the value of a font-size token is the usage of Codex font modes, which haven't actually been implemented in any skin. To my knowledge, Minerva doesn't actually use Codex font-size tokens, but someone please correct me if I'm wrong. All that to be said, using font-size-small is going to result in the font-size of an element being 14px. If you want the font-size to be 12px, the Codex token font-size-x-small should be used.

The only thing that would automatically change the value of a font-size token is the usage of Codex font modes, which haven't actually been implemented in any skin. To my knowledge, Minerva doesn't actually use Codex font-size tokens, but someone please correct me if I'm wrong. All that to be said, using font-size-small is going to result in the font-size of an element being 14px. If you want the font-size to be 12px, the Codex token font-size-x-small should be used.

@DLynch the footer text should be font-size-x-small instead.

Change #1292030 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/VisualEditor@master] EditCheckActionWidget: lower footer font size to x-small

https://gerrit.wikimedia.org/r/1292030

Change #1290762 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] EditCheckActionWidget: make the footer icon size independent of page font

https://gerrit.wikimedia.org/r/1290762

Change #1292030 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] EditCheckActionWidget: lower footer font size to x-small

https://gerrit.wikimedia.org/r/1292030

El T426770#11948724, @DLynch escribió:

With that patch:

CleanShot 2026-05-22 at 10.19.35@2x.png (630×464 px, 41 KB)

It looks good now it the right font size. Thank you!