Page MenuHomePhabricator

[Epic] Add CSS-only versions of most Codex Vue components
Closed, ResolvedPublic5 Estimated Story Points

Description

This task covers implementing a CSS-only version of most of the existing Codex Vue components.

NOTE: The high and medium priority components have been completed, and the low priority components will not be implemented as part of this task. If you find this task and want to request a CSS-only version of a component, please contact the Design Systems Team or open a task on the Codex workboard.

Documentation

We need to document these components in 2 places:

  1. On the demo page for that component on the Codex docs site. For the MVP version, this will be added to the existing component demo markdown file in a subsection called ## CSS-only version, which will appear below the Vue demos/usage tables. See demo here.
  2. In the sandbox, maybe on a separate page from the Vue components?

Implementation notes

Some Vue components will be very similar to their CSS-only counterpart, while some will be very different, in order to provide some level of functionality in a no-JS situation. Below are implementation notes for each component, including relative effort, similarity in markup/contents, and implementation details.

ComponentStatusPriorityEffortTemplate similarityNotes
Button Donehighlow1:1Lost in the no-JS version are an accessibility check, the ability to automatically identify an icon-only button, and consistent cross-browser active styles
ButtonGroupNot startedlowlow1:1Users will have to write the markup for all the buttons, rather than passing in button data.
Card Donehighlow1:1Users will have to manually use the correct root element (span vs link).
Checkbox Donehighmedium1:1Need to refactor Vue template markup to make the label a sibling of the input, rather than wrapping it. Should be done at the same time as Radio since they share a binary-input mixin.
ComboboxNot startedlow??There are a couple of ways we could create either a fully working or temporarily less functional CSS-only combobox, need to further evaluate
DialogDeclinedlowhighWould need to use native <dialog>Effort to create a working, accessible CSS-only dialog may be too high to justify the lack of expectation of a no-JS dialog
Icon Donehighhigh1:1Would require scripting on the back end to do what the Vue component does to insert the SVG into the template
Lookup DonemediumlowUse TextInput insteadIn a no-JS environment, we can fall back on a simple TextInput
MenuNot startedlowlow1:1Styles are easily sharable with the same template, but will people use the Menu component in a no-JS context, given we currently only cover the case of a dropdown menu?
MenuItemNot startedlowlow1:1Same as Menu; easy to do, but is it needed? Similar to Card, users would need to specify <span> or <a> element
Message DonehighlowSame, but without some featuresInteractive features will not be included
ProgressBar Donemediumlow1:1Will only include the indeterminate variant.
Radio Donehighmedium1:1Like Checkbox, need to refactor Vue template markup to make the label a sibling of the input, rather than wrapping it.
SearchInput Donelowlow1:1
SearchResultTitleNot startedlowlow1:1The main point of this component is to process a search result label and split it into chunks in order to highlight the search query via bolded text. These styles can be shared, but creating the markup will be on the user.
Select DonemediummediumCompletely different, will use <select>Only the select handle will be styled since the native menu can't be. Sharing styles is a bit messy and will rely on mixins.
Tab/Tabs Donemediumhigh?Will need to get creative to make this work with no-JS (for MediaSearch, we used anchor links to select the proper tab)
TextInput Donehighlow1:1
Thumbnail DonemediummediumSimilar, but maybe without placeholder icon during loadWould be nice to lazy load the image and show the placeholder in the meantime if possible
ToggleButtonNot startedlowmediumWould need to add a checkboxA working no-JS ToggleButton would require a hidden checkbox input. We could implement this only for CSS-only, or for the Vue version as well.
ToggleButtonGroupNot startedlowmediumSame, but might need to think about checkbox group semantics
ToggleSwitch Donemediummedium1:1Vue version already uses a hidden checkbox, but we might want to refactor the markup to make the label element a sibling of the input rather than wrapping it, depending on what's best for UX
TypeaheadSearch DonehighmediumUse SearchInput insteadFall back on a simple SearchInput

Acceptance criteria

A CSS-only component has been added and documented for the following components (low priority components were not completed as part of this task):

  • Button
  • Card
  • Checkbox
  • Icon
  • Lookup
  • Message
  • ProgressBar
  • Radio
  • SearchInput
  • Select
  • Tabs/Tab
  • TextInput
  • Thumbnail
  • ToggleSwitch
  • TypeaheadSearch

Details

SubjectRepoBranchLines +/-
mediawiki/coremaster+710 -673
mediawiki/coremaster+1 K -1 K
design/codexmain+31 -6
mediawiki/coremaster+879 -779
design/codexmain+3 -0
design/codexmain+3 -0
design/codexmain+3 -2
design/codexmain+104 -33
design/codexmain+216 -29
design/codexmain+44 -40
design/codexmain+614 -4
mediawiki/coremaster+2 K -1 K
design/codexmain+32 -0
mediawiki/coremaster+899 -923
design/codexmain+217 -124
design/codexmain+495 -20
design/codexmain+107 -2
mediawiki/coremaster+198 -204
design/codexmain+151 -1
design/codexmain+386 -94
mediawiki/coremaster+1 K -1 K
design/codexmain+569 -109
mediawiki/coremaster+1 K -1 K
design/codexmain+224 -90
design/codexmain+690 -275
design/codexmain+21 -4
design/codexmain+318 -40
design/codexmain+338 -62
Show related patches Customize query in gerrit

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 885887 merged by jenkins-bot:

[design/codex@main] TextInput, SearchInput: Add CSS-only versions

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

Change 889856 merged by jenkins-bot:

[design/codex@main] TypeaheadSearch: Add CSS-only version

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

Volker_E renamed this task from Add CSS-only versions of most Codex Vue components to [Epic] Add CSS-only versions of most Codex Vue components.Feb 22 2023, 10:53 AM

Change 893051 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update Codex from v0.6.0 to v0.6.2

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

Change 893051 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.6.0 to v0.6.2

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

Change 906655 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Card, Thumbnail: Add CSS-only versions

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

Change 907489 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] ProgressBar: Add CSS-only version

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

Change 907510 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] ToggleSwitch: Add CSS-only version

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

Change 907489 merged by jenkins-bot:

[design/codex@main] ProgressBar: Add CSS-only version

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

Change 906655 merged by jenkins-bot:

[design/codex@main] Card, Thumbnail: Add CSS-only versions

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

AnneT updated the task description. (Show Details)

Change 907510 merged by jenkins-bot:

[design/codex@main] ToggleSwitch: Add CSS-only version

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

Change 907988 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v0.8.0 to v0.9.0

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

Change 907988 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.8.0 to v0.9.0

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

Change 909754 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Lookup: Add docs for CSS-only support

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

Change 909754 merged by jenkins-bot:

[design/codex@main] Lookup: Add docs for CSS-only support

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

AnneT updated the task description. (Show Details)

Change 911342 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Tabs: Refactor styles to prepare for CSS-only version

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

Change 911343 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Tabs: Add CSS-only versions

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

Change 911932 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update Codex from v0.9.0 to v0.9.1

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

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/9a9f20a61d/w

Change 911932 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.9.0 to v0.9.1

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

Change 912989 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Tabs: Add CSS-only version

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

Change 911343 abandoned by Anne Tomasevich:

[design/codex@main] Tabs: Add CSS-only versions

Reason:

in favor of https://gerrit.wikimedia.org/r/c/design/codex/+/912989

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

Change 911342 abandoned by Anne Tomasevich:

[design/codex@main] Tabs: Refactor styles to prepare for CSS-only version

Reason:

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

Test wiki created on Patch demo by KHarlan (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/cfdfa13682/w

Change 912989 merged by jenkins-bot:

[design/codex@main] Tabs: Add CSS-only version

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

AnneT added subscribers: CCiufo-WMF, bmartinezcalvo.

@bmartinezcalvo / @CCiufo-WMF do we want to do design review of CSS-only components? I think it would be worthwhile to have a designer review the CSS-only components that we have implemented just to check that we have indeed reached an acceptable level of parity with the Vue component. FWIW, not all components are 100% the same due to different underlying markup (e.g. the CSS-only Select menu is native to the browser, and keyboard navigation works differently for CSS-only tabs).

@bmartinezcalvo / @CCiufo-WMF do we want to do design review of CSS-only components? I think it would be worthwhile to have a designer review the CSS-only components that we have implemented just to check that we have indeed reached an acceptable level of parity with the Vue component. FWIW, not all components are 100% the same due to different underlying markup (e.g. the CSS-only Select menu is native to the browser, and keyboard navigation works differently for CSS-only tabs).

@AnneT I agree, it would be good to do a design review of each CSS-only component. @CCiufo-WMF should I use this epic to complete the design sign-off?

@bmartinezcalvo agreed. I think we should keep everything in this task for now, since it's what we've been using.

@AnneT thanks for also updating the MW page with a column for CSS-only component status :)

@bmartinezcalvo agreed. I think we should keep everything in this task for now, since it's what we've been using.

@AnneT thanks for also updating the MW page with a column for CSS-only component status :)

Great assigning me this task to complete the design sign-off.

@AnneT design sign-off done. Commenting here some things I've detected and we should fix/update:

Buttons

Some buttons are missing in the CSS-only demos:

  • primary destructive
  • quiet destructive
  • quiet default

Should we include them? Maybe it's not needed since they are already represented in the configurable demo above.

Button group

Not started

Card

It LGTM ✅

Checkbox

It LGTM ✅

Combobox

Not started

Dialog

Declined

Icon

It LGTM ✅ (except the icon alignment with the text that is not correct in all the demo site)

InfoChip

Not started

Link

Not started

Lookup

It's not a lookup but a text input instead as explained in the demo

Menu

Not started

MenuItem

Not started

Message
  • The messages with dismiss button and auto-dismiss are missing.
  • Could we add more separation between message and inline message in this demo?
ProgressBar
  • The disabled CSS-only version is different from the one in the configurable demo since one uses background-color-disabled-subtle and other background-color-base. We should unify and I think the right behavior is the one in the configurable demo using background-color-disabled-subtle.
  • Disabled inline progress bar is missing in the CSS-only component's section.
Radio
  • Default state should use border-color-interactive in both the CSS-only and the original versions.
Search

It LGTM ✅

Select
  • Disabled colors don't match with the original version. They should be color-disabled and background-color-disabled-subtle.
  • Focus is not visible (the blue border is missing).
Tabs/Tab
  • Keyboard navigation for arrow-back and arrow-next don't work so user can not move the focus within the tabs.
  • When selecting one tab, the scroll should not jump to the beginning of the page.
TextArea

Not started

TextInput
  • Clearable text input is missing.
Thumbnail

It LGTM ✅

ToggleButton

Not started

ToggleButtonGroup

Not started

ToggleSwitch
  • Keyboard navigation doesn't work with Enter so the ToggleSwitch cannot be selected with this key.
  • Disabled-on state is missing (just the disabled of is displayed in the CSS-only demo).
TypeaheadSearch

As explained in the demo, this is just a SearchInput component


Apart from the commented above, might be worth creating configurable demos for CSS-only components to avoid creating too many demo boxes on the page? Also, RTL direction can not be configured in the CSS-only demos.

Change 918598 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.9.1 to v0.10.0

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

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/8333e57f25/w

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/8333e57f25/w/

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/9a9f20a61d/w/

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/66d018802f/w/

@AnneT moving the task to Ready for development so you can fix the items commented above.

Change 918598 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.9.1 to v0.10.0

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

Change 919916 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] CSS components: Implement design and docs improvements

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

@bmartinezcalvo thanks for all the feedback! I've responded to it all and pushed a patch that fixes some of the issues you raised. I just have a question about the Select disabled colors.

Buttons

Some buttons are missing in the CSS-only demos:

  • primary destructive
  • quiet destructive
  • quiet default

Should we include them? Maybe it's not needed since they are already represented in the configurable demo above.

I would recommend we leave this out, at least for now. As you said, all of the states can be viewed in the configurable demo, and I think there is enough information for people to figure out how to create combinations not directly shown in the CSS-only version docs.

Message
  • The messages with dismiss button and auto-dismiss are missing.

The dismiss and auto-dismiss functionality is not really possible without JavaScript, so those features were not implemented.

  • Could we add more separation between message and inline message in this demo?

Done in the latest patch

ProgressBar
  • The disabled CSS-only version is different from the one in the configurable demo since one uses background-color-disabled-subtle and other background-color-base. We should unify and I think the right behavior is the one in the configurable demo using background-color-disabled-subtle.

Good catch! I've fixed this.

  • Disabled inline progress bar is missing in the CSS-only component's section.

I added this.

Radio
  • Default state should use border-color-interactive in both the CSS-only and the original versions.

Oh wow, this was caused by a typo in the Radio code that we missed during code review! Thanks for finding this; I've corrected it.

Select
  • Disabled colors don't match with the original version. They should be color-disabled and background-color-disabled-subtle.

I'm seeing these colors being used for both the Vue and CSS versions; could you help me understand exactly what is wrong here?

  • Focus is not visible (the blue border is missing).

Good call; I've applied the focus styles to the CSS version as well as the Vue version.

Tabs/Tab
  • Keyboard navigation for arrow-back and arrow-next don't work so user can not move the focus within the tabs.

This is unfortunately how it works with the CSS-only version - the arrow navigation is implemented with JavaScript, so tab navigation is all we get in the CSS version. I did add a note to the docs about this to clarify it at least.

  • When selecting one tab, the scroll should not jump to the beginning of the page.

I've fixed this

TextInput
  • Clearable text input is missing.

This is only possible with JS, so we haven't implemented it

ToggleSwitch
  • Keyboard navigation doesn't work with Enter so the ToggleSwitch cannot be selected with this key.

This is only possible with JS unfortunately. All we get in the CSS version is what's built into the checkbox input, which allows you to toggle the switch with the space key.

  • Disabled-on state is missing (just the disabled of is displayed in the CSS-only demo).

I added this

Change 919916 merged by jenkins-bot:

[design/codex@main] CSS components: Implement design and docs improvements

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

@bmartinezcalvo thanks for all the feedback! I've responded to it all and pushed a patch that fixes some of the issues you raised. I just have a question about the Select disabled colors.

Buttons

Some buttons are missing in the CSS-only demos:

  • primary destructive
  • quiet destructive
  • quiet default

Should we include them? Maybe it's not needed since they are already represented in the configurable demo above.

I would recommend we leave this out, at least for now. As you said, all of the states can be viewed in the configurable demo, and I think there is enough information for people to figure out how to create combinations not directly shown in the CSS-only version docs.

@AnneT ok!

Message
  • The messages with dismiss button and auto-dismiss are missing.

The dismiss and auto-dismiss functionality is not really possible without JavaScript, so those features were not implemented.

@AnneT should we include a message in the CSS-only version demo explaining this?

Select
  • Disabled colors don't match with the original version. They should be color-disabled and background-color-disabled-subtle.

I'm seeing these colors being used for both the Vue and CSS versions; could you help me understand exactly what is wrong here?

@AnneT what happens is that the disabled styles don't match in the configurable demo (darker gray) and the CSS-only (light gray). The right colors are the ones used in the configurable demo.

Captura de pantalla 2023-05-18 a las 13.44.49.png (840×2 px, 102 KB)
Captura de pantalla 2023-05-18 a las 13.44.55.png (850×2 px, 119 KB)
Configurable demoCSS-only version
Tabs/Tab
  • Keyboard navigation for arrow-back and arrow-next don't work so user can not move the focus within the tabs.

This is unfortunately how it works with the CSS-only version - the arrow navigation is implemented with JavaScript, so tab navigation is all we get in the CSS version. I did add a note to the docs about this to clarify it at least.

@AnneT ok, thank you!

  • When selecting one tab, the scroll should not jump to the beginning of the page.

I've fixed this

@AnneT it's still not working. When you select one tab now, the scroll jumps to the beginning of the page plus the right panel with the sections of the page is removed.

TextInput
  • Clearable text input is missing.

This is only possible with JS, so we haven't implemented it

@AnneT ok!

ToggleSwitch
  • Keyboard navigation doesn't work with Enter so the ToggleSwitch cannot be selected with this key.

This is only possible with JS unfortunately. All we get in the CSS version is what's built into the checkbox input, which allows you to toggle the switch with the space key.

@AnneT ok!

Change 921077 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Fix CSS tabs demo

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

Change 921082 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Select: Set opacity of 1 for disabled CSS select

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

Change 921084 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Explain which Message features aren't supported in CSS version

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

Message
  • The messages with dismiss button and auto-dismiss are missing.

The dismiss and auto-dismiss functionality is not really possible without JavaScript, so those features were not implemented.

@AnneT should we include a message in the CSS-only version demo explaining this?

Good idea, I've added this!

Select
  • Disabled colors don't match with the original version. They should be color-disabled and background-color-disabled-subtle.

I'm seeing these colors being used for both the Vue and CSS versions; could you help me understand exactly what is wrong here?

@AnneT what happens is that the disabled styles don't match in the configurable demo (darker gray) and the CSS-only (light gray). The right colors are the ones used in the configurable demo.

Omg I finally figured out what's going on here - I wasn't seeing a difference in Firefox and the styles are exactly the same. However, in Chrome, a disabled <select> element gets an opacity of 0.7, which makes the whole thing look lighter. I submitted a patch to set the opacity to 1 to make sure the colors look consistent across browsers.

Tabs/Tab
  • When selecting one tab, the scroll should not jump to the beginning of the page.

I've fixed this

@AnneT it's still not working. When you select one tab now, the scroll jumps to the beginning of the page plus the right panel with the sections of the page is removed.

Eek, thanks for finding this! I've pushed a patch to fix it.

Change 921077 merged by jenkins-bot:

[design/codex@main] docs: Fix CSS tabs demo

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

Change 921082 merged by jenkins-bot:

[design/codex@main] Select: Set opacity of 1 for disabled CSS select

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

Change 921084 merged by jenkins-bot:

[design/codex@main] docs: Explain which Message features aren't supported in CSS version

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

Tabs/Tab
  • When selecting one tab, the scroll should not jump to the beginning of the page.

I've fixed this

@AnneT it's still not working. When you select one tab now, the scroll jumps to the beginning of the page plus the right panel with the sections of the page is removed.

Eek, thanks for finding this! I've pushed a patch to fix it.

@AnneT just the last thing to fix in the tabs. Since tab could be scrollable when there are more tab items than available space, we could represent this use case in the CSS-only version demo, and also explain in this section that button will not be visible in the CSS-only version.

@AnneT moving the task to Ready for development so you can create the CSS-only demo for the scrollable tabs.

@AnneT just the last thing to fix in the tabs. Since tab could be scrollable when there are more tab items than available space, we could represent this use case in the CSS-only version demo, and also explain in this section that button will not be visible in the CSS-only version.

I also seem to recall that there are some styles to prevent the scroll bar from appearing in favor of the arrow buttons. Perhaps those styles should not be applied in the CSS-only version?

Change 922610 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update Codex from v0.10.0 to v0.11.0

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

Change 922610 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.10.0 to v0.11.0

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

Change 922931 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Make CSS Tabs demo require scroll

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

@bmartinezcalvo I ended up not creating a separate demo, because having 2 CSS Tabs on a single page requires some extra work to track the current tab for both demos. This muddies the markup for both demos, which I believe will make them harder to understand for users. Most users will only ever have a single set of CSS tabs on a page, so they will not need to know how to handle multiple instances.

Instead, I just added another tab to the existing demo, and increased the length of the tab names so you can see the horizontal scrolling.

@bmartinezcalvo I ended up not creating a separate demo, because having 2 CSS Tabs on a single page requires some extra work to track the current tab for both demos. This muddies the markup for both demos, which I believe will make them harder to understand for users. Most users will only ever have a single set of CSS tabs on a page, so they will not need to know how to handle multiple instances.

Instead, I just added another tab to the existing demo, and increased the length of the tab names so you can see the horizontal scrolling.

@AnneT great, it looks good. Thank you! With all these done and the design sign-off completed I think we could move the task to Pending Release once the last patch is merged.

Change 922931 merged by jenkins-bot:

[design/codex@main] docs: Make CSS Tabs demo require scroll

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

Change 927786 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v0.11.0 to v0.12.0

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

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/8ca78d2715/w

Change 927786 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.11.0 to v0.12.0

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

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/8ca78d2715/w/

Test wiki on Patch demo by KHarlan (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/cfdfa13682/w/