Page MenuHomePhabricator

Add generic versions of TypeaheadSuggestion and TypeaheadSuggestionTitle to Codex
Closed, ResolvedPublic

Description

TypeaheadSuggestion is an anchor element that contains a TypeaheadSuggestionTitle component (a label with search query text highlighting), an optional description, and an optional thumbnail. It is used within TypeaheadSearch to display stylized results, as exemplified here:

image.png (736×902 px, 231 KB)

TypeaheadSuggestion can be reused outside of TypeaheadSearch, so it should be renamed to something more generic and demonstrated as its own component. Historically, this component has been called "Card" (see the now-archived Card extension). A similar widget in Material Design is called List Tile.

Existing resources
Acceptance criteria
  • Determine generic names
  • Both components are included in Codex and renamed to something more generic, to demonstrate their wider use potential
  • The replacement for TypeaheadSuggestion is documented on the demo site, including the special demos implemented in WVUI specific to bug reports

See comment thread for details on the use cases covered by the components we built in Codex to replace TypeaheadSuggestion and TypeaheadSuggestionTitle.

Event Timeline

AnneT added a subscriber: nray.

I initially thought "TitleCard" might be a good name, but "title" is still specific to the MediaWiki use case—this card could be used to represent something other than a page with a title.

@nray suggested "ListTile," which is a Material Design term for a similar widget. I've been moving forward with this name (and "ListTileLabel" for the TypeaheadSuggestionTitle component) but am open to more discussion if anyone has another idea :)

We have historically called this a Card. This component used to live in https://www.mediawiki.org/wiki/Extension:Cards

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

[design/codex@main] [TypeaheadSearch]: Add initial iteration of TypeaheadSearch

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

AnneT added subscribers: bmartinezcalvo, Sarai-WMDE.

@Sarai-WMDE @bmartinezcalvo @Volker_E Do you have Opinions on what these components should be called in Codex? Please see the task description and comments for some context.

@Sarai-WMDE @bmartinezcalvo @Volker_E Do you have Opinions on what these components should be called in Codex? Please see the task description and comments for some context.

These are menu items (with Image, title and description variant) that are being used to show search results. The only difference between menu items and search results is that the search results highlight the letters that the user has typed into the search box. So this shouldn't be a new component but a variant of the Menu item component.

We could call it Menu item-Typed Highlighted. What do you think? @Sarai-WMDE @Volker_E

@bmartinezcalvo In the case of TypeaheadSearch, this interface is used as a menu item, but it is used outside of menus, too. For example, these items are used to display three related articles at the bottom of Wikipedia articles on mobile:

image.png (326×2 px, 183 KB)

@AnneT it seems that they are different components because they have too many differences:

TypeaheadSearch item.png (525×2 px, 194 KB)

Menu item:

  • Without outline around menu items
  • Small image (padding around image)
  • Rounded corners in the image
  • 58 px height each article item

Article item:

  • With outline around item
  • Big image (without padding around image)
  • Not rounded corners in the image
  • More than 58 px height each menu item
This comment was removed by Jdlrobson.

@AnneT it seems that they are different components because they have too many differences:

@bmartinezcalvo RelatedArticles in production is using an old design spec. There is a blocked patch to switch it to WVUI to use the new design spec. Test url: https://patchdemo.wmflabs.org/wikis/30047fa6f5/w/index.php?title=Spain&mobileaction=toggle_view_mobile

Note this component will also be used in NearbyPages which is scheduled for deployment within the next quarter: https://wikipedia-nearby.netlify.app/

Posting an update here to reflect the outcome of the conversations taking place between designers in the Design System team. At the moment, the direction seems to be:

  • The TypeaheadSearch will use a DropdownMenu containing a set of MenuItems (See ticket containing a link to WIP specs)
  • The similar components included in the "Related pages" section in the patch demo linked above and NearbyPages are not MenuItem elements. Instead, these are Cards: different components, with their own specific design and use cases, that should be implemented separately.

Change 756097 merged by jenkins-bot:

[design/codex@main] TypeaheadSearch: Add initial iteration of TypeaheadSearch

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

I'm going to close this one because we've created components for the specific purpose of TypeaheadSearch and other menu components (MenuItem, which contains features of the WvuiTypeaheadSuggestion component, and SearchResultsTitle, which replicates WVUITypeaheadSuggestionTitle). This does not cover the use case we had imagined of these components being used for things like RelatedArticles. Instead, those will use a Card component, to be implemented. See T256036.

AnneT updated the task description. (Show Details)