Design

design@lists.wikimedia.org

605 discussions

OOUI v0.52.0 released
by Volker E. 16 Jun '25

16 Jun '25

Hi all, at the end of last week we released OOUI v0.52.0. It will roll out on the normal train tomorrow, Tuesday, 17 June 2025. This release contains several breaking changes and highlights since v0.51.0: Breaking changes: - We dropped support for PHP < 8.1 - Custom OOUI\Exception class was removed entirely. Rely on the default exception handler instead. - Dialog: Remove Dialog.static.escapable - SelectFileInputWidget: Remove alias for SelectFileWidget. SelectFileWidget got superseded by SelectFileInputWidget with dropped IE11 support a while back. Additionally - OOUI is now fully supporting dark mode with a number of fixes in different widgets, most complex fix provided to DropdownInputWidget - DropdownInputWidget also received a fix for missing accessibility labels on mobile - And PopupToolGroup won't close anymore if the scrollbar is used Thanks to Func, Taavi Väänänen, Zoë, Umherirrender and SomeRandomDeveloper for their volunteer contributions since the last minor release. You can find details on additional new features, code-level, styling and interaction design amendments, and all improvements since v0.51.0 in the full changelog[0]. If you have any further queries or need help dealing with breaking changes, please let me know. As always, interactive demos[1] and library documentation is available on mediawiki.org[2], there is comprehensive generated code-level documentation and interactive demos and tutorials hosted on doc.wikimedia.org[3]. OOUI version: 0.52.0 MediaWiki version: 1.45.0-wmf.6 Date of deployment to production: Regular train, starting Tuesday 17 June [0] - https://gerrit.wikimedia.org/g/oojs/ui/+/v0.52.0/History.md [1] - https://doc.wikimedia.org/oojs-ui/master/demos/#widgets-mediawiki-vector-ltr [2] - https://www.mediawiki.org/wiki/OOUI [3] - https://doc.wikimedia.org/oojs-ui/master/ Best, Volker

1 0

Last Day to Apply for a Team Role in Wiki Loves Ramadan
by Md. Zillur Rahman 31 Oct '24

31 Oct '24

Dear all, Apologies for cross posting and writing in English! This is a final reminder that today is the last day to apply to become a team member for Wiki Loves Ramadan, a global campaign celebrating Ramadan across Wikimedia projects. We are looking for enthusiastic volunteers to join us in key roles that will be essential to the event's success. If you’re interested, please complete your application by the end of today, October 31, 2024. There are various positions available in project coordination, outreach, design, and technical support—something for everyone passionate about making an impact. *Apply Here:* Application Link <https://docs.google.com/forms/d/e/1FAIpQLSfXiox_eEDH4yJ0gxVBgtL7jPe41TINAWY…> For details about the roles and requirements, please see the Position Descriptions <https://docs.google.com/document/d/1oy0_tilC6kow5GGf6cEuFvdFpekcubCqJlaxkxh…> . Thank you for your interest and support. We’re excited to work together to make Wiki Loves Ramadan a truly meaningful campaign! Regards, The Wiki Loves Ramadan Team

1 0

Join the Wiki Loves Ramadan Team – Call for Volunteers
by Md. Zillur Rahman 15 Oct '24

15 Oct '24

Dear all, We are excited to invite you to join *Wiki Loves Ramadan*, a global campaign that celebrates Ramadan through Wikimedia projects. We are seeking passionate and dedicated volunteers to fill key team roles that will be essential to the success of this initiative. *Open Positions: *We have a variety of roles available, each with specific responsibilities and application requirements. Whether you have experience in project coordination, outreach, design, or technical support, there is a role for everyone! *Before Applying: *If you haven’t already, we encourage you to take part in the *Wiki Loves Ramadan Community Engagement Survey*. Your feedback will help guide the project and ensure we meet the needs of our community. Participate in the survey here <https://forms.gle/f66MuzjcPpwzVymu5>. *How to Apply: *Please submit your application <https://forms.gle/pmGhZawyFDdNszri6> by *October 31, 2024* using the link below. We are looking forward to having you on board and working together to make Wiki Loves Ramadan a truly impactful campaign! *Apply Here* <https://forms.gle/pmGhZawyFDdNszri6> *View Full Role Descriptions and Requirements*: For a detailed list of all available positions, including roles, responsibilities, and requirements, please visit: Position Descriptions <https://docs.google.com/document/d/1oy0_tilC6kow5GGf6cEuFvdFpekcubCqJlaxkxh…> Thank you for your interest, and we look forward to your participation! Best regards, The Wiki Loves Ramadan Team

1 0

Fwd: [Wikitech-l] Announcing Codex 1.0
by Volker E. 27 Oct '23

27 Oct '23

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/

1 0

OOUI v0.45.0 released -- keyboard and screenreader accessibility improvements, jQuery update
by Volker E. 30 Sep '22

30 Sep '22

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

1 0

OOUI v0.44.0 released -- performance improvements due to dropped support for certain browsers including IE 9 & 10
by Volker E. 25 May '22

25 May '22

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

1 0

WikimediaUI Design Components Figma file
by Berrely 02 Apr '22

02 Apr '22

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

1 0

Access to Figma Library?
by Seth Deegan 09 Feb '22

09 Feb '22

Would it be possible to gain access to the Wikimedia design component Figma library by joining the design Figma team, even if I'm not part of the actual design team? I'm making mockups of various ideas (Wikimedia.org <https://www.figma.com/file/UVEGIckIbKjDzkoBpJZwJa/Wikimedia.org?node-id=0%3…>, Watchlist <https://www.figma.com/file/SVwIzt0sTC5anowOHmoZ37/Watchlist?node-id=8%3A7488>) for Wikimedia sites using OOUI Figma components copied to the documents and would love to have access to the components directly to improve my workflow. Lectrician1 <https://www.wikidata.org/wiki/User:Lectrician1>,

3 2

OOUI v0.43.0 released -- new features, icon amendments and performance improvements
by Volker E. 18 Jan '22

18 Jan '22

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

1 0

WVUI v0.3.0 released – last minor version incl. new components
by Volker E. 27 Aug '21

27 Aug '21

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…

1 0

Jump to page:

2026

2025

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

Design