Sharing here as well, as representative of the Design Systems Team we're
proud to announce…
---------- Forwarded message ---------
From: Roan Kattouw <rkattouw(a)wikimedia.org>
Date: Wed, Oct 25, 2023 at 9:07 AM
Subject: [Wikitech-l] Announcing Codex 1.0
To: Wikimedia developers <wikitech-l(a)lists.wikimedia.org>
Today the Design Systems Team
<https://www.mediawiki.org/wiki/Design_Systems_Team> is announcing the
release of Codex 1.0!
What is Codex?
Codex <https://doc.wikimedia.org/codex/latest/> is the new design system
for Wikimedia. Over the past 2 years, the Design Systems Team and
contributors from the Wikimedia Foundation, Wikimedia Deutschland, and the
volunteer communities have collaborated to create a centralized design
system to serve Wikimedia projects. Codex provides more equitable
experiences for all Wikimedia movement participants, and makes it easier
and faster to design and build consistent user interfaces. With Codex, we
aim to enable more people to contribute to the mission.
Codex provides a library of design tokens
<https://doc.wikimedia.org/codex/latest/design-tokens/overview.html>, user
interface components
<https://doc.wikimedia.org/codex/latest/components/overview.html>, and
catalog of icons
<https://doc.wikimedia.org/codex/latest/icons/overview.html> to use with
these components. Through the Codex Figma libraries, designers can reuse
these shared components
<https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-component…>
, tokens
<https://www.figma.com/file/mRvSsFD2Kwh8AZNjlx7rIl/%E2%9C%A8-Design-tokens?t…>,
and assets
<https://www.figma.com/file/1lT9LKOK6wiHLnpraMjP3E/%E2%9D%96-Assets-(Icons%2…>
in
their designs. For developers, Codex provides components built with Vue.js,
as well as some CSS-only components that do not require JavaScript to use.
Codex is already being used for Wikifunctions
<https://www.mediawiki.org/wiki/Extension:WikiLambda>, Vector 2022
<https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Se…>,
the Growth Mentor Dashboard
<https://www.mediawiki.org/wiki/Growth/Mentor_dashboard> and Impact Module
<https://www.mediawiki.org/wiki/Growth/Positive_reinforcement>, the New
Pages Feed
<https://en.wikipedia.org/wiki/Wikipedia:Page_Curation/2023_Moderator_Tools_…>
, MediaSearch <https://www.mediawiki.org/wiki/Extension:MediaSearch>,
NearbyPages <https://www.mediawiki.org/wiki/Extension:NearbyPages>,
QuickSurveys <https://www.mediawiki.org/wiki/Extension:QuickSurveys>, and
ReadingLists <https://www.mediawiki.org/wiki/Extension:ReadingLists>.
Projects currently under development using Codex include Accessibility for
reading
<https://www.mediawiki.org/wiki/Reading/Web/Accessibility_for_reading> and
the Incident Reporting System
<https://meta.wikimedia.org/wiki/Private_Incident_Reporting_System>.
Codex provides a set of core components
<https://www.mediawiki.org/wiki/Design_Systems_Team/Codex_Planned_Components>
that
cover a wide range of Wikimedia user interface needs, but does not
necessarily provide equivalents of all components in OOUI
<https://www.mediawiki.org/wiki/OOUI>. If you find that a component you
were expecting to use is missing, please talk to the Design Systems Team
<https://www.mediawiki.org/wiki/Design_Systems_Team/Working_with_us> and
we'd be happy to help you. We strongly encourage contribution to Codex
<https://doc.wikimedia.org/codex/latest/contributing/overview.html>, in
line with our vision of being a collaborative project guided by stewardship.
Why 1.0 now?
The Design Systems Team has been working towards this milestone for a
number of months now. Based on early feedback, we’ve already made
improvements to the developer experience of using Codex, like providing
ready-to-go example repos
<https://gitlab.wikimedia.org/repos/design-systems/CodexExample> of using
Codex in a MediaWiki extension and changing our code snippets in the doc
site for easier copy-paste into non-TypeScript and MediaWiki-specific
projects.
We also dedicated significant time and effort ensuring accessibility of
Codex components and assets conform to WCAG 2.1 AA and other standards, and
plan to engage with groups like the American Foundation for the Blind for
further improvements.
We’ve been consolidating various design resources (like the design style
guide <https://design.wikimedia.org/style-guide/>) into Codex so there is a
single source of truth for Wikimedia front-end development and design
standards. This is to clarify Codex’s role not just as a UI library, but as
the design system for Wikimedia.
Who should use Codex?
Everyone! Some foundational elements like design tokens can and should be
used in all Wikimedia software going forward. Most of the MediaWiki code
that uses the older pre-token variables from mediawiki.ui has already been
migrated to use the Codex tokens instead. The Codex wiki documentation
<https://www.mediawiki.org/wiki/Codex#Using_Codex_design_tokens> has more
information about using design tokens (and other elements) in MediaWiki.
At this time, Codex components are most suitable for client-side features
that don't have complex requirements for non-JavaScript support, or for
server-rendered interfaces that don't need much interactivity. Features
requiring both high interactivity and the need to support users without
JavaScript will need to create separate implementations of the feature
using CSS-only components and using Vue components. The Design Systems Team
has explored solutions that would allow a single Vue implementation to
support both non-JavaScript and JavaScript users in the future.
Gadget and user script developers who would like to use JavaScript for
interactivity cannot reliably use Codex at this time. However, this is
something the Design System Team is looking to provide a solution for in
the future. Further details and feedback is welcome on Phabricator
<https://phabricator.wikimedia.org/T313945>.
Eventually, we intend for Codex to mostly replace other user interface
libraries in the Wikimedia ecosystem, like OOUI and jquery.ui. Over time,
we hope this will make the design of features and the developer experience
less fragmented across the projects. We encourage people who want to make
their code more maintainable and use modern tools now and in the future to
consider migrating existing projects to Codex. For new projects, we
strongly recommend building with Codex from the beginning. This will ensure
you get the best and latest in design and engineering resources and tools,
accessibility compliance, and multilingual and internationalization support.
Next steps
The Design Systems Team is here to assist you in evaluating whether Codex
is suitable for your project and can help you put together a migration plan
for existing codebases.
Those who wish to get started with Codex can visit the documentation site
<https://doc.wikimedia.org/codex/latest/>. To get more detailed information
about using Codex in MediaWiki, you can visit the project wiki page
<https://www.mediawiki.org/wiki/Codex>. For a general list of resources,
you can visit our team wiki page
<https://www.mediawiki.org/wiki/Design_Systems_Team/Resources>.
Again, if you have any questions, feedback, or would like assistance from
the Design Systems Team, come talk to us
<https://www.mediawiki.org/wiki/Design_Systems_Team/Working_with_us>!
_______________________________________________
Wikitech-l mailing list -- wikitech-l(a)lists.wikimedia.org
To unsubscribe send an email to wikitech-l-leave(a)lists.wikimedia.org
https://lists.wikimedia.org/postorius/lists/wikitech-l.lists.wikimedia.org/
Hi all,
We've released OOUI v0.45.0 yesterday. It will be rolling out on the
normal train, Tuesday, 04 October 2022.
Highlights in this release since v0.44.0:
- Raise underlying jQuery to v3.6.1, up from v3.6.0 in alignment to
equal change in MediaWiki.
- Drop 'stopHand', renamed to 'hand' since v0.43.0.
Both updates above are considered breaking changes. Please carefully
test if they affect your code.
- Drop 'stopHand', renamed to 'hand' since v0.43.0.
Both updates above are considered breaking changes. Please carefully
test if they affect your code.
Selected new features:
- SelectWidget: Introduce `findFirstSelectedItem()` for performance
- SelectWidget now supports Home/End/PageUp/PageDown keys
- DropdownWidget: Add screen reader support while collapsed
- Toolbar: Fix DOM order of tools and actions for keyboard tabbing.
You can find details on additional new features, code-level, styling
and interaction design amendments, and all improvements since v0.44.0
in the full changelog [0].
Thanks to all code contributors, and to James D. Forrester for major
release work.
If you have any further queries or need help dealing with breaking
changes, please let me know.
As always, interactive demos and library documentation is available on
mediawiki.org [1], there is comprehensive generated code-level
documentation and interactive demos and tutorials hosted on
doc.wikimedia.org [2].
OOUI version: 0.45.0
MediaWiki version: 1.40.0-wmf.4 [3]
Date of deployment to production: Regular train, Tuesday 04 Oct 2022
[0] - https://gerrit.wikimedia.org/g/oojs/ui/+/v0.45.0/History.md
[1] - https://www.mediawiki.org/wiki/OOUI
[2] -
https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediau…
[3] - https://wikitech.wikimedia.org/wiki/Deployments
<https://wikitech.wikimedia.org/wiki/Deployments#Week_of_October_03>
Best,
Volker
Hi all,
excited to share that we've released OOUI v0.44.0. It already happened
last Tuesday. ;)
Due to activities around Global Accessibility Awareness Day[0] and
Wikimedia Hackathon[1] (hope the ones participating had all fun!) the
release email is coming now.
It is rolling out on the normal train today, Tuesday, 24 May 2022.
Highlights in this release since v0.43.0:
- Dropped support for IE<10, FF<38, Android<4.4 in sync with updated
MediaWiki and Wikimedia's browser matrix. This removes a significant
amount of CSS rules and hacks specifically for those browsers[2]
-- This also enables us to use modern CSS techniques like Flexbox,
here resulting in a fix for a 6 year old bug on Firefox by Ed Sanders.
You can find details on additional new features, code-level, styling
and interaction design amendments, and all improvements since v0.43.0
in the full changelog[3].
Thanks to all code contributors, and to James D. Forrester and Bartosz
Dziewoński for their consistently excellent help – on this release
again.
If you have any further queries or need help dealing with breaking
changes, please let me know.
As always, interactive demos and library documentation is available on
mediawiki.org[4], there is comprehensive generated code-level
documentation and interactive demos and tutorials hosted on
doc.wikimedia.org[5].
OOUI version: 0.44.0
MediaWiki version: 1.39.0-wmf.13[6]
Date of deployment to production: Regular train, starting Tuesday 24 May 2022
[0] - https://meta.wikimedia.org/wiki/Accessibility/Global_Accessibility_Awarenes…
[1] - https://www.mediawiki.org/wiki/Wikimedia_Hackathon_2022/
[2] - https://phabricator.wikimedia.org/T306486
[3] - https://gerrit.wikimedia.org/g/oojs/ui/+/v0.44.0/History.md
[4] - https://www.mediawiki.org/wiki/OOUI
[5] - https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediau…
[6] - https://wikitech.wikimedia.org/wiki/Deployments#Tuesday,_May_24
Best,
Volker
Hi,
If I recall correctly, a few months ago you were able to use a Figma file
with the WikimediaUI design components.
However, now when I tried to open the URL in Figma, it seems to have been
made private.
Does anyone know what happened to this? Is there a new link?
Kind regards,
Berrely
Hi,
excited to share that we've released OOUI v0.43.0 last Thursday.
It will rollout on the normal train tomorrow, Tuesday, 18 January 2022.
Highlights in this release since v0.42.0:
- MessageWidget features now a `showClose` option for the optional
closing notices et al.
- MenuSelectWidget highlights the first selectable option instead of the
visible one. Thanks to volunteer Func.
- Numerous icon additions and improvements are featured:
-- The only nominal breaking change is removal of the `destructive`
variant from 'close' icon. The 'close' icon shouldn't be used for removing
or deleting things for user-experience consistency, please revisit your
codebase and use 'trash' icon instead.
-- 'stopHand' icon was deprecated and renamed to 'hand' icon while being
aligned to the Design Style Guide's icon guidelines[0].
-- 'watchlist' icon was added. Thanks to Alex Hollender.
-- Large number of 'bold' and 'italic' icons for specific languages
were aligned to the guidelines. Thanks to new Design Systems team
peer, Bárbara Martínez Calvo.
I'm specifically excited about these changes as they emphasize our goal
to provide first-class experience for our diverse language communities.
With updated OOUI demos[1] and demos of future Vue.js-based[2] UI
toolkit Codex, you're now able to see and compare all per language
icons. Thanks to Roan Kattouw and Ed Sanders.
- Last, but not least, more than 20 different performance optimizations
across widgets were included in this release, thanks to Thiemo Kreuz
at current work focus by Wikimedia Deutschland.
One call for notice here, widgets don't feature default implicit
`aria-disabled="false"` any more to save bytes sent to client,
only when set dynamically.
There was one case of a template breakage written to check for
this –now missing attribute. Please carefully test if this might affect
your
code.–
You can find details on additional new features, code-level, styling
and interaction design amendments, and all improvements since v0.42.0
in the full changelog[4].
If you have any further queries or need help dealing with deprecating
changes, please let me know.
As always, interactive demos and library documentation is available
on mediawiki.org[5], there is comprehensive generated code-level
documentation and interactive demos and tutorials hosted on
doc.wikimedia.org[6].
OOUI version: 0.43.0
MediaWiki version: 1.38.0-wmf.18[7]
Date of deployment to production: Regular train, starting Tuesday 18 January
[0] - https://design.wikimedia.org/style-guide/visual-style_icons.html
[1] -
https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediau…
[2] - https://www.mediawiki.org/wiki/Vue.js
[3] - https://gerrit.wikimedia.org/g/oojs/ui/+/v0.43.0/History.md
[4] - https://www.mediawiki.org/wiki/OOUI
[5] - https://doc.wikimedia.org/oojs-ui/master/
[6] - https://wikitech.wikimedia.org/wiki/Deployments#Tuesday,_January_18
Best,
Volker
Hi all,
We've released version 0.3.0 of WVUI earlier today.
One of the agreements from Vue.js developer summit [0] organized by the
Design System team has been to start a new library and repository next with
all other technical decisions made, a.o. being based on Vue 3 or no
JavaScript only
support to IE 11. With this email we want to clarify upfront why we've
merged two more component additions (progress-bar and toggle-button)
succeeding the summit.
Reasons was mainly to finalize the already in-flight work by volunteer
DannyS712.
Additionally to this, all other components merged since v0.2.0 and before the
summit – checkbox, dropdown and options-menu – are part of this
release. Same goes
for further improvements for the most important in-production use case,
Desktop Improvements project's Typeahead Search feature [1].
We'll discontinue major additions to WVUI from this release on besides
bug fixes and
will focus our work on the coming library.
Thanks to volunteer DannyS712 for all contributions! And to Nikki
Nikkhoui for the
continued build step support and James Forrester to get release out of the door
during after hours.
Find interactive demos hosted on doc.wikimedia.org [2] and the additional
improvements since v0.2.0 in the full changelog [3].
If you have any further questions please reach out to
design-systems-team-external(a)wikimedia.org.
Best,
Volker
[0] https://www.mediawiki.org/wiki/Design_Systems_Team/Vue.js_Developer_Summit_…
[1] https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Vue.js_case…
[2] https://doc.wikimedia.org/wvui/master/ui/
[3] https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/refs/tags/v0.3.0/CHAN…
Hi everybody,
We've released version 0.42.0 of the OOUI library* yesterday.
It's going to rollout with normal train next Tuesday, 24 August 2021.
Highlights in this release:
- Removal of code fragments for browsers, that were taken out of basic
support, most of those affected released before 2013! [0]. Removal
will directly results in a small performance gain for all other users.
This is nominally a breaking change. If you need to continue to
support those browsers in your environment, please stick with an
earlier version.
- Upgraded underlying libraries to jQuery v3.6.0, up from v3.5.1 and
OOjs to v6.0.0, up from v5.0.0. This goes hand-in-hand with similar
upgrade in MediaWiki core. Both updates above are considered breaking
changes. Please carefully test if they affect your code.
- Two new icons, 'share' and 'ocr' have become part of the library and
the WikimediaUI design system.
- Addition of RequiredElement mixin, already added in v0.41.1
Thanks especially to Thiemo Kreuz and volunteer DannyS712 on improving
the documentation and Umherirrender for continuous code improvement
patches.
You can find details on additional new features, code-level, styling
and interaction design amendments, and all improvements since v0.41.0
in the full changelog [1].
If you have any further queries or need help dealing with breaking
changes, please reach out to me.
As always, interactive demos [2] and library documentation is
available on mediawiki.org [3], there is comprehensive generated
code-level documentation and interactive demos and tutorials hosted on
doc.wikimedia.org [4].
Best,
Volker
* Obligatory to say, no, this is not the answer to Everything. That
will probably be v42 of the future Vue.js based user-interface
components library [5].
---
OOUI version: 0.42.0
MediaWiki version: 1.37.0-wmf.20
Date of deployment to production: Regular train, starting Tuesday 24 August
[0] - https://phabricator.wikimedia.org/T266866
[1] - https://gerrit.wikimedia.org/g/oojs/ui/+/v0.42.0/History.md
[2] - https://doc.wikimedia.org/oojs-ui/master/demos/#widgets-mediawiki-vector-ltr
[3] - https://www.mediawiki.org/wiki/OOUI
[4] - https://doc.wikimedia.org/oojs-ui/master/
[5] - https://phabricator.wikimedia.org/T288980
Hi all,
With excitement we're sharing today that Vue.js is Wikimedia
Foundation's official choice for adoption as future JavaScript
framework for use with MediaWiki.
The evaluation of front-end frameworks officially started mid 2019, as
part of the Platform Evolution program’s goal to evolve our technology
platform and development processes to empower the Wikimedia
Movement[0].
The corresponding Technical RFC was successfully resolved in March
2020[1]. As this framework selection is a wide-ranging, long-term
decision, a dedicated group, the Front-end Architecture Working
Group[2], was established to drive the technology comparison and the
final recommendation. Besides the resolved RFC the outcome was to
build and test developer experience in a pilot project[3].
The selected pilot was within the Desktop Improvements project[4] with
its new Vue.js-based TypeaheadSearch feature that allows for providing
additional context while searching. Since its introduction in March
2021[5] the new TypeaheadSearch component has been the default across
15 wikis of varying sizes and has received positive user feedback[6].
A final developer satisfaction survey was completed to gain further
information on the developer experience. The survey results emphasized
“a positive light on the future of working with Vue.js”. And “[t]he
engineers felt optimistic about the future and confident in
recommending it for adoption across all our teams.”
The pilot gave us confidence in the recommendation to adopt Vue.js and
we are moving into further implementation of Vue.js tooling and
product migration planning.
To support further efforts, the Wikimedia Foundation has established
the Wikimedia Design System team[7], which I'm proudly part of. Our
continued work and upcoming priorities include:
- Preparing a shared Vue.js user-interface components library
- Deciding on Vue 2 or Vue 3 including transition path
- Figuring out how the components library will be built and
distributed in and beyond MediaWiki
You can find more of the ongoing work on Phabricator[8].
For full transparency, we've carried that knowledge with us for some
time already, but were prioritizing progressing integration, annual
planning and our internal All-hands conference to finally arrive at
this announcement today.
I'd like to thank a number of folks involved in leading to this, all
Front-end Architecture Working Group members, especially colleagues
Eric Gardner & Roan Kattouw for driving the RFC, the Readers Web team
for undergoing as pilot implementers and especially our former
colleague Stephen Niedzielski who was central to making it a success,
Wikimedia Deutschland for numerous insights through their Vue.js
experience, current Design System team members responsible for further
progress, all Movement volunteers involved in both providing feedback
to the pilot and contributing to development and Product & Tech
department leadership for their strong support of this wide-reaching
change.
Best regards,
Volker
References
[0] https://www.mediawiki.org/wiki/Platform_Evolution/Recommendations#1._Develo…
[1] https://phabricator.wikimedia.org/T241180
[2] https://www.mediawiki.org/wiki/Frontend_Architecture_Working_Group
[3] https://www.mediawiki.org/w/index.php?title=File:FAWG_Demo.pdf&page=26
[4] https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements
[5] https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Updates#Mar…
[6] https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements#List_of_ear…
[7] https://www.mediawiki.org/wiki/Design_Systems_Team
[8] https://phabricator.wikimedia.org/T286946
---
Volker Eckl
Design Lead
Wikimedia Design System
Wikimedia Foundation
1 Montgomery Street
Suite 1600
San Francisco, CA 94104
Hi all,
we propose to remove `capitalize-all-nouns` skin functionality from
MediaWiki core without deprecation in 1.37.
Patch to remove: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/435638
Patch to continue functionality in Monobook:
Bug: https://phabricator.wikimedia.org/T97892
Existing uses:
https://codesearch.wmflabs.org/search/?q=MagicWord%3A%3AclearCache&i=nope&f…
MediaWiki core has a feature whereby the setting $capitalizeAllNouns = true
can be set in a LanguageXx.php file. When this is set, OutputPage attaches
the `capitalize-all-nouns` CSS class to the page <body> element. The only
languages for which $capitalizeAllNouns = true are German and languages
with German as a fallback (e.g. Alemannic).
The only widely used skin using this has been Monobook to disable lowercase
transformation of tab titles for those languages. A few other skins might
have applied the same functionality when basing on top of Monobook.
We've copied this obscure functionality over to Monobook in the meantime
and would recommend doing so for your skin if you like to continue to use
it.
In any case, as this removal results in a non-existing CSS class mostly
rendering of some elements of the skin in some languages would change
slightly.
Please note, that no other modern Wikimedia deployed skin has used this
ever since Monobook.
Thanks to volunteer Jack Phoenix and my colleague Jon Robson for driving
this work.
Regards,
Volker