Page MenuHomePhabricator

Apex: Shadow and clipping problems with dialogs
Closed, ResolvedPublic

Description

The top half of the dialog is too dark, and the top rounded corners are not clipped properly.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 24 2018, 11:57 AM

There is a similar issue in WMUI that can be seen more clearly by exaggerating the border-radius:

Change 428612 had a related patch set uploaded (by Esanders; owner: Esanders):
[oojs/ui@master] Add overflow:hidden to dialog content

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

Similar issue on framed panels:

Change 428616 had a related patch set uploaded (by Esanders; owner: Esanders):
[oojs/ui@master] Add overflow:hidden to framed panels

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

Jdforrester-WMF moved this task from Backlog to OOUI-0.26.5 on the OOUI board.Apr 24 2018, 3:44 PM
Jdforrester-WMF edited projects, added OOUI (OOUI-0.26.5); removed OOUI.
Jdforrester-WMF assigned this task to Esanders.

Change 428612 merged by jenkins-bot:
[oojs/ui@master] Add overflow:hidden to dialog content

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

Change 428616 merged by jenkins-bot:
[oojs/ui@master] Add overflow:hidden to framed panels

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

'overflow: hidden' is a super heavy tool and I fear that this will break a lot of things. The dialogs patch is probably safe (but still kinda scary), but the panels one definitely breaks things.

https://doc.wikimedia.org/oojs-ui/master/demos/?page=toolbars&theme=wikimediaui&direction=ltr&platform=desktop

Generally, whenever we have some kind of popup in a framed PanelLayout that is not inside an overlay, this will cause it to be cut off (or in best case, clipped with ClippableElement). While that should be rare (there is no reason not to set an overlay, and even widgets infused from PHP code have their popups put into the default overlay these days), it is something we supported in the past, and even our demo relies on it.

A better solution to this (but much more time-consuming to do it right) would be to set the same 'border-radius' for all the nested elements, or to only set 'background' on elements with 'border-radius', but not their descendants.

framed PanelLayout that is not inside an overlay

Other than the demo example (which should change with toolbar overlays), are we actually doing this anywhere? Forcing people to use an overlay when they want to break out of a panel might be a good thing as it may avoid unforeseen z-index clashes (such as we had with the flow toolbar).

Change 428689 had a related patch set uploaded (by Bartosz Dziewoński; owner: Esanders):
[oojs/ui@master] Revert "Add overflow:hidden to framed panels"

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

Other than the demo example (which should change with toolbar overlays), are we actually doing this anywhere? Forcing people to use an overlay when they want to break out of a panel might be a good thing as it may avoid unforeseen z-index clashes (such as we had with the flow toolbar).

I can't think of any example off the top of my head, but people have used OOUI in enough places that there probably is one somewhere.

I am not opposed to changing this, if you want, but it should probably be treated as a breaking change.

Change 428689 merged by jenkins-bot:
[oojs/ui@master] Revert "Add overflow:hidden to framed panels"

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

On https://gerrit.wikimedia.org/r/#/c/428612/ :
Dialogs are probably fine, only the other patch for this task was really problematic.

Okay - well the panels are less of an issue as I'm removing the box-shadow in https://gerrit.wikimedia.org/r/#/c/428699/

@matmarex, @Esanders: Can this task be resolved as the patch is merged? If not, could you associate an active project tag, please? Thanks!

matmarex closed this task as Resolved.Jun 4 2018, 4:10 PM
matmarex removed a project: Patch-For-Review.

Yeah, close enough.

Vvjjkkii renamed this task from Apex: Shadow and clipping problems with dialogs to 2ceaaaaaaa.Jul 1 2018, 1:14 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii triaged this task as High priority.
Vvjjkkii removed Esanders as the assignee of this task.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
Lofhi renamed this task from 2ceaaaaaaa to Apex: Shadow and clipping problems with dialogs.Jul 1 2018, 6:59 AM
Lofhi closed this task as Resolved.
Lofhi raised the priority of this task from High to Needs Triage.
Lofhi assigned this task to Esanders.
Lofhi updated the task description. (Show Details)
Lofhi added subscribers: gerritbot, Aklapper.