Design Pattern Library - Add tabs
Example(s)
Usage
Tabs are used as a pattern when there is a need or possible need for initial filtering of content on a view and the perimeters for those filters are few and static. Tabs allow for a counter to be included so a person get's a bird's eye view of each filtered state on how many items are involved.
Additionally, tabs can be nested but this can be considered a last resort method. Two levels deep is the maximum.
If badges are used with tabs, the value of All should be the addition of the rest of the tabs. A badged tab should not be included if it means that All will no longer match the addition of the rest of the tabs. For example, merge request tabs should not include both Open and WIP because a merge request can be both Open and WIP, causing the addition of all badges to not match the number of All merge requests. An alternative would be to sort open merge requests by WIP.
Dos and Dont's
(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)
|
|
|
|---|---|
Related patterns
The pipeline table pattern makes use of this pattern
Links / references
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that text is created using text styles. When applicable used shared styles for colors. -
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)