Style search widget results based on project configuration
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	ovasileva
	Sep 23 2020, 4:15 PM

Description

Background

In T260167: Make new search widget configurable per project we are allowing the search results to be configured so that they display the information most relevant to a given wiki. This will require a change in the design of the search results. This task is about the new design

Acceptance criteria

Style the widget based on the design requirements below

Design

description + image	no description	no image	no image + no description

QA link	QA link	QA link	QA link

Prototype: https://di-search-3.web.app/Volvo

QA

Use the QA links in the table above and verify the screenshots match what is seen.
If a QA link is not provided when you need it, please ask in Slack :)

QA Results - Patchdemo

AC	Status	Details
1	✅	T263657#6683410
2	✅	T263657#6683410
3	✅	T263657#6683410
4	✅	T263657#6683410

Details

Subject	Repo	Branch	Lines +/-
[typeahead-search] Correct `@size-typeahead-search-focus-addition` value	wvui	master	+4 -4
[typeahead-search] Use calc for calculations involving em and px units	wvui	master	+20 -13
[typeahead-search] Drop `@min-width-typeahead-suggestion-thumb`/use px for @size-typeahead-suggestion-thumb	wvui	master	+3 -4
[typeahead-suggestion] Replace min-width with flex-shrink	wvui	master	+2 -3
[components][typeahead-search][typeahead-suggestion] Style `showThumbnail` prop	wvui	master	+103 -47
[typeahead-search][typeahead-suggestion] Unify figure size and spacing between figure and text	wvui	master	+15 -24

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	None	T49145 Formally deprecate jQuery UI after we've stopped using jQuery UI in extensions and core
Open	None	T100270 Replace use of jQuery UI and MW UI with OOUI across all Wikimedia-deployed extensions and core
Open	None	T85394 Use OOUI suggestions/autocompletion components only (instead of jquery.suggestions, jquery.ui.autocomplete)
Open	None	T125725 [epic] Update autocomplete search box with metadata and remove and delete the old searchSuggest system
Open	None	T177251 Dead keys prevent autocomplete in search box
Resolved	ovasileva	T244392 [GOAL] Deploy the new Vue.js search experience
Resolved	Volker_E	T249299 [Epic] Build the new Vue.js search experience
Resolved	ovasileva	T275200 Analyze results of A/B test for new search widget
Resolved	ovasileva	T249297 Deploy the new Vue.js search experience
Resolved	Edtadros	T259798 Deploy the new Vue.js search experience to the Beta-Cluster and Test Wikipedia
Declined	None	T257865 Merge feat/search to master for Vue.js search deployment
Resolved	ovasileva	T260167 Make new search widget configurable per project
Resolved	ovasileva	T263657 Style search widget results based on project configuration

Event Timeline

ovasileva triaged this task as High priority.Sep 23 2020, 4:15 PM

ovasileva created this task.

• alexhollender_WMF updated the task description. (Show Details)Sep 28 2020, 8:26 PM

ovasileva moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Sep 29 2020, 4:20 PM

ovasileva set the point value for this task to 3.Sep 29 2020, 5:16 PM

ovasileva moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

• alexhollender_WMF updated the task description. (Show Details)Sep 29 2020, 6:22 PM

• nray claimed this task.Oct 29 2020, 6:33 PM

• nray moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Jdlrobson added a parent task: T257865: Merge feat/search to master for Vue.js search deployment.Oct 30 2020, 5:45 PM

Change 637776 had a related patch set uploaded (by Nray; owner: Nray):
[wvui@master] [components][typeahead-search][typeahead-suggestion] Style showThumbnail prop

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

gerritbot added a project: Patch-For-Review.Oct 30 2020, 8:41 PM

@alexhollender Should the input still expand upon focus if we configure thumbnails to NOT be shown?

In T263657#6592555, @nray wrote:

@alexhollender Should the input still expand upon focus if we configure thumbnails to NOT be shown?

No. In that case of no thumbnails the input would not expand. You can configure this and play with it in the demo

Change 638212 had a related patch set uploaded (by Nray; owner: Nray):
[wvui@master] [typeahead-search][typeahead-suggestion] Unify figure size and spacing between figure and text

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

https://gerrit.wikimedia.org/r/c/wvui/+/638212 is ready for review. I'm hoping that will chip away a big chunk of this ticket

• nray moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Nov 3 2020, 1:01 AM

Change 638212 merged by jenkins-bot:
[wvui@master] [typeahead-search][typeahead-suggestion] Unify figure size and spacing between figure and text

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

phuedx moved this task from Code Review to Doing on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Nov 4 2020, 10:33 AM

• nray moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Nov 5 2020, 4:13 PM

• nray removed • nray as the assignee of this task.Nov 6 2020, 8:43 PM

• nray subscribed.

Patch to be reviewed by @Jdrewniak: https://gerrit.wikimedia.org/r/c/wvui/+/637776/7

• nray assigned this task to Jdrewniak.Nov 16 2020, 6:17 PM

• nray claimed this task.Nov 18 2020, 4:56 PM

• nray moved this task from Code Review to Doing on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

• nray moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Nov 19 2020, 12:32 AM

Change 637776 merged by jenkins-bot:
[wvui@master] [components][typeahead-search][typeahead-suggestion] Style showThumbnail prop

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

• nray mentioned this in rWVUIa3835a09453d: [components][typeahead-search][typeahead-suggestion] Style `showThumbnail` prop.Nov 20 2020, 5:26 PM

• nray reassigned this task from • nray to • alexhollender_WMF.Nov 20 2020, 5:54 PM

• nray moved this task from Code Review to Design Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

@alexhollender the style changes have been merged now. Can you take a look at https://wvui.netlify.app/ui/?path=/story/components-typeaheadsearch--typeahead-search and review?

You can use the "Show thumbnail?" and "Show description?" knobs to adjust the config

Note: there was a regression that was merged causing the suggestion list to be wider (the full width of the search component) than it should be, but that is a separate issue not relevant to this ticket

Maintenance_bot removed a project: Patch-For-Review.Nov 20 2020, 6:10 PM

@nray sorry for the delay — everything looks great.

	mock	storybook
description + image
no description
no image
no image + no description

Change 643368 had a related patch set uploaded (by Nray; owner: Nray):
[wvui@master] [typeahead-suggestion] Replace min-width with flex-shrink

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

Change 644390 had a related patch set uploaded (by Nray; owner: Nray):
[wvui@master] [POC][typeahead-suggestion] Use calc for calculations involving em and px units

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

Change 644570 had a related patch set uploaded (by Nray; owner: Nray):
[wvui@master] [typeahead-search] Drop @min-width-typeahead-suggestion-thumb/use px for @size-typeahead-suggestion-thumb

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

Thanks for the review @alexhollender

An update on this task: There are two more patches related to this task that I am seeking to get merged before I move this ticket to sign off. The remaining patches try to solve alignment issues that surface when WVUI is placed in Vector (the different font-size used in Vector vs Storybook makes it apparent):

Replace min-width with flex-shrink

and either

a) Drop @min-width-typeahead-suggestion-thumb/use px for @size-typeahead-suggestion-thumb

b) Use calc for calculations involving em and px units

@Volker_E has raised concerns about option "a" because it prevents the thumbnail size from being adjustable via the browser's font size setting. Option "b" circumvents this issue but seems like it is more complexity than we can afford right now and makes me favor option "a" at least for v1 of the search component.

Blah Sorry for all the reassigns lol. Meant to assign to Jan as he said he wanted to take a look in standup today

Change 643368 merged by jenkins-bot:
[wvui@master] [typeahead-suggestion] Replace min-width with flex-shrink

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

I like the calc solution because it scales better with different font-sizes.
This is not necessarily a big issue for accessibility (text still scales) but I think it will make the typeahead usable in more contexts, like across skins with different font-sizes or when a smaller or larger typeahead is needed. So IMO, I think the added complexity of calc is worth it in this case.

Screen Shot 2020-12-03 at 12.36.55 PM.png (298×882 px, 48 KB)

Screen Shot 2020-12-03 at 12.38.31 PM.png (314×880 px, 153 KB)

Change 644570 abandoned by Nray:
[wvui@master] [typeahead-search] Drop @min-width-typeahead-suggestion-thumb/use px for @size-typeahead-suggestion-thumb

Reason:
Both Volker and Jan have expressed interest in using not using px units here. Please see I256490ae85c9b004441a1a48cf8b256c76e92508 for an alternative solution using calc

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

Change 645409 had a related patch set uploaded (by Nray; owner: Nray):
[wvui@master] [typeahead-search] Correct @size-typeahead-search-focus-addition value

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

Change 644390 merged by jenkins-bot:
[wvui@master] [typeahead-search] Use calc for calculations involving em and px units

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

Change 645409 merged by jenkins-bot:
[wvui@master] [typeahead-search] Correct @size-typeahead-search-focus-addition value

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

• nray removed Jdrewniak as the assignee of this task.Dec 7 2020, 6:06 PM

• nray moved this task from Code Review to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Jdlrobson claimed this task.Dec 8 2020, 6:04 PM

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Dec 8 2020, 10:34 PM

Jdlrobson moved this task from Ready for Signoff to QA on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Jdlrobson updated the task description. (Show Details)Dec 9 2020, 2:14 AM

Jdlrobson mentioned this in T260167: Make new search widget configurable per project.

Jdlrobson updated the task description. (Show Details)Dec 9 2020, 9:18 PM

Jdlrobson updated the task description. (Show Details)Dec 9 2020, 9:32 PM

Test Result - Patchdemo

Status: ✅ Pass
Environment: Patchdemo
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

AC	✅ AC1: description + image	✅ AC2: no description	✅ AC3: no image	✅ AC4: no image + no description
Expected
Link	QA link	QA link	QA link	QA link
Actual

@Jdlrobson The search results look good, the only issue I see is the bottom entry that just says "containing" instead of "Search for pages containing". Let me know if this is part of the acceptance criteria or just the search results that appear in the drop-down are to be considered.

Update: The bottom entry is okay per T263657#6683760

Also noted in T249299#6681030 so I think we can pass this one for now and cover that in that ticket.

Edtadros claimed this task.Dec 11 2020, 1:58 AM

Edtadros updated the task description. (Show Details)

Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

ovasileva claimed this task.Dec 14 2020, 2:01 PM

ovasileva moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Resolving. Full QA in production will be done as part of T259798: Deploy the new Vue.js search experience to the Beta-Cluster and Test Wikipedia and T249297: Deploy the new Vue.js search experience

	F33942053: Screen Shot 2020-12-10 at 9.51.56 AM.png
	Dec 10 2020, 8:14 PM

	F33942055: Screen Shot 2020-12-10 at 9.52.40 AM.png
	Dec 10 2020, 8:14 PM

	F33942165: Screen Shot 2020-12-10 at 12.10.51 PM.png
	Dec 10 2020, 8:14 PM

	F33942057: Screen Shot 2020-12-10 at 9.53.29 AM.png
	Dec 10 2020, 8:14 PM

	F33934483: Screen Shot 2020-12-03 at 12.36.55 PM.png
	Dec 3 2020, 11:43 AM

	F33934484: Screen Shot 2020-12-03 at 12.38.31 PM.png
	Dec 3 2020, 11:43 AM

	F33929199: Screen Shot 2020-11-30 at 11.59.40 AM.png
	Nov 30 2020, 5:05 PM

	F33929197: Screen Shot 2020-11-30 at 11.59.17 AM.png
	Nov 30 2020, 5:05 PM

Style search widget results based on project configurationClosed, ResolvedPublic3 Estimated Story PointsActions