Page MenuHomePhabricator

Bring Metadata table design close to Codex guidelines and enable dark mode
Closed, ResolvedPublic

Description

Background

The metadata table design, part of core, currently falls out of many other tables in Wikiverse and also is very different to Codex table guidelines.

Goal

Bring the design of the table closer to Codex guidelines and on the way remove static color values with dark-mode enabling design tokens.

Known use cases & examples

The metadata style is only used in Image EXIF metadata tables

image.png (1×1 px, 254 KB)


Open questions


Acceptance criteria

Design
Clarify open questions ahead of reviewing

  • Leaving the smaller font-size as before? In my opinion we probably should as those metadata tables can get very long
  • We can't use Codex default table spacing of 12px, together with the smaller font-size it gets contradicting design-wise. I've proposed spacing-35 (6px) horizontally and spacing-25 (4px) vertically for now
  • Left-align or right align the table headers? Right align was @Sarai-WMDE's comment and that's what I went for now
  • Boldening or unboldening table headers. Issue here is, the content is the important thing, it's a bit noisey.

Code

  • Provide a patch for Metadata table
    • Remove non-Codex tokens colors that negatively affect dark mode
    • Right align the table headers
    • Use minimum Codex font-size of 12px equivalent
    • Increase spacing slightly to better amend to minimum font-size above

Event Timeline

Change #1037597 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] mediawiki.action: Bring metadata table style closer to Codex

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

This is the first iteration, coming from our design sync:

image.png (1×1 px, 266 KB)

Open questions for me:

  • Leaving the smaller font-size as before? In my opinion we probably should as those metadata tables can get very long
  • We can't use Codex default table spacing of 12px, together with the smaller font-size it gets contradicting design-wise. I've proposed spacing-35 (6px) horizontally and spacing-25 (4px) vertically for now
  • Left-align or right align the table headers? Right align was @Sarai-WMDE's comment and that's what I went for now
  • Boldening or unboldening table headers. Issue here is, the content is the important thing, it's a bit noisey IMHO to make the headers bold here. But fine to go either

One more thing: I also question the smaller font size, as the metadata table has an expanding functionality. If someone is interested to read that data, why making it harder to read it by default?

Hey @Volker_E. That new version looks fantastic! Some comment regarding:

  • Font-size and table length: Agreeing with your last comment. I wouldn't factor in the table's length, due to the existence of the expand functionality. I tried 1em/14px and have to say that the metadata table looks fine and harmonious in its environment with that font-size (see screenshot below). If using a smaller size was preferred to maintain the current information density, though, then I would recommend at least ensuring that we follow our minimum size recommendation of 12px, instead of the current 11.2px.

Screenshot 2024-05-31 at 13.17.30.png (522×990 px, 56 KB)

  • Spacing: In case the font-size is adjusted to 1em/14px, then we could follow the default 12px (see image above). Otherwise, a smaller spacing would suit the smaller font better, for sure. Alternatively, it'd be fair to use a smaller padding even in combination with the 14px, if the priority is to maintain the level of information density: I think a nice next addition to the Codex Table component would be creating a "compact" or "dense" variant of it, with a smaller default cell padding size (tbd!). That would suit this use case.
  • Heading alignment: Thanks for reflecting that suggestion! 🙏🏻 The right alignment really helps match the headings to the information they describe: it creates a more compact reading area, reducing white space and the saccade amount between bits of information.
  • Bold row headings: It depends. I believe that this is essential in data tables, where headings really need to receive a different treatment to establish clearer hierarchy within the bigger dataset. This is rather a table used to lay out a small amount of information (only 1 item per entry), so the case for boldening headings is not so strong, I agree.

Hey @Volker_E. That new version looks fantastic! Some comment regarding:

I wouldn't factor in the table's length, due to the existence of the expand functionality.

I do point out that this list, when unexpanded, can get really long. There are file entries where it is between 50 and a 100+ rows. That would take multiple screens lengths to render.

Great, given the feedback by the two of you, I'd propose to go with our minimum font-size of 12px equivalent as middle ground (with the only slightly increased padding), also to not disturb users with too much change without community liasions support.
We might revisit this in the future, while already be closer (and possibly also have a “compact” or “dense” variant) to the default Table layout.

Change #1037597 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.action: Bring metadata table style closer to Codex

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

Volker_E claimed this task.