Design Pattern Library - Add pipelines table

Add pipelines table to brand.ai

Example(s)

Statuses

Pipeline-table

Usage

This table pattern displays information regarding pipelines. This can be used within projects, merge request, or commit views.

The status icons can display a range of statuses but are mostly used to display the status of either a pipeline, a stage, or a job. If they are presenting a stage and are connected with a connector element, they represent the mini-pipeline graph.

In smaller viewports, it converts to a content block tables layout featuring the same information.

Dos and Dont's

✅ Do 🛑 Don’t
Statuses Statuses_Copy

Related patterns

The tabs and table pattern is used to display the pipeline table

Links / references

Pattern checklist

Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.

  1. Ensure that you have broken things down into atoms, molecules, and organisms.
  2. Check that you have not created a duplicate of an existing pattern.
  3. Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
  4. Make sure that text is created using text styles. When applicable used shared styles for colors.
  5. QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)
Edited by Dimitrie Hoekstra