Figma component > Table (updates to sorting and additional states)
Description
This is a follow up issue to Figma component > Add Tables. The table currently is still missing responsive states and is not leveraging some of Figma's newer layout features.
Summary of overall table updates:
- All cell content is now
top
aligned by default - The sorting arrow has been moved closer to the right of the header label, in order to make it clear which header label they belong to
- On hover and on focus states have been to header cells if the configuration is set to sortable
- A new 'compressed` table option has been added (#449 (closed))
- A new row state has been added (gitlab-org/gitlab-ui#884)
- A new
<caption>
component has been added (gitlab-org/gitlab-ui#1726) - A top border has been added to the header row in order to better visual understand where the table starts and ends on a page
Summary of Figma specific updates:
Since the first version of the Figma Table component that has been added to our component library, Figma has introduced many new features specific to Auto Layout that make creating tables more flexible. This update will make it easier for designers to create responsive tables in Figma that are easier to customize and lower the need to detach from parent components.
Sorting interaction spec:
Rationale for current updates
Note: Thank you @jeldergl for pulling these metrics from Figma.
Figma file
References
- https://getbootstrap.com/docs/5.0/content/tables/
- https://mdbootstrap.com/docs/b4/jquery/tables/sort/
- https://material.angular.io/components/table/overview#sorting
- https://material.io/components/data-tables#anatomy
Demo walkthrough
Checklist
Make sure the following are completed before closing the issue:
-
Assignee: Design in your working file. When applicable, follow our structure, building, and annotation guidelines. If you have any questions, reach out to a FE/UX Foundations designer. -
Assignee: Update the link to the working file in the issue description. -
Assignee: Ask a FE/UX Foundations designer to review your design (ensure they have edit permissions in Figma). -
Reviewer: Review and approve assignee’s design. Specific design questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility. -
Reviewer: Assign to a Figma maintainer for final review (make sure they have edit permissions in Figma). -
Maintainer: Review and approve assignee’s changes. -
Maintainer: Merge the branch or add the changes or additions to the target file. -
Ensure that all styles and components now belong to the target file. -
For changes to the Component Library file, view the components in the Assets panel to ensure they align with our asset library structure guidelines.
-
-
Maintainer: When applicable, publish any library changes along with a clear commit message. -
Assignee: If work was not done in a branch (a merged branch will automatically be archived), move your working file to the shared Figma project: -
For Component Library changes, move your file to the Component archive project. -
For all other changes, move your file to the Misc archive project. -
If you’re a community contributor, please consider transfering ownership of your draft file to the maintainer so they can move it to our archive, along with its version history and comments.
-
-
Assignee (or Maintainer, for community contributions): If it’s a new pattern or a significant change, add an agenda item to the next UX weekly call to inform the team. -
Assignee: When applicable, create an MR in this repository and apply the "component-guideline" template to create or update the component’s documentation page. If you do not have capacity, create an issue in this repository using the "Component documentation" issue template. Bring the issue to your team planning session for prioritization and scheduling. Mark the new issue as related to this one. -
Assignee: When applicable, create an issue in GitLab UI using the "Component" issue template to build or update the component code. Bring the issue to your team planning session for prioritization and scheduling. Mark the new issue as related to this one. -
Assignee: 🎉 Congrats, you made it! You can now close this issue.
Edited by Libor Vanc