giseldo/neodataset huggingface dataset:
Add support for opt-in avatar on every step of the breadcrumb component

### Problem

Following the dicsussion in https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/387#note_199608310, the initial breadcrumb component implemented does _not_ support opt-in avatar on every step of the breadcrumb. Since the current implementation of the breadcrumb hides or shows the avatar per need, adding support for opt-in avatar on every step of the breadcrumb component could help make this more useful.

### Proposal

Let's add support for opt-in avatar on every step of the breadcrumb.

Story points: 2.0
Avatars > avatars can be links > build

Given the [goal of moving shared UI components](https://gitlab.com/groups/gitlab-org/-/epics/672) from gitlab-ce to gitlab-ui, gitlab-ui avatar component needs to support the features supported gitlab-ce avatar component. Clicking an avatar can take the user to a different URL. See https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue for more information of gitlab-ce avatar component

Story points: 2.0
Avatars > Add tooltip support > build

Given the [goal of moving shared UI components](https://gitlab.com/groups/gitlab-org/-/epics/672) from gitlab-ce to gitlab-ui, gitlab-ui avatar component needs to support the features supported gitlab-ce avatar component. Tooltips support is one of them. See https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue for more information of gitlab-ce avatar component

Story points: 2.0
Follow-up: Generate arrays from SCSS lists in scss_variables module

From this [discussion](https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/623#note_198433120): 

`scss_variables` does a great job serving as a SSOT to share concepts such a colors, spacing scales, etc. between JavaScript and CSS. There is a problem in the JS side though. SASSList objects are not converted into JS Array objects by the script that generates `scss_variables.js`. Let’s improve the scss_variables generator to generate matching JS data types for SASS Lists and Maps.

Story points: 2.0
Implement new type scale specifications

Implement type-scale according to pajamas specifications:

* [prototype](https://gitlab-org.gitlab.io/gitlab-design/hosted/pedro/%23168-responsive-type-prototype-html-previews/)
* [design specs](https://gitlab-org.gitlab.io/gitlab-design/hosted/pedro/%23168-responsive-type-spec-previews/).

Note: See related issues for a breakdown of the individual type scale components.

Story points: 3.0
Create separate variables for each design system spacing scale value

In `variables.scss` the current representation of the spacing scale is the following:

```scss
$gl-spacing-scale: (
  0: 0,
  1: #{0.25 * $grid-size},
  2: #{0.5 * $grid-size},
  3: $grid-size,
  4: #{1.5 * $grid-size},
  5: #{2 * $grid-size},
  6: #{3 * $grid-size},
  7: #{4 * $grid-size},
  8: #{5 * $grid-size}
);
```

This representation was conceived with the purpose of automating the creation of utility classes. Since we are declaring such utilities manually, using this data structure is cumbersome. Let’s change it to separate variables:

```scss
$gl-spacing-scale-0: 0;
$gl-spacing-scale-1: 0.25 * $grid-size;
// etc
```

Story points: 1.0
First radio button should be `checked` in Vue example

### Problem:

We have it as a requirement that one radio button in a set should be selected by default, however, the Vue example does not have one with the `checked` attribute.

![Screen_Shot_2019-07-18_at_7.52.26_AM](/uploads/f138c025e1f2085ba7d118628c285b9e/Screen_Shot_2019-07-18_at_7.52.26_AM.png)

### Solution:

Add `checked` to the first radio button in the group.

![Screen_Shot_2019-07-18_at_7.54.34_AM](/uploads/61e2ece3c73d395c78a3ccdff2e7c758/Screen_Shot_2019-07-18_at_7.54.34_AM.png)

### Reason:

It’s a good practice to have elements in states where they can be undone. In the case of radio buttons, once one in a group is selected, you can never unselect all to get back to the original state. For this reason, one radio button in a group should have the `checked attribute`, and typically it’s the first one unless the state reflects a previous choice.

/cc @tauriedavis

Story points: 1.0
Update heat map tooltip to chart popover

The current heat map component uses the default ECharts tooltip. We should use the GitLab popover component instead so that the heat map is consistent with the rest of the charts.

Current tooltip:

![Screen_Shot_2019-07-08_at_10.53.50_AM](/uploads/02e10c01c9754697d5626e4f5c871a0e/Screen_Shot_2019-07-08_at_10.53.50_AM.png)

[Expected popover](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-chart-tooltip--default):

![Screen_Shot_2019-07-08_at_10.55.57_AM](/uploads/8fc8f5521d2c0d37fec18c0ee5f5c7fc/Screen_Shot_2019-07-08_at_10.55.57_AM.png)

Story points: 2.0
Document styling components guidelines

I find it useful to have a documented pattern with code examples, like our [Vuex documentation](https://docs.gitlab.com/ee/development/fe_guide/vuex.html). I propose to have something similar for styling components in gitlab-ui.

The documentation is based on the styling component decisions documented in the RFC https://gitlab.com/gitlab-org/frontend/rfcs/issues/2



Story points: 3.0
Toggle > Add proper styling

This is a follow up of https://gitlab.com/gitlab-org/gitlab-ui/issues/55.

Should add the styling as is spec'ed in:
[Sketch Measure Preview for toggles](https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/toggles-spec-previews/)

![Screen_Shot_2019-06-06_at_13.48.20](/uploads/91dee90cdbb78f7620a5fb947b68f75c/Screen_Shot_2019-06-06_at_13.48.20.png)

Story points: 3.0
Toasts > Steep width change

When a second toast is introduced, the width of the toast takes the width of the first toast before rending the correct width.

Multiple toasts should render their correct width:

![Screen_Shot_2020-06-01_at_11.07.13_AM](/uploads/a48857ca2e29d8bc6e94d253d78a526e/Screen_Shot_2020-06-01_at_11.07.13_AM.png)

Story points: 2.0
Ensure avatar examples don't rely on external images

Currently, for our [Avatar stories and examples](https://gitlab.com/gitlab-org/gitlab-ui/blob/6232eb434adf190c8085aafd5787b17dd3b895b4/components/base/avatar/avatar.stories.js#L14), we use an image which is sourced from gitlab.com

This is not ideal and could potentially cause our visual regression test suite to fail in the event that the image changes or becomes unavailable.

## Solution

Ideally, we should be using an image from within gitlab-ui.

Story points: 2.0
Improve/simplify toast styling

## Summary

Currently, we use vue-toasted as a dependency for our toast component, which means that we're forced to override vue-toasted's styles in order to apply our own styling. 

Since we're overriding vue-toasted's styling we end up with nested CSS which becomes difficult to maintain.

## Improvements

We should come up with a way to make us less dependent on vue-toasted's stylesheet and make our CSS more maintainable.

Perhaps there's a way we can disable their stylesheet entirely?

Story points: 3.0
Switch from vue-toasted to BootstrapVue's toast component

Our [current toast component](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-toast--default) relies on `vue-toasted`.

BootstrapVue now includes its [own toast component](https://bootstrap-vue.js.org/docs/components/toast), which is in beta as of writing this.

Let's remove the extra dependency on `vue-toasted` by switching to BootstrapVue's component once it's out of beta.

This plan was discussed here: https://gitlab.com/gitlab-org/gitlab-ui/issues/238#note_162944906

Story points: 3.0
Internationalization on chart legend - avg and max

I noticed that the chart legend `Avg` and `Max` text isn't internationalizable:

![Screenshot_2019-04-29_at_16.04.18](/uploads/8e4717f1b4ba608269a3ab74ea894a7c/Screenshot_2019-04-29_at_16.04.18.png)

It is not possible to internationalize text within gitlab-ui. This could become a bigger issue as more components that contain text are added to gitlab-ui.

This instance could be solved by making the text directly configurable via a prop.

Story points: 2.0
Prettier job failures are confusing

When Prettier fails in CI, it doesn't print a useful error message. All we get is a lousy `console.log` warning from eslint

Example output:

```
$ yarn lint
yarn run v1.13.0
$ eslint --ext .js,.vue .

/builds/gitlab-org/gitlab-ui/components/base/loading_icon/loading_icon.vue
  68:7  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)

Done in 7.92s.
$ yarn prettier --list-different '**/*.{js,vue}'
yarn run v1.13.0
$ /builds/gitlab-org/gitlab-ui/node_modules/.bin/prettier --list-different '**/*.{js,vue}'
components/base/form/form_select/form_select.vue
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: Job failed: exit code 1
```

Better would be message saying "please run `prettier --write` to fix the errors"

Story points: 1.0
Scoped labels restyled

From https://gitlab.com/gitlab-org/gitlab-ee/issues/9175#note_154807790

| Different sizes/colors | In sidebar |
| ------ | ------ |
| ![Screen_Shot_2019-04-11_at_1.08.25_PM](/uploads/8313885213bd48454a1f6473fdb1a143/Screen_Shot_2019-04-11_at_1.08.25_PM.png) | ![130CFA63-2847-460C-851C-FC1DCBEBA930](/uploads/fa97c4af2921f11d434ab65fcee9cdf1/130CFA63-2847-460C-851C-FC1DCBEBA930.png) |


Note that for this iteration, **the question mark icon will still be in the label**, so they'll look like this:

<img src="/uploads/e1373d2696407ef76440aee03924f603/Screen_Shot_2019-04-11_at_2.31.10_PM.png" width="400px">


### Design notes/specs

* Border on large labels is `2px`; on small labels it's `1px`
* We currently choose the text color based on which color the user selected as background. If the label background is dark, it has white text, if it is light, it has dark text
   * For labels with white text, the label value should have a white background, and the text color should match the background of the scope portion (revert the 2 colors)
   * For labels with dark text, the label value should still have a white background, but the text color should still be the standard dark text color
   * The question mark icon is `$gray-500`: `#a7a7a7`
* Specs- https://gitlab-org.gitlab.io/gitlab-design/hosted/annabel/%23282-scoped-labels-spec-previews/

Story points: 2.0
Update labels in gitlab-ui to use interactive popover

gitlab-ce~9594407 since GitLabbers use labels heavily.

---

### Problem to solve

We currently have links included in label tooltips, which are not particularly helpful as tooltips disappear as soon as you hover outside the element.

![Screen_Shot_2019-03-14_at_6.59.15_AM](/uploads/91b79cf042d492a0cd8091cf52983a25/Screen_Shot_2019-03-14_at_6.59.15_AM.png)

### Design Solution

| Labels | New label form |
| ------ | ------ |
| ![links_in_labels](/uploads/38dbb21948d34b39c62127c980313375/links_in_labels.png) | ![Label_Popover](/uploads/4ec5209918011aef1a1219107f3b519a/Label_Popover.png) |



<details>
| New label form | Labels |
| ------ | ------ |
| ![Screen_Shot_2019-10-30_at_12.48.57_PM](/uploads/b32f1abc9dc6572af50d30ee12b1c304/Screen_Shot_2019-10-30_at_12.48.57_PM.png) | ![Screen_Shot_2019-10-30_at_12.49.08_PM](/uploads/51507808cb24099a25d5bcd1c376412b/Screen_Shot_2019-10-30_at_12.49.08_PM.png) |
| Links should be blue, scoped labels `?` should link to docs | Convert description `input` to `textarea`; add markdown help text | 


<summary>Previous design</summary>
From @cperessini's comment in https://gitlab.com/gitlab-org/gitlab-design/issues/282#note_150466105

![Screen_Shot_2019-03-14_at_6.58.24_AM](/uploads/04c9ef1af30b048e54054d58578cd2c4/Screen_Shot_2019-03-14_at_6.58.24_AM.png)
</details>

**Blocked by:** https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/855

Story points: 2.0
Standalone `gl-form-radio` components do not work without a `gl-form-radio-group` ancestor

As of writing, our `gl-form-radio` component wrapper is unusable. Once !192 is merged, it will be usable, but *only* as a descendant of a `gl-form-radio-group` component.

The underlying `b-form-radio` components we wrap *can* be used *without* any ancestor `b-form-radio-group` component, however. The issue is that we're not correctly forwarding the `v-model` directive from the `gl-form-radio` component down to the `b-form-radio`.

Part of #135.

Story points: 2.0
Search box icon is positioned incorrectly in Safari

spotted in https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/8591#note_132045635

The dropdown search icon appears to be positioned incorrectly in Safari

![Screenshot_2019-01-16_at_12.58.22](/uploads/35ec58b1df39e81dbe8af7e76d1235c2/Screenshot_2019-01-16_at_12.58.22.png)

Story points: 1.0
Fix spacing in search box component

From https://gitlab.com/gitlab-org/gitlab-ui/issues/93#note_119655757:

For the paddings I currently use the Bootstrap helpers which results in a different spacing than in the design specs:

![Screen_Shot_2018-11-23_at_12.59.44](https://gitlab.com/gitlab-org/gitlab-ui/uploads/4a4afac9de55c2cedde412e84a9eba92/Screen_Shot_2018-11-23_at_12.59.44.png)

![Screen_Shot_2018-11-23_at_12.59.32](https://gitlab.com/gitlab-org/gitlab-ui/uploads/2a3fbdb345a75455923778e60e7b7c94/Screen_Shot_2018-11-23_at_12.59.32.png)

> I would prefer to have a new css file in gitlab-ce specifically for these kind of use cases, that way it's easier to remove them later on and they aren't scoped to these vue files

> I created https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/23760 now.

> The padding helper classes are now merged but the existing paddings (for example of `.form-control`) take precedence. :disappointed: Do we want to go down the `!important` route as Bootstrap does? Or should we go with https://gitlab.com/gitlab-org/gitlab-ce/issues/55256?

Story points: 1.0
Create a search / filter input field component

We need a new component that follows the criteria of "Search by typing" from https://design.gitlab.com/components/search:

> - The search action is triggered immediately after users start typing
> - a spinner is added in the right corner of the search box
> - A clear icon appears in the right corner when the search box contains content and there is no search activity happening in the background
> - Clicking the clear icon removes the content, focuses the input field (if not already), and hides itself
> - A magnifying glass icon is placed in the left corner of the search box
> - The placeholder in a search box should ideally be just “Search”

![image](https://gitlab.com/gitlab-org/gitlab-ee/uploads/f764adeed9112f69c932a001f9f13979/image.png)

design specs: https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/search-spec-previews/

Story points: 3.0
Wrap Vue bootstrap dropdown components

The following components from https://bootstrap-vue.js.org/docs/components/dropdown need to be wrapped:

- [x] `<b-dropdown>`
- [x] `<b-dropdown-item>`
- [x] `<b-dropdown-item-button>`
- [x] `<b-dropdown-header>`
- [x] `<b-dropdown-divider>`

Story points: 5.0
Create avatar component

Migrate existing or create new avatar component in gitlab-ui.

Design documentation to be added via https://gitlab.com/gitlab-org/design.gitlab.com/issues/129. Documented avatar sizes can be found at https://gitlab.com/gitlab-org/gitlab-design/issues/196

Should leverage vue-bootstrap where possible, such as rounding corners: https://bootstrap-vue.js.org/docs/components/image. Perhaps it should wrap `b-img`?

Story points: 3.0
Move package to new npm namespace

Now that we've reclaimed the `@gitlab` namespace in npm, let's rename our packages.

1. Update the namespace from `@gitlab-org` to `@gitlab`.
2. Update the package from `gitlab-ui` to just `ui`, since the namespace makes this redundant.

Ultimately we can change our package imports in gitlab-ce like so:

```javascript
// old
import { ProgressBar } from '@gitlab-org/gitlab-ui';

// new
import { ProgressBar } from '@gitlab/ui';
```

Let's also make sure we deprecate the old package namespace with `npm deprecate`.  This will place a friendly warning at the top of the npm page, and in the console when a user installs the old package (we need to make sure this warning message doesn't break old GitLab stable branches).

See [jade (renamed to pug)](https://www.npmjs.com/package/jade) as an example of this.

Story points: 3.0
Toggle > Add to gitlab-ui

- Add a new button with on, off, and loading state.
- Can have **label** (above) and **help text** (below), using the existing [`form-group` component](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-form-form-group--default)

![Screen_Shot_2018-09-20_at_07.41.40](/uploads/c621e2b16860b9749bd3f851b00b6681/Screen_Shot_2018-09-20_at_07.41.40.png)

![Screen_Shot_2018-09-20_at_07.42.02](/uploads/75182ca682309b03060d6206573a283c/Screen_Shot_2018-09-20_at_07.42.02.png)


From the comments we are going to roll our own based on [our current implementation](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/vue_shared/components/toggle_button.vue)

Story points: 2.0
F/u/f gitlab!59537: Add needed CSS utility classes

Moves the needed CSS utility classes from the `gitlab` codebase to the `gitlab-ui` codebase as part of the cleanup of [the “Highlight Paid Features During Active Trial” experiment](https://gitlab.com/groups/gitlab-org/-/epics/4721) (clean-up issue yet to be made).

The following utility classes need to be migrated over:

```scss
.gl-order-1 {
  order: 1;
}

.gl-sm-order-init {
  @media (min-width: $breakpoint-sm) {
    order: initial;
  }
}

.gl-xs-ml-3 {
  @media (max-width: $breakpoint-sm) {
    @include gl-ml-3;
  }
}

.gl-sm-mr-3 {
  @media (min-width: $breakpoint-sm) {
    @include gl-mr-3;
  }
}
```

Story points: 1.0
Allow only safe urls in GlButton

### Proposal

[GlButton](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/base/button/button.vue) component should accept only secure and valid URLs. This means that it should prevent `javascript://` links.

* should allow URLs only with the following protocols (http, https, ftp, mailto)
* should take care of encoded URIs
* should render as `span` tag when the `href` is unsafe

[`GlSafeLinkDirective`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/directives-safe-html-directive--default) can be used for that purpose.

Since GitLab also relies on data URLs in some cases, we'll want to provide a way to set "unsafe" URLs that will skip the sanitization step. An idea would be to expose an `unsafe-url` prop.

### Why

The javascript links can lead to cross-site scripting bugs. For example, https://gitlab.com/gitlab-org/gitlab/-/issues/212630. It has been fixed by validating the zoom meeting links which should fix this particular security issue. However, other `GlButton` usages are still vulnerable if we miss any such validations.

### Related Issues

- [Allow only safe urls in GlLink](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/823)
- [Preventing URL Injection](https://gitlab.com/gitlab-org/gitlab/-/issues/219124#prevent-url-injection)
- [XSS Retrospective](https://gitlab.com/gitlab-org/gitlab/-/issues/327824)

Story points: 2.0
Safe Html v-safe-html Documentation Confusion

Sorry I'm not overly familiar with the project (gitlab-ui) and the documentation etc but there are a few things that strike me as odd:

https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/directives-safe-html-directive--default

Renders the example like:

![image](/uploads/642e43282c3d7b8b851d830e45124449/image.png)

![image](/uploads/bb8a5bbeedf5eabdaba71da2a87f308a/image.png)

So the `<img` tag is actually being rendered? Isn't the entire purpose of `v-safe-html` to NOT render HTML?

I also find it slightly niggling at my OCD that the example https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/directives/safe_html/examples/safe_html.basic.example.vue has a few subtle differences from that https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/directives/safe_html/safe_html.md

Should we align them? And/or is there an effort to prevent the need to duplicate the examples?

Thanks!

Story points: 1.0
Enable smooth scrolling in Safari

## Context

The following discussion from !2067 should be addressed:

- [ ] @pslaughter started a [discussion](https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2067#note_542567216):  (+2 comments)

    > **issue (ux, safari):** Unfortunately, it looks like the `scrollTo` with options is not supported by Safari ([see MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo#browser_compatibility)), which I believe is one of our support browsers...
    > 
    > ![20210331_scrollable_tabs_safari](/uploads/8b65223522764200bf562fec3f6fa051/20210331_scrollable_tabs_safari.mp4)
    > 
    > WDYT @jareko & @fguibert? You'll also notice the gradient blur isn't quite working the way we expect here :disappointed: 
    > 
    > @fguibert, if needed we might also have a smooth scroll function in GitLab which has some polyfilled support :thinking:

Our list of supported browsers changed in %15.2: https://docs.gitlab.com/ee/update/removals.html#support-for-older-browsers. So it looks like we only need to worry about Safari >=14.1.

Story points: 3.0
Form select > Validation > Remove background image icon

On select fields, we should remove the background image icon that appears on validations (red explanation mark in circle)

![Screen_Shot_2021-03-25_at_2.23.56_PM](/uploads/7e95a1941161e4d048cf94edf2a0ea19/Screen_Shot_2021-03-25_at_2.23.56_PM.png)

Story points: 1.0
Badge > Linked badges > Make examples in Pajamas the SSoT

## Problem

Embedded badge examples in Pajamas are different from GitLab UI. Having a SSoT will help accurately complete the badge accessibility audit https://gitlab.com/groups/gitlab-org/-/epics/5664.

| **Pajamas** | **GitLab UI** |
| ------ | ------ |
| ![CleanShot_2021-03-22_at_15.10.48](/uploads/bae696a1643959a3567d5fe814ceebb9/CleanShot_2021-03-22_at_15.10.48.gif) | ![CleanShot_2021-03-22_at_15.11.14](/uploads/d9021a99ace7f666979d007b82bc8735/CleanShot_2021-03-22_at_15.11.14.gif) |

## Solution

Ensure badge examples align with the [badge design specs](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=425%3A3) and that action badges dont underline text on hover.

Story points: 2.0
Migrate base/form/form_group stories to Component Story Format


Migrate `base/form/form_group` 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