This task captures some of the use cases for styling components in MobileFrontend and possible solutions. The task can broken apart as needed.
Acceptance criteria
- Task out the proposed solutions.
- Use cases and requirements are published on wiki.
Use cases and possible solutions
LESS variables
Wikimedia design variables for colors and metrics are split into a convenient repo, wikimedia-ui-base, but there doesn't seem to be a good way to reference them. This issue has come up before but most recently in T219895 where only two colors (#d33 and #00af89) are needed. Some options are:
- Copy and paste bits and pieces as needed (current approach). Obviously works and obviously not ideal.
- Copy all of wikimedia-ui-base to a new module in Core or MobileFrontend. This would probably be an easy change in either place but Core would be ideal.
- npm install wikimedia-ui-base and add Webpack LESS processing to dump the styles into resources/dist. We have Webpack but haven't explored stylesheet processing yet. This would give us a useful abstraction between styles written and styles shipped but will need a little initial tooling.
- Depend on the oojs-ui-core.styles ResourceLoader module. This may work but adds quite a lot more than only the variables.
Icons
Icons are usually copied and pasted into MobileFrontend and MinervaNeue. Some options are:
- Copy the icons into the repo and add new modules to MobileFrontend extension.json / MinervaNeue skin.json that reference the icons needed.
- Add new modules to MobileFrontend extension.json / MinervaNeue skin.json that reference the icons needed from Core. Seems much better than copying.
- Add a new module to Core that has all the icons with useDataURI to false (URLs like /w/load.php?modules=wikimedia.ui&image=link&variant=base20&format=original&lang=en&skin=minerva are used instead of data URIs). The overhead shoudl be smaller than data URIs but this may still be big and may not work for all use cases.
https://gerrit.wikimedia.org/g/mediawiki/skins/MinervaNeue/+/da4c7757cdb77cc30d30bca82de157f5c13fee3a/skin.json#257 "wikimedia.ui": { "class": "ResourceLoaderImageModule", "selectorWithoutVariant": ".wikimedia-ui-{name}:before", "selectorWithVariant": ".wikimedia-ui-{name}-{variant}:before", "useDataURI": false, "variants": { "base20": { "color": "#54595d", "global": true } }, "images": { "articleRedirect": { "file": { "ltr": "resources/wikimedia.ui/articleRedirect-ltr.svg", "rtl": "resources/wikimedia.ui/articleRedirect-rtl.svg" } }, "info": "resources/wikimedia.ui/info.svg", "link": "resources/wikimedia.ui/link.svg", "listBullet": { "file": { "ltr": "resources/wikimedia.ui/listBullet-ltr.svg", "rtl": "resources/wikimedia.ui/listBullet-rtl.svg" } }, "logo-Wikidata": "resources/wikimedia.ui/logo-Wikidata.svg", "logo-Wikimedia": "resources/wikimedia.ui/logo-Wikimedia.svg", "quotes": { "file": { "ltr": "resources/wikimedia.ui/quotes-ltr.svg", "rtl": "resources/wikimedia.ui/quotes-rtl.svg" } }, "upload": "resources/wikimedia.ui/upload.svg", "userAvatar": "resources/wikimedia.ui/userAvatar.svg" } },
A new approach to icons was added to Core and is only used in one place of MobileFrontend:
https://gerrit.wikimedia.org/g/mediawiki/extensions/MobileFrontend/+/refs/changes/67/510067/11/extension.json#227 "mobile.init.icons": { "class": "ResourceLoaderOOUIIconPackModule", "targets": [ "mobile", "desktop" ], "icons": [ "close" ] },
Component styles
MobileFrontend has lots of UI. One example is the link:
<a {{#href}}href="{{href}}"{{/href}} class="mw-ui-anchor {{#progressive}} mw-ui-progressive{{/progressive}} {{#destructive}} mw-ui-destructive{{/destructive}} {{additionalClassNames}}">{{label}}</a>
These component styles, like mw-ui-progressive, come from mediawiki.ui but are deprecated, may be outdated, and may be better divided so it's easier to make consistent interfaces in a modicum of bytes. What component styles are we missing, where should they live, and how should they be referenced?