Page MenuHomePhabricator

Design Table component
Open, Needs TriagePublic

Description

Background/Goal

We don't have a table component in our design system. We need to create a scalable and reusable table component with different cells variants.

User stories

As a designer, I need to use the table component in my designs.

References (real use cases)

Acceptance criteria (or Done)

Design

  • Add table component in our Figma library
    • Simple table (data table without actions)
    • Complex table (with actions)

Codex

  • Create table component in Codex
  • Design revision of the Codex component

Event Timeline

STH renamed this task from Design Table Component to Design Table component.Mar 8 2022, 7:53 PM
STH added projects: Codex, Design.

Hi again @STHart! Could you please clarify which team will be implementing this component, and when would implementation start?
We need this information in order to prioritize the design of this component. Also, should it be included it in the Codex backlog?

hi @bmartinezcalvo and @Volker_E - should this task be merged with T280727?

@RHo I think both tasks are related since they are both for developing a table component. But keep in mind the one you send us is just for data table (simple table without actions) and this one for Codex needs to cover a more complex table with actions (view the real use case in Function Page where checkbox are used to select each table row).

I think we should separate the component into:

  • Simple (without actions, just data table)
  • Complex (with actions)

Hey @Volker_E many of our articles contain tables, so if we're adding this to Codex I'm curious to hear about how we plan to keep design consistency between tables in articles and tables in Codex-based UIs and whether web team should collaborate with DST team to update those in parallel (I assume we don't want to load two sets of styles - one for Codex and one that's not Codex). We have a shared stylesheet for tables across all skins (except Minerva) that we could expand on: https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.skinning/content.tables.less. Might also be a good time to bring Minerva in line and address the community feedback in T287997 that said they liked the table header hover effect.

hi @bmartinezcalvo and @Volker_E - should this task be merged with T280727?

@RHo I think both tasks are related since they are both for developing a table component. But keep in mind the one you send us is just for data table (simple table without actions) and this one for Codex needs to cover a more complex table with actions (view the real use case in Function Page where checkbox are used to select each table row).

I think we should separate the component into:

  • Simple (without actions, just data table)
  • Complex (with actions)

Interesting. I wonder if it would make sense to have both in one task though, where the complex table is extended from the simple version? Or in other words, the simple data table created along the way to the complex table?

Also adding in @Sgs who is in the middle of converting GrowthExperiments-MentorDashboard to Vue (T297763), as it contains a table component with some actions. Note that there is already a task filed T311396 about the need for sorting functionality in case assuming this will be part of the table component.