Page MenuHomePhabricator

Add Lookup component to Codex
Closed, ResolvedPublic

Description

Existing components

MediaWiki community:

External libraries:

Wikimedia Design Style Guide links:

  • none yet

Potential implementations

The Wikit and MediaSearch implementations are fairly similar: both house all autocomplete logic outside the component, with the component emitting an event with the search term to the parent and the parent passing in menu items if they exist, and both use the same menu component as the select list component. Wikit's implementation has a few additional features:

  • Uses the existing Input component for the <input>
  • OptionsMenu items can have label and description
  • OptionsMenu component has a named slot for content to show when there are no results

We should consider whether to include a label within this component, or to relegate that to a generic Field component that we'll build in the future.

Finally, we need to determine how this component relates to the existing TypeaheadSearch component, and if they should be combined or separate.

Event Timeline

@Volker_E How does TypeaheadSearch relate to a potential Lookup component, similar to what has been implemented in MediaSearch and Wikit? Do you intend to include Lookup in the design style guide, or does TypeaheadSearch replace Lookup? It seems to me that, although they have some similar features and design elements, TypeaheadSearch is designed for a fairly specific use case, while Lookup is more generic and minimal.

AnneT renamed this task from Add LookupInput component to WVUI to Add Lookup component to Codex.Oct 12 2021, 1:34 PM
AnneT edited projects, added Codex; removed WVUI.

Change 747883 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Lookup: Add Lookup component and demos

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

@Volker_E How does TypeaheadSearch relate to a potential Lookup component, similar to what has been implemented in MediaSearch and Wikit? Do you intend to include Lookup in the design style guide, or does TypeaheadSearch replace Lookup? It seems to me that, although they have some similar features and design elements, TypeaheadSearch is designed for a fairly specific use case, while Lookup is more generic and minimal.

I'm also curious about this. Did you get an answer? From a glance a TypeaheadSearch component seems like a component that makes use of the Lookup component.

I haven't been able to get Codex running locally, so haven't been able to take a look at the patch to see how we might use it in Vector.

@Jdlrobson That's exactly what I'm hoping for: to have TypeaheadSearch use the Lookup component internally. We should catch up either next week or after the break about how this could be implemented in Vector (the current use case and the Wikidata one).

What issues have you run into getting Codex running locally? We haven't had many people outside the team spin it up so it would be helpful to know what blockers people run into.

This one: T297971.

All my team is out next week so feel free to put something in my calendar for a catch up. It's going to be quiet :)

@Volker_E How does TypeaheadSearch relate to a potential Lookup component, similar to what has been implemented in MediaSearch and Wikit? Do you intend to include Lookup in the design style guide, or does TypeaheadSearch replace Lookup? It seems to me that, although they have some similar features and design elements, TypeaheadSearch is designed for a fairly specific use case, while Lookup is more generic and minimal.

Lookup components are often also called Autocomplete or even only featured as part/subtype of a Combobox component.
For the Design Style Guide I'd put the selection bar on integrating or not if the Lookup component is used alone? As in outside of a bigger functionality like TypeaheadSearch features? Otherwise I'd lean towards featuring only higher complexity components using an autocomplete functionality.
Also the Lookup component functionality needs to be further outlined here. Most implementations elsewhere limit a Lookup input to preselected items including OOUI's. In contrast to a Combobox component that allows for preselected and user choices.

Change 747883 merged by jenkins-bot:

[design/codex@main] Lookup: Add Lookup component and demos

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

Closing this out; future additions/bugs related to Lookup should be added to the Triage column on our Team board