Page MenuHomePhabricator

[Visual refinements] Increase tab borders to 2px
Closed, ResolvedPublic

Description

Description

Currently the tabs in the page toolbar have a 1px underline. I've heard two or three comments about people not being able to see the underline (which was made worse by this regression T318952).

To do

Increase tab borders from 1px to 2px

currentupdated
Screen Shot 2022-09-30 at 8.46.12 PM.png (220×990 px, 42 KB)
Screen Shot 2022-09-30 at 8.46.03 PM.png (213×987 px, 42 KB)

Note: make sure to check the hover states as well

QA Results - Beta

ACStatusDetails
1T319089#8890764

Event Timeline

ovasileva triaged this task as Medium priority.Oct 5 2022, 4:14 PM
ovasileva moved this task from Incoming to Current Fiscal Year on the Web-Team-Backlog board.

I want to work on this issue.

Can you tell me where is the codebase?

Change 923400 had a related patch set uploaded (by Jayden Bailey; author: Jayden Bailey):

[mediawiki/skins/Vector@master] Increase menu tab borders to 2px

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

Change 923400 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Increase menu tab borders to 2px

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

Jdlrobson added subscribers: bwang, Winston_Sung.

Thanks for the patch Jayden!

Hey @Winston_Sung there are a few things to be aware of when merging changes in Vector

  • Visual changes lead to email alerts due to our visual regression tool not knowing about them: https://pixel.wmcloud.org/reports/desktop/index.html
  • We put VISUAL CHANGE in the commit message for these kind of edits to help each other identify patches that could trigger these alerts.
  • Patches of this kind must be run carefully against Pixel manually https://github.com/wikimedia/pixel beforehand as they might miss something important. This should be considered part of our code review process and summarized in a comment in the patch itself.
  • We are currently low on designer support so trying to minimize workload for designers.

I'll make sure we update this in our development guidelines to include the above information.

@bwang I've manually reviewed the 96 regressions that Pixel is flagging and this change looks good to me. Could you ssh into pixel.reading-web-staging.eqiad1.wikimedia.cloud and update /srv/pixel.sh to apply this new patch so that the line with reference= in it is changed to
reference="-b latest-release -c 923400" to clear out the Pixel complaints in preparation for Monday?

Hey @Winston_Sung there are a few things to be aware of when merging changes in Vector

  • Visual changes lead to email alerts due to our visual regression tool not knowing about them: https://pixel.wmcloud.org/reports/desktop/index.html
  • We put VISUAL CHANGE in the commit message for these kind of edits to help each other identify patches that could trigger these alerts.
  • Patches of this kind must be run carefully against Pixel manually https://github.com/wikimedia/pixel beforehand as they might miss something important. This should be considered part of our code review process and summarized in a comment in the patch itself.

Oops. My apologies.

  • We are currently low on designer support so trying to minimize workload for designers.

Oh...

I'll make sure we update this in our development guidelines to include the above information.

That would be great.

Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Increase tab borders from 1px to 2px, verify hover state as well.

Screenshot 2023-05-30 at 5.06.00 PM.png (977×1 px, 332 KB)

Screenshot 2023-05-30 at 5.05.28 PM.png (971×1 px, 315 KB)