gitlab-ui issueshttps://gitlab.com/gitlab-org/gitlab-ui/-/issues2020-09-07T00:37:57Zhttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/922Add warning icon to gauge charts2020-09-07T00:37:57ZAndrei Stoicescuastoicescu@gitlab.comAdd warning icon to gauge chartsA warning icon should be displayed next to the detail text in the gauge charts.
This icon should be toggled by a prop, and its display state should be independent of any other props the gauge chart receives.
![gauge_warning](/uploads/2...A warning icon should be displayed next to the detail text in the gauge charts.
This icon should be toggled by a prop, and its display state should be independent of any other props the gauge chart receives.
![gauge_warning](/uploads/208f8698fa439e84d6f2bd7f15e6104f/gauge_warning.png)
(Note: This gauge design is outdated - the only element to note here is the warning icon)Backloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/918Add border radius to gauge chart axis2020-09-07T00:37:59ZAndrei Stoicescuastoicescu@gitlab.comAdd border radius to gauge chart axisA border radius should be applied on the corners of the gauge chart axis.
| Before | After |
| --- | --- |
| ![Screenshot_2020-07-29_at_19.15.33](/uploads/dcacab40332fc74ebc0efbe693662ae0/Screenshot_2020-07-29_at_19.15.33.png) |![Screen...A border radius should be applied on the corners of the gauge chart axis.
| Before | After |
| --- | --- |
| ![Screenshot_2020-07-29_at_19.15.33](/uploads/dcacab40332fc74ebc0efbe693662ae0/Screenshot_2020-07-29_at_19.15.33.png) |![Screenshot_2020-07-29_at_19.24.58](/uploads/f9b53e1841435c7af8148846cb05d8b0/Screenshot_2020-07-29_at_19.24.58.png) |
**Note:** the 'after' image is based on an older design. The only thing that is relevant to this issue is the border radius on the corners of the outer axis.Backloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/917Add visual separator between range colors on gauge chart axis2020-09-07T00:38:00ZAndrei Stoicescuastoicescu@gitlab.comAdd visual separator between range colors on gauge chart axisRange colors on the gauge chart axis should be separated by a border, so as to make them more distinguishable by the client.
| Before | After |
| --- | --- |
| ![Screenshot_2020-07-29_at_19.15.33](/uploads/dcacab40332fc74ebc0efbe693662a...Range colors on the gauge chart axis should be separated by a border, so as to make them more distinguishable by the client.
| Before | After |
| --- | --- |
| ![Screenshot_2020-07-29_at_19.15.33](/uploads/dcacab40332fc74ebc0efbe693662ae0/Screenshot_2020-07-29_at_19.15.33.png) |![Screenshot_2020-07-29_at_19.15.52](/uploads/42d3c6ffd09f1dfccae3ef152fd5433d/Screenshot_2020-07-29_at_19.15.52.png) |
**Note:** the 'after' image is based on an older design. The only thing that is relevant to this issue is the white/transparent border between range colors on the outer axis.Backloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/916Add responsive small state to gauge chart2023-03-07T13:38:45ZAndrei Stoicescuastoicescu@gitlab.comAdd responsive small state to gauge chart## Description
In the future we will have resizable charts in the metrics dashboard.
A problem with gauge charts is that when in small width containers, a lot of their content overlaps.
We need to have a design for smaller sizes of t...## Description
In the future we will have resizable charts in the metrics dashboard.
A problem with gauge charts is that when in small width containers, a lot of their content overlaps.
We need to have a design for smaller sizes of the gauge chart powered by responsive code that can mitigate this problem.
## Screen shot
![Screenshot_2020-07-29_at_19.05.35](/uploads/53371a1f169b2287eeac77593105eb06/Screenshot_2020-07-29_at_19.05.35.png)https://gitlab.com/gitlab-org/gitlab-ui/-/issues/773Show full series labels in the tabular chart legends no matter their length2020-09-07T01:09:22ZAndrei Stoicescuastoicescu@gitlab.comShow full series labels in the tabular chart legends no matter their length## Description
This issue is for exploring solutions to show the full series labels in the tabular chart legends.
## Possible approaches
* Horizontal scrolling of the table
* ...
* ...
## Current state
In the current state, the longer ...## Description
This issue is for exploring solutions to show the full series labels in the tabular chart legends.
## Possible approaches
* Horizontal scrolling of the table
* ...
* ...
## Current state
In the current state, the longer series names get truncated.
![Screenshot_2020-05-07_at_21.05.58](/uploads/021ad84cc1c67c6aca3e8f70f1e1051f/Screenshot_2020-05-07_at_21.05.58.png)
![Screen_Recording_2020-05-07_at_21.11.51](/uploads/9a199375b71b5c71174d30187595f2ee/Screen_Recording_2020-05-07_at_21.11.51.mov)Backloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/1554Add the mini pipeline graph component to gitlab-ui2021-09-23T00:07:22ZNadia Sotnikovansotnikova@gitlab.comAdd the mini pipeline graph component to gitlab-ui### Description
This is the implementation issue for adding the [mini pipeline graph component](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/946) to gitlab-ui. [The discussions are still pending](https://gitl...### Description
This is the implementation issue for adding the [mini pipeline graph component](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/946) to gitlab-ui. [The discussions are still pending](https://gitlab.com/gitlab-org/gitlab/-/issues/340827) around the proposed updates to the component. This issue will be updated once there's no open questions about the implementation.
<!-- Add a short description of the component addition or update. Consider adding
a checklist of variations, states, and breakpoints to the description so that reviewers can be sure to cross reference everything that has been completed. -->
#### Figma file
<!-- If design specs exist in Figma, link them below. Otherwise, remove the link and add a link to the issue to add the component to Figma -->
[View design specs in Figma →](https://www.figma.com/file/17NxNEMa7i28Is8sMetO2H/Data-Visualization?node-id=1006%3A3274)
### Checklist
Make sure the following are completed before closing the issue:
1. [x] Assign the correct component label to this issue.
1. [ ] Create an MR with the additions or updates needed.
1. [ ] Be sure to get your MR reviewed by a [FE/UX Foundations designer][foundations-team].
1. [ ] When applicable, update `followsDesignSystem:` with the correct value inside the `[component].documentation.js` file.
1. [ ] When applicable, create an [MR in Pajamas][pajamas-mr] to update the demos. If you do not have capacity to complete the demos, [create an issue in Pajamas][pajamas-issue] and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
1. [ ] When applicable, [create an MR in Pajamas][pajamas-mr] to update the component status.
1. [ ] When applicable, [create an issue in Pajamas][pajamas-issue] using the ["Component Documentation"][pajamas-component-documentation-template] issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
1. [ ] When applicable, [create an issue in Pajamas][pajamas-issue] using the ["Figma update"][pajamas-figma-update-template] issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
1. [ ] When introducing a major or breaking change, communicate the changes within the [Engineering Week in Review][eng-week-in-review-doc].
1. [ ] 🎉 Congrats, you made it! You can now close this issue.
<!--
### Resources
* [Compontent Lifecycle][component-lifecycle]
* [Adding component][adding-components]
* [Adding CSS][adding-css]
* [Breaking changes][breaking-changes]
-->
[foundations-team]: https://about.gitlab.com/company/team/?department=fe-ux-foundations-team
[pajamas-mr]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/new
[pajamas-issue]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new
[pajamas-component-documentation-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Component%20documentation
[pajamas-figma-update-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Figma%20update
[component-lifecycle]: https://design.gitlab.com/get-started/lifecycle
[adding-components]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_components.md
[adding-css]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_css.md
[breaking-changes]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/breaking_changes_to_components.md
[eng-week-in-review-doc]: https://docs.google.com/document/d/1GQbnOP_lr9KVMVaBQx19WwKITCmh7H3YlgO-XqVwv0M/edithttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/1026Adapt GlPagination to accept hasNextPage and hasPrevPage props from GraphQL r...2021-10-28T13:47:25ZDavid O'ReganAdapt GlPagination to accept hasNextPage and hasPrevPage props from GraphQL responseSee: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/44347#note_426133802
> if I recall correctly, GlPagination implementation dictates this extra code. A nice way to resolve this issue would be to adapt GlPagination to accept `ha...See: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/44347#note_426133802
> if I recall correctly, GlPagination implementation dictates this extra code. A nice way to resolve this issue would be to adapt GlPagination to accept `hasNextPage` and `hasPrevPage` props from GraphQL response. Thus we won't need to do all that calculations here.
Lets do thathttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/989Feature request: collapse-ability for GlCheckboxTree2023-03-22T20:35:25ZAngelo GulinaFeature request: collapse-ability for GlCheckboxTreeFollowing up on [this discussion](https://gitlab.com/gitlab-org/gitlab/-/issues/235747#note_408401630), where the solution in the attached screenshots has been proposed, `GlCheckboxTree` should ideally provide the options to collapse the...Following up on [this discussion](https://gitlab.com/gitlab-org/gitlab/-/issues/235747#note_408401630), where the solution in the attached screenshots has been proposed, `GlCheckboxTree` should ideally provide the options to collapse the lists.
|Collapsable GlCheckboxTree|
|-|
|![all_review_env](/uploads/5e7f2ac73011b01b9835a866b4aea74d/all_review_env.png)|https://gitlab.com/gitlab-org/gitlab-ui/-/issues/936Add dropdown variant with icon, no text and no caret/chevron2021-06-04T06:52:23ZAndrei Stoicescuastoicescu@gitlab.comAdd dropdown variant with icon, no text and no caret/chevronWe need a dropdown component that supports an icon, no text and no caret/chevron. This could be used in a scenario such as a hamburger icon/contextual menu:
![Screenshot_2020-08-14_at_13.55.56](/uploads/2013345dca507577c8ad7453be9740dd/...We need a dropdown component that supports an icon, no text and no caret/chevron. This could be used in a scenario such as a hamburger icon/contextual menu:
![Screenshot_2020-08-14_at_13.55.56](/uploads/2013345dca507577c8ad7453be9740dd/Screenshot_2020-08-14_at_13.55.56.png)https://gitlab.com/gitlab-org/gitlab-ui/-/issues/843Tabular chart legend contents show elipsis at smaller legend widths2021-04-23T22:47:56ZAndrei Stoicescuastoicescu@gitlab.comTabular chart legend contents show elipsis at smaller legend widths## Description
Narrower viewport sizes can trigger an ellipsis truncation for chart legends that have a tabular layout.
![Screen_Recording_2020-06-12_at_17.16.17](/uploads/529e91a785a5c714f1da3410c400574b/Screen_Recording_2020-06-12_at...## Description
Narrower viewport sizes can trigger an ellipsis truncation for chart legends that have a tabular layout.
![Screen_Recording_2020-06-12_at_17.16.17](/uploads/529e91a785a5c714f1da3410c400574b/Screen_Recording_2020-06-12_at_17.16.17.mov)Backloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/683Remove bar charts axis name positioning workaround2020-09-07T01:10:29ZDhiraj BodicherlaRemove bar charts axis name positioning workaround### Summary
Bar charts can have long axis labels. eCharts currently (as of %12.10) does not support dynamically positioning axis names based on axis labels. This can cause axis names to overlap with axis labels and make it unreadable.
I...### Summary
Bar charts can have long axis labels. eCharts currently (as of %12.10) does not support dynamically positioning axis names based on axis labels. This can cause axis names to overlap with axis labels and make it unreadable.
In order to alleviate this a workaround has been added to position the axis names based on axis labels sizes in this MR [**https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1199**](https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1199).
There is an ongoing pull request here https://github.com/apache/incubator-echarts/pull/12236 which might go in echarts@4.9.0.
This issue is to keep track of the above Github PR and remove the workaround once the issues is resolved in eCharts.https://gitlab.com/gitlab-org/gitlab-ui/-/issues/296File uploader > Build2023-03-22T20:26:17ZEnrique Alcántaraealcantara@gitlab.comFile uploader > BuildBuild file uploader component as specified in the pajamas design system.
Note: Design specs are still a work in progress for this component.Build file uploader component as specified in the pajamas design system.
Note: Design specs are still a work in progress for this component.Backlog