giseldo/neodataset huggingface dataset:
GlDropdown: Dropdown should shrink to fit parent container width

## Problem to solve

Unlike other form inputs in GitLab UI, the `GlDropdown` doesn't shrink to fit its parent container. This is being resolved in GitLab https://gitlab.com/gitlab-org/gitlab/-/merge_requests/85499, but it should be also be resolved in GitLab UI.

![image](/uploads/60574d6c17622bf8a0a86bf50fd64d7f/image.png)

## Suggested solution

Setting the dropdown button's width to 100% would make it fit the parent container.

Story points: 1.0
Add utility classes for billing plan page

```css
.gl-text-purple-800 {
  color: $purple-800;
}

.gl-bg-theme-indigo-800 {
  background-color: $theme-indigo-800;
}

.gl-border-indigo-700 {
  border-color: $theme-indigo-700;
}

.gl-border-gray-75 {
  border-color: $gl-text-color-quaternary;
}

.gl-min-h-8 {
  min-height: $gl-spacing-scale-8;
}

```

# Plan

- [x] Add to `gitlab-ui` !2811
- [x] Remove from `gitlab` [here](http://gitlab.com/gitlab-org/gitlab/blob/921b31bc43af65f1871457407489e72ddc1a061e/app/assets/stylesheets/utilities.scss#L372-372) https://gitlab.com/gitlab-org/gitlab/-/merge_requests/87116

Story points: 2.0
Fix font colors for GlBadge variants when used in GlTabs


Background:

GlBadge has variants:

https://gitlab-org.gitlab.io/gitlab-ui/?path=%2Fstory%2Fbase-badge--variants
![Screen_Shot_2022-03-29_at_5.20.08_AM](/uploads/8c3d511e564398cc8ba386dd9f3de3e9/Screen_Shot_2022-03-29_at_5.20.08_AM.png)

## Problem

When GlBadge is used within GlTabs, variants don't seem to work. The text font stays black.

- We need to define the correct color for selected and unselected GlBadge variants with a tab.

## Expected
![Screen_Shot_2022-03-29_at_3.52.53_AM](/uploads/f843cd674fd7ca1a0bacf277a5ced46a/Screen_Shot_2022-03-29_at_3.52.53_AM.png)

## Actual
![Screen_Shot_2022-03-29_at_3.50.43_AM](/uploads/abcb6ac35293ec3c8af37e67746397b8/Screen_Shot_2022-03-29_at_3.50.43_AM.png)


## Default muted variant used in tabs

![figma_tabs](/uploads/f5382cdc827a70cf3085d61d58d9465b/figma_tabs.png)

Story points: 2.0
Migrate base/form/form-checkbox-tree stories to Component Story Format

Migrate `base/form/form-checkbox-tree` stories to the [Component Story Format (CSF)](https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format).

* [ ] Migrated `documentedStoriesOf` usages to the Component Story Format.
* [ ] Migrated or removed examples.
* [ ] Migrated props, slots and events documentation.
  * [ ] If needed, migrated the `bootstrapComponent` parameter.
* [ ] Cleanup
  * [ ] Component's README:
    * [ ] Removed `<!-- STORY -->`.
    * [ ] Removed component's title.
  * [ ] `documentation/documented_stories.js`:
    * [ ] Added component's PascalCase name to `disableForComponents`.

More details about the migration can be found in the epic: https://gitlab.com/groups/gitlab-org/-/epics/5651

Story points: 2.0
Migrate typescale stories to Component Story Format

Migrate `src/scss/typescale/typescale.stories.js` stories to the [Component Story Format (CSF)](https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format).

* [ ] Migrated `documentedStoriesOf` usages to the Component Story Format.
* [ ] Migrated or removed examples.
* [ ] Migrated props, slots and events documentation.
  * [ ] If needed, migrated the `bootstrapComponent` parameter.
* [ ] Cleanup
  * [ ] Component's README:
    * [ ] Removed `<!-- STORY -->`.
    * [ ] Removed component's title.
  * [ ] `documentation/documented_stories.js`:
    * [ ] Added component's PascalCase name to `disableForComponents`.

More details about the migration can be found in the epic: https://gitlab.com/groups/gitlab-org/-/epics/5651

Story points: 2.0
GlEmptyState: Add the ability to style title & description container

## Problem to solve

The `GlEmptyState` component doesn't provide a way to style the title & description container. 

This is causing some misalignments on GitLab.com. Originally raised in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/81889#note_863257787.

## Screenshots

![image](/uploads/91c3cf26decf99cf6223dfeecf8a074c/image.png)

## Proposed solution

Add a property that allows the consumer to define classes on the title & description container.

Story points: 1.0
GlFilteredSearch - Add readonly state to search bar and tokens

## Problem to solve

For https://gitlab.com/gitlab-org/gitlab/-/issues/344452 we need to show the `GlFilteredSearch` and tokens as read-only as certain roles don't have access to other terms.

## Designs

![image](https://gitlab.com/gitlab-org/gitlab/uploads/cb65286edcfa66928322ad07f8862fbc/image.png)

![Filter_search](https://gitlab.com/gitlab-org/gitlab/uploads/05a2acfdc5f1b2c95dff6bd58684edc7/Filter_search.png)

[Figma](https://www.figma.com/file/n7rywDkSHdt8hsKlZhf6zG/KR-UI-redesign-session-5%3A-Filtering?node-id=8%3A33)

## Proposal

1. Add a `readonly` property to `GlFilteredSearch`. When true:
   1. Don't show the suggestions list.
   1. Don't show the clear `X` button.
   1. Don't allow the user to type or clear any existing text or tokens.
1. Add a `disabled` property to `GlFilteredSearchToken`. When true:
   1. Don't allow the user to change it.
   1. Don't show the clear `X` postfix.

Story points: 3.0
Add gl-max-w-48 & gl-max-w-58 CSS utilities

Needed for the design of https://gitlab.com/gitlab-org/gitlab/-/issues/348494. We in Growth Conversion plan to implement as part of our experiment promotion task (if the experiment is a success).

```scss
$gl-spacing-scale-48: 48 * $grid-size;
$gl-spacing-scale-58: 58 * $grid-size;

.gl-max-w-48 {
  max-width: $gl-spacing-scale-48;
}

.gl-max-w-58 {
  max-width: $gl-spacing-scale-58;
}
```

Story points: 1.0
Buttons > Update selected state

### Description

Update selected state to match Figma UI Kit

#### Figma file

[View design specs in Figma →](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=2956%3A3364)

### 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. [ ] 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/edit

Story points: 1.0
Run minimal visual regression testing in MRs

When creating an MR, the `visual` job runs in every pipeline and tests all of GitLab UI's components.

Generally, an MR only changes a single component though. There is a possibility that one component is being used in others, and that changing it would affect other visual tests indirectly. But in most cases, it should be reasonable to run visual tests only for the component being changed. At least until the initial approval at which point we should run a full pipeline to make sure all visual tests are still green.

Let's improve our CI setup so that MR pipelines only run storyshots on the changed `*.stories.js` files by default.

Story points: 2.0
GlEmptyState: Text overflows illustration

In https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2581, we converted a few Bootstrap utilities to GitLab UI ones in `GlEmptyState`. In the process, we applied a `gl-flex-wrap` class to the main container, which preserves some styles from the `.row` util, but is causing some display issues due to the illustration's container not inheriting the `width: 100%` from the `col-*` class we removed.

![image](/uploads/039bd08e9de9b7b924eeb2f12ad5e131/image.png)

Story points: 1.0
GlPopover: Add support for a close button

In https://gitlab.com/gitlab-org/gitlab/-/merge_requests/64540, we implemented a popover that appears on page load and that can be closed with a close button displayed in its header:

<img src="https://gitlab.com/gitlab-org/gitlab/uploads/f5cecda79a81f728bcaee9b14559434c/Screen_Shot_2022-01-10_at_2.06.07_PM.png" width="450" />

The implementation was done entirely in GitLab by adding some style overrides there, as well as rendering the close button via the `#title` slot.

As part of https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1465, we later moved the style overrides to GitLab UI, but the close button itself is still being implemented in GitLab.

## Proposal

Having style overrides for a close button that does not exist in GitLab feels a bit odd. Let's add out-of-the-box support for a close button in `GlPopover`.

Here are a few things to consider:

- [x] The close button should be a `small` button using the `close` icon. The GitLab implementation relies on a `<span class="gl-display-inline-block" aria-hidden="true">&times;</span>` to render the `X`, which doesn't align with the design specs.
- [x] Re-adjust the spacing to account for the change above.
- [x] The close button's visibility should be controlled by a prop (eg. `has-close-button`).
- [ ] Once the close button is implemented, remove all custom code from `ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue` in favor of using the built-in feature.

cc @dreedy @kcomoli

Story points: 2.0
Limit drawer component to 100% width on smaller devices

On smaller devices, it has been noted that the drawer component can overflow if the width of the device is smaller than the width of the drawer as defined in: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/base/drawer/drawer.scss.

The CSS is defining a small breakpoint width of `gl-w-full` but appears to be overridden by the `gl-drawer-default` and `gl-drawer-sidebar` classes as they have higher specificity.

![image](/uploads/283ebd58c4915edb0ae91cbe7ee6b37c/image.png)

## Implementation Guide
The simplest fix would be to make sure the small breakpoint is given to these classes as well

Story points: 1.0
Move .gl-md-pr-5 classes to gitlab-ui

The MR https://gitlab.com/gitlab-org/gitlab/-/merge_requests/77012 adds the `gl-md-pr-5` class in GitLab, this should be moved to GitLab UI.

Once the class has been added to GitLab UI we can then remove it from the main GitLab codebase https://gitlab.com/gitlab-org/gitlab/-/issues/350247.

Story points: 1.0
Enable eslint-plugin-storybook

Storybook now provides an official ESLint plugin to ensure stories are written properly: https://github.com/storybookjs/eslint-plugin-storybook.

It currently reports errors for all stories that haven't been migrated to CSF yet, which is expected.

Let's enable this plugin sometime soon. This could be done now by ignoring offenses in non-CSF stories, or we could also wait until the migration is done.

Recommended setup in `.eslintrc.yml`:

```yaml
extends:
  - 'plugin:storybook/csf'
```

Story points: 1.0
Clearing a token from gl-filtered-search immediately starts editing prior token name

I want to remove a label filter and add a different one. I click the X, but it then starts immediately editing the prior label name. If I hit space, it strangely auto selects a different label. See below video for example.

I feel like clearing using the X should leave the prior label filter in place and allow you to start adding a new one.

![Clearing_label_immediately_starts_editing_old_label](/uploads/2f2aee82b0eb0107ef8d9207ce48509c/Clearing_label_immediately_starts_editing_old_label.webm)

Story points: 2.0
Add max-w-26 & max-w-62

In support of [this Growth experiment](https://gitlab.com/groups/gitlab-org/-/epics/3695) ([MR which adds these utility classes](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/75148/diffs)), if the experiment is successful & is promoted, we would like to add the following utility CSS styles:

```scss
.gl-max-w-26 {
  max-width: $grid-size * 26;
}

.gl-max-w-62 {
  max-width: $grid-size * 62;
}
```

(Or something akin to that.)

Story points: 1.0
GlFilteredSearch problems with editing, issue filter bar

The issues page, which uses `GlFilteredSearch`, is having difficulty with simple editing such as cursor movement via key or clicking.
Video shows the behavior I'm seeing.

![2021-12-09_12.12.57](/uploads/6e59af0ff639c785e3378bcf0d39d6f4/2021-12-09_12.12.57.gif)

I consider this a semi-serious usability issue.

Story points: 3.0
GlDisclosure: First iteration of a Disclosure

In order to reduce the complexity of our existing GlDropdown implementation, we want to implement a semantically correct GlDisclosure component.

> Disclosure: A disclosure dropdown is a button that toggles a panel containing a list of links or navigational items where each item has its own tab stop. If a dropdown contains both a link and an action, it should be a disclosure with a tab stop for each item.

https://design.gitlab.com/components/dropdown-disclosure

Story points: 5.0
Gl-Empty-State > Make "title" not required

There are a couple of instances in the code base where a `title` is unwanted

Remove `title`'s required status

- Instances
  - https://gitlab.com/gitlab-org/gitlab/blob/master/app/assets/javascripts/jira_import/components/jira_import_setup.vue
  - https://gitlab.com/gitlab-org/gitlab/blob/80f1ea7e3f11063a4f15bdd4a2e4a1ca7f770d87/app/assets/javascripts/monitoring/components/empty_state.vue
  - https://gitlab.com/gitlab-org/gitlab/blob/2f57df6053e2e8dea8a0b1d6c477d761aad23468/ee/app/assets/javascripts/threat_monitoring/components/policy_editor/scan_execution_policy/scan_execution_policy_editor.vue

Story points: 3.0
Enhance GlTable component to return GlTableLite if circumstances allow

In [32.14.0](https://gitlab.com/gitlab-org/gitlab-ui/-/releases/v32.14.0) GlTableLite was introduced to GitLabUI.

GlTableLite supports a subset of the features GlTable does, but is much lighter on the pagebundle.

All those features which are not supported in GlTableLite are triggered via Props in GlTable.

### What needs to be done

Enhance the GlTable component so that it checks for the need of a GlTable and if not return a GlTableLite, this will have a great effect on our overall Page Bundles.

Implementation Plan: 
- [ ] Check props in GlTable Lite
- [ ] Return the best fit for given props (GlTable or GlTableLite)

Story points: 3.0
GlDaterangePicker CSF - datepicker cut inside story container

This was raised in the review of !2415

After migration to CSF open datepicker is hidden inside the story container - the container is scrollable though to accommodate its content

To reproduce 
1. Go to [daterange picker story](http://localhost:9001/?path=/docs/base-daterange-picker--default)
1. Open docs tab
1. Note that open datepicker is displayed cut inside the story container - the container should either expand ot datepicker should be displayed over it as before the migration

| Before | After |
| ------ | ------ |
| ![Screenshot_2021-10-08_at_13.54.59](/uploads/df69911c500bd7dec35202dee5a86cf8/Screenshot_2021-10-08_at_13.54.59.png) | ![Screenshot_2021-10-08_at_13.52.44](/uploads/9dd2997b9a3324d7bbb52c420a93aa28/Screenshot_2021-10-08_at_13.52.44.png) |

Story points: 1.0
Date picker - add disabled cursor to month/year/arrows/days

# Problem 

Currently, there is no disabled cursor for the disabled buttons of the date picker. Related to #1563.

![Screenshot_2021-10-04_at_10.12.](/uploads/5c8ecf1c561b2ae81a05c5bee931322e/Screenshot_2021-10-04_at_10.12..gif)

# Proposal

Add the cursor!

![image](/uploads/3043224dadab2be6383751d1d945b30d/image.png)

Story points: 1.0
Date picker - make month/year look more interactive

# Problem

- The date picker has a dropdown for the month and year and nobody knows about it!
- Related to gitlab-org/gitlab-services/design.gitlab.com#601. From this thread: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/601#note_689319507

# Proposal

- Use a similar pattern to the sidebar - with a tertiary button that goes to `gray-50` on-hover to show interaction...

![Screenshot_2021-09-29_at_18.09.](/uploads/86b64ef3b999de2c6a401061c13a7da9/Screenshot_2021-09-29_at_18.09..gif)

# Other ideas

![Screenshot_2021-09-29_at_11.57._2x](/uploads/21a447c259366fa1de6316fed03e2833/Screenshot_2021-09-29_at_11.57._2x.png)

Story points: 1.0
Audit and prevent `v-html` usages

Related epic - https://gitlab.com/gitlab-com/gl-security/appsec/appsec-team/-/issues/184

### Proposal

We should add an ESLint rule to prevent usage of `v-html` in the codebase.

### Why

`v-html` is bad and can lead to XSS attacks https://vuejs.org/v2/api/#v-html

### Goal

Our aim is to make sure we don't use `v-html` for any new codebase and audit every possible usage of `v-html` being used.

### Implementation Plan

* [ ] Add `vue/no-v-html` rule in eslint
* [ ] Audit existing `v-html` usages
* [ ] Replace `v-html` with `v-safe-html`

### Outcome

- Two usages found
  - [`src/components/base/form/form_checkbox/form_checkbox_group.vue`](https://gitlab.com/gitlab-org/gitlab-ui/blob/ec54f68fcda42481bd8f967026644d4bb2676a75/src/components/base/form/form_checkbox/form_checkbox_group.vue#L35)
  - [`src/components/base/form/form_checkbox/form_checkbox_group.vue`](https://gitlab.com/gitlab-org/gitlab-ui/blob/ec54f68fcda42481bd8f967026644d4bb2676a75/src/components/base/form/form_checkbox/form_checkbox_group.vue#L35)

Story points: 2.0
Fix size prop on GlButtonGroup

In https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2339#note_654465742 it was discovered that the `size` prop on `GlButtonGroup` doesn't work.

That is, if you supply `sm`, `md` or `lg`, you get styles inconsistent with our design system. If you supply `small` or `medium` (the supported `GlButton` sizes), nothing happens.

## Implementation Guide
Supply the `size` prop directly to the `GlButton` children.

Since `BButtonGroup` is so simple, we could re-implement it completely in GitLab UI to fix this, _if_ we want to.
It's a little more complex, but the better solution.

Story points: 1.0
Rename newButton* constants to button*

The following discussion from !2332 should be addressed:

- [ ] @pgascouvaillancourt started a [discussion](https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2332#note_648261333): 

    > **thought:** It would be great if we could rename those `newButton*` constants to `button*` now that we only have one button component. But let's do that in a follow-up :slight_smile:

Story points: 1.0
GFM Typescale > Inline diff > implement

Implement GitLab Flavored Markdown inline diff styles following the design specs created in https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1076

See parent epic for detailed information about this component.

Figma assets:

- [Documentation markdown - Inline diff](https://www.figma.com/file/V3HKN83B7rf2T6sseLMrxa/Type-scale---Documentation-Markdown?node-id=988%3A10)
- [Compact markdown - Inline diff](https://www.figma.com/file/mjAZxHkK95TlQ6L14aNp2M/Type-scale---Compact-Markdown?node-id=893%3A4)

### Implementation guidelines

- The markdown typescale implementation file is in [`src/components/base/markdown/markdown.scss`](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/base/markdown/markdown.scss#L1)
- Add compact markdown variation as a child class selector of `.gl-compact-markdown`
- Use the following CSS selectors to ensure compatibility with GitLab Flavored Markdowns
  - `idiff`
  - `idiff.deletion` for deletion styles
  - `idiff.addition` for addition styles
- Add a demo of this component in `src/components/base/markdown/markdown_typescale_demo.html`.

Story points: 1.0
GFM Typescale > Code block > implement

Implement GitLab Flavored Markdown code span styles following the design specs created in https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1068

See parent epic for detailed information about this component.

Figma assets:

- [Documentation markdown - Code block](https://www.figma.com/file/V3HKN83B7rf2T6sseLMrxa/Type-scale---Documentation-Markdown?node-id=985%3A10)
- [Compact markdown - Code block](https://www.figma.com/file/mjAZxHkK95TlQ6L14aNp2M/Type-scale---Compact-Markdown?node-id=890%3A8)

### Implementation guidelines

- The markdown typescale implementation file is in [`src/components/base/markdown/markdown.scss`](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/base/markdown/markdown.scss#L1)
- This component shares font styling with the [`gl-monospace` class selector](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/base/markdown/markdown.scss#L121)
- Add compact markdown variation as a child class selector of `.gl-compact-markdown`
- Use the following CSS selectors to ensure compatibility with GitLab Flavored Markdown:
  - `pre`
  - `pre code`
- Add a demo of this component in `src/components/base/markdown/markdown_typescale_demo.html`.

Story points: 1.0