giseldo/neodataset huggingface dataset:
Migrate charts/line stories to Component Story Format


Migrate `charts/line` 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 charts/legend stories to Component Story Format


Migrate `charts/legend` 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 utilities/intersection_observer stories to Component Story Format


Migrate `utilities/intersection_observer` 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 base/tooltip stories to Component Story Format


Migrate `base/tooltip` stories to the [Component Story Format (CSF)](https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format).

- [x] Migrated `documentedStoriesOf` usages to the Component Story Format.
- [x] Migrated or removed examples.
- [x] Migrated props, slots and events documentation.
    - [x] If needed, migrated the `bootstrapComponent` parameter.
- [x] Cleanup
    - [x] Component's README:
        - [x] Removed `<!-- STORY -->`.
        - [x] Removed component's title.
    - [x] `documentation/documented_stories.js`:
        - [x] 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 base/tabs stories to Component Story Format


Migrate `base/tabs` 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 base/path stories to Component Story Format


Migrate `base/path` stories to the [Component Story Format (CSF)](https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format).

- [x] Migrated `documentedStoriesOf` usages to the Component Story Format.
- [x] Migrated or removed examples.
- [x] Migrated props, slots and events documentation.
    - [x] If needed, migrated the `bootstrapComponent` parameter.
- [x] Cleanup
    - [x] Component's README:
        - [x] Removed `<!-- STORY -->`.
        - [x] Removed component's title.
    - [x] `documentation/documented_stories.js`:
        - [x] 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 base/dropdown stories to Component Story Format


Migrate `base/dropdown` 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 utilities/friendly_wrap stories to Component Story Format


Migrate `utilities/friendly_wrap` stories to the [Component Story Format (CSF)](https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format).

- [x] Migrated `documentedStoriesOf` usages to the Component Story Format.
- [x] Migrated or removed examples.
- [x] Migrated props, slots and events documentation.
    - [x] If needed, migrated the `bootstrapComponent` parameter.
- [x] Cleanup
    - [x] Component's README:
        - [x] Removed `<!-- STORY -->`.
        - [x] Removed component's title.
    - [x] `documentation/documented_stories.js`:
        - [x] 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 base/datepicker stories to Component Story Format


Migrate `base/datepicker` 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
Form: Add GlFormInvalidFeedback Component

https://bootstrap-vue.org/docs/components/input-group#input-groups

> Bootstrap v4 currently does not support contextual state styling (i.e. valid or invalid) of input groups. However, the inputs inside the input group do support contextual state.

So we end up having something like this:

| GlFormInputGroup | Other form input (for comparison) |
| ------ | ------ |
| ![image](/uploads/bcdb3fc58f1035783d068a8445441630/image.png) | ![image](/uploads/75598818f3a41b3e7cc5fc62a93d8f6f/image.png) |

## Problem: No feedback message shown

We use the general sibling selector `~` to display the invalid feedback message, like this:

<img src="/uploads/2cf3f585f86b103e8e99f4a79379e69e/image.png" height=300px>

However, this doesn't work for `GlFormInputGroup` because the HTML structure is different. So the general sibling selector doesn't work here.

<img src="/uploads/2d4192a16796778a69490f7fc28e5834/image.png" height=300px>

## Proposal

Let's ensure the feedback is displayed, so it looks like this:

![image](/uploads/4aef69bf97cb323d0b220a7338bb7fe1/image.png)

## Solution

Alternatively, we can just use the `b-form-invalid-feedback` > https://bootstrap-vue.org/docs/components/form#comp-ref-b-form-invalid-feedback

It was suggested here > https://github.com/bootstrap-vue/bootstrap-vue/issues/1251#issuecomment-340065341

(So instead of doing some funky css magic, I think this is the best route to take. I've tested it locally and it works perfectly 👍)

## Follow-up

~~1. We might also want to consider look into changing the default message if it's a `<select>` field. As the user doesn't "fill", it "selects". So a more appropriate default message could be: `Please select an option`.~~

A sibling component would be the `gl-form-valid-feedback`, we might want to also consider creating a follow-up issue to ensure that's available in PJ 👍

## Note

This issue was created as a follow-up to MR > https://gitlab.com/gitlab-org/gitlab/-/merge_requests/55838

Story points: 3.0
Update GlFormGroup stylings to be aligned with Pajamas

### Context

The following discussion from !55728 should be addressed:

- [x] @pgascouvaillancourt started a [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/55728#note_525469956):  (+1 comment)

    > **thought:** Having to manually add this margin might indicate that the GitLab UI component might not be following Pajamas specifications :thinking: Do you think that there some change we could do in GitLab UI to make this more consistent?

### Proposal

We should add necessary margins for labels in GlFormGroup and make sure it conforms with ~Pajamas.

### Implementation Plan

- [x] Tweak form styling in GitLab UI, something very similar to [this](https://gitlab.com/gitlab-org/gitlab-ui/blob/15e9c17724049fdf26acb11abc67ff5d87cb1cb5/src/components/base/form/form_group/form_group.scss#L21), as per [suggestion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/55728#note_525469956)
- [x] Remove the `gl-mt-3` class from the gitlab codebase 
  - [x] This should apply for `<gl-form-text class="gl-mt-3">` elements
  - [x] Make sure it affects only the field labels

Story points: 2.0
Add `gl-focus-outline-none:focus` utility class

### Problem to solve

The GitLab application has several instances of Bootstrap Vue's `bv-no-focus-ring` class.

GitLab issue: https://gitlab.com/gitlab-org/gitlab/-/issues/296949

### Proposed solution

Add a new utility class to replicate `bv-no-focus-ring`'s style.

```css
.bv-no-focus-ring:focus {
  outline: none;
}

.gl-focus-outline-none:focus {
  outline: none;
}
```

Story points: 1.0
Add character count support to GlFormTextarea

### Proposal

Add character counter to `form-textarea` component which should conform the design specs at https://design.gitlab.com/components/form/#character-counter

- This can be added by using a prop `counter`

| specs | example usage |
| ------ | ------ |
| ![image](/uploads/68fe67ba0821e704456363d8dad67e0c/image.png) | ![image](/uploads/4de4570fa78034b5ef7f02c1a7980440/image.png) |

Story points: 1.0
Instant Load Directive

As we want to leverage a preloading trick in our Vue apps where you already start loading when the mouse hovers over an element. This issue is about creating an Directive that makes it easy to use that technique in the future. 

*  Call function after a debounced delay of 100ms

Base version was implemented in POC in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/52912/diffs#diff-content-733c824a6df375caae37ccea0ce422a3f384f4d8

Story points: 3.0
Rich Text Editor: Set up test environment

The Rich Text Editor edits HTML produced by the [Markdown API endpoint](https://docs.gitlab.com/ee/api/markdown.html). 

<img src="/uploads/ff57cab6e332b65fc56dd42aa4c01aa2/image.png" width="25%" />

We have to make sure to catch disparities between the API output and the Rich Text Editor’s assumptions about this output. For this purpose, we want to create a test environment where fixtures are generated for each type of content supported by the editor using the Markdown API endpoint. 

We also want to define testing patterns to verify the accuracy of Markdown generation and testing TipTap extensions. 

## Tasks

- [ ] [MR: Set up test fixtures for Rich Text Editor](https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2070) - This MR is simply a first iteration of proving we can call the API and generate a file.
- [ ] Add support for generating fixtures and committing the files to git to the CI pipeline config.
- [ ] Add initial Bold extension test that uses the generated fixture.
- [ ] Document how to create a new test fixture. 

## Context

See for a big picture of the Rich Text Editor development: https://gitlab.com/gitlab-org/gitlab/-/issues/321442

Story points: 3.0
Rich Text Editor: Create rich text editor component directory and storybook section

Create a new component directory for the Rich Text Editor. The Rich Text Editor will contain the following types of artifacts

- Vue components
- Documentation
- TipTap extensions
- Markdown serializers. 

## Context

See for a big picture of the Rich Text Editor development: https://gitlab.com/gitlab-org/gitlab/-/issues/321442

Story points: 1.0
Rich Text Editor: Add TipTap and ProseMirror dependencies to GitLab UI

## Proposal 

Add ProseMirror and TipTap dependencies to GitLab UI. The editor team will use these dependencies to implement a Rich Text Editor component. 

## License compatibility

TipTap and ProseMirror have compatible licenses with GitLab. See https://gitlab.com/gitlab-org/gitlab/-/issues/231725#note_413595037 for more information. 

## Requirements 

We have to include the Rich Text Editor 3rd party dependencies in the GitLab application while meeting the following expectations

### Performance

- We want to load these dependencies asynchronously.
- If the dependencies are not updated, we want to maintain them in the web browser’s cache.
  To meet this expectation, the bundle where the dependencies is distributed should be independent from the bundle where the Rich Text Editor is located. The reason is that we will update the Rich Text Editor more often than its dependencies.

### Smooth transition to TipTap v2

The methodology we use to load the dependencies should not become a hindrance  for the transition from TipTap 1 to TipTap 2 (currently in private development).

To meet this expectation. We should be aware of the differences between TipTap 1 and TipTap 2 distribution. [TipTap 1 groups all its dependencies](https://tiptap.dev/docs/guide/editor.html) and core components in two packages: `tiptap` and `tiptap-extensions`. 

```html
<script>
import { Editor, EditorContent } from 'tiptap';
import { Bold } from 'tiptap-extensions';

export default {
  components: {
    EditorContent,
  },
  data() {
    return {
      editor: new Editor({
        content: '<p>Initial editor content</p>',
        extensions: [
          new Bold(),
        ],
      })
    }
  },
  beforeDestroy() {
    this.editor.destroy()
  },
}
</script>
<template>
  <editor-content :editor="editor" />
</template>
```

TipTap 2 distributes extensions and Vue components in different packages.

```javascript
import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    Document,
    Paragraph,
    Text,
  ],
  content: '<p>Example Text</p>',
  autofocus: true,
  editable: true,
  injectCSS: false,
})
```

## Implementation guide

- Encapsulate the responsibility of loading tiptap packages in a single factory function. The advantage of putting all import calls in a single place is that we will only have to replace TipTap 1 packages with TipTap 2 packages in that location. 
- Put all tiptap packages in the same bundle using [webpack module methods](https://webpack.js.org/api/module-methods/)

![image](/uploads/30c69a300b042ca0120fe71cffe556af/image.png)

## Context

See for a big picture of the Rich Text Editor development: https://gitlab.com/gitlab-org/gitlab/-/issues/321442

Story points: 1.0
[VSA] Fix stage shape outline and active shape

### Problem 

- Path component has a slight 1px bump and isn't completely rounded on the pointy part of a stage... this keeps me up at night.
- Path component active highlight is a bit strange too

| Imperfect rounding | Active |
| ------ | ------ |
| ![Screenshot_2021-02-15_at_17.16._2x](/uploads/891310f35c8d66d8952a318eebf3f7e5/Screenshot_2021-02-15_at_17.16._2x.png) | ![Screenshot_2021-02-15_at_17.16._2x](/uploads/d338185be0e2593dd6bba031515983d1/Screenshot_2021-02-15_at_17.16._2x.png) |

### Proposal

1. Fix the pixel bump
1. Make active state the same shape as stage outline

Story points: 1.0
Component: Single Stat [Animation]

## Problem

- Single Stats are often used with filters
- Sometimes it is not always clear whether the filter has been applied to Single Stats (and other components like tables)

## Proposal

- Introduce a `counting number` transition to the Single Stat when a filter has been applied and it is changing from one value to the next
- This will provide a signifier that the filter has been applied and look pretty slick
- Out o scope (done in separate issues): Apply to Value Stream Analytics (group-level) and Merge Request Analytics

See Tesla example...
![Screenshot_2021-01-29_at_15.55.](/uploads/f6afa33705c0c15a4807c81c635ca104/Screenshot_2021-01-29_at_15.55..gif)

Story points: 3.0
Date picker: add alert to component

## Problem

Our [date picker](https://app.mural.co/t/gitlab2474/m/gitlab2474/1611148388781/3710a8c5ca11221336e5c17ea6ac084d6677e767?wid=0-1611326570640) currently doesn't have a way of signalling if there are any data limits.

This has led to this (rather inelegant) solution in MR analytics & VSA which occupies a lot of horizontal space in the filter bar...

![Screenshot_2021-01-22_at_15.10._2x](/uploads/6b59a2cbdc0fa985c8483d2f6ecd4b55/Screenshot_2021-01-22_at_15.10._2x.png)

## Proposal

Provide an option for an alert within the date picker component. This provides some "feed-forward" advice for users.

| Proposal | Clubhouse example |
| ------ | ------ |
| ![Screenshot_2021-01-22_at_15.32._2x](/uploads/dabfbf527ea2306db987de766a18466e/Screenshot_2021-01-22_at_15.32._2x.png) | ![Screenshot_2021-01-21_at_12.04._2x](/uploads/85d3b03be1a97b8f82a27ecc5f86dc2c/Screenshot_2021-01-21_at_12.04._2x.png) |

Story points: 2.0
Badge component: implement 12px icon variant

# 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: 2.0
Use GlButton to close Toast

## Problem

The Toast component uses a plain anchor and should instead use the GlButton.

![CleanShot_2021-01-12_at_16.02.36_2x](/uploads/936a110436b315ded7d51fa498dc561f/CleanShot_2021-01-12_at_16.02.36_2x.png)

Story points: 2.0
GlAvatarLabeled: Add <slot> for label and sublabel

### Problem to solve

The `GlAvatarLabeled` can only display text for `label` & `sublabel`.

The `label` & `sublabel` need to be customizable to enable the following GitLab admin/users https://gitlab.com/groups/gitlab-org/-/epics/4961 features:

- The `label` is a GlAvatarLink
- The `sublabel` is a mailto link

![image](/uploads/14e0bf44a3c991adc99e7bf1805e0eca/image.png)

### Potential solution

Similar to `meta`, add a `<slot>` for both `label` & `sublabel` with default content.

Story points: 1.0
Roulette doesn't take all eligible maintainers into account

According to the [handbook](https://about.gitlab.com/handbook/engineering/projects/#gitlab-ui), every frontend engineer is a reviewer of GitLab UI, but not all of then are marked as such in the [`team.yml`](https://gitlab.com/gitlab-com/www-gitlab-com/-/blob/master/data/team.yml). Similarly, not all GitLab maintainers are marked as GitLab UI maintainers. This results in some discrepancies in the reviewers & maintainers lists between GitLab and GitLab UI, as can be seen in https://about.gitlab.com/handbook/engineering/projects/.

For this reason, the reviewers roulette currently pulls data from GitLab's team, which better represents the workforce, but it's not perfect either. For example, I'm myself a maintainer of GitLab UI, but _not_ of GitLab, which means that the roulette still considers me as a reviewer.

Let's review the roulette's logic to improve the reliability of its picks.

Story points: 1.0
Add 'OR' token to filtered-search

### Problem To Solve

When filtering issues, I want to filter by ~"group::portfolio management" `OR` ~"group::certify", so that I can see issues that have one `OR` (:rofl:) the other label.

When filtering issues, I want to filter by assignee is @gweaver `OR` @hollyreynolds `OR` @kokeefe, so that I see issues that have...

### Proposal

- Add support for OR between values of a given filterable key within the filter bar.
- Only add support for OR to the `gitlab-ui` filter bar to prevent duplicating effort in parts of the code that need to be refactored to GitLab UI. 

### Constraints

- `OR` is limited to individual types of parameters `assignee = me OR you AND label = foo OR bar`, not `assignee = me OR label = foo`

### UI Prototype

https://www.figma.com/proto/7NSXzJaHq5eOtuJ11cOoKC/23532-Using-OR-in-issue-mr-epic-list-views-and-boards?node-id=175%3A1465&viewport=564%2C352%2C0.3289112150669098&scaling=min-zoom

To navigate:
1. Click on filter bar (launches primary options menu)
1. Select Assignee
1. Select `= is`
1. Select names in list. All 3 will auto-select - this is due to a limitation in the prototyping tool. The actual checkbox functionality will work as normal.
1. Click on Assignees list to close
1. Click filter bar again to launch primary options menu again for a new top level selection


### Tier

gitlab~13116818 

### Implementation Parts

- [ ] UX for using `OR` on a per parameter basis
- [ ] Frontend
- [ ] Issue Boards Side
<!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION -->
*This page may contain information related to upcoming products, features and functionality.
It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes.
Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.*
<!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION -->

Story points: 3.0