VE link context menu: remove link button hover border hidden by edit button border
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	WMDE-Fisch
	Mar 9 2022, 11:52 AM

Description

Whey you click a link in the VisualEditor to open the context menu, the right border of the remove link button next to the edit button is not visible when hovering.

See

Details

	Subject	Repo	Branch	Lines +/-
	Update OOUI to v0.46.3	mediawiki/core	master	+99 -46
	Restore z-index border fix for hovering buttons in group	oojs/ui	master	+2 -0

Customize query in gerrit

Event Timeline

WMDE-Fisch created this task.Mar 9 2022, 11:52 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 9 2022, 11:52 AM

Note that this is only visible when hovering the button. When in focus the border is visible.

The CSS for that part is part of OOUI see

.oo-ui-buttonGroupWidget .oo-ui-buttonElement {
  margin-right: 0;
  z-index: 0;
}

I'm not sure what's the reason behind that border-right: 0; Setting this to 1px would solve the issue.

WMDE-Fisch updated the task description. (Show Details)Mar 9 2022, 12:22 PM

WMDE-Fisch added a project: OOUI.

WMDE-Fisch moved this task from Backlog to In sprint on the WMDE-Templates-FocusArea board.Mar 9 2022, 12:31 PM

I noticed this back then when we added this button, and as far as I'm aware of this is intentional. Let's please ask the OOUI designers before we add a potentially fragile CSS hack.

WMDE-Fisch moved this task from Sprint Backlog to UX/PM Review on the WMDE-TechWish-Sprint-2022-03-02 board.Mar 9 2022, 2:10 PM

@ECohen_WMDE it would be great to get your input on this. What is the intended styling/behaviour for these types of buttons, if it exists?

I observe that this styling is consistent with the OOUI demo page, so it's at least not some MW/VE styling interfering. (Though it certainly could have been an accidental change somewhere along the line.)

This should work, I know because I spent a lot of time implementing it back in the day in https://gerrit.wikimedia.org/r/c/oojs/ui/+/310806. As you note, it works correctly with the :focus styles, and it also works with the :active styles.

Looks like the line that made hover styling work correctly was removed in https://gerrit.wikimedia.org/r/c/oojs/ui/+/353199. I don't really understand why is was removed, it seems almost accidental and unrelated to that patch?

I observe that this styling is consistent with the OOUI demo page

@Lena_WMDE I don't have any additional info beyond what's already been said about the demo page. Since it seems to be part of OOUI, then I'm not sure it's something we need to fix here separately.

In T303385#7764430, @matmarex wrote:

This should work, I know because I spent a lot of time implementing it back in the day in https://gerrit.wikimedia.org/r/c/oojs/ui/+/310806. As you note, it works correctly with the :focus styles, and it also works with the :active styles.

Looks like the line that made hover styling work correctly was removed in https://gerrit.wikimedia.org/r/c/oojs/ui/+/353199. I don't really understand why is was removed, it seems almost accidental and unrelated to that patch?

I can't say for sure either anymore. Maybe it was about :active:hover, some browser quirks or it was truly unintended.

• ppelberg moved this task from To Triage to Triaged on the VisualEditor board.Mar 10 2022, 4:46 PM

Removing our tags as the styling is consistent with the OOUI demo page.

Lena_WMDE renamed this task from VE template dialog: Delete button border hidden by edit button border to VE template context menu: Delete button border hidden by edit button border.Mar 15 2022, 11:01 AM

Esanders renamed this task from VE template context menu: Delete button border hidden by edit button border to VE link context menu: remove link button hover border hidden by edit button border.Jan 26 2023, 12:47 PM

Esanders updated the task description. (Show Details)

Change 883928 had a related patch set uploaded (by Esanders; author: Esanders):

[oojs/ui@master] Restore z-index border fix for hovering buttons in group

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

gerritbot added a project: Patch-For-Review.Jan 26 2023, 12:52 PM

Change 883928 merged by jenkins-bot:

[oojs/ui@master] Restore z-index border fix for hovering buttons in group

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

Maintenance_bot removed a project: Patch-For-Review.Jan 26 2023, 2:30 PM

matmarex closed this task as Resolved.Jan 27 2023, 3:38 PM

matmarex assigned this task to Esanders.

Change 886986 had a related patch set uploaded (by Jforrester; author: Jforrester):