What teams or group is this for?
This request comes from the Design Systems Team, but the problem currently impacts two other teams (Growth and Abstract Wiki) and may impact more in the future.
Who is your main point of contact and contact preference?
@egardner, Phab or Slack (#talk-to-design-systems channel is good).
Description of problem
Use of the Codex Dialog component on wiki pages where the Vector skin is applied will cause z-index collisions with other navigational elements on the page.
It is possible to work around this problem (by using Vue's built-in <teleport> feature to render the Dialog outside of the main body content area), but this leads to unexpected stylistic shifts due to how Vector manages font-sizing in the content area.
Below is a screenshot demonstrating the problem when the Dialog is launched from inside the main content area of a wiki page:
Non-logged-in users can reproduce this issue themselves at the new Wikifunctions site. Simply go to a function page (such as https://www.wikifunctions.org/wiki/Z10004) and click one of the "details" links in the right-hand sidebar.
Technical Details
The main #bodyContent area on the page receives the following CSS styles that break the Codex Dialog z-index behavior when it is rendered here:
.vector-feature-zebra-design-disabled .vector-body { position: relative; z-index: 0; }
I understand that the z-index: 0 rule may be necessary for security reasons, so that malicious user-provided content cannot try to masquerade as navigational elements in order to fool the user and make them click on a harmful link.
Therefore, I believe that the recommendation should be that users of Codex Dialog components on-wiki should use Vue's built-in Teleport feature (https://vuejs.org/guide/built-ins/teleport.html#teleport).
This is simple to do, and usage would look like this:
<div class="my-feature"> <button @click="open = true">Launch dialog</button> <teleport to="body"> <cdx-dialog v-model:open="open" title="Save changes" close-button-label="Close" :primary-action="primaryAction" :default-action="defaultAction" @primary="onPrimaryAction" @default="open = false" > <p>Do you want to save your changes?</p> </cdx-dialog> </teleport> </div>
However, currently this workaround creates other problems, also due to styles applied by .vector-body.
Content inside of .vector-body inherits a rule that overrides the global font size for all elements:
.vector-body { font-size: calc(1em * 0.875); }
I assume that this is done so that article body text defaults to 14px even though the page itself technically uses 16px.
Unfortunately, this style rule means that if a user teleports a Codex Dialog outside of the main content area (so as to not conflict with the inherited z-index rule from .vector-body), the final size of text and other elements inside of the dialog will appear too large compared to the rest of the page.
Proposed Solution
I believe that Vector (or maybe MW Core itself) should add an element at the end of the <body> tag which could serve as the designated teleport target for any Dialog users who are launching a dialog that originates inside of the main content area. Vector (and any other skins which feature similar behavior) could then ensure that any appropriate styles get applied to this element so that content rendered here will match the body text in terms of size, etc.
My understanding is that something similar happens for OOUI dialogs, for the same reasons.
Is this request urgent or time sensitive?
Yes. This issue is live in production and is very user-noticeable. Codex Dialogs will have a broken user experience until this can be fixed.
