In this Task we can describe some practical on-wiki community needs, to be able to follow visual guidelines from Design-System-Team about Codex, avoiding pitfalls and dirty on-wiki workarounds.
There is so much that can be described. This Task is limited to some specific feedback from the itwiki community (but others are welcome) - feel free to edit.
Scope of this Task
This Task is about using some Codex components from wikitext with only-CSS, without gadgets, without extensions, without code duplication.
Non-Scope of this Task
Just for additional clarification, this Task is not about:
- creating radio buttons
- creating input fields (somehow already managed by the InputBox extension)
- creating toggle buttons
- creating other kind of interactive stuff that should require a gadget and/or an extension and/or code changes instead
So this Task is somehow different from T346469 and T101666.
Practical Community Needs
Buttons (High Priority)
The community would love to render some links as buttons, from wikitext.
Premising, we completely understand that we don't want to encourage to style most links as buttons.
Good places:
- https://it.wikipedia.org/w/index.php?title=Aiuto:Creazione_guidata_di_una_voce/Errori&oldid=130830451
- 💚 it's nice to have some buttons to go ahead and back in the navigation
We love the efforts of Codex to adopt some "standards" in the UX. Some bad community examples:
Example needed syntax:
[[test|<span class="cdx-button cdx-button--action-progressive">asd</span>]]
https://doc.wikimedia.org/codex/latest/components/demos/button.html#css-only-version
Example usage (partially working):
https://it.wikipedia.org/wiki/Utente:Valerio_Bozzolan/Sandbox#Codex:_button
Buttons with only icons (Medium Priority)
Buttons with only icons are useful in some cases, like building an on-wiki wizard with "Next" button links, or similar ones.
🔴 at the moment it's not possible to embed official Codex icons on Wikitext. See Icons.
Icons (Medium Priority)
🔴 at the moment it's not possible to embed official Codex icons on Wikitext.
Without this feature, the community will very-probably fallback to workarounds.
Message (Nice to Have)
https://doc.wikimedia.org/codex/latest/components/demos/message.html
Codex "Messages" are promising even on-wiki, promising to build some warnings:
https://it.wikipedia.org/wiki/Utente:Valerio_Bozzolan/Sandbox#Codex:_message
Accordion (Nice to Have)
You may be surprised in discovering how much useful could be the Accordion, on wikitext, to standardize the interface. At the moment, most wikis re-implement them from scratch. These are in used also in the main namespace.
Example of local accordion implementation in itwiki (called "cassetto"), historically working loading that JavaScript in every single MediaWiki page thanks to MediaWiki:Common.js:
https://it.wikipedia.org/w/index.php?title=Template:Cassetto&oldid=107354707
We tried using the CSS-only version with just <div> and not <summary> but it does not work at the moment:
Progress Bar with Fixed Value (Nice to Have)
https://doc.wikimedia.org/codex/latest/components/demos/progress-bar.html#css-only-version
https://it.wikipedia.org/wiki/Utente:Valerio_Bozzolan/Sandbox#Codex:_progress_bar
🔴 It's probably currently not possible to indicate a specific value on the progress bar on CSS-only. Unclear possibilities on Wikitext.
Pitfalls
The community would love to render, on a specific page, some of the above components, relying on simple CSS selectors.
The problem is, these Codex components are currently designed to be activated using ResourceLoader. But, wiki pages cannot activate specific ResourceLoader CSS elements.
Proposal n. 1: Additional Parser Tag to activate ResourceModule(s)
The proposal n. 1 was inspired looking at the TemplateStyles extension.
It would be nice to have something like this to activate some ResourceModules, from the Wikitext:
<resource-loader "codex-ui.button, codex-ui.icons.navigation" /> [[Destination|<span class="cdx-button cdx-button--action-progressive">Next</span>]]
Pros:
- easily activate atomic Codex modules, in a reliable way from the perspective of a single page
- probably render-friendly, since a single parsing tag is needed
- allows to avoid the listed workarounds
Proposal n. 2 - Use TemplateStyles to embed ResourceLoader modules
Maybe the TemplateStyles extension could be expanded to also support loading CSS imports.
Example, instead of doing this from core:
@import (reference) "@wikimedia/codex-design-tokens/theme-wikimedia-ui.less"; @import (reference) "@wikimedia/codex/mixins/css-icon.less";
Doing this:
<templatestyles src="styles.css" />
This would probably need to partially support SASS, at least for imports.
Proposal n. 3 - "if wikitext contains ..., include resources"
Last proposal. The most desperate one. Something like this, but for Codex:
Workaround n. 1 - manually creating a TemplateStyle
In the absence of any of the above proposals, the community would probably manually copy-paste Codex CSS on their wiki.
Workaround n. 2 - enabling "important" Codex stuff as default from a default gadget
Some wikis may decide to create a default "hidden" gadget to pull Codex dependencies...
This is not optimal because it increases the weight of a big amount of pages, instead of just give the needed resources in the specific page.
Workaround n. 3 - (just for Icons)
To be able to import Codex icons from wikitext, the community will very probably embed icons from Wikimedia Commons, instead of following the "right way".
Thanks to:
- valcio from itwiki
- Daimona_Eaytoy from itwiki
- phocs from WMF
- folks from itwiki