Page MenuHomePhabricator

[SW] [WtC-M2] [SNL] Use Codex link mixin
Open, Needs TriagePublic

Description

Problem

The Special:NewLexeme's user interface was composed using a combination of WiKit next components and custom elements styled in-app. For example, the WiKit link.

Solution

To unblock the deprecation of the legacy design system, we should use Codex's Link mixin to replace WiKit links and style link elements on the NewLexeme form.

image.png (1×2 px, 425 KB)

Files containing the WiKit link component:

Unfortunately, Codex right now provides links as a Less mixin (cdx-mixin-link) that we can't reuse in Sass. The team is not planning to provide a preprocessor independent solution. Our way around this in the previous migration project was to recreate the Link mixin for reusage in our application

Acceptance criteria
  • All WiKit links in the Special:NewLexeme UI are styled using Codex's link mixin

Event Timeline

Arian_Bozorg renamed this task from [WtC-M2] [SNL] Replace WiKit Link component by Codex's to [SW] [WtC-M2] [SNL] Replace WiKit Link component by Codex's.Jul 16 2024, 1:41 PM
Sarai-WMDE renamed this task from [SW] [WtC-M2] [SNL] Replace WiKit Link component by Codex's to [SW] [WtC-M2] [SNL] Use Codex link component.Jul 16 2024, 5:56 PM
Sarai-WMDE updated the task description. (Show Details)
Sarai-WMDE renamed this task from [SW] [WtC-M2] [SNL] Use Codex link component to [SW] [WtC-M2] [SNL] Use Codex link mixin.Jul 25 2024, 11:31 AM

github link: https://github.com/wmde/new-lexeme-special-page/pull/767

Unfortunately, Codex right now provides links as a Less mixin (cdx-mixin-link) that we can't reuse in Sass. The team is not planning to provide a preprocessor independent solution. Our way around this in the previous migration project was to recreate the Link mixin for reusage in our application

When the Wikit link is replaced with a plain link, the "Help" link appears to have the correct Codex styling in the context of a mediawiki installation. Additionally, all of the links in Special:NewLexeme appear to be styled with Codex, as defined by the default stylesheet.

So, I'm confused about how to move forward with this and have some questions:

  • If the default css does the right thing in applying Codex link styles, is it sufficient to just remove Wikit stuff and let it use the defaults?
  • If not, should all of the links get cdx-mixin-link styling that is explicitly defined at the Vue level?

Here's the standalone preview, which lacks the correct styling.

Is the styling judged on what's shown here?

Hey @AudreyPenven_WMDE i'd be happy to review the version with the plain link to see if it matches the codex style in all it's specifications. Unfortunately the link in your last comment doesn't show the the correct UI and therefore I can't use it for a review. It looks like this to me

grafik.png (940×2 px, 155 KB)

What usually works for me is a netlify link where I can review the changes. Let me know it that's possible!

hey @Charlie_WMDE! Looks like I misunderstood how changes in Special New Lexeme make it to a reviewable state. It's not possible to review it in the full wiki context yet.

@ArthurTaylor suggested in a different ticket to push the changes to beta from where i could then review the changes. would that be an option? without being able to inspect the changes myself i'm unfortunately not able to say whether a plain link style would be a good match for codex's link style :(

@ArthurTaylor suggested in a different ticket to push the changes to beta from where i could then review the changes. would that be an option?

For reference, that suggestion is in T370052. Wherever that conversation ends up, we'll do the same to review this ticket.

I was curious where exactly the codex styling was coming from, and found that it comes from Vector's stylesheet for links. There's something similar in MinervaNeue

/* Vector/resources/skins.vector.styles/links.less */
a {
	.cdx-mixin-link-base();
	/* T373989 */
	border-radius: 0;
}

If one of these skins is used, all links are styled by Codex's Link mixin by default, unless they're overridden by more specific styling. The links mentioned in this ticket don't seem affected by overrides.

This does bring up a meta-question. @Charlie_WMDE, maybe you can help with this:
When we're applying Codex styles, should we override the skin's styles?
For Vector and MinervaNeue, it (probably) doesn't matter because they're the same. But I don't have a good sense about how other skins might be affected.

The top-level application of the codex link mixin is causing problems with some links, which is covered by T373989. There's currently a discussion about scoping the link styling differently. The proposed solutions so far would still result in Special New Lexeme links being styled with codex.

@ArthurTaylor suggested in a different ticket to push the changes to beta from where i could then review the changes. would that be an option?

For reference, that suggestion is in T370052. Wherever that conversation ends up, we'll do the same to review this ticket.

I was curious where exactly the codex styling was coming from, and found that it comes from Vector's stylesheet for links. There's something similar in MinervaNeue

/* Vector/resources/skins.vector.styles/links.less */
a {
	.cdx-mixin-link-base();
	/* T373989 */
	border-radius: 0;
}

If one of these skins is used, all links are styled by Codex's Link mixin by default, unless they're overridden by more specific styling. The links mentioned in this ticket don't seem affected by overrides.

This does bring up a meta-question. @Charlie_WMDE, maybe you can help with this:
When we're applying Codex styles, should we override the skin's styles?
For Vector and MinervaNeue, it (probably) doesn't matter because they're the same. But I don't have a good sense about how other skins might be affected.

Can I ask a follow up question here? Is this for the case where you're migrating from wikit to codex? if yes, was wikit overriding the skin styles as well? if yes, i'd stick with the same behavior.

Otherwise I would probably need some more context to be of help. Happy to jump on a call if that helps!

My current understanding is that yes, Wikit was overriding the skin styles. But, this was due to some limitations of Wikit itself, which are not a factor with Codex.

We recently discussed T376626, where dark mode isn't working as expected on special new lexeme. This being framed as a bug suggests that the skin styles are more important.

So, I'd assume that Vector using codex link styles as a default is enough.