mediawiki-extensions-Relate.../doc/adr/0002-use-codex-css-components.md
Jon Robson 71de06a682 Simplify the RelatedArticles extension to use Codex CSS components
Changes:
- Removes redundant styles now inside Codex
- With the new component, it's not possible to display 3 cards in a
single line at a tablet resolution, so the media query responsible
is bumped to apply only at the desktop threshold
- Decisions are documented in ADR

Bug: T286835
Change-Id: I493e8e601ccc31b3cf1f16c0b5a8975f12ef336c
2024-01-30 09:16:34 -08:00

1.2 KiB

1. Use Codex CSS components

Date: 2023-11-08

Status

To discuss and refine once https://phabricator.wikimedia.org/T248718 has been resolved.

Context

RelatedArticles is loaded when the user scrolls to the end of the page. Since it was first made, the Codex library has come into existence and RelatedArticle's looks dated. By using Codex we can keep the extension in line with design best practices and the rest of the UI and minimize the amount of modifications we have to make to it in future.

Given RelatedArticles can be loaded in the article namespace, when a user scrolls to the bottom of the page, it is preferable to make use of Codex CSS components rather than pulling in the full Vue.js library as the library is large. Loading the entirety of Vue and Codex without a clear user interaction is prohibited (https://phabricator.wikimedia.org/T248718).

Decision

  • RelatedArticles uses Codex components.
  • We are using Codex CSS components rather than Vue+Codex.

Consequences

  • Markup will need to be kept in sync with Codex CSS components.
  • In future it may make sense to use Vue.js if there is greater adoption in the skin. At the time of writing for skin only the search widget inside Vector is built in Vue.js.