Page MenuHomePhabricator

Tabs Codex CSS overwritten by Minerva styles
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
AAlhazwani-WMF
Oct 28 2022, 8:31 AM
Referenced Files
F35874680: image.png
Dec 18 2022, 8:44 PM
F35825730: image.png
Nov 30 2022, 7:48 PM
F35825728: image.png
Nov 30 2022, 7:48 PM
F35646827: image.png
Oct 28 2022, 8:31 AM
F35646825: image.png
Oct 28 2022, 8:31 AM

Description

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

Open https://m.wikifunctions.beta.wmflabs.org/wiki/Z10018

What happens?:

Some non-codex styles (.content ul etc) from Minerva are being applied where we don't want them to be.

What should have happened instead?:

Codex CSS is not overwritten by skins styles.

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

image.png (868×3 px, 512 KB)

image.png (816×3 px, 504 KB)

Event Timeline

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald Transcript

Change 850531 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] Tabs, styles: Make Tab list styles more specific

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

Change 850531 merged by jenkins-bot:

[design/codex@main] Tabs, styles: Make Tab list styles more specific

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

Volker_E changed the task status from Open to In Progress.Oct 28 2022, 9:52 PM
Volker_E assigned this task to EUdoh-WMF.

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

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

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

Change 859597 merged by jenkins-bot:

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

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

@Catrope I have looked at the elements tab on Developer console and I cannot see the ul or li tags on the cdx-components. I believe that should suffice or is there some other way I can confirm this is no longer a problem?

@Catrope I have looked at the elements tab on Developer console and I cannot see the ul or li tags on the cdx-components. I believe that should suffice or is there some other way I can confirm this is no longer a problem?

What we're looking for is that the bullet points that were visible next to the "About" and "Details" tabs on https://m.wikifunctions.beta.wmflabs.org/wiki/Z10018 (see screenshot in task description) are no longer there, and that these tabs otherwise look the same on the mobile site (https://m.wikifunctions.beta.wmflabs.org/wiki/Z10018) and the desktop site (https://wikifunctions.beta.wmflabs.org/wiki/Z10018 , note the absence of "m." in the URL), and that both of those look the way they're supposed to (you can use the Figma specs or the Codex demo site as a reference).

At a quick glance it looks like the bullet points are gone, but there's still some vertical space between the blue underline on the selected tab and the grey line that runs along the bottom of all the tabs that's not supposed to be there. I didn't look very closely, so there could be other issues too.

image.png (269×423 px, 25 KB)
image.png (269×423 px, 23 KB)
MobileDesktop

Moving back to Ready for Dev since there's still a styling issue (margin-bottom on the tabs in Minerva)

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

[design/codex@main] styles, Tabs: Increase specificity of list item margin rule

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

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

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/2e46653573/w/build/codex/docs

Change 868143 merged by jenkins-bot:

[design/codex@main] styles, Tabs: Increase specificity of list item margin rule

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

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

https://patchdemo.wmflabs.org/wikis/2e46653573/w/

Unfortunately, this is difficult to test (other than locally) for a couple of reasons:

  • The VueTest Codex sandbox isn't ideal because it contains direction-specific styles, which adds a degree of specificity to them, so this issue doesn't show up there anyway
  • I tried testing on patchdemo but there's a JS error when I try to create a new ZObject (see https://patchdemo.wmflabs.org/wikis/7c32d7aad6/wiki/Special:CreateZObject), nor was I able to import a ZObject from beta wikifunctions

Once we do another Codex release, this will be testable on beta.

@Jdforrester-WMF do you have any suggestions for testing a ZObject page on patchdemo? (FWIW this isn't terribly important since it's a small fix for a non-production feature, but I have needed to test things for WikiLambda a few other times so this might come in handy in the future)

As per Anne's comments, I am waiting for this to be on beta. As at today, I still see the visual anomaly pointed out by Roan

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

(Removing inactive assignee)

@Jdforrester-WMF do you have any suggestions for testing a ZObject page on patchdemo? (FWIW this isn't terribly important since it's a small fix for a non-production feature, but I have needed to test things for WikiLambda a few other times so this might come in handy in the future)

Sorry, we dropped the use of this component with a re-design a couple of months ago. :-(

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

@Jdforrester-WMF All good, based on this Z-object on beta, it looks like the issue with the tab headings has been fixed with the new release!

AnneT claimed this task.

Marking this as resolved since the issue is fixed and this code has been released.

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

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