Should chart popovers have a different max width than normal popovers?
Problem
The popovers in our design system currently have a max width of 276px. After discussion on https://gitlab.com/gitlab-org/gitlab-ce/issues/52258, it seems like popovers for graphs (in Monitor in particular), might require more real-estate so that the full metric labels can appear.
Solution
Usage
The popovers provide details on particular points that are hovered over, in charts.
The formatting of the chart popovers varies slightly from the standard popover components. In particular, the max-width extends to 512px.
Text wrapping recommendations:
- If the word that needs to wrap is 10 characters or less, the entire word can be sent to the next line.
- If the word that needs to wrap is longer than 10 characters, we recommend breaking the word without using a hyphen.
Dos and dont's
|
---|
Allow the full metric labels to display without truncation |
Allow the text to wrap when the popover reaches the max width of 512px |
Left align the value name |
Right align the value |
Keep a minimum of 32 px of space between the value name and the value |
Related patterns
Popovers
Links / references
- Truncating discussion
- Six guidelines for truncation design
- Competitor reveal text guidelines
- Readability, the optimum line length
- Existing Grafana gitlab.com dashboards:
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Read our contribution guidelines, especially the For GitLabbers section. -
Create a Sketch file in your progress folder just for this pattern and make sure that: -
You have not created a duplicate of an existing pattern, symbol, layer style, or text style. -
You have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Typography uses text styles. When applicable, colors use shared styles.
-
-
Ask a UXer to review your Sketch file, linking them to your latest commit so they know where to find it. If they have the capacity, they should assign themselves to this issue. -
QA of your Sketch file by the reviewer. -
Add your changes to the pattern library. When copying things over, watch out for duplicated symbols, layer styles, and text styles. Some of our recommended plugins can help you find and remove duplicates. -
QA of pattern library by the reviewer. -
Create an issue in the Design System to add the pattern documentation. Mark it as related to this issue. -
Add an agenda item to the next UX weekly call to inform everyone (if it's a new pattern, not yet used in the application).
Edited by Amelia Bauerly