Apr 13 2022
Apr 8 2022
Apr 7 2022
To ensure things don't get lost in the comments here, I'm adding the specific design review tasks (and patches that address them) to the top of this ticket.
Apr 6 2022
I've added a basic prototype MW skin called "Incunabula" – the project repo is here: https://gitlab.wikimedia.org/egardner/incunabula-skin
Apr 5 2022
Mar 31 2022
Mar 28 2022
I've filed a bug task for the demo behavior I mentioned upthread: https://phabricator.wikimedia.org/T304894. This is an issue coming from Vitepress, not from the component itself.
Mar 26 2022
Personally I would like to see gadget and user script authors gain the ability to start using Vue and Codex for their own projects. I think this will eventually be possible but there are a couple of blockers at the moment.
Mar 25 2022
You can see a live demo of the Tabs component here:
Mar 24 2022
@Volker_E I agree that we should evaluate some of the keyboard behavior (like how Up and Down arrows should work). It should be pretty easy to change things if we decide that one approach or the other is the best. Same goes for the "wrap-around" behavior – I can enable this if needed but I wonder if things are clearer/more obvious to the end user without it.
Mar 23 2022
This has been resolved, the impacted code is running again in the target browsers.
Closing as declined since we're deprecating WVUI for Codex (which uses Vite, built on top of rollup) shortly.
Mar 21 2022
@bmartinezcalvo I was just working on this today. I'd like to propose a few changes to this based on what I've been reading in this article: https://inclusive-components.design/tabbed-interfaces/#keyboardbehavior.
I've deleted the main branch in Gerrit, and cherry-picked the only commit which had been merged there but not to master. The master branch can be considered canonical from here on out.
Mar 19 2022
Sorry about this – I initially created this repo in Gitlab where main was used, I didn't realize this would cause problems.
Mar 17 2022
Wow, this is cool! Now that we have this capability, I'm open to suggestions on ways to develop the VueTest extension to make it more useful for QA testing purposes. Would it make sense to have a single dedicated Special page per Codex component (one page could show multiple variations of course)? Should we try to embed the actual demo code from the docs site inside of MW somehow?
Mar 16 2022
Closing this because the extension exists and is in Gerrit. We can open follow-up tasks later if we need to add new functionality here.
I've set this task as a subtask of the Codex Alpha milestone, because it seems like the bulk of the Codex / Abstract Wiki case study is going to revolve around swapping out the existing SD components with Codex equivalents, and making small adjustments where necessary.
Mar 15 2022
Mar 14 2022
I support investigating clever ways to import/embed type definitions, but I know that can be a bit of a rabbit hole.
@Sarai-WMDE @bmartinezcalvo I've fleshed out this task a bit more and added some relevant information. @STHart I think we may need to prioritize development of this component because not having it will block Vue 3 migration for some projects (because folks who need this layout are relying on an earlier version of this component which is not Vue 3 compatible). Fortunately we 1) have the designs more or less (going back to OOUI), and 2) some implementation work has already been done in old patches and can be used as a starting point.
Mar 11 2022
This task is looking like it is probably not worth the effort; moving to "blocked" for now.
I think I was unclear on the desired UX when we were working on selectHighlighted – we actually never want something to be selected and highlighted at the same time due to keyboard navigation, correct?
Is merging of https://gerrit.wikimedia.org/r/c/design/codex/+/770014 blocked until this issue is resolved, or should this be handled in a follow-up patch? I assume the latter but just want to make sure.
@Mhurd We've migrated this extension into Gerrit, so you may want to update your Makefile / Docker setup to clone from the new repo: https://gerrit.wikimedia.org/r/mediawiki/extensions/VueTest
So is the appropriate comparison codex-typeaheadSearch.umd.js (at 23.5KB) vs wvui-search.js (at 19.8KB)?
Mar 10 2022
Great, glad that idea makes sense to everyone!
Mar 8 2022
Does the spacing between MenuItem Icons and labels/descriptions look a bit tight to anyone else?
Mar 4 2022
Getting all the Typescript configuration working properly will be a big hassle here I think. The guidelines I was developing over at T302831 assume a JS migration; migrating between two TS codebases adds a lot more effort because the types shipped in Vue have undergone a lot of changes as well.
@TheDJ thanks! I think that in our case the initialization code will look something like this (inside the mounted() hook for the Player.vue component):