Page MenuHomePhabricator

Catrope (Roan Kattouw)
Vue migration team lead

Today

  • Clear sailing ahead.

Tomorrow

  • Clear sailing ahead.

Saturday

  • Clear sailing ahead.

User Details

User Since
Oct 8 2014, 8:32 PM (350 w, 4 h)
Availability
Available
IRC Nick
RoanKattouw
LDAP User
Catrope
MediaWiki User
Roan Kattouw (WMF) [ Global Accounts ]

Recent Activity

Thu, Jun 17

Catrope added a comment to T275914: Using WVUI via ResourceLoader should expose icons.

For performance reasons, we'd like to avoid exposing the entire set of icons, because it's so large. Instead, I think we'll want to offer two options:

  • Using a build step, tree-shake just the icons that are needed, and include those in the built bundle
  • Allow RL modules to list the icons they need in their module definition, and build some ResourceLoaderImageModule-style magic to automatically add wvuiIcons.iconName = '...svg string...'; to those modules

Neither one of those would work for onwiki scripts though, right?

Thu, Jun 17, 9:54 PM · User-DannyS712, WVUI
Catrope added a comment to T284838: Add a basic Dialog component to WVUI.

I wrote a sketch of a dialog component, before abandoning it and working on other things: https://gerrit.wikimedia.org/r/c/wvui/+/699788 . It's very incomplete, but here are some of the things I had in mind while writing this.

Thu, Jun 17, 9:52 PM · Readers-Web-Backlog, WVUI, Design-Systems-team-board (Vue.js Migration Team Radar)
Catrope committed rWVUIaacf74e81f49: [dropdown] Add composable for generated IDs, use for ARIA (authored by Catrope).
[dropdown] Add composable for generated IDs, use for ARIA
Thu, Jun 17, 9:24 PM
Catrope committed rWVUI3a09e0ce183f: [dropdown] Add Dropdown and OptionsMenu components (authored by Catrope).
[dropdown] Add Dropdown and OptionsMenu components
Thu, Jun 17, 9:24 PM
Catrope added a comment to T281527: Security Readiness Review For Vue composition API plugin.

There are only release candidates for version 1, which means code is constantly changing and hard to ensure project stability. It would be ideal to make sure once the 1.0 release is available, another follow up security review should be done to ensure there aren't any security issues.

We can probably just re-open this task with an updated description and a new comment pinging the Security-Team.

Thu, Jun 17, 8:22 PM · Patch-For-Review, Design-Systems-team-board, secscrum, Security, Security Readiness Reviews

Tue, Jun 15

Catrope added a comment to T281527: Security Readiness Review For Vue composition API plugin.

Thank you!

Tue, Jun 15, 2:17 PM · Patch-For-Review, Design-Systems-team-board, secscrum, Security, Security Readiness Reviews

Mon, Jun 14

Catrope added a comment to T284511: Support the "exports" shortcut in addition to "module.exports" in packageFiles.

I like the idea of reducing compatibility problems by only exposing exports to package modules. That should be pretty safe, because AFAICT the scenarios are:

  • Code uses exports as an implicit global: this shouldn't be happening, eslint would catch it
  • Code uses exports as a declared variable or as a function parameter: this is fine, it'd just shadow the exports parameter from the wrapper function that we'd provide
  • Code uses typeof exports or similar to detect its presence: I think it's safe to assume that only UMD code would do this, and the wrapper file would need to be changed in the way you describe
Mon, Jun 14, 8:12 PM · Performance-Team (Radar), MediaWiki-ResourceLoader, Design-Systems-team-board (Vue.js Migration Team Radar)
Catrope added a comment to T275914: Using WVUI via ResourceLoader should expose icons.

For performance reasons, we'd like to avoid exposing the entire set of icons, because it's so large. Instead, I think we'll want to offer two options:

  • Using a build step, tree-shake just the icons that are needed, and include those in the built bundle
  • Allow RL modules to list the icons they need in their module definition, and build some ResourceLoaderImageModule-style magic to automatically add wvuiIcons.iconName = '...svg string...'; to those modules
Mon, Jun 14, 8:04 PM · User-DannyS712, WVUI

Fri, Jun 11

Catrope added a comment to T284782: Improve the way WVUI ships type definitions.

Point 1: agreed.

Fri, Jun 11, 12:43 AM · WVUI

Thu, Jun 10

Catrope updated subscribers of T281527: Security Readiness Review For Vue composition API plugin.

Hello security people (@sbassett @Mstyles), just a heads up that I'll be on vacation from right after all-hands until pretty much the end of the quarter (June 18 - 29, returning on June 30). If you have questions about this task during that time, please ping @egardner.

Thu, Jun 10, 8:39 PM · Patch-For-Review, Design-Systems-team-board, secscrum, Security, Security Readiness Reviews

Wed, Jun 9

Catrope committed rWVUI05b684015aeb: Upgrade @vue/composition-api to 1.0.0-rc.10 (authored by Catrope).
Upgrade @vue/composition-api to 1.0.0-rc.10
Wed, Jun 9, 7:22 PM
Catrope added a comment to T284681: Evaluate and implement different WVUI bundles.

T280828: Create a temporary entry for all WVUI components is also relevant for how these two bundles came to be

Wed, Jun 9, 5:59 PM · WVUI

Tue, Jun 8

Catrope added a comment to T280712: Add basic select list (dropdown) component to WVUI.

I found this example in the ARIA docs that seemed to more closely track how our dropdown works, so I implemented its behavior instead. The significant difference is that I'm not setting role="combobox" (because that's only supposed to be set on input[type="text"] elements) and that I'm setting aria-activedescendant on the listbox instead of on (what used to be) the combobox. I found it strange that this example doesn't link the head (button element in their case) of the dropdown to the list, so I used aria-owns the way it's used in the combobox example.

Tue, Jun 8, 1:47 AM · Accessibility, WVUI, Design-Systems-team-board
Catrope added a comment to T280712: Add basic select list (dropdown) component to WVUI.

Regarding the OptionsMenu's slot's default implementation...

Yeah, it makes sense to try to store as much as we can in the OptionsMenu component so we don't have to re-implement the default slot (or anything else) in every component that uses it.

Tue, Jun 8, 12:16 AM · Accessibility, WVUI, Design-Systems-team-board

Mon, Jun 7

Catrope added a comment to T284511: Support the "exports" shortcut in addition to "module.exports" in packageFiles.

If we did this, we would also be able to get rid of wrapper files for UMD distributions of external libraries, like moment-module.js. UMD does assign to module.exports rather than to exports, but it uses typeof exports !== 'object' && typeof module !== 'undefined' to detect whether it's going to assign to module.exports or try something else. In our environment, UMD ends up assigning to a global variable.

Mon, Jun 7, 10:22 PM · Performance-Team (Radar), MediaWiki-ResourceLoader, Design-Systems-team-board (Vue.js Migration Team Radar)
Catrope added a comment to T284480: Create and document a migration planning process.

Re Vue versions, with our current plans as I understand them, everything's going to have to be Vue 2 for the time being. But we should definitely develop guidelines for things to do and things to avoid that will make a future Vue 3 migration easier.

Mon, Jun 7, 6:35 PM · Design-Systems-team-board
Catrope committed rWVUIed6d9eae0e62: [build] Prohibit restricted ES6 functions in .eslintrc.json (authored by Catrope).
[build] Prohibit restricted ES6 functions in .eslintrc.json
Mon, Jun 7, 2:37 PM

Fri, Jun 4

Catrope added a comment to T272879: Migrate WVUI library to Rollup or Vite.

However, doing this will make it more complicated to use Storybook as a tool during component development. It would still be useful for public documentation purposes (display all the merged components and how to use them, etc). Are folks relying on Storybook to help with the initial development of new components (similar to how we use unit tests)? Or do stories usually get written after the fact. @AnneT and @Catrope would be curious as to your thoughts here especially.

Yes, I definitely use Storybook a lot, both during initial development and when making changes to components.

Fri, Jun 4, 6:19 PM · WVUI, Patch-For-Review, Performance-Team (Radar), Design-Systems-team-board
Catrope added a parent task for T267888: Create WMF CI image for Node.js 14: T284253: Upgrade WVUI node.js version.
Fri, Jun 4, 6:16 PM · Release-Engineering-Team (Seen), Continuous-Integration-Config, Continuous-Integration-Infrastructure
Catrope added a subtask for T284253: Upgrade WVUI node.js version: T267888: Create WMF CI image for Node.js 14.
Fri, Jun 4, 6:16 PM · WVUI, Design-Systems-team-board
Catrope added a comment to T280712: Add basic select list (dropdown) component to WVUI.

I think these are my main issues:

  1. In other libraries, "select" usually means a custom-styled element that replaces <select>, but we call that thing a dropdown
  2. When I think "menu" in terms of web design, I think navigation (even though it could mean a menu of options, which is exactly the language MDN uses to describe <select>)
  3. I can't always guess what a widget does, or which one I need, based on the widget names (ButtonMenuSelectWidget vs. ButtonSelectWidget, MenuOptionWidget vs. MenuSectionOptionWidget vs. MenuSelectWidget vs. MenuTagMultiselectWidget, MultioptionWidget vs. MultiselectWidget...) They make sense now that I understand OOUI better, but I don't find them intuitive.

Reasons this might not matter much:

  1. We can probably get rid of some of these widgets since we're no longer relying on a model of inheritance
  2. We'll have a nice demo page to show developer users what each component does (I have relied heavily on the OOUI demos page during my time here...)
  3. Maybe it's just me (although we could consider chatting with some new-to-OOUI designers and developers to see what they think)

It's not just you, this is legitimately confusing, and I don't know what all of these widgets are either. I think we'll suffer from this problem much less in WVUI because 1) we'll be more careful to choose non-confusing names now that we've been burned by this issue, and 2) we'll need fewer components because a) we're not using inheritance and b) we're using data rather than individual components for options.

Fri, Jun 4, 3:38 AM · Accessibility, WVUI, Design-Systems-team-board
Catrope updated subscribers of T284253: Upgrade WVUI node.js version.

@Jdforrester-WMF tells me this is blocked on upgrading the version of Node used in our CI images, which is in turn blocked on SRE approving a newer version of Node (at least for pipeline jobs like the one used for WVUI, which uses a production image)

Fri, Jun 4, 12:33 AM · WVUI, Design-Systems-team-board

Thu, Jun 3

Catrope added a comment to T280712: Add basic select list (dropdown) component to WVUI.

Here are some other things I thought about and/or would like reviewers of my patch to provide input on:

  • What do you think of my use of slots? Should OptionsMenu have a default implementation for its slot, or can it afford not to have one, since it's an internal component? What do you think of the use of named slots with default behavior in Dropdown?
  • Right now I have only one type for options (OptionMenuItem). Should there instead be a base type (OptionMenuItem) that only has what it needs (ID and disabled; label is not needed if there is no default rendering, or if the default rendering is the ID), and a specific type (DropdownItem) that extends that and adds dropdown-specific things (e.g. group header, icon)? Or are those things not really dropdown-specific and should they be supported in all components that use OptionMenu?
  • The MediaSearch implementation accepts various shorthand formats for the items prop. Should we do that / add that here too, and normalize to the longhand format internally?
  • What do you think of my use of v-model with custom prop and event names? Should I rename to modelValue/input so that I can use the modelWrapper composable? Or should the composable support alternative prop/event names? Should the composable use generics so that it can be used with typed props?
  • Should there be styling for the default label that is shown when nothing is selected (e.g. italics)? (There's already a --value-selected CSS class that could be used for this, following MediaSearch's example.)
  • How should focus be handled? The Wikit and WVUI implementations allow the dropdown gain focus when clicked, which makes it easy to hide the menu on blur and to capture key events, but because they don't prevent mousedown the text in the dropdown can be selected. The OOUI implementation prevents mousedown, so there are no selection issues, but that prevents the dropdown from gaining focus (except through the keyboard), so key events and click-away events have to be captured on the document. I chose to go the former route, but maybe we should prevent the text from being selected and prevent the dropdown from visually appearing as if it's focused unless it was focused via the keyboard?
  • Which ARIA attributes are needed that I missed? I haven't added the ones from MediaSearch that rely on IDs. MediaSearch uses the name prop to build IDs, but I don't like the idea of making name a required prop (form field names also don't have to be document-unique, only unique within a form). But we could also generate random IDs at mount time and use those, if the ID-based ARIA attributes are useful.
Thu, Jun 3, 5:46 AM · Accessibility, WVUI, Design-Systems-team-board
Catrope added a comment to T280712: Add basic select list (dropdown) component to WVUI.

Some comments:

  • Select vs. dropdown: Are we open to changing what's represented in the style guide as "dropdown" to "select" to better match the definition of these words in other libraries and places?

I agree, and my proposed patch calls the specific UI component a "Dropdown", while calling the more generic menu an "OptionsMenu".

Thu, Jun 3, 5:15 AM · Accessibility, WVUI, Design-Systems-team-board

Wed, Jun 2

xSavitar awarded T272104: Allow modules to opt-in to ES6 syntax support a Like token.
Wed, Jun 2, 10:33 PM · MW-1.36-notes (1.36.0-wmf.34; 2021-03-09), Design-Systems-team-board, Performance-Team, MediaWiki-ResourceLoader
Catrope added a comment to T281527: Security Readiness Review For Vue composition API plugin.

So sorry for the late response, @Mstyles! I missed your comment and only saw it today because I was working on this task for other reasons. I've added it to our team's workboard so that we can keep a closer eye on it in the future.

Wed, Jun 2, 5:09 AM · Patch-For-Review, Design-Systems-team-board, secscrum, Security, Security Readiness Reviews
Catrope moved T281527: Security Readiness Review For Vue composition API plugin from Backlog to Doing on the Design-Systems-team-board board.
Wed, Jun 2, 4:47 AM · Patch-For-Review, Design-Systems-team-board, secscrum, Security, Security Readiness Reviews
Catrope added a project to T281527: Security Readiness Review For Vue composition API plugin: Design-Systems-team-board.
Wed, Jun 2, 4:46 AM · Patch-For-Review, Design-Systems-team-board, secscrum, Security, Security Readiness Reviews

Tue, Jun 1

Catrope added a comment to T281527: Security Readiness Review For Vue composition API plugin.

@Catrope What version of the composition API do you plan to use? From the release page, it seems that v1.0.0 only has release candidates and betas. Is there a particular commit you are planning to pin to?

Tue, Jun 1, 11:25 PM · Patch-For-Review, Design-Systems-team-board, secscrum, Security, Security Readiness Reviews
Catrope moved T280712: Add basic select list (dropdown) component to WVUI from Backlog to Doing on the WVUI board.
Tue, Jun 1, 6:13 PM · Accessibility, WVUI, Design-Systems-team-board
Catrope moved T280712: Add basic select list (dropdown) component to WVUI from To Do to Doing on the Design-Systems-team-board board.
Tue, Jun 1, 6:13 PM · Accessibility, WVUI, Design-Systems-team-board
Catrope claimed T280712: Add basic select list (dropdown) component to WVUI.
Tue, Jun 1, 6:13 PM · Accessibility, WVUI, Design-Systems-team-board

Wed, May 26

Catrope added a comment to T282835: Evaluate use of TypeScript in WVUI.

Another trick I learned yesterday: if you access a ref, like this.$refs.foo, TypeScript doesn't know exactly what type it is, and infers its type as Vue | Element | Vue[] | Element[]. That's not a very useful type if you want to call methods or access properties, but you can tell TypeScript what the right type is.

Wed, May 26, 3:27 PM · Design-Systems-team-board, WVUI

May 25 2021

Catrope added a comment to T282835: Evaluate use of TypeScript in WVUI.

One thing I've noticed while doing development in WVUI is that the TypeScript integration with Vue 2 behaves strangely sometimes. For example, it only works if you explicitly specify the return type for every computed property function. If you don't specify a return type on any one computed property function that accesses this.something, then type inference breaks for all props and computed properties in all computed property functions.

May 25 2021, 12:32 AM · Design-Systems-team-board, WVUI

May 15 2021

Catrope claimed T281362: Storybook: Question mark icons are confusingly represented for certain RTL langs.

With this patch:

May 15 2021, 1:10 AM · Patch-For-Review, RTL, I18n, WVUI

May 14 2021

Catrope added a comment to T282625: Figure out icon system architecture.

Hi @Catrope - I recently captured some ways we would like to ideally extend the icons set usage on T280666:

Thanks!

May 14 2021, 8:51 PM · Vue.js, WVUI

May 13 2021

Catrope added a comment to T277747: Explore Hot Module Reloading integration of Vite with Resource Loader.

@egardner and I made a proof of concept that integrates Vite with ResourceLoader to provide hot module reloading for Vue code. It turned out to be simpler to achieve than I expected. The extension implementation is here, and the associated core patch is here.

May 13 2021, 1:28 AM · Design-Systems-team-board

May 12 2021

Catrope added a comment to T282625: Figure out icon system architecture.
  1. The strong binding of available icons to javascript helps you to use quickly discover and pick an icon through autocompletion features of popular IDEs.
  2. A build step or even real time checks by IDE make sure you are not refering an icon that does not exist. This is better than a loose dependency like CSS classnames

Needing to import icons in JS and pass them through to the template via data() is annoying

I would say this is positive. It is kind of "strong typing" for icons :-).

This is a good point, and I had forgotten to say: the little extra annoyance is probably worth it for performance reasons (so that tree shaking works), and I also like your framing here as "strong typing for icons", that's exactly what it is. It's also worth noting that, in cases where logic is needed to choose which icon is displayed, you need a computed function anyway, and at that point returning an Icon object instead of a string isn't any extra work.

May 12 2021, 8:25 PM · Vue.js, WVUI
Catrope edited projects for T282625: Figure out icon system architecture, added: Vue.js; removed Design-Systems-team-board.
May 12 2021, 12:12 AM · Vue.js, WVUI
Catrope edited projects for T282625: Figure out icon system architecture, added: Design-Systems-team-board; removed Vue.js.
May 12 2021, 12:11 AM · Vue.js, WVUI
Catrope added a comment to T282625: Figure out icon system architecture.

I'd be curious to hear what other people's experiences are with these icon systems or others, what suggestions they have for what our icon system should look like, and what other factors they think we should consider in the architecture of our icon system.

May 12 2021, 12:11 AM · Vue.js, WVUI
Catrope added a comment to T282625: Figure out icon system architecture.

Here are some pros/cons and trade-offs with WVUI's current icon system as I see them:

May 12 2021, 12:05 AM · Vue.js, WVUI

May 11 2021

Catrope created T282625: Figure out icon system architecture.
May 11 2021, 10:21 PM · Vue.js, WVUI
Catrope added a comment to T282183: Hiding own edits on watchlist and recentchanges results in hiding all IP edits.

Could it be this?

	if ( $user->isAnon() ) {
		$conds[] = 'actor_name<>' . $dbr->addQuotes( $user->getName() );
	} else {
		$conds[] = 'actor_user<>' . $dbr->addQuotes( $user->getId() );
	}

But actor_user is NULL for unregistered users.

May 11 2021, 10:14 PM · MW-1.37-notes (1.37.0-wmf.4; 2021-05-04), Platform Team Workboards (Clinic Duty Team), MediaWiki-Recent-changes, Regression, Growth-Team, MediaWiki-Watchlist
Catrope added a comment to T273493: Add a startIcon option to buttons too.

FYI you can already do this without a startIcon prop, because a button (unlike an input) can contain arbitrary content:

May 11 2021, 12:00 AM · User-DannyS712, WVUI

May 8 2021

Catrope committed rWVUI3d476899df7e: [build][stylelint] Add 'stylelint-order' plugin (authored by Volker E <volker.e@wikimedia.org>).
[build][stylelint] Add 'stylelint-order' plugin
May 8 2021, 6:13 AM

May 5 2021

Catrope committed rWVUI9914319fcada: [components][button] Add 'type' prop to replace 'quiet', add 'primary' (authored by Catrope).
[components][button] Add 'type' prop to replace 'quiet', add 'primary'
May 5 2021, 6:31 AM

May 3 2021

Catrope added a comment to T281781: Proposal: support for ES Modules via script type="module" tags.

developers will benefit from better IDE tooling and will be able to write code in a more standardized way

What do you mean by this exactly? If you mean import and export, then I think there would be additional challenges in getting those to work/coexist with ResourceLoader. Are there other language features that are only available when type="module" is used?

May 3 2021, 10:44 PM · Performance-Team (Radar), Patch-For-Review, Design-Systems-team-board, MediaWiki-ResourceLoader
Catrope reassigned T280828: Create a temporary entry for all WVUI components from Catrope to egardner.
May 3 2021, 4:51 PM · Patch-For-Review, MW-1.37-notes (1.37.0-wmf.9; 2021-06-07), WVUI, Design-Systems-team-board
Catrope closed T280828: Create a temporary entry for all WVUI components as Resolved.
May 3 2021, 4:51 PM · Patch-For-Review, MW-1.37-notes (1.37.0-wmf.9; 2021-06-07), WVUI, Design-Systems-team-board
Catrope placed T224426: Wikidata changes and categorization changes are in Special:RecentChanges even not enabled in preferences up for grabs.
May 3 2021, 4:38 PM · Growth-Team-Filtering, UX-Debt, Growth-Team, Wikidata-Campsite, Wikidata, MediaWiki-Recent-changes
Catrope placed T216087: Emailability: basic changes to Special:CreateAccount up for grabs.
May 3 2021, 4:38 PM · Growth-Team-Filtering, Growth-Team, GrowthExperiments
Catrope placed T215665: Emailability: Improve verification email up for grabs.
May 3 2021, 4:38 PM · Growth-Team-Filtering, Growth-Team, MW-1.33-notes (1.33.0-wmf.21; 2019-03-12), GrowthExperiments
Catrope placed T215660: Emailability: Update email field label with more encouraging language up for grabs.
May 3 2021, 4:37 PM · Growth-Team-Filtering, Growth-Team, GrowthExperiments
Catrope placed T215656: Emailability: Indicate to user benefits of providing email address during account creation up for grabs.
May 3 2021, 4:37 PM · Growth-Team-Filtering, Growth-Team, MW-1.33-notes (1.33.0-wmf.20; 2019-03-05), GrowthExperiments
Catrope placed T115264: Notification panel: Control notification volume up for grabs.
May 3 2021, 4:37 PM · Growth-Team-Filtering, Growth-Team, MW-1.35-notes (1.35.0-wmf.35; 2020-06-02), Design, Notifications
Catrope placed T122623: Allow hiding VE onboarding experience programmatically to avoid sidetracking users using a different onboarding experience up for grabs.
May 3 2021, 4:36 PM · Growth-Team-Filtering, Growth-Team, MediaWiki-extensions-GuidedTour, VisualEditor
Catrope removed a member for OWC2020 Replying 1.0: Catrope.
May 3 2021, 4:31 PM
Catrope removed a member for VisualEditor-Performance: Catrope.
May 3 2021, 4:31 PM
Catrope removed a member for VisualEditor: Catrope.
May 3 2021, 4:31 PM
Catrope removed a member for RESTBase-architecture: Catrope.
May 3 2021, 4:31 PM
Catrope removed a member for jQuery-Client: Catrope.
May 3 2021, 4:29 PM
Catrope removed a member for Growth-Team-Leftovers: Catrope.
May 3 2021, 4:29 PM
Catrope removed a member for Edit-Review-Improvements-ReviewStream: Catrope.
May 3 2021, 4:29 PM
Catrope removed a member for Contributors-Team: Catrope.
May 3 2021, 4:28 PM
Catrope removed a member for Collab-Notifications-Page: Catrope.
May 3 2021, 4:28 PM
Catrope removed a member for NewcomerTasks 1.0 : Catrope.
May 3 2021, 4:27 PM
Catrope removed a member for GrowthExperiments-Homepage: Catrope.
May 3 2021, 4:27 PM
Catrope removed a member for Growth-Team: Catrope.
May 3 2021, 4:25 PM

Apr 30 2021

Catrope committed rWVUI44f7cf9bb701: [storybook] Fix story parameter typing in Button story (authored by Catrope).
[storybook] Fix story parameter typing in Button story
Apr 30 2021, 7:43 AM

Apr 29 2021

Catrope added a comment to T281527: Security Readiness Review For Vue composition API plugin.

The deployment target date is nuanced: we plan to introduce the plugin in WVUI in the coming weeks, but that doesn't immediately result in production deployment. That would only occur once we cut a new release of WVUI and put it in MediaWiki core. We may well be ready to do that some time in May or early June, but if the security review isn't complete by then, we could hold off (or put it behind a feature flag) until we have real code in an extension using it that is ready to deploy. And we don't think we would get to _that_ stage until July (or perhaps June if things go well/fast).

Apr 29 2021, 8:45 PM · Patch-For-Review, Design-Systems-team-board, secscrum, Security, Security Readiness Reviews
Catrope added a comment to T281527: Security Readiness Review For Vue composition API plugin.

See T281527: Security Readiness Review For Vue composition API plugin for more context on how this task came about.

Apr 29 2021, 8:40 PM · Patch-For-Review, Design-Systems-team-board, secscrum, Security, Security Readiness Reviews
Catrope added a comment to T257734: Security Readiness Review For Vue version 3.

Thanks @sbassett! I asked the other engineers on the Vue team, and it sounds like we do plan on using the composition API plugin soon (which is a plugin for Vue 2.6 that essentially adds a subset of the anticipated 2.7 features). I've opened T281527: Security Readiness Review For Vue composition API plugin to request a review of that plugin. I'll link this task there too for context. We'll plan to reopen this task when Vue 2.7 comes out.

Apr 29 2021, 8:40 PM · WVUI, Security Readiness Reviews, Security, Vue.js
Catrope updated the task description for T281527: Security Readiness Review For Vue composition API plugin.
Apr 29 2021, 8:39 PM · Patch-For-Review, Design-Systems-team-board, secscrum, Security, Security Readiness Reviews
Catrope created T281527: Security Readiness Review For Vue composition API plugin.
Apr 29 2021, 8:36 PM · Patch-For-Review, Design-Systems-team-board, secscrum, Security, Security Readiness Reviews
Catrope added a comment to T257734: Security Readiness Review For Vue version 3.

Since it looks like Vue is never going to support IE11 in Vue 3, and instead backport some Vue 3 features to a new Vue 2.7 release (that's what's currently being proposed, and it seems likely to happen), we don't think that any WMF code will likely migrate to Vue 3 for at least a year or more. I do think we'll likely upgrade to 2.7 once it's out, and we may want to use the composition API plugin before then, to get some of those 2.7 features early (the proposal calls for this plugin to be made part of Vue itself in 2.7). So I think a security readiness review of Vue 3 can be postponed for now, and we'll probably ask for a review of Vue 2.7 when it comes out. We may also ask for a review of the composition API plugin for 2.6, I'll ask the other Vue migration team members about that.

Apr 29 2021, 6:44 PM · WVUI, Security Readiness Reviews, Security, Vue.js

Apr 28 2021

Catrope committed rWVUI2f085df0c636: [storybook] Fix control.options deprecation warning (authored by Catrope).
[storybook] Fix control.options deprecation warning
Apr 28 2021, 7:00 AM

Apr 26 2021

Catrope added a comment to T280828: Create a temporary entry for all WVUI components.

Everything you asked about is correct, as far as I know

Apr 26 2021, 9:59 PM · Patch-For-Review, MW-1.37-notes (1.37.0-wmf.9; 2021-06-07), WVUI, Design-Systems-team-board

Apr 23 2021

Catrope added a comment to T280934: Use text color instead of opacity to style icons.

The attached patch proposes an implementation using approach #2 from the list above. I'm not 100% confident that this is the right approach, but it seemed like the one with the fewest downsides to me. Eager to get feedback on this.

Apr 23 2021, 8:40 PM · WVUI

Apr 22 2021

Catrope created T280934: Use text color instead of opacity to style icons.
Apr 22 2021, 10:19 PM · WVUI
Catrope committed rWVUI692d8551fa1c: Tag v0.1.1 (authored by Volker E <volker.e@wikimedia.org>).
Tag v0.1.1
Apr 22 2021, 1:14 PM

Apr 21 2021

Catrope placed T278509: Unify button implementations up for grabs.
Apr 21 2021, 7:22 PM · WVUI, Design-Systems-team-board
Catrope claimed T280344: Quiet buttons hover state inconsistent with style guide and implementations.
Apr 21 2021, 7:22 PM · UI-Standardization, Wikimedia Design Style Guide
Catrope claimed T280498: Consolidate the styles of active destructive and progressive quiet buttons.
Apr 21 2021, 7:22 PM · MW-1.37-notes (1.37.0-wmf.3; 2021-04-27), UI-Standardization, Wikimedia Design Style Guide
Catrope claimed T278509: Unify button implementations.
Apr 21 2021, 7:21 PM · WVUI, Design-Systems-team-board
Catrope claimed T280840: Implement primary buttons in WVUI.
Apr 21 2021, 7:21 PM · WVUI, Design-Systems-team-board, UI-Standardization
Catrope created T280840: Implement primary buttons in WVUI.
Apr 21 2021, 7:21 PM · WVUI, Design-Systems-team-board, UI-Standardization

Apr 20 2021

Catrope added a comment to T278509: Unify button implementations.

Change 681188 had a related patch set uploaded (by Catrope; author: Catrope):

[wvui@master] Fix appearance of progressive/destructive buttons

https://gerrit.wikimedia.org/r/681188

Apr 20 2021, 12:12 AM · WVUI, Design-Systems-team-board

Apr 19 2021

Catrope added a comment to T280503: Undocumented color applied to the background of active quiet buttons in WVUI.

This color is @background-color-quiet--active from wikimedia-ui-base. On a white background, this color looks the same as Base80, which is what the style guide prescribes.

Apr 19 2021, 7:54 PM · UI-Standardization, Wikimedia Design Style Guide
Catrope created T280589: Button SVGs look wrong in Firefox on Ubuntu, text is not centered.
Apr 19 2021, 7:30 PM · Wikimedia Design Style Guide

Apr 8 2021

Catrope added a comment to T279714: Add binary input components to WVUI.
  • I prefer to pass in the label as the main slot since it's content, it's the simplest implementation for a required element, and it might take a form other than a string (like an i18n message object). I also like the named description slot in the Wikit component, although this isn't included in the design style guide at the moment.

I like the idea of putting the label in the main slot. Speaking of labels, what are your thoughts on how we should render those? Wikit generates a random ID, then uses <input type="checkbox" id="randomValue" /><label for="randomValue">Label text</label>. MediaSearch puts the input tag inside of the label tag (<label><input type="checkbox" />Label text</label>), which avoids the need for an ID. For that reason, I lean towards the latter.

Apr 8 2021, 11:06 PM · WVUI, Design-Systems-team-board
Catrope added a comment to T279714: Add binary input components to WVUI.

Per T278509#6986197, do you think it makes sense to add toggle switches to the scope of this task? It feels to me like they're more like checkboxes than anything else.

Apr 8 2021, 11:00 PM · WVUI, Design-Systems-team-board
Catrope added a comment to T278509: Unify button implementations.

We should also think about how to handle toggle buttons and toggle switches. I don't think we have Vue implementations of these yet, but OOUI has them. Toggle buttons look exactly like normal buttons, except that they stay pressed after you click them (and become unpressed again when you click them again). We could consider adding a prop to the regular button component that enables this mode. Toggle switches are a bit more akin to checkboxes (see T279714), and I think it would make sense for them to be a separate component.

Apr 8 2021, 10:59 PM · WVUI, Design-Systems-team-board

Mar 30 2021

egardner awarded T278509: Unify button implementations a Like token.
Mar 30 2021, 7:09 PM · WVUI, Design-Systems-team-board

Mar 26 2021

Catrope created T278509: Unify button implementations.
Mar 26 2021, 4:26 AM · WVUI, Design-Systems-team-board

Mar 19 2021

Catrope added a comment to T277747: Explore Hot Module Reloading integration of Vite with Resource Loader.

Another issue is that the Vite loader assumes ES6 modules are used. It uses dynamic import (await import( 'url' )) to load new versions of modules, which is an ES2020 feature. The latter is fine, we can assume that developers use recent browser versions. The former is a problem, not necessarily because of browser requirements (basic import/export is in ES6, although we probably wouldn't want to limit HMR to ES6-only modules) but because ResourceLoader doesn't support ES6 modules and would require fundamental changes to support them (for example, import/export can only be used on the top level, so wrapping module contents in functions breaks them).

Mar 19 2021, 9:14 PM · Design-Systems-team-board
Catrope added a comment to T277747: Explore Hot Module Reloading integration of Vite with Resource Loader.

Some not-fully-organized notes from digging into how HMR works in Vite, and how we might integrate it into RL:

Mar 19 2021, 12:33 AM · Design-Systems-team-board

Mar 17 2021

Catrope added a comment to T274940: 1.36.0-wmf.36 deployment blockers.
  1. Risky Patch! 🚂🔥
Mar 17 2021, 7:39 PM · Patch-For-Review, Release-Engineering-Team-TODO (2021-01-01 to 2021-03-31 (Q3)), Release, Train Deployments
Catrope closed T277627: ES6 minification fails with Section translation js bundle because it's ES8 not ES6 as Invalid.

As other commenters have pointed out, async/await is part of ES2017, whereas the minifier only supports ES6 (ES2015) currently. Adding support for async and other post-ES6 language features to the minifier should be pretty easy. However, making those available for MediaWiki code also involves a trade-off: are the additional features worth excluding more browsers? This depends on how useful the new features are, and how much usage the non-supporting browsers have. I've started a task for exploring this here: T277675: Explore native support for ES2016 (ES7) or higher versions

Mar 17 2021, 4:47 PM · Wikimedia-Minify, Performance-Team
Catrope added a comment to T277675: Explore native support for ES2016 (ES7) or higher versions.

I haven't yet looked at which browsers support these features and how well-used they are. That information should be added to this task next. I don't have time to do that right now; anyone else should feel free to pick that up.

Mar 17 2021, 4:47 PM · Wikimedia-Minify, Performance-Team, JavaScript, MediaWiki-ResourceLoader