Page MenuHomePhabricator

[EPIC] Add Card component to Codex
Open, In Progress, HighPublic

Assigned To
Authored By
Volker_E
Mar 24 2021, 12:03 PM
Referenced Files
F35196454: Screen Shot 2022-06-01 at 10.03.35 AM.png
Jun 1 2022, 2:07 PM
F35196470: image.png
Jun 1 2022, 2:07 PM
F35193896: image.png
May 31 2022, 3:02 PM
F35193864: image.png
May 31 2022, 3:02 PM
F35193860: image.png
May 31 2022, 3:02 PM
F35193873: image.png
May 31 2022, 3:02 PM
F35193869: image.png
May 31 2022, 3:02 PM
F35193888: image.png
May 31 2022, 3:02 PM

Description

Background

  • Description: A common layout for presenting information, e.g. a link to an article page with a thumbnail, title, and description. There are many use cases across Wikimedia. Cards may be standalone or in a layout with other Cards.
  • History:
    • The card pattern has been used in many places, although it has never become a standard component. See the table below for many examples.
    • See T153417: Align the style for lists of pages, a related task (although some of these cases may be covered by a future ListItem component)
    • See T256036: Add Card component to WVUI Codex, a closed task that discussed potentially adding a Card component to WVUI
    • See T286973 and T299682 for discussion about reusing the WVUITypeaheadSuggestion and CdxMenuItem components for other card-like use cases, an idea that was later declined in favor of creating a dedicated Card component that better covers non-menu use cases
  • Known use case(s):
    • GrowthExperiments: see the first three items in the table below
    • NearbyPages: see UI on beta
  • Considerations:
    • As mentioned, there are many existing examples of card-like layouts. A first step in this epic will be to collect and organize these use cases, then define general rules on appearance and interactivity and align to internationalization and accessibility requirements
    • We will need to define layout rules for when multiple cards/modules are shown

Examples of pages with cards/card-like layouts

Sample screenshotFound inNotes
image.png (1×2 px, 379 KB)
image.png (1×1 px, 632 KB)
Growth Newcomer homepage desktopCard in the Suggested Edits UI - note the Mobile and Desktop differences. Could the modules themselves be considered cards?
image.png (1×516 px, 110 KB)
Growth - newcomer homepage on MOBILE"Preview" module cards - selecting a preview module card will open the module as a full screen overlay on mobile
image.png (1×1 px, 124 KB)
image.png (684×1 px, 355 KB)
Growth - post-edit dialog/bottom sheet on mobile & desktopAppears after someone completes a Suggested edit task - unclear if this would be a separate bottom sheet component - would only the article within this be considered a "card" or ListItem component ??
image.png (524×830 px, 116 KB)
image.png (1×1 px, 321 KB)
Structured task link "inspector" card, shown under the item on desktop, as a bottom sheet on mobile (similar to VE link card)again, not sure if only the article inside the dialog/sheet is considered the card/ListItem.
image.png (1×1 px, 1 MB)
Main page
image.png (328×2 px, 220 KB)
Related articles at the bottom of Minerva articles
image.png (504×1 px, 71 KB)
doc.wikimedia.org, DSG code repo derivative
image.png (1×1 px, 187 KB)
design.wikimedia.org
image.png (1×2 px, 634 KB)
image.png (1×938 px, 214 KB)
Content Translation 'home' page Desktop and Mobile
image.png (1×1 px, 138 KB)
Content Translation side panel (Desktop)
image.png (840×494 px, 243 KB)
Content Translation Section translation - mobile only at presentMore info here https://www.mediawiki.org/wiki/Content_translation/Section_translation
Screen Shot 2022-06-01 at 10.03.35 AM.png (254×1 px, 38 KB)
image.png (444×1 px, 68 KB)
Echo notifications (on Special:Notifications and in the popup menu in the header)Notable features: Unread/read indicator, different links for the entire card and items within the card e.g. user page and "view change" link, notification age in the bottom-end corner

User stories

  • add at least one user story

Previous implementations

These artifacts are listed for historical context. The figma spec, linked below, is the source of truth for the new component.

  • Design style guide: n/a
  • OOUI: n/a
  • Vue: WVUITypeaheadSuggestion and CdxMenuItem were suggested as potential Card components but are too divergent from Card UI and use cases. However, some of parts of MenuItem, namely thumbnail styles and loading state, could be reused via a separate Thumbnail component.

Codex implementation

Component task owners

Design spec


Stage 1: Minimum viable product (MVP)

MVP includes basic layout, default states, and most important functionality.

Acceptance criteria

  • Determine what MVP includes for this component and document this in a subtask. Assign task to designer.
  • Design MVP. Once complete, assign task to developer.
  • Implement MVP

Stage 2: Additional states, features, and variants

This might include a disabled state, framed/frameless designs, transitions, supporting different use cases, etc., which will be captured in separate subtasks.

Acceptance criteria

  • Document design and implementation of additional states and features in individual subtasks
  • Complete each additional state/feature subtask

Stage 3: Refinement

This stage includes any final touches or bug fixes needed before the component can be deemed complete, which will be captured in separate subtasks.

Acceptance criteria

  • Finalize docs: open and complete a subtask for any additional demos that need to be added or documentation that needs work
  • Meet accessibility standards: open and complete a subtask for any necessary accessibility improvements
  • Meet internationalization standards: open and complete a subtask to fix any i18n bugs
  • Complete testing: open and complete a subtask for any additional unit or functional tests that are needed

Related Objects

Event Timeline

I think we should remove RelatedArticles from the card examples. These are more list items in lists of pages covered in T153417. They are fully interactive elements, which cards can be too, but for lists of pages list items it's a must.

STH triaged this task as Medium priority.May 17 2022, 5:53 PM
STH moved this task from Needs Refinement to Refined/Up Next on the Design-Systems-Team board.
STH moved this task from Refined/Up Next to Needs Refinement on the Design-Systems-Team board.

@RHo / @Sarai-WMDE I added some examples from Echo, but please feel free to remove if they don't qualify as cards!

AnneT renamed this task from Define general rules and add “Cards” to DSG to [EPIC] Add Card component to Codex.Jun 9 2022, 2:00 PM
AnneT raised the priority of this task from Medium to High.
AnneT added a project: Epic.
AnneT updated the task description. (Show Details)
AnneT removed RHo as the assignee of this task.Jun 28 2022, 4:37 PM
AnneT updated the task description. (Show Details)
DAbad changed the task status from Open to In Progress.Jun 30 2022, 4:26 PM
DAbad assigned this task to AnneT.
DAbad added a subscriber: DAbad.

Proceeding with developing demos for MVP