Page MenuHomePhabricator

[Visual bug] search icon increases in size when Vue loads
Closed, ResolvedPublic2 Estimated Story Points

Description

Description

When you focus the input field for the first time and Vue loads, the search icon increases in size. To illustrate, the red box is the same size in both screenshots:

Screen Shot 2021-03-31 at 5.00.50 PM.png (1×1 px, 150 KB)

Notes

Potentially related to one of these recently closed tasks?

QA Results - Beta

ACStatusDetails
1T279015#7147623

Event Timeline

Which is the right icon? before or after?

The before comes from this icon asset (common to legacy skin)
https://github.com/wikimedia/Vector/blob/master/resources/common/images/search.svg
The latter comes from wvui.

Depending on which is the correct one, we need to update the incorrect one.

Both icons are using 20x20 width/height so only the content of the SVG needs to be fixed here.

The task becomes a little more risky if we update Vector as we'll need to consider the legacy experience, and whether we want to change it there too.

Which is the right icon? before or after?

The before comes from this icon asset (common to legacy skin)
https://github.com/wikimedia/Vector/blob/master/resources/common/images/search.svg
The latter comes from wvui.

Depending on which is the correct one, we need to update the incorrect one.

Both icons are using 20x20 width/height so only the content of the SVG needs to be fixed here.

The task becomes a little more risky if we update Vector as we'll need to consider the legacy experience, and whether we want to change it there too.

@Volker_E can you please advise regarding which icon should be used here?

LGoto set the point value for this task to 2.Apr 29 2021, 5:21 PM

@alexhollender The icon in WVUI didn't receive the update of Vector/MinervaNeue/OOUI yet! It's outdated.
Working on it.

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

[wvui@master] [icons] Update outdated 'wvuiIconSearch' icon

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

Change 685251 merged by jenkins-bot:

[wvui@master] [icons] Update outdated 'wvuiIconSearch' search icon

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

Nope, on WVUI release. WVUI uses its own icons.
Bug will be updated as soon as release is cut.

@alexhollender This hasn't made the cut back for current WVUI v0.1.1. Will be in the next release of WVUI (this or max next week for deployment +1 week later).

Change 697700 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update wvui to 0.2.0

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

Change 697700 merged by jenkins-bot:

[mediawiki/core@master] Update wvui to 0.2.0

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

Test Result - Beta

Status: ❓ need more info
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

❓ AC1: Search icon should not increase in size when the search field is focused.

@Jdlrobson It doesn't look like the icon is changing size, but it does move. I'm not failing this because I'm not sure if the movement is in the scope of this task in addition to the size.

Screen Recording 2021-06-09 at 9.55.49 AM.mov.gif (320×1 px, 136 KB)

I think this is a pass, but we should check with @alexhollender
@alexhollender please move to QA in prod if the above is correct. Needs more work if it needs more work.

@Jdlrobson @Volker_E the icon is now staying the same size, which was the goal of this task, however a new issue is occurring:

image.png (731×1 px, 160 KB)

the shift in location between Initial state and Expanded state is expected and correct. The shift in location between Expanded state and Final state should not be happening. Not sure if the video is more helpful:

not sure if you want to keep working within this task or open a new one...

to further clarify what seems to be happening here:

  1. load Wikipedia
  2. open dev tools and enable the focus state for search input
  3. click into the search input (which will cause the Vue component to load) ... notice how the search icon shifts slightly

Change 700954 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Fixes transition from input focus state to WVUI focus state

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

Test wiki created on Patch Demo by Jdlrobson using patch(es) linked to this task:

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

Alex to test the above and push to code review.

Change 700954 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fixes transition from input focus state to WVUI focus state

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

Volker_E claimed this task.

Let's skip QA here, as there's another related task identified (that will need a WVUI release) – T286955: WVUI: Search icon not centered

Volker_E claimed this task.

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

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