| • JKieserman | |
| Dec 5 2022, 5:40 PM |
| F35876381: Captura de Pantalla 2022-12-19 a las 17.25.39.png | |
| Dec 19 2022, 4:30 PM |
| F35876377: Captura de Pantalla 2022-12-19 a las 17.23.38.png | |
| Dec 19 2022, 4:30 PM |
| F35876210: image.png | |
| Dec 19 2022, 1:18 PM |
| F35838760: Screenshot 2022-12-05 at 11.11.22 AM.png | |
| Dec 5 2022, 5:40 PM |
| F35838759: Screenshot 2022-12-05 at 11.10.29 AM.png | |
| Dec 5 2022, 5:40 PM |
Steps to replicate the issue (include links if applicable):
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.):
Change 864889 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):
[design/codex@main] Dialog: Prevent skins from breaking header styles
Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/80a5b98af0/wiki/Special:VueTest
Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/80a5b98af0/w/build/codex/docs
Test wiki on Patch demo by EGardner (WMF) using patch(es) linked to this task was deleted:
Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/a1d2f06d19/wiki/Special:VueTest
Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/a1d2f06d19/w/build/codex/docs
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
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
Change 865151 merged by jenkins-bot:
[mediawiki/core@master] Update Codex from v0.3.0 to v0.4.0
@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.
Change 869215 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):
[design/codex@main] styles, Dialog: Set heading padding to 0
Change 869215 merged by jenkins-bot:
[design/codex@main] styles, Dialog: Set heading padding to 0
The dialog title looks good in Chrome, Safari and Firefox.
The following paddings are different from the Codex demo dialog:
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).
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:
- Right padding from close button to edge should be 16px
- Padding from title to body
- Padding from body to buttons
@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
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
Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:
The following paddings are different from the Codex demo dialog:
- Right padding from close button to edge should be 16px
- Padding from title to body
- Padding from body to buttons
@JKieserman @AnneT let me know if we want to apply the right paddings in this dialog.
Since all this listed in this other comment is set in WikiLambda and it's not a problem with the Codex component, I think we can move this task to QTE sign-off.
If someone using Dialogs inside of Mediawiki (Abstract Wiki?) can confirm that the headings no longer look weird, then this can be closed.
Test wiki on Patch demo by EGardner (WMF) using patch(es) linked to this task was deleted:
As of our latest PatchDemo for VueTest, I can see that Codex Dialog h2 styles are now preserved inside of MW since our CSS changes to increase the specificity of these styles. I'm to go ahead and close this task.