Page MenuHomePhabricator

Table pagination: Figma spec and Guidelines
Closed, ResolvedPublic

Description

Background

We need to design the Figma spec sheet and Guidelines for the Table pagination that will be implemented in T360154.

Design spec

image.png (768×690 px, 34 KB)

Guidelines

Acceptance criteria (or Done)

  • Design the Figma component and specs
  • Document the component guidelines
  • Review the design and documentation with the DST

Event Timeline

bmartinezcalvo renamed this task from Table: Finalize and document pagination design to Table pagination: Figma spec and Guidelines.Mon, Jun 10, 5:48 PM
bmartinezcalvo updated the task description. (Show Details)

I've completed the Figma spec and Guidelines for the Table's pagination. So solving this task since we will work on the implementation in T360154.

After some discussions, we have decided to implement the Table's pagination as follows:

  • Default pagination position: the default position will be at the bottom, with the top pagination being optional.
  • Items per page selector: for this MVP, the Select will always display all 10, 20, 50 as default. We will allow for more customization in future iterations.
    image.png (768×690 px, 34 KB)
  • Loading: we will implement the easier solution for the MVP, so we will use the Inline ProgressBar in the current Table's page while the next page is loading (with the buttons disabled while loading). A separate future task will be created to evaluate using the Skeleton when loading.
  • New paddings: in order to make the Table with pagination lighter, we will create a separate task to update the Table's header and footer paddings.