Page MenuHomePhabricator
Create Task
Maniphest T389228

Scoped Typeahead Search UI updates
Closed, ResolvedPublic
Actions

Assigned To
Arian_Bozorg
Authored By
Arian_Bozorg
Mar 18 2025, 4:23 PM
Tags
Referenced Files
F58973195: Screenshot from 2025-04-03 17-15-20.png
Thu, Apr 3, 3:19 PM
F58935914: image.png
Fri, Mar 28, 3:51 PM
F58910156: image.png
Mar 24 2025, 4:14 PM
F58910141: image.png
Mar 24 2025, 4:14 PM
F58910132: image.png
Mar 24 2025, 4:14 PM
F58910202: image.png
Mar 24 2025, 4:14 PM
F58910170: image.png
Mar 24 2025, 4:14 PM
F58910165: image.png
Mar 24 2025, 4:14 PM
View All 13 Files
Subscribers
Arian_Bozorg
ArthurTaylor
AudreyPenven_WMDE
Lucas_Werkmeister_WMDE

Description

This is a collection of UI edits to Scoped Typeahead Search.

You can view the changes on the figma file here: https://www.figma.com/design/JU89C2lnmWLoadkYwJroNT/Wikidata-Ongoing-Tickets?node-id=217-22951&m=dev

Update border colour
Update the border colour to: border-color/base

image.png (90×495 px, 7 KB)
Incorrect

image.png (125×748 px, 5 KB)
Correct

Update font
Update the font for "Search Wikidata" to UI text S/Regular: Inter Regular 14 Line Spacing: 22 Letter Spacing: -0.3%

image.png (90×495 px, 7 KB)
Incorrect

image.png (125×748 px, 5 KB)
Correct

Remove gap
Remove gap between input fields. The line should be 1px wide.

image.png (323×424 px, 8 KB)
Incorrect

image.png (380×694 px, 10 KB)
Correct

Update typeahead search results
Update the typeahead search to be the width of the input field

image.png (544×811 px, 69 KB)
Incorrect

image.png (296×482 px, 11 KB)
Correct

Fix alignment
Align the "Search Wikidata for pages containing..." to the left

image.png (743×730 px, 45 KB)
Incorrect

image.png (277×361 px, 8 KB)
Correct

Remove white line
Remove white 1px line at the bottom of the "Search Wikidata for pages containing..." section

image.png (242×1 px, 41 KB)
Incorrect

image.png (146×423 px, 25 KB)
Correct

Update copy
Update 'Entity schemas' to 'EntitySchemas'

Acceptance Criteria

  • All UI changes have been

Details

SubjectRepoBranchLines +/-
Fix message key in hook handlermediawiki/extensions/WikibaseLexememaster+1 -1
Sharpen corners of ScopedTypeaheadSearch selectormediawiki/extensions/Wikibasemaster+2 -0
Fix layout and colouring issues with Scoped Typeahead searchmediawiki/extensions/Wikibasemaster+31 -2
Update scope name for scoped typeahead searchmediawiki/extensions/EntitySchemamaster+2 -2
Customize query in gerrit

Related Objects
Search...

Event Timeline

Arian_Bozorg created this task.Mar 18 2025, 4:23 PM
karapayneWMDE moved this task from The Board to The Backlog on the Wikidata-Omega board.Mar 19 2025, 11:54 AM
karapayneWMDE edited projects, added Wikidata-Omega; removed Wikidata-Omega (The Board).
ArthurTaylor claimed this task.Mar 24 2025, 8:52 AM
ArthurTaylor edited projects, added Wikidata-Omega (The Board); removed Wikidata-Omega.
ArthurTaylor moved this task from new to the board to In Development on the Wikidata-Omega (The Board) board.
ArthurTaylor added a comment.Mar 24 2025, 8:57 AM

@Arian_Bozorg the request to "Update the border colour to: Option Tokens/Gray/400" - that's a fixed gray (i.e. not a colour that dark-mode will invert). Are you sure that's what we want here? Or do we want an invertable token?

ArthurTaylor added a comment.Mar 24 2025, 9:08 AM

@Arian_Bozorg The request "UI text S/Regular: Inter Regular 14 Line Spacing: 22 Letter Spacing: -0.3%" - are 14 and 22 px values? Why do we want to use px instead of rem? Is Line Spacing really meant as 22 here, or is the request to make the Line *Height* 22, i.e. the *Spacing* 6 (px?)?

ArthurTaylor added a comment.Mar 24 2025, 9:09 AM

@Arian_Bozorg The request 'Update the typeahead search to be the width of the inpuit field' - I don't understand what the request here is. The current implementation looks like the design in Figma

Arian_Bozorg attached a referenced file: F58862028: image.png. (Show Details)Mar 24 2025, 9:36 AM
gerritbot added a comment.Mar 24 2025, 11:08 AM

Change #1130551 had a related patch set uploaded (by Arthur taylor; author: Arthur taylor):

[mediawiki/extensions/Wikibase@master] Fix layout issues with Scoped Typeahead search

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

gerritbot added a project: Patch-For-Review.Mar 24 2025, 11:08 AM
gerritbot added a comment.Mar 24 2025, 11:17 AM

Change #1130557 had a related patch set uploaded (by Arthur taylor; author: Arthur taylor):

[mediawiki/extensions/EntitySchema@master] Update scope name for scoped typeahead search

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

Arian_Bozorg updated the task description. (Show Details)Mar 24 2025, 4:14 PM
ArthurTaylor added a comment.Mar 27 2025, 8:57 AM

I've updated the patch to address most of the issues mentioned. The "Remove white line" issue is something that I see on Wikipedia and on Wikidata for the typeahead search that comes from codex. If we want this fixed, I recommend we raise a ticket with codex rather than trying to hack the component ourselves.

ArthurTaylor removed ArthurTaylor as the assignee of this task.Mar 27 2025, 8:58 AM
ArthurTaylor moved this task from In Development to Ready for Peer Review on the Wikidata-Omega (The Board) board.
ArthurTaylor subscribed.
Arian_Bozorg updated the task description. (Show Details)Mar 27 2025, 11:14 AM

Just updated the border colour in the ticket description to an invertable colour: border-color/base

gerritbot added a comment.Fri, Mar 28, 3:06 PM

Change #1130557 merged by jenkins-bot:

[mediawiki/extensions/EntitySchema@master] Update scope name for scoped typeahead search

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

AudreyPenven_WMDE subscribed.Fri, Mar 28, 3:51 PM

I found another subtle UI issue - not sure if it belongs in this ticket or a followup

image.png (331×821 px, 19 KB)

The corners of the select component have a small radius, preventing these from being seamlessly combined

gerritbot added a comment.Fri, Mar 28, 3:53 PM

Change #1130551 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Fix layout and colouring issues with Scoped Typeahead search

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

ReleaseTaggerBot added a project: MW-1.44-notes (1.44.0-wmf.23; 2025-04-01).Fri, Mar 28, 4:00 PM
Maintenance_bot removed a project: Patch-For-Review.Fri, Mar 28, 4:30 PM
gerritbot added a comment.Fri, Mar 28, 5:38 PM

Change #1132004 had a related patch set uploaded (by Audrey Penven; author: Audrey Penven):

[mediawiki/extensions/Wikibase@master] Sharpen corners of ScopedTypeaheadSearch selector

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

gerritbot added a project: Patch-For-Review.Fri, Mar 28, 5:38 PM
ArthurTaylor moved this task from Ready for Peer Review to Product Verification on the Wikidata-Omega (The Board) board.Mon, Mar 31, 4:52 AM
gerritbot added a comment.Mon, Mar 31, 5:14 AM

Change #1132004 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Sharpen corners of ScopedTypeaheadSearch selector

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

Maintenance_bot removed a project: Patch-For-Review.Mon, Mar 31, 5:30 AM
Lucas_Werkmeister_WMDE subscribed.Thu, Apr 3, 3:12 PM

Can be tested at https://b01555eeba.catalyst.wmcloud.org/wiki/Main_Page, I think.

Arian_Bozorg moved this task from Product Verification to Ready for Development on the Wikidata-Omega (The Board) board.Thu, Apr 3, 3:19 PM

Thank you!

This is looking good, although it looks like something in the dropdown is broken

Screenshot from 2025-04-03 17-15-20.png (497×299 px, 37 KB)

And it looks like EntitySchemas is missing from the dropdown.

Can we please add it and update it from "Entity schemas" to "EntitySchemas"

And could we please also update the dropdown from "Find different types of Wikidata entries" to "Find different types of Wikidata entities"

gerritbot added a comment.Fri, Apr 4, 1:37 PM

Change #1134226 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/WikibaseLexeme@master] Fix message key in hook handler

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

gerritbot added a project: Patch-For-Review.Fri, Apr 4, 1:37 PM
Lucas_Werkmeister_WMDE claimed this task.Fri, Apr 4, 1:37 PM
Lucas_Werkmeister_WMDE moved this task from Ready for Development to In Development on the Wikidata-Omega (The Board) board.
Lucas_Werkmeister_WMDE removed Lucas_Werkmeister_WMDE as the assignee of this task.Fri, Apr 4, 1:45 PM
Lucas_Werkmeister_WMDE moved this task from In Development to Ready for Peer Review on the Wikidata-Omega (The Board) board.
In T389228#10708633, @Arian_Bozorg wrote:

This is looking good, although it looks like something in the dropdown is broken

Screenshot from 2025-04-03 17-15-20.png (497×299 px, 37 KB)

Fixed in the above change.

And it looks like EntitySchemas is missing from the dropdown.

Can we please add it and update it from "Entity schemas" to "EntitySchemas"

Apparently it’s not available in Patch Demo yet ⇒ T391106: Add EntitySchema to Patch Demo. (The message is “EntitySchemas” already.)

And could we please also update the dropdown from "Find different types of Wikidata entries" to "Find different types of Wikidata entities"

That’s happening in this change (T390269: ScopedTypeaheadSearch: replace all user-visible text with translatable messages).

gerritbot added a comment.Mon, Apr 7, 8:08 AM

Change #1134226 merged by jenkins-bot:

[mediawiki/extensions/WikibaseLexeme@master] Fix message key in hook handler

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

Lucas_Werkmeister_WMDE moved this task from Ready for Peer Review to Product Verification on the Wikidata-Omega (The Board) board.Mon, Apr 7, 8:21 AM
Maintenance_bot removed a project: Patch-For-Review.Mon, Apr 7, 8:30 AM
ReleaseTaggerBot edited projects, added MW-1.44-notes (1.44.0-wmf.24; 2025-04-08); removed MW-1.44-notes (1.44.0-wmf.23; 2025-04-01).Mon, Apr 7, 9:00 AM
Lucas_Werkmeister_WMDE added a comment.Wed, Apr 9, 8:55 AM
In T389228#10712947, @Lucas_Werkmeister_WMDE wrote:

And it looks like EntitySchemas is missing from the dropdown.

Can we please add it and update it from "Entity schemas" to "EntitySchemas"

Apparently it’s not available in Patch Demo yet ⇒ T391106: Add EntitySchema to Patch Demo. (The message is “EntitySchemas” already.)

Fixed, you can try it in https://6c57336911.catalyst.wmcloud.org/.

Arian_Bozorg closed this task as Resolved.Wed, Apr 9, 12:22 PM
Arian_Bozorg claimed this task.
Arian_Bozorg moved this task from Product Verification to Done - Moving a task here will move it to the completed tasks workboard, resolve the ticket, and assign it to whomever made the move on the Wikidata-Omega (The Board) board.

Thank you! Looks good to me

karapayneWMDE edited projects, added Wikidata-Omega (Completed Tasks); removed Wikidata-Omega (The Board).Fri, Apr 11, 8:00 AM
karapayneWMDE moved this task from Newly completed tasks to 2025 Q1 on the Wikidata-Omega (Completed Tasks) board.Fri, Apr 11, 8:02 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits