Design Pattern Library - Define truncating of long file paths
Problem
Using ellipses for long file path names is not useful to users. Often, the paths are all the same except for the final file name, which is now truncated behind ellipses.
Solution
Per https://gitlab.com/gitlab-org/gitlab-ee/issues/4991#note_60594392
"Clip the path from the middle. Knowing the exact filename is a real clue and first directories can help knowing in which "bigger" section the file is. And it's even more important with multi-modules or mono-repo projects."
Example(s)
-
client/nodes_modules/.../jquery-1.9.1.js
-
server/nodes_modeuls/.../jquery-1.9.1.js
Usage
(When do you use this pattern? And how?)
Dos and dont's
(Use this table to add images and text describing what’s ok and not ok.)
|
|
---|---|
Related patterns
(List any related or similar solutions. If none, write: No related patterns)
Links / references
Comment related to truncating long file paths: https://gitlab.com/gitlab-org/gitlab-ee/issues/4991#note_60594392
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) -
Added to gitlab-elements.sketch -
Add to the UX Guide and/or add to the GitLab Design Library -
Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)
/cc @cperessini @dimitrieh @hazelyang @pedroms @sarrahvesselov @sarahod @tauriedavis