Page MenuHomePhabricator

Table: Add empty state
Closed, ResolvedPublic2 Estimated Story Points

Assigned To
Authored By
Sarai-WMDE
May 6 2024, 11:11 AM
Referenced Files
Restricted File
Jun 12 2024, 9:09 AM
Restricted File
Jun 12 2024, 9:08 AM
Restricted File
Jun 12 2024, 9:06 AM
F55259786: Screenshot 2024-06-12 at 10.56.48.png
Jun 12 2024, 8:59 AM
F50498853: image.png
May 6 2024, 11:11 AM

Description

Summary

User story

As a user, I want to receive an indication when there's no data available to be diplayed by a Table.

API

[⚠️ TBD ⚠️]

UI and interaction

The Table can be configured to feature a customizable empty state message when there is no information available to be displayed. The message text's style matches the default Table text in color-subtle, and is included within a table's body that displays a min-height of 64px.

image.png (256×1 px, 14 KB)

Demos and testing

The empty state could be demoed in the Configurable Table. Unit/snapshot tests should be added to cover this new functionality.


Acceptance criteria

  • The Table component can display an empty state
  • Unit tests are included
  • Demo the Table's empty state in the component's page
  • Document the "Empty table" at the end of the "Types" section of the Guidelines (See Guidelines content)

Event Timeline

CCiufo-WMF renamed this task from [WIP] Table: Add empty state to Table: Add empty state.May 9 2024, 4:03 PM
CCiufo-WMF triaged this task as Medium priority.
Catrope set the point value for this task to 2.May 13 2024, 6:18 PM

Should documenting the Empty state in the Types section of the Table's guidelines be part of this ticket, or documented as a subtask? (See this comment for extra context)

Should documenting the Empty state in the Types section of the Table's guidelines be part of this ticket, or documented as a subtask? (See this comment for extra context)

I think it should be part of this task. Guidelines are part of components now :)

I think it should be part of this task. Guidelines are part of components now :)

Perfect. Added as ACs, but please feel free to adjust as needed 🙏🏻

lwatson changed the task status from Open to In Progress.Jun 10 2024, 9:06 PM
lwatson claimed this task.

Change #1041695 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] Table: add empty state

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

Regarding the demo, I added Vue and CSS standalone empty-state demos. I didn't demo the empty state in the configurable demo because the row/column data is bound to the configurable component via data and columns.

<cdx-demo-wrapper :controls-config="controlsConfig" :force-reset="true">
<template v-slot:demo="{ propValues, slotValues }">
	<cdx-table v-bind="propValues" :data="data" :columns="columns">
		<template v-if="slotValues.header" #header>
			{{ slotValues.header }}
		</template>
		<template v-if="slotValues.footer" #footer>
			{{ slotValues.footer }}
		</template>
	</cdx-table>
</template>
</cdx-demo-wrapper>

Let me know if the standalone demos are acceptable in this patch preview or if this needs to be demonstrated in the configurable demo as per the acceptance criteria:

Demo the Table's empty state in the Configurable demo.

Thank you, @lwatson! It is perfectly fine to demo the table's empty state separately, given the constraints. I'll update the task's description 👍🏻

There's a small fix needed to make this variant completely aligned with the specs: the table's body (although I believe this is defined by .cdx-table__table-wrapper) needs to have a min-height of 64px, like the other anatomical parts of the component (.cdx-table__header and .cdx-table__footer). The empty state message needs to remain vertically and horizontally centered in that area. Would that be possible?

{F55259835}

Thanks again!

Thanks @Sarai-WMDE - I updated the min-height of the empty table row (<tr>) to match the min-height of the header and footer and will ensure the empty state message is vertically and horizontally centered.

Thank you @lwatson! All empty state demos look perfect now 👍🏻

Change #1041695 merged by jenkins-bot:

[design/codex@main] Table: add empty state

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

Change #1049640 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from 1.7.0 to 1.8.0

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

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/f74be9bc8e/w

Change #1049640 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from 1.7.0 to 1.8.0

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