Page MenuHomePhabricator

Dialog styles getting overwritten
Open, Stalled, HighPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • Create a dialog component

What happens?:
The title is styled unexpectedly, with the h2 underlining in place, a different font and different sized text than what the docs page shows.

What should have happened instead?:
It should look like the docs page.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Screenshot 2022-12-05 at 11.10.29 AM.png (235×728 px, 50 KB)

Screenshot 2022-12-05 at 11.11.22 AM.png (906×1 px, 127 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 864889 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[design/codex@main] Dialog: Prevent skins from breaking header styles

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

Test wiki on Patch demo by EGardner (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/80a5b98af0/w/

I've posted a small patch to address this issue. Since this is a MediaWiki-specific problem, I've also spun up a patchdemo instance to demonstrate the updated Dialog component inside the VueTest extension – you can take a look here: https://patchdemo.wmflabs.org/wikis/a1d2f06d19/wiki/Special:VueTest/codex. Navigate down to the "Dialog" component and test out the demos.

Change 864889 merged by jenkins-bot:

[design/codex@main] Dialog: Prevent skins from breaking header styles

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

Change 865151 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v0.3.0 to v0.4.0

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

Change 865151 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.3.0 to v0.4.0

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

@bmartinezcalvo You can test this on beta wikifunctions, where there is a dialog that pops up to confirm when you want to publish changes.

Visit this function edit page, make a change (e.g, add "test" to the function name), and click "Publish." You'll see the dialog, which should have the proper dialog title styles.

I think there's actually one more style we need to add: there's a skin style targeting .content h2 that adds some top and bottom padding, which we need to unset. I'll push a patch to add this.

image.png (1×1 px, 440 KB)

Change 869215 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] styles, Dialog: Set heading padding to 0

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

Change 869215 merged by jenkins-bot:

[design/codex@main] styles, Dialog: Set heading padding to 0

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

The dialog title looks good in Chrome, Safari and Firefox.

Captura de Pantalla 2022-12-19 a las 17.23.38.png (1×1 px, 515 KB)

The following paddings are different from the Codex demo dialog:

  1. Right padding from close button to edge should be 16px
  2. Padding from title to body
  3. Padding from body to buttons

Captura de Pantalla 2022-12-19 a las 17.25.39.png (896×1 px, 127 KB)

Should these things be fixed in this task?

@bmartinezcalvo It looks like all of those things are due to styles applied in WikiLambda (extra margin-right on the close button, and top/bottom padding on elements within the body).

@bmartinezcalvo It looks like all of those things are due to styles applied in WikiLambda (extra margin-right on the close button, and top/bottom padding on elements within the body).

This task is to apply the right styles in the dialog, although is focus in the title styles. If we can apply the right paddings in this task it would be great. If not, we can move this task to QTE sign-off since the title styles were already well applied.

The following paddings are different from the Codex demo dialog:

  1. Right padding from close button to edge should be 16px
  2. Padding from title to body
  3. Padding from body to buttons

Captura de Pantalla 2022-12-19 a las 17.25.39.png (896×1 px, 127 KB)

@JKieserman @AnneT let me know if we want to apply the right paddings in this dialog.

Change 878213 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.4.2 to v0.4.3

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

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/b7ca0fd8f5/w

Change 878213 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.4.2 to v0.4.3

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

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/b7ca0fd8f5/w/

bmartinezcalvo changed the task status from Open to Stalled.Fri, Jan 20, 10:37 AM