Design

design@lists.wikimedia.org

602 discussions

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

26 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. 17 Jan '22

17 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

OOUI v0.42.0 released – less render-blocking code via updated browser support, upgrade to jQuery 3.6.0 & OOjs 6.0.0
by Volker E. 19 Aug '21

19 Aug '21

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

1 0

Vue.js has been selected as Wikimedia Foundation's future JavaScript framework
by Volker E. 02 Aug '21

02 Aug '21

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

1 0

Proposal for removal without deprecation of capitalize-all-nouns skin functionality from MW core
by Volker E. 19 Jul '21

19 Jul '21

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

1 0

Jump to page:

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

Design