gitlab-ui issueshttps://gitlab.com/gitlab-org/gitlab-ui/-/issues2020-08-14T00:55:28Zhttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/858GlFormInput - Add max length UI indicator2020-08-14T00:55:28ZZack Cuddyzcuddy@gitlab.comGlFormInput - Add max length UI indicator## What/Why
Follow up from @dmishunov note here: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/34561#note_367332934
Based on design mocks that included a string max-length indicator:
![Screen_Shot_2020-06-24_at_10.20.19_AM](/up...## What/Why
Follow up from @dmishunov note here: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/34561#note_367332934
Based on design mocks that included a string max-length indicator:
![Screen_Shot_2020-06-24_at_10.20.19_AM](/uploads/88d2c5ec60548a7d84602aea667ee5e4/Screen_Shot_2020-06-24_at_10.20.19_AM.png)
## Proposal
- Add an indicator to the input when `type="text"` and the prop `max` is provided.
- Count the indicator down based on the string length
- I don't think we should limit input after length max, just move to negative numbers and allow implementor to utilize their own form validations via `GlFormGroup` `state` prop.13.2https://gitlab.com/gitlab-org/gitlab-ui/-/issues/399Ensure metric dashboard legend wraps series in columns2023-09-04T14:05:16ZAdriel SantiagoEnsure metric dashboard legend wraps series in columns## Summary
Context: https://gitlab.com/gitlab-org/gitlab-ee/issues/10591#note_199587384
| Current State | What we want |
|-|-|
|![Screen_Shot_2019-08-02_at_9.51.59_AM](/uploads/6a3a3f99442edc1254e955a4ac42ba1e/Screen_Shot_2019-08-02_at...## Summary
Context: https://gitlab.com/gitlab-org/gitlab-ee/issues/10591#note_199587384
| Current State | What we want |
|-|-|
|![Screen_Shot_2019-08-02_at_9.51.59_AM](/uploads/6a3a3f99442edc1254e955a4ac42ba1e/Screen_Shot_2019-08-02_at_9.51.59_AM.png)|![Screen_Shot_2019-08-02_at_9.55.31_AM](/uploads/858e7f838665f98323426250f466957d/Screen_Shot_2019-08-02_at_9.55.31_AM.png)|
## Improvements
<!--
Explain the benefits of refactoring this code.
See also https://about.gitlab.com/handbook/values/index.html#say-why-not-just-what
-->
Increased readability and better responsive behavior.
## Risks
<!--
Please list features that can break because of this refactoring and how you intend to solve that.
-->
## Involved components
<!--
List files or directories that will be changed by the refactoring.
-->
Any chart utilizing a legend
## Optional: Intended side effects
<!--
If the refactoring involves changes apart from the main improvements (such as a better UI), list them here.
It may be a good idea to create separate issues and link them here.
-->
## Optional: Missing test coverage
<!--
If you are aware of tests that need to be written or adjusted apart from unit tests for the changed components,
please list them here.
-->13.3https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2132Error state for the GlCollapsibleListbox2023-11-27T17:21:43ZOlena Horal-Koretskaohoralkoretska@gitlab.comError state for the GlCollapsibleListboxThere is already a couple of cases where users need to create a workaround for rendering the error state
Check [this thread](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/108464#note_1248108789) as well as [this one](https://git...There is already a couple of cases where users need to create a workaround for rendering the error state
Check [this thread](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/108464#note_1248108789) as well as [this one](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/109521#note_1247946429).
We should consider making it a default feature. E.g. allowing to provide the error message on the config. Optionally an `error-message` slot for the custom error message rendering16.5Sascha EggenbergerSascha Eggenbergerhttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/2137Type scale > Implement type scale specs2024-03-25T12:53:03ZSascha EggenbergerType scale > Implement type scale specs### Description
This issue is to make the type scale and heading specs available in gitlab-ui. Alongside this effort there will be additional work needed to integrate these values into the product. The changes here are backwards compati...### Description
This issue is to make the type scale and heading specs available in gitlab-ui. Alongside this effort there will be additional work needed to integrate these values into the product. The changes here are backwards compatible, unless otherwise noted.
### Proposal
I propose the following MRs in the following order:
1. :white_check_mark: Add size scale and heading mixins
2. :white_check_mark: Add heading scale classes
3. :white_check_mark: Update avatar scale
4. :white_check_mark: Update modal scale
5. :white_check_mark: Update popover scale
6. :white_check_mark: Update banner scale
7. :white_check_mark: Update alert scale
8. Update markdown scale
9. Update drawer scale :warning:️
10. Update card scale :warning:️
11. :eyes: Update usage docs
12. Remove old stuff
#### :white_check_mark: Add size scale and heading mixins
See changes to `/scss/` in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3586/diffs
MR: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3673+
- Update size variables to css map
- Create function to turn a number into a font-size variable
- Create mixin to apply heading styles based on font-size
- ~~Create mixins to match headings styles to h1–h6~~
#### :white_check_mark: Add heading scale classes
Note: I forgot to do this in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3673 :face_palm:
MR: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3685+
- Create mixins to match headings styles to h1–h6
- Create mixins for contextual adjustments
#### :white_check_mark: Update avatar scale
See changes to `/src/components/base/avatar/avatar.scss` in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3586/diffs
MR: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3679+
- Update sizes to use the css map
- Remove unnecessary styles
#### :white_check_mark: Update modal scale
See changes to `src/components/base/modal/` in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3586/diffs
MR: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3681+
- Update semantics to `h2`
- Use -500 heading mixin
- Remove unnecessary styles
#### :white_check_mark: Update popover scale
See changes to `src/components/base/popover/popover.scss` in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3586/diffs
MR: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3695+
- Use -200 heading mixin
- Remove unnecessary styles
#### :white_check_mark: Update banner scale
MR: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3698+
See changes to `src/components/base/banner/banner.scss` in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3586/diffs
This is the first change I expect to be met with strong opinions and to appear in #is-this-known
- Use -500 heading mixin
- Remove unnecessary styles
#### :white_check_mark: Update alert scale
MR: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3706+
See changes to `src/components/base/alert/alert.scss` in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3586/diffs
I expect to be met with strong opinions and to appear in #is-this-known. This change will make alert suitable in less places, which is intentional and matches how the component should be used.
- Use -500 heading mixin
- Remove unnecessary styles
#### Update markdown scale
MR: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3965+
See changes to `src/components/base/markdown/markdown.scss` in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3586/diffs
:eyes: At the same time we should update `.md` in GitLab for parity
- Use heading mixins
- Remove heading underline
- Remove unnecessary styles
### Update drawer scale :warning:️
See changes to `src/components/base/drawer/` in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3586/diffs
This is our first breaking change and requires integration. Proposed order:
1. Add styles to gitlab-ui
2. Set styles and update semantics to `h2` in product
3. Set semantics at component level in gitlab-ui (as seen in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3586/diffs)
4. Integration branch to remove semantics from product
### Update card scale :warning:️
This one is challenging as cards can be different semantics depending on usage.
Potential plan - set a card-heading mixin that implementors can apply? But open to suggestions for this one.
In https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3586/diffs I set the size manually, but this felt icky. I'd love it if usage of those mixins was locked to the semantic element. That is, `gl-heading-3` would object to being applied to a `h4`.
#### :eyes: Update usage docs
MR: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/3567+
We should update the docs https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/scss-typescale--docs
#### Remove old stuff
Once migration is complete we should remove the old stuff. I suspect we'll create a new issue to track this.
#### Figma file
[View design specs in Figma →](https://www.figma.com/file/lX4QacpFi1bje1SbritCun/Type-scale-validation?type=design&node-id=149%3A5983&t=QDavriqyrMPxPZjI-1)
### Checklist
Make sure the following are completed before closing the issue:
1. [x] Assign the correct component label to this issue.
2. [ ] Create an MR with the additions or updates needed.
3. [ ] Be sure to get your MR reviewed by a [FE/UX Foundations designer](https://about.gitlab.com/company/team/?department=fe-ux-foundations-team).
4. [ ] When applicable, create an [MR in Pajamas](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/new) to update the demos. If you do not have capacity to complete the demos, [create an issue in Pajamas](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new) and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
5. [ ] When applicable, [create an MR in Pajamas](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/new) to update the component status.
6. [ ] When applicable, [create an issue in Pajamas](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new) using the ["Component Documentation"](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Component%20documentation) 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.
7. [ ] When applicable, [create an issue in Pajamas](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new) using the ["Figma update"](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Figma%20update) 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.
8. [ ] When introducing a major or breaking change, communicate the changes within the [Engineering Week in Review](https://docs.google.com/document/d/1GQbnOP_lr9KVMVaBQx19WwKITCmh7H3YlgO-XqVwv0M/edit).
9. [ ] :tada: Congrats, you made it! You can now close this issue.16.10Jeremy ElderDan Mizzi-HarrisJeremy Elderhttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/1995Investigate listening for focusin events in GlOutsideDirective2024-03-01T12:30:13ZMark Florianmflorian@gitlab.comInvestigate listening for focusin events in GlOutsideDirectiveFrom https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1426#note_839806079:
>>>
Investigating how BootstrapVue implements this behaviour for dropdowns, I discovered they also listen for [bubbled click events on `document`](https://github...From https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1426#note_839806079:
>>>
Investigating how BootstrapVue implements this behaviour for dropdowns, I discovered they also listen for [bubbled click events on `document`](https://github.com/bootstrap-vue/bootstrap-vue/blob/c10f945c030a3023aef3549d57ce55ffbb058bf8/src/mixins/click-out.js#L22-L27), and so that is also subject to failure if something stops the propagation of the click event.
But! They also listen for `focusin` events on `document`, and `focusin` events are much less likely to be stopped. Listening for `focusin` also has the desirable property that if the user changes focus using the keyboard, the dropdown would also be closed; that is, it's not just closed by mouse events.
This directive should almost certainly adopt that behaviour.
>>>
## Implementation plan
1. (Optional, though probably would make the next steps easier) Tackle https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1994.
1. Review how BootstrapVue implements:
- [click-out](https://github.com/bootstrap-vue/bootstrap-vue/blob/c10f945c030a3023aef3549d57ce55ffbb058bf8/src/mixins/click-out.js)
- [focus-in](https://github.com/bootstrap-vue/bootstrap-vue/blob/v2.23.1/src/mixins/focus-in.js)
- and [how](https://github.com/bootstrap-vue/bootstrap-vue/blob/v2.23.1/src/mixins/dropdown.js#L292-L295) it [uses](https://github.com/bootstrap-vue/bootstrap-vue/blob/v2.23.1/src/mixins/dropdown.js#L399-L414) them in dropdowns.
1. Figure out how to add a listener for `focusin` events in `GlOutsideDirective`. The tricky part here is debouncing the listener. For instance, clicking outside of the element will then trigger _both_ the `click` listener _and_ the `focusin` handler, but we very likely only want the callback given to `GlOutsideDirective` to be called _once_ for those events. We need a way to correlate those two events, somehow. Some questions/ideas to investigate:
- Is there a reliable, cross-browser ordering to these events?
- Should the `focusin` listener use event capturing (like the existing `click` listener) or should it use bubbling?
- Do a simple timeout: ignore the "other" event in a certain short timespan after the first event. Perhaps within one animation frame (16ms) would be good enough for this?
- See if there's some other way to correlate the events, e.g., if the `eventTarget`/`relatedTarget` are related?
- Make the `focusin` listener dynamic on the consumer side? Probably via [dynamic args](https://v2.vuejs.org/v2/guide/custom-directive#Dynamic-Directive-Arguments), though not sure if this is reactive.
1. The `focusin` behaviour should be opt-in, so as not to break the expectations of existing uses. Opting our dropdowns into this will have to be done carefully as well, since [there are dropdowns which change this behaviour](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/133067#note_1585658069).16.10https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2537Duo Chat > Prevent prompt submission while composing (Japanese IME)2024-03-25T21:29:07ZPaul Gascou-VaillancourtDuo Chat > Prevent prompt submission while composing (Japanese IME)As reported in https://gitlab.com/gitlab-org/gitlab/-/issues/430124#note_1653342235, there's an issue when using IMEs with Duo Chat.
While typing in a textarea with an IME enabled, the <kbd>Enter</kbd> key would be used to select one o...As reported in https://gitlab.com/gitlab-org/gitlab/-/issues/430124#note_1653342235, there's an issue when using IMEs with Duo Chat.
While typing in a textarea with an IME enabled, the <kbd>Enter</kbd> key would be used to select one of the completion suggestions from the list:
![image](/uploads/7bb21d5bdcbfee3fba92a1acca4e4e76/image.png)
However, the `GlDuoChat` component [overrides](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/51aa1f62b1ca1e1141a44609a413155ed374b113/src/components/experimental/duo/chat/duo_chat.vue#L321) the <kbd>Enter</kbd> event to submit the prompt, effectively breaking the UX for IME users. A workaround is to pick from the IME using the mouse instead of the keyboard, but that's less than ideal and possibly breaking in terms of accessibility.
If the event really needs to be intercepted, we should ensure that it does not submit the prompt while the user is interacting with an IME, which should be doable thanks to the [`compositionstart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event) and [`compositionend`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event) events.
A similar issue was reported in https://gitlab.com/gitlab-org/gitlab/-/issues/434300 with technical solutions proposed in https://gitlab.com/gitlab-org/gitlab/-/issues/434300#note_1771846739. We'll audit GitLab's codebase for other occurrences of this issue as part https://gitlab.com/gitlab-org/gitlab/-/issues/443502.
/cc @dmishunov @leipert16.11https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2496Automated accessibility tests - GlNav2024-03-27T00:18:54ZPaulina Sedlak-JakubowskaAutomated accessibility tests - GlNav## Description
Implement automated accessibility tests for the {+GlNav+} component. Automated accessibility tests use the [axe-core](https://github.com/dequelabs/axe-core) engine to find issues on GitLab UI components.
## What to test?...## Description
Implement automated accessibility tests for the {+GlNav+} component. Automated accessibility tests use the [axe-core](https://github.com/dequelabs/axe-core) engine to find issues on GitLab UI components.
## What to test?
* [ ] default (with dropdown item)
## How to write tests?
### Implementation guide
Read the [axe accessibility test documentation](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/end_to_end_test.md#axe-accessibility-tests) to learn how to implement automated A11Y tests using the axe-core addon in Cypress.
### Implementation examples
* You can check out our pairing session on YouTube, where we implement tests for GlLabel component: https://youtu.be/FQ985DWwfCM
* Here's the MR with the implemented tests: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/376916.11Grace ChungGrace Chunghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/2462Dropdowns > Leverage shift middleware2024-03-04T12:22:14ZPaul Gascou-VaillancourtDropdowns > Leverage shift middlewareWhen a dropdown panel nears the viewport edge, it might end up overflowing it, causing horizontal scrollbars to appear in the window. This is due to the current configuration not allowing the panels to shift to remain in view. This shoul...When a dropdown panel nears the viewport edge, it might end up overflowing it, causing horizontal scrollbars to appear in the window. This is due to the current configuration not allowing the panels to shift to remain in view. This should be addressed by enabling the [`shift` middleware](https://floating-ui.com/docs/shift).
Re https://gitlab.com/gitlab-org/gitlab/-/merge_requests/142201#note_1739175957, https://gitlab.com/gitlab-org/gitlab/-/issues/424693#note_1771670063
### Implementation plan
- [ ] Enable the `shift` middleware.
- [ ] We might want to prevent the `autoPlacement` middleware from co-existing with `shift`, so perhaps this change warrants a new prop.
### This to look out for
* https://gitlab.com/gitlab-org/gitlab/-/merge_requests/144530
* Overflowing emoji picker in portrait mode:
![IMG_1115](/uploads/d9a3a2a812acdeae387ab12ff2e09934/IMG_1115.png){height=300}16.11https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2399Deprecate utility mixins in spacing.scss2024-03-05T14:06:58ZPaul Gascou-VaillancourtDeprecate utility mixins in spacing.scssAs part of the Tailwind CSS migration initiative, we are deprecating existing utility mixins by
changing their `gl-` prefixes to `gl-deprecated-`.
This issue is about deprecating mixins declared in `src/scss/utility-mixins/spacing.scss`...As part of the Tailwind CSS migration initiative, we are deprecating existing utility mixins by
changing their `gl-` prefixes to `gl-deprecated-`.
This issue is about deprecating mixins declared in `src/scss/utility-mixins/spacing.scss`.
### Changes summary
Updated December, 4th 2023
```
2613 files changed, 7627 insertions(+), 7627 deletions(-)
```
### Tailwind [core plugins](https://tailwindcss.com/docs/configuration#core-plugins) needed
- `margin`
- `padding`
- `gap`
- Custom util for `gl-collapse-empty`
### Implementation steps
- [ ] Make sure that your local GDK is up-to-date and that you don't have any work in progress there.
Copy the `gitlab/` directory absolute path to be used in the next step.
- [ ] Run the deprecation script against `spacing.scss`:
```sh
node bin/deprecate_utils.js spacing.scss <path/to/gdk/gitlab/>
```
- [ ] Enable [Tailwind CSS core plugins](https://tailwindcss.com/docs/configuration#core-plugins)
that provide replacements for the now-deprecated utils.
- [ ] Commit and push the GitLab UI changes. Make sure to mark them as BREAKING.
- [ ] In the GDK, create a new branch and install the dev build of `@gitlab/ui`. This will serve as
the integration branch. Commit and push the changes, create an MR. Link to the integration MR
in the GitLab UI MR.
- [ ] Put both MRs out for review.16.11https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2571Remove dependency on Bootstrap Vue from `DisclosureDropdownItem` component2024-03-27T00:12:17ZOlena Horal-Koretskaohoralkoretska@gitlab.comRemove dependency on Bootstrap Vue from `DisclosureDropdownItem` componentIn this MR https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4008/ the support for Vue Router links was added to the`GlDisclosureDropdownItem` component. The problem is that it relies on `BLink` whereas `GlDisclosureDropdownItem` ...In this MR https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4008/ the support for Vue Router links was added to the`GlDisclosureDropdownItem` component. The problem is that it relies on `BLink` whereas `GlDisclosureDropdownItem` was one of the rear component that did not have any direct Bootrsap and Bootstrap Vue dependencies. Removing that dependency was one of the reasons we migrated the dropdowns.Backloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/2552bug(GlTruncateText): truncate does not expand2024-03-24T18:06:05ZAlexander Turinskeaturinske@gitlab.combug(GlTruncateText): truncate does not expand## Summary
- when clicking the the `Show more` button, the text does not expand for some situations
## Links
![truncate-text_demo](/uploads/a6217be292608330ab271955bdac9afd/truncate-text_demo.webm)
## How to reproduce
1. Upload a ~"G...## Summary
- when clicking the the `Show more` button, the text does not expand for some situations
## Links
![truncate-text_demo](/uploads/a6217be292608330ab271955bdac9afd/truncate-text_demo.webm)
## How to reproduce
1. Upload a ~"GitLab Ultimate" license
2. Navigate to a project =\> Secure =\> Policies =\> New policy =? Merge request approval policy
3. Select scan type `License scan` =\> Add many licenses
4. Save the policy, merge the merge request, and navigate back to the project =\> Secure =\> Policies
5. Checkout the branch at https://gitlab.com/gitlab-org/gitlab/-/merge_requests/143732+
5. Select the policy in the list
6. Verify the summary is truncated and can be expanded
## Current behavior
The truncated text does not expand
## Expected behavior
The truncate text does expand
## Implementation
- Look at the saved conversation at https://gitlab.com/gitlab-org/gitlab/-/merge_requests/143732#note_1758787801 for ideas on how to fix thisBackloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/2525Set a max width on conversation bubbles Duo Chat2024-02-29T23:08:08ZKatie MacoySet a max width on conversation bubbles Duo Chat## Context
This comes out of a [discussion](https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4005#note_1793169034).
Duo Chat can have any width in the IDEs. We should set a max-width on the chat bubbles and probably horizontall...## Context
This comes out of a [discussion](https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4005#note_1793169034).
Duo Chat can have any width in the IDEs. We should set a max-width on the chat bubbles and probably horizontally centre them when the width exceeds a certain threshold. This is because text that is stretched wide horizontally is difficult to read.
Illustration of proposal:
![CleanShot_2024-02-29_at_10.46.27_2x](/uploads/6751f39c6b6e6b3e5ef909bbd73805c9/CleanShot_2024-02-29_at_10.46.27_2x.png)
## What should the max width be?
I don't have a firm answer on this, but perhaps the total box should be about 800 pixels, which would put the bubbles around 600-700 pixels. Max characters per line of text should be around 80. We can do a bit of trial and error?
Quick illustration:
![CleanShot_2024-03-01_at_12.05.01_2x](/uploads/04c9d19a6cf6e6c1495c7f38880690fe/CleanShot_2024-03-01_at_12.05.01_2x.png)Backloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/2369GlExperimentBadge: Re-position popover on screen re-size2024-03-28T10:09:03ZDenys Mishunovdmishunov@gitlab.comGlExperimentBadge: Re-position popover on screen re-sizeThe following discussion from https://gitlab.com/gitlab-org/gitlab/-/merge_requests/134669+ should be addressed:
- [ ] @katiemacoy started a [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/134669#note_1631661145): (+...The following discussion from https://gitlab.com/gitlab-org/gitlab/-/merge_requests/134669+ should be addressed:
- [ ] @katiemacoy started a [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/134669#note_1631661145): (+1 comment)
> **non-blocking**
>
> This is a minor bug, I'm going to call in non-blocking because the likelihood of this happening is low. When the user has the popover shown and resizes the screen width, it's possible to get into a state where the popover is in the wrong place.
>
> ![CleanShot_2023-11-02_at_13.39.40_2x](https://gitlab.com/gitlab-org/gitlab/uploads/d3f26725aa0add0254c4af24e38ec776/CleanShot_2023-11-02_at_13.39.40_2x.png)Backloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/2366Create surface design tokens for background colors in light & dark mode2024-02-28T10:33:32ZScott de JongeCreate surface design tokens for background colors in light & dark modeSome color usage requires slight variation in value between modes (e.g. light and dark mode). The context is still the same but presentationally the color should shift to align with wider interface.
In some instances CSS custom properti...Some color usage requires slight variation in value between modes (e.g. light and dark mode). The context is still the same but presentationally the color should shift to align with wider interface.
In some instances CSS custom properties have been used to allow extend a default color with a fallback e.g. `var(--gray-10, $white)`. This isn't extendable to further/future modes and isn't obvious which color is applied and when.
Semantic design tokens such as `--gl-bg-base`/`--gl-bg-alt` (or `--gl-surface-base`/`--gl-surface-alt`) could allow for usage of color to be generic, while the underlying values change between modes.
Related discussion/MRs https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3714#note_1627674125, https://gitlab.com/gitlab-org/gitlab/-/merge_requests/47352, https://gitlab.com/gitlab-org/gitlab/-/merge_requests/130873Backloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/2345bug(GlCollapsibleListbox): listbox group line-height is not consistent2023-10-27T23:11:17ZLorenz van Herwaardenlvanherwaarden@gitlab.combug(GlCollapsibleListbox): listbox group line-height is not consistent## Summary
Depending on styling of parent components, the line-height, and hence the height of the listbox group, can be different.
## Examples
**32px on repo main page**
![Screenshot_2023-10-19_at_07.21.26](/uploads/2c145c0c2da9c19...## Summary
Depending on styling of parent components, the line-height, and hence the height of the listbox group, can be different.
## Examples
**32px on repo main page**
![Screenshot_2023-10-19_at_07.21.26](/uploads/2c145c0c2da9c19529a5dd89841029b1/Screenshot_2023-10-19_at_07.21.26.png)
**16px on vulnerability report page**
![Screenshot_2023-10-19_at_07.19.47](/uploads/561393c67f699215d71cb63bec910e2d/Screenshot_2023-10-19_at_07.19.47.png)
**18px in storybook**
![Screenshot_2023-10-19_at_07.12.07](/uploads/23c5a64167cf7b9c4c642f2d90fd4054/Screenshot_2023-10-19_at_07.12.07.png)
## Potential fix
Set line-height utility css class on the listbox group templateBackloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/2315Dropdown destructive option styles2023-09-15T13:45:37ZDan Mizzi-HarrisDropdown destructive option styles### Description
<!-- 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...### Description
<!-- 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. -->
Update destructive option styles in dropdowns
States to match tertiary destructive buttons
Follows on from https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1676
#### 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/qEddyqCrI7kPSBjGmwkZzQ/%F0%9F%93%99-Component-library?type=design&node-id=65182-99449&mode=dev)
### 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, 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/edit
## Implementation plan (proposal)
- [ ] `GlDisclosureDropdown`'s `items` prop should accept a `isDestructive` flag, e.g.:
```html
<gl-disclosure-dropdown
:items="[
{
text: 'Delete',
isDestructive: true,
},
]"
/>
```
- [ ] `GlDisclosureDropdownItem` accepts a `isDestructive` prop which controls a `gl-new-dropdown-item-destructive` class being added to the item's root element. Keep in mind that consumers can use `GlDisclosureDropdownItem` directly, so the ability to render a destructive option should be as simple as possible, either by exposing a prop, or a dedicated component. The latter is likely over the top though.
- [ ] Write relevant CSS to apply the destructive looks to the `gl-new-dropdown-item-destructive` class.
- [ ] As part of the integration MR, consider migrating custom-built destructive items to the built-in variation. Custom solutions usually leverage the `gl-text-red-500` utility. Occurrences should be findable by running the following:
```sh
rg "gl-text-red-500" $(rg --files-with-matches "<gl-disclosure-dropdown-item" {./ee/,./}app/assets/javascripts)
```Next 1-3 releaseshttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/2309Allow slot content in GlDisclosureDropdownItem without template#list-item2023-09-12T01:56:48ZScott de JongeAllow slot content in GlDisclosureDropdownItem without template#list-itemfrom: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/130543
Using `<gl-disclosure-dropdown-item>` requires `<template #list-item>` to ensure that correct padding is applied to item. It's not obvious to consumers that this causes ...from: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/130543
Using `<gl-disclosure-dropdown-item>` requires `<template #list-item>` to ensure that correct padding is applied to item. It's not obvious to consumers that this causes styling issues when using:
```vue
<gl-disclosure-dropdown-item @action="...">
...
</gl-disclosure-dropdown-item>
```
That the correct usage is:
```vue
<gl-disclosure-dropdown-item @action="...">
<template #list-item>
...
</template>
</gl-disclosure-dropdown-item>
```
**Proposal:** explore alternatives to applying padding to list items to remove `<template #list-item>` being required, or allow for both direct slot and template usage.Backloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/2267Add `includeLegendAvgMax` prop to GlStackedColumnChart2023-09-04T14:05:13ZRudy CrespoAdd `includeLegendAvgMax` prop to GlStackedColumnChartIn https://gitlab.com/gitlab-org/gitlab/-/issues/386843/, it was determined that the legend average/min/max text wasn't necessary, but there's currently no way to remove it from `GlStackedColumnChart`. Let's make it optional, though enab...In https://gitlab.com/gitlab-org/gitlab/-/issues/386843/, it was determined that the legend average/min/max text wasn't necessary, but there's currently no way to remove it from `GlStackedColumnChart`. Let's make it optional, though enabled by default.Next 1-3 releaseshttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/2243Add null series handling to charts2023-06-06T13:27:33ZBrandon Labuschagneblabuschagne@gitlab.comAdd null series handling to charts### Problem
We currently don't have a universal way to handle null series ranges on charts. This results in multiple manual implementing of handling null series data in the consuming codebase.
### Proposal
Add support for null series...### Problem
We currently don't have a universal way to handle null series ranges on charts. This results in multiple manual implementing of handling null series data in the consuming codebase.
### Proposal
Add support for null series data, configurable by a prop.Next 1-3 releaseshttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/2235Add dark mode support to charts2024-03-02T03:05:00ZPeter HegmanAdd dark mode support to chartsFollow-up to https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3458#note_1396381969
We added a dark palette to the JavaScript variables in [src/utils/charts/theme.js](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/master/src/util...Follow-up to https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3458#note_1396381969
We added a dark palette to the JavaScript variables in [src/utils/charts/theme.js](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/master/src/utils/charts/theme.js). Currently none of the charts use this dark palette so we should figure out a way for them to use it when dark mode is enabled. This may involve passing a prop or coming up with a standard way to check if dark mode is enabled in `gitlab-org/gitlab` that can also be used in `gitlab-org/gitlab-ui`.Backlog