giseldo/neodataset huggingface dataset:
Storyshots > Increase failure threshold for chart components

Our chart components tend to make visual tests flaky due to `echarts` being non-deterministic in some of the drawing it does. To address this, we are thinking that raising the failure threshold for charts might be the simplest solution. This should be doable with the `getMatchOptions` function: https://storybook.js.org/addons/@storybook/addon-storyshots-puppeteer

/cc @markrian

Story points: 2.0
Dropdowns > Make fluid-width opt-in

Follows-up on https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3384#note_1352998790.

We have recently made the dropdowns's width a bit more flexible by removing the fixed width in favor of a minimum and a maximum width.

In some cases, we might still want to prevent the dropdowns from auto-sizing themselves. E.g.:


| **Wrapping example** | **Disclosure example** |
| ------ | ------ |
| ![image](/uploads/d0e20428349383cb2d14f4513b3596d5/image.png) | ![image](/uploads/94c5cfa80278023c52fd5bb88ef9835a/image.png) |

### Implementation plan

- [x] Restore the fixed width at `15.5rem`. This should be the default.
- [x] The fluid layout `15.5rem <= width <= 28.5rem` can be opted in via a new prop.

Story points: 1.0
Add same styling for DisclosureDropdown toggle as for other buttons in a button group

### Description

Style `DisclosureDropdown` toggle the same way as other buttons inside `GlButtonGroup`. Currently the styles of the DisclosureDropdown take precedence there.

![Screenshot_2023-03-14_at_10.34.32](/uploads/805e4a04eccbf4354e0e48d472601714/Screenshot_2023-03-14_at_10.34.32.png)

#### 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 →](ADD LINK TO FIGMA FILE/FRAME)

### Checklist

Make sure the following are completed before closing the issue:

1. [x] Assign the correct component label to this issue.
1. [x] Create an MR with the additions or updates needed.
1. [x] 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. [x] 🎉 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]
-->

Story points: 1.0
Add disabled styling for the DisclosureDropdownItem component

### Description

Add `disabled` styling for the `DisclosureDropdownItem` component. Currently the `disabled` attribute is set correctly on `DisclosureDropdownItem` (= the button is not clickable) but it is still styled the same as normal button.

Expected behavior: when `disabled` attribute is set the button has a light grey color.

Current behavior:

![Screenshot_2023-03-14_at_10.23.53](/uploads/62fbea9b032a4bd0da52ae6535905087/Screenshot_2023-03-14_at_10.23.53.png)

Code example of how to reproduce this behavior

```
const actionItems = [
  {
    text: __('scheduled action'),
  },
  {
    text: __('expired action'),
    extraAttrs: {
      disabled: true,
    },
  },
];

<template>
  <gl-disclosure-dropdown
    :text="title"
    :title="title"
    :aria-label="title"
    :items="actionItems"
  >
    <gl-disclosure-dropdown-item
      v-for="item in actionItems"
      :key="item.text"
      :item="item"
    >
      <template #list-item>
        <span class="gl-flex-grow-1">{{ item.text }}</span>
      </template>
    </gl-disclosure-dropdown-item>
  </gl-disclosure-dropdown>
</template>
```

### Checklist

Make sure the following are completed before closing the issue:

1. [x] Assign the correct component label to this issue.
1. [x] Create an MR with the additions or updates needed.
1. [x] 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]
-->

Story points: 1.0
Add placeholder/not selected state for dropdown button

In the new dropdown we don't have a state which indicates the placeholder/not selected state like we had in the old dropdown.

| New dropdown button | Old dropdown button |
| ------ | ------ |
| ![old](/uploads/07d499d9da11dc578572316de332a4d4/old.png) | ![new](/uploads/a0cd041e37aa5000bc3baf3c1a27658c/new.png) |

**Proposed solution**

Add `gl-text-gray-500` when there is no selection to the dropdown button.

| Before | After |
| ------ | ------ |
| ![before](/uploads/941f1634f22f5c9db80bd636b3493023/before.png) | ![after](/uploads/3c35268b32bbc74c7dfcc389a27f2a09/after.png) |

Story points: 1.0
Add option to remove header from GlModal

## Problem

In https://gitlab.com/gitlab-org/gitlab/-/issues/378542 we need to create a search modal that is headerless. There's no way to do that with the current GitLab UI component

## Proposal

Add that ability. It should be possible with a v-if statement hooked up to a boolean prop. We want the whole header to disappear, including the close icon.

https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/base/modal/modal.vue

Story points: 2.0
GlLineChart: Chart does not fill container height when `auto`

## Problem to solve

In the ~"group::product analytics" dashboard setting the chart height to `auto` and setting `responsive` creates a chart with `0` height.

This can be fixed by setting the chart height to full or using flex grow. However there is no API to style the `GlChart` component inside `GlLineChart`.

Needed for https://gitlab.com/gitlab-org/gitlab/-/issues/385181+.

### Screenshots

Chart with height: `auto`

![image](/uploads/88437de9b5980bdaa6e44ba95e5dcb95/image.png)

### Proposed solution

Add an optional property to `GlLineChart` to set the CSS class on its `GlChart` element.

Note: This could also potentially be applied to all other chart components.

### Implementation plan

There are two options:

1. Add a `chartStyle` to `GlLineChart` that sets the style on its `GlChart`.
1. Add a `chartStyle` to `GlChart` which would be passed by `GlLineChart`'s `v-bind="$attrs"`.

My preference would be to go with the second since it would solve it for all components that wrap `GlChart`.

Story points: 3.0
GlFilteredSearch: Stop treating spaces specially

This is a follow-up for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1803. The goal of this issue is to get https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3226 merged. That includes:

- Add an opt in flag to enable the new behaviour. The old behaviour must remain.
- Add tests covering the new behaviour.
- Add documentation for new behaviour.

Story points: 3.0
Improve the semantics  of the disclosure content wrapper when it has custom content

The following discussion from gitlab!110683 should be addressed:

- [ ] @sdejonge started a [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/110683#note_1269738234):  (+2 comments)

    > **question:** Can we remove this `<div role="group">`? I think the `<slot>` inside `<gl-disclosure-dropdown>` should already get an associated role from the computed `<ul>` or `<div role="group">`.
    > 
    > The HTML output has `<div>` children of `<ul>` which is invalid.
    > 
    > ```html
    > <ul id="disclosure-6" aria-labelledby="dropdown-toggle-btn-2" data-testid="disclosure-content" tabindex="-1" class="gl-new-dropdown-contents">
    >   <div>
    >     <ul role="group" class="gl-mb-0 gl-pl-0 gl-list-style-none">...</ul>
    >   </div>
    >   <div class="gl-border-t gl-pt-2 gl-mt-2">
    >     <ul role="group" class="gl-mb-0 gl-pl-0 gl-list-style-none">...</ul>
    >   </div>
    >   <div class="gl-border-t gl-pt-2 gl-mt-2">
    >     <ul role="group" class="gl-mb-0 gl-pl-0 gl-list-style-none">...</ul>
    >   </div>
    > </ul>
    > ```
    > 
    > The `isAllGroups` util to set the parent as `<div role="group">` checks the `items` but not the `<slot>` contents as in this case.
    > 
    > **question:** would it be silly to make the root element of `<gl-disclosure-dropdown-group>` a `<li>` and always render the slot contents of `<gl-disclosure-dropdown>` in a `<ul>`? Or is there a better way to set the parent as `<div role="group">` when the `<slot>` content only contains `<gl-disclosure-dropdown-group>`?

Story points: 1.0
bug(GlCollapsibleListbox): keyboard navigation doesn't work when there is no item selected

A fairly common use case for `GlCollapsibleListbox` is to initially have no item selected. However, if you set the `selected` prop to `null` then the keyboard navigation doesn't work. See video below:

![Screen_Recording_2023-02-03_at_12.20.10_PM](/uploads/1393d7fc07d9b641acc1a7d95a3276fe/Screen_Recording_2023-02-03_at_12.20.10_PM.mov)

Normally in this use case you would use the `toggle-text` prop to set the toggle button text when no item is selected. In the above video I didn't set this prop which is why the toggle button is empty.

If you set the `selected` prop to `undefined` the keyboard navigation does work :shrug: 

### How to reproduce

1. Run storybook locally
2. Change [src/components/base/new_dropdowns/listbox/listbox.stories.js#L144](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/base/new_dropdowns/listbox/listbox.stories.js#L144) to `null`

Story points: 1.0
Set focus on the first child of the custom toggle in new dropdowns

Currently, the custom toggle's container ('div') element gets the focus. The problem is that the user might want to style the focus ring differently

| Focus on `div` | Focus on custom content |
| ------ | ------ |
|  ![Screenshot_2023-02-03_at_18.15.57](/uploads/1a2af77eb4fe456243efbd301556aee6/Screenshot_2023-02-03_at_18.15.57.png)|      ![Screenshot_2023-02-03_at_18.15.33](/uploads/646a92ce8d636f028c78f4a64633fe6d/Screenshot_2023-02-03_at_18.15.33.png)  |

As @pgascouvaillancourt we could solve it by setting the focus on the first child of the custom toggle instead of the wrapper. Then user can have control of how it looks

Story points: 2.0
Fix Listbox group header padding according to design

Follow up for this [comment](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/106738#note_1223712370) 

As it was suggested by @cam.x , `y-padding` for needs to be adjusted according to [design documentation](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/%F0%9F%93%99-Component-library?node-id=66756%3A108021&t=a82xCnl6M4N2MyUf-0)

Now it is `4px` and according to design specs, it needs to be `8px`

<details><summary>Screenshot</summary>
![Screenshot_2022-12-29_at_15.13.51](/uploads/f22b72dd9db204678d8e826d16729550/Screenshot_2022-12-29_at_15.13.51.png)
</details>

Story points: 1.0
Consider upgrading to Storybook 7 (and webpack@5)

Storybook 7 [will soon be](https://storybook.js.org/blog/7-0-beta/)/[is available](https://storybook.js.org/releases/7.0). We should consider upgrading to it.

See the [migration guide](https://storybook.js.org/migration-guides/7.0) for details.

Possible improvements:
- Faster builds
- Keeping up to date

Possible issues:
- Dropping webpack support
- CSF API changes

Story points: 2.0
Upgrade bootstrap-vue to 2.23.1

I'm creating separate issue to track this effort, cause it is important for ~"vue3-migration" 

Previous attempt at !3116 was reverted, because it caused regressions in gitlab due to tables rendering

We need to upgrade bootstrap-vue to latest version to unlock @vue/compat compatibility

Prior work:

* https://gitlab.com/gitlab-org/gitlab/-/merge_requests/102067

Story points: 3.0
Backport CSS utils from GitLab to GitLab UI

We have written a number of CSS utils within GitLab directly in `app/assets/stylesheets/utilities.scss`. Let's move those to GitLab UI and cleanup GitLab's stylesheet.

- [x] Add CSS utils to GitLab UI.
- [x] Upon upgrading `@gitlab/ui` in GitLab, remove the unnecessary utils.

Story points: 2.0
Dropdown > Direction for rendering overflowing, non-wrapping text within items

In some cases, we might need to display long non-wrapping texts within a dropdown's items. For example, the notification settings display the user's emails, which might overflow the dropdown menu:

![Screenshot_2023-01-03_at_8.41.24_AM](/uploads/d0684d76d5d80e44093e55dfdd5eb212/Screenshot_2023-01-03_at_8.41.24_AM.png)

## Implementation plan

- [x] `GlTruncate`: ensure the rendered element has an accessible `aria-label` attribute.
- [x] `GlCollapsibleListbox`
  - [x] Make dropdown's width more flexible:
    - [x] `min-width: 15.5rem`
    - [x] `max-width: 28.5rem`
  - [x] Leverage `GlTruncate` to truncate long items' names. This should be probably be the consumer's responsibility, so this can be a recommendation in the docs.
- [x] Ensure the notifications settings render properly as per https://gitlab.com/gitlab-org/gitlab/-/issues/373843#note_1227467886.

Story points: 2.0
Code blocks with only one line render as one or more `[object Object]` strings on first load

1. Load a docs page from scratch, e.g. https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-button--default
2. Observe some code blocks render as `[object Object]`, or similar
3. Click on another component's story from the nav, and then click on the original story in the nav
4. Observe that the code block renders correctly

It _seems_ to only affect code blocks which have one line, e.g., https://gitlab.com/gitlab-org/gitlab-ui/blob/81a8250e2421022d885afb59b587bd5766a00480/src/components/base/badge/badge.md#L7-9.

## Expected

From https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-button--default:

![correct](/uploads/6f107c604a5109f1219141e942abbb04/correct.png)

## Actual

![wat](/uploads/c588f23b0b8fd2cca9c395383ea8be71/wat.png)

## Another example

From https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/utilities-sprintf--sentence-with-link

![lol](/uploads/c5f2a22e63637d3cf9afc380dfbf729c/lol.png)

Story points: 1.0
Fix horizontal padding in a drawer

From [this discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/102290#note_1175263842).

According to [Pajamas UI Kit in Figma](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=48150%3A59274), horizontal padding should be `16px horizontal`.

All current drawers have bigger `padding` that calculates to `24px`

Goal of this MR is to change drawer `padding` from `24px` -> `16px`.

Story points: 1.0
Follow-up from "Searchbar clear button events"

This issue is about fixing a bug that was raised from the [Merge Request](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/93687) review. 
I need to expose events of the clear button that's inside of the search_box_by_type component. 

In the Header Search component, I need to be able to control the appearance of the whole component (search_box_by_type) based on the state of this button, subtracting and contracting the search field in the header with an awareness of focus, blur, click on the clear button. 

![clear-button-handler-after](/uploads/85f89ab32fd39afe2a87053ede4803c3/clear-button-handler-after.mp4)

Story points: 1.0
Add @vue/compat storybook support

https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3087+ adds support for running our unit tests with vue3 (and if we ignore snapshots all are green, so our codebase is somewhat `@vue/compat` ready)

We need to implement same approach for storybook to allow playing with our components using `@vue/compat` instead of vue

Story points: 3.0
Badge component: implement 12px icon variant  to show import status

This issue is created following a comment [here](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1142#note_1134746521).

# Problem 

- From: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/785
- New 12px badge variant (for small and medium) has been created in [Figma](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=19947%3A329)

# Proposal 

1. Implement new variant in GitLab-UI: leverages 12px badge size and different padding
1. Update single stat component to use this variation of the badge

| small | medium |
| ------ | ------ |
| ![Screenshot_2021-01-19_at_10.32._2x](/uploads/2c034a76a9d57ca021b34e8f759458a0/Screenshot_2021-01-19_at_10.32._2x.png) | ![Screenshot_2021-01-19_at_10.32._2x](/uploads/8db20eea43e8bc1da5318cd36f033fe6/Screenshot_2021-01-19_at_10.32._2x.png) |

Story points: 1.0
Dropdown styles update according to new designs

## Purpose

Update current dropdown styles according to the latest [design specs](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/%F0%9F%93%99-Component-library?node-id=425%3A14).

![CleanShot_2022-10-04_at_16.58.14_2x](/uploads/febebeeee06cba05d4f87587e4621e6a/CleanShot_2022-10-04_at_16.58.14_2x.png)

As discussed in this [thread](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2125#note_1244779781) we'll create separate styles only for new dropdowns - listbox and disclosure but will keep old styles for the dropdowns implemented with `GlDropdown`.

The redesign will be done in 3 steps

- [x] :feet: Create separate stylesheets for the new dropdowns, pick CSS classes so that they do not overlap with the current GlDropdown's classes and there is no specificity battle. 

- [ ] ~:feet: Add overflow scrim. [Some ideas here](https://css-tricks.com/scroll-shadows-with-javascript/)~ https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2179

- [ ] ~:feet: Add dropdown panel tips pointing at the toggle~ https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2180

Story points: 3.0
Fix rounded borders in Segmented Control component

In the segmented control, `border-radius` should not be applied to the side of the buttons that are adjacent or next to each other.

![](https://gitlab.com/gitlab-org/gitlab/uploads/dbb20668ace134ee8550c7be05124d11/Screen_Shot_2022-10-04_at_1.09.48_pm.png)

Story points: 1.0
Listbox: Support for reset action

We need a way to add a reset button to listboxes' headers.

![](https://gitlab.com/groups/gitlab-org/-/uploads/92960801461eaf89775bc6cec441ad9f/CleanShot_2022-09-20_at_14.30.26_2x.png)

The reset button should...
* ...have a customizable label to reflect the context the listbox is being used in.
* ...only show up if the listbox has a header. Showing the reset button in an empty header is not allowed.
* ...be hidden if no item is selected in the listbox.

## Implementation plan

- [x] Expose an `resetButtonLabel` prop.
- [x] If the prop is omitted, the button never shows up.
- [x] On click, the `cleared` event is emitted.
- [x] Left-align the header to match the designs in https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/branch/5YYrJSrszk6dw9619HHPt9/%F0%9F%93%99-Component-library?node-id=425%3A14.

Story points: 2.0
Add gl-sm-mt-6 utility class

## Summary

We should add a `gl-sm-mt-6` utility CSS class, we currently have `gl-sm-mt-5` and `gl-sm-mt-7` available but now have a use case for `6`.

## Improvements

* Once the utility is available in `gitlab` we can replace the custom css in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/97387/diffs#fb723e851b8926f6532eeed94f1de1874c3221c7_288_288

## Involved components

<!--
List files or directories that will be changed by the refactoring.
-->

## Optional: Intended side effects

* Additional class available for use

Story points: 1.0
Lint against `gl-media-breakpoint-down` to promote mobile-first CSS

## Description

We have a few instances of `gl-xs-` utility classes in the codebase which use `gl-media-breakpoint-down`. These violate the mobile-first approach we are aiming for (see [relevant comment](https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2975#note_1060307382)).

Let's lint against using `gl-media-breakpoint-down` in our scss.

Story points: 2.0
Fluid type scale: use clamp() to reduce involved code

## What does this MR do and why?

Let's change the title's to use fluid typography to make use of the `clamp()` CSS function to reduce the involved code quite a bit.

### Proposal

e.g. `h1`: Let's use `clamp()` for the fluid type scale. Scales from the defined minimum (23px) to the maxinum value (32px).

```
h1 {
   font-size: clamp(23px, 2.75vw, 32px);
}
```

## Screenshots or screen recordings 

See it in action:\
![type_scaling](/uploads/055a3dfb35408609414f64717443dfb9/type_scaling.gif)

Related to gitlab#361641

Story points: 1.0
Spike: GlFilteredSearch: Stop treating spaces specially

This is a spin-off issue based on the discussion in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1438#note_906619217, and this (private) recording: https://www.youtube.com/watch?v=FgJBT7iX_6w.

The goal is to time box a proof-of-concept such that `GlFilteredSearch` no longer treats spaces specially. More concretely, the changes we want to implement are:

- [x] Free text (search terms) must be completed into tokens, via a new “free text” suggestion dropdown.
- [x] Clicking away/out from free text that hasn’t yet been tokenised gets tokenised.
- [ ] When typing in the third segment of a token, a new “free text value” option is displayed, allowing for arbitrary tokens containing spaces to be used/searched for
- [x] Pasting text with spaces would behave just like typing them manually (see above)

The goals of the spike would be to:

- [x] Get a better sense of the engineering effort to implement these robustly in GitLab UI
- [x] Get a better sense of the downstream impact in GitLab, in the various places these components are used
- [x] Get a better grasp on how to feature flag this, if we want to start trialling it

Story points: 3.0