giseldo/neodataset huggingface dataset:
Formalize utility-first css preference

## Proposal 

Let's formalize a "utility-first" CSS preference (this is different than "utility-only"):

1. Start with utility classes.
2. If composing utility classes into a component class removes code duplication and encapsulates a clear responsibility, do it. 

**Why?**

- "utility-first" encourages the organic growth of component classes.
- It prevents the creation of one off not reusable classes.
- It keeps component classes cohesive, since they can be combined with other utility classes.
- It also encourages the creation of design-centered classes (e.g. button, alert, input), rather than domain-centered classes (e.g. security-report-widget, commit-header-icon).

**Inspiration:**

- [Tailwind](https://tailwindcss.com/docs/extracting-components/)

## Description

Throughout all Frontend projects, it is unclear when to prefer utility classes vs. component classes. Let's formalize our preference and add it to our FE documentation.

**What are utility classes?**

`.d-flex.prepend-top-default.append-bottom-default`

[Bootstrap4 introduced many utility classes](https://getbootstrap.com/docs/4.1/utilities/) that each apply a single CSS rule. We've also adopted this pattern and created some custom utility classes. These are helpful for quickly overriding styles that are highly specific. 

**What are component classes?**

`.component-header`

This is the common practice of creating CSS classes that encapsulate a logical set of rules.

## Analysis

**What are our goals?**

- Increase maintainability
- Reduce CSS bloat 

**Advantages of utility classes:**

- Prevents the need for one-off CSS classes that are never reused

**Disadvantages of utility classes:**

- Harder to read
- Harder to edit in the browser inspector
- The set of utility classes applied to an element is not reusable (although the Vue component itself is reusable)

**Advantages of component classes:**

- Easier to read
- Easier to edit in the browser inspector
- Reusable
- Semantically describes the HTML element

**Disadvantages of component classes:**

- When reused in the wrong place, it can cause coupling of unrelated elements, hurting modifiability.
- Naming of these classes can easily be inconsistent and unintuitive (e.g. wrapper, container, content, etc.

## Conclusion

There is nothing keeping us from doing both, but using either inappropriately leads to a brittle style sheet. `utility-first` is a pragmatic way to ensure we are creating the right kind of component classes.

## Related Resources

- https://davidtheclark.com/on-utility-classes/
- https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

Story points: 1.0
Document contribution steps on how to create wrapped components

Document contribution steps on how to create wrapped components

## Steps
1. Select a component
1. Determine the scenarios (different types of implementations) in which this component is used in gitlab-ce/ee
1. Document those scenarios in an issue
1. Select a scenario that is implemented in gitlab-ce/ee that you will replace with your component
1. Create a MR to [gitlab-ui](https://gitlab.com/gitlab-org/gitlab-ui/) implementing your new component
   1. Be sure to name your MR `feat: <commit message>` as that is needed for our npm release CI job
   1. Create `component.vue` in `components/` directory
   1. Create a story `component.js` in `stories/` directory
   1. Run `yarn test --updateSnapshot` to generate your image snapshots for diffing
1. Create a MR to gitlab-ce/ee to replace the scenario implementation that you previously selected
   1. Update your `package.json` dependency reference of `@gitlab-org/gitlab-ui` to the URL output of the `upload_artifacts` ci job in your gitlab-ui MR
   1. Run `yarn install` to make sure that the `gitlab-ui` contents are installed
   1. Add a new component import to `app/assets/javascripts/commons/gitlab_ui.js` so that your component is globally registered
1. Once you've verified that your integration MR to gitlab-ce/ee is working, assign a maintainer to review both gitlab-ui and gitlab-ce/ee MRs
1. Maintainer will merge the gitlab-ui MR, run the manual CI job on `master` to make a new release onto NPM
1. (You or maintainer) will update your integration MR `package.json` dependency reference to the newly released `gitlab-ui` version
1. Maintainer will merge the integration MR

## Methods to streamline steps
1. Create CLI (eg. yeoman) to create templates for gitlab-ui MR https://gitlab.com/gitlab-org/gitlab-ui/issues/14
   1. Auto generate `component.vue` in components directory
   1. Auto generate `component.js` in stories directory
1. Create system for checking commit messages and MR titles so that they fit the semantic release format

Story points: 2.0
Add bootstrap-vue's pagination

Add bootstrap-vue's pagination

## Existing Scenarios in CE

- Navigation-based Vue component: pagination buttons are links to next/previous result pages (requires page reload)

## Existing Implementations in CE

- [table_pagination.vue](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/vue_shared/components/table_pagination.vue) is used in:
  - [container.vue](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/environments/components/container.vue)
  - [groups.vue](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/groups/components/groups.vue)
  - [pipelines.vue](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/pipelines/components/pipelines.vue)
  - [table_registry.vue](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/registry/components/table_registry.vue)


Story points: 4.0
Add bootstrap vue's modal to gitlab-ui

## Scenarios of modal's in GitLab
- Dynamic content modal
   - One modal DOM element with dynamic data loaded across multiple button triggers
- 1 to 1 modal
   - One modal DOM element mapped to one button trigger
- Button in HAML, Modal in Vue

## Current implementations of modal's in GitLab
- [gl_modal.vue](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/vue_shared/components/gl_modal.vue) - 11 instances in CE
   - Dynamic content modal (4 count)
   - 1:1 (3 count)
   - button in HAML (4 count)
- [deprecated_modal.vue](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/vue_shared/components/deprecated_modal.vue) - 7 instances in CE
   - Dynamic content modal (1 count)
   - 1:1 (1 count)
   - button in HAML (5 count)

Story points: 4.0
Frontend for showing × on label to remove the label in sidebar

We add a chip with an `x` icon (`icn/close`) that can be clicked to delete the label. The chip will change its style and show a background on hover and active states.

The shape of the chip will be a `16px x 16px` circle. The icon inside should be `8px x 8px`. The margin with the label name is `2px` and the padding on the right side of the chip is `4px`. Spec previous will be uploaded with all these measurements.

The target area of the chip will be a `16px x 16px` square independently of its shape.

The hover state for the circle should revert to the color in the label when a white background is used (such as with scoped labels) and the 'x' icon color should be the same color as either the label color or the text color when on a white background (if applicable).

### Solution  
![Screen_Recording_2020-06-16_at_11.24.51_AM](/uploads/196aa5750ce9b3b6f770fb27e740977a/Screen_Recording_2020-06-16_at_11.24.51_AM.mov)

[See Figma UI Pajamas kit for more details on tokens](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit?node-id=425%3A141)

<details>
### Previous solution proposal  

We currently underline the label's name when hovering. This underline should be removed when hovering over the chip.

| States | Sidebar |
| ------ | ------- |
| <img src="https://gitlab.com/gitlab-org/gitlab-ce/uploads/8603ad33cf17624e75c31147cf7f8288/labels--cursors.png" width=442px> | <img src="https://gitlab.com/gitlab-org/gitlab-ce/uploads/1585579d865d77987ee0620adef896ce/sidebar.png" width=288px>

The colors of the badge are based on the label name color:

|     | Resting | Hover | Active |
| --- | ------- | ----- | ------ |
| Icon | Color: `same as text`, Opacity: `100%` | Color: `same as text`, Opacity: `100%` | Color: `same as label`, Opacity: `100%`  |
| Icon Background | Color: `none`, Opacity: `0%` | Color: ` same as text`, Opacity: `30%` | Color: `same as text`, Opacity: `100%`  |
</details>

### In scope
- This should apply to issue, merge request, and epic pages.
- This should apply to the slide out board sidebar for project boards and group boards.

Story points: 2.0
Update search components in gitlab-ui

Guidelines:
https://design.gitlab.com/components/search

Specs: https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/search-spec-previews/

A list of all searchboxes throughout the application (WIP):
https://docs.google.com/spreadsheets/d/13y5NMHi7VUs8jNeEBuMd5C5PcR_hdUfDdwKxLOyIjWU/edit#gid=0

## Proposal


| **1. Search by typing** | **2. Search by enter/click** |
|------------------|-----------------------|
| ![image](/uploads/d5acb38884e6d7f1ec20b39a45419628/image.png) <br>*Default -> Typing (spinner indicates background activity) -> Show the clear icon when there's no background activity*<br><br>- Search icon placed in the left edge of search box<br>- Lack of button indicates automatic search<br>- Focus search box when clear icon is clicked<br>- Hide the clear icon when search box is empty | ![image](/uploads/62102ff170506ba0f7c13268f2faf679/image.png)<br>*Default -> Typing (show clear icon)*<br><br>- Search icon in the button<br>- Button indicates the need for confirming/triggering search<br>- Focus search box when clear icon is clicked<br>- Hide the clear icon when search box is empty |

And also update the most commonly and prominently used one so it's better aligned with the 2. from above.

![image](/uploads/c19521fd99e7a30a269bb30a056b303e/image.png)

Old description:

<details>
### Resources
FE @timzallmann 

We have a number of differently styles search boxes across the site.

Here are three different examples all on the same page:

![Screen_Recording_2017-01-03_at_02.29_PM](/uploads/bfa158f950e2786c4fed39153c7838de/Screen_Recording_2017-01-03_at_02.29_PM.gif)

Let's standarize all the search boxes. The magnifying glass icon should remain, even when text is entered into the search field. We should remove the clear icon, as it doesn't provide enough value. 

### Proposal 

Update the related search components in `gitlab-ui`

![Screen_Shot_2017-06-19_at_3.37.13_PM](https://gitlab.com/gitlab-org/gitlab-ce/uploads/a759276a6e90da5be69de47ce801c4d3/Screen_Shot_2017-06-19_at_3.37.13_PM.png)

![Screen_Shot_2017-06-19_at_3.46.34_PM](https://gitlab.com/gitlab-org/gitlab-ce/uploads/eb73c41970e0145abf52e68d369ebb2f/Screen_Shot_2017-06-19_at_3.46.34_PM.png)

</details>

Story points: 5.0
GlIcon: Add `data-testid` attribute

Per this thread: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/36240#note_378455487

Occasionally we need to click on an icon in E2E tests. To avoid using CSS classes we should add a `data-testid="{icon_name}-icon"` attribute to `GlIcon`.

Update https://gitlab.com/gitlab-org/gitlab/-/blob/e044f3946a8773cdeeb4bc8b283ef12b906bfc52/qa/qa/ee/page/group/settings/general.rb#L69 once this is completed

Story points: 1.0
Upgrade BootstrapVue to v2.21.2 & Bootstrap to v4.5.x

- BootstrapVue v2.21.2 changelog: https://bootstrap-vue.org/docs/reference/changelog#v2212
- Bootstrap v4.5.3 changelog: https://github.com/twbs/bootstrap/releases/tag/v4.5.3

Let's make sure that GitLab UI uses BootstrapVue's latest version so that we can benefit from all the features of the underlying components library. This will be especially useful as we work towards upgrading to Vue 3, as we'll want to make sure that our libraries are compatible with Vue's new APIs.

Note that as of writing this, BootstapVue is not yet compatible with Vue 3: https://github.com/bootstrap-vue/bootstrap-vue/issues/5196

Since we're currently several versions behind the latest BootstrapVue, we will proceed by upgrading to each minor version individually so that we can better evaluate the impacts and fix what needs to be fixed.

| Version                                                             | MR                                                            |
| ------------------------------------------------------------------- | ------------------------------------------------------------- |
| [v2.14.0](https://bootstrap-vue.org/docs/reference/changelog#v2140) | https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2150 |
| [v2.15.0](https://bootstrap-vue.org/docs/reference/changelog#v2150) | https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2151 |
| [v2.16.0](https://bootstrap-vue.org/docs/reference/changelog#v2160) | https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2169                                                           |
| [v2.17.3](https://bootstrap-vue.org/docs/reference/changelog#v2173) | https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2189 |
| [v2.18.1](https://bootstrap-vue.org/docs/reference/changelog#v2181) | https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2195                                                           |
| [v2.19.0](https://bootstrap-vue.org/docs/reference/changelog#v2190) | https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2403                                                           |
| [v2.20.1](https://bootstrap-vue.org/docs/reference/changelog#v2201) | https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2413                                                           |
| [v2.21.2](https://bootstrap-vue.org/docs/reference/changelog#v2212) | TBC                                                           |

Story points: 3.0
Text area for editing wiki page won't expand taller than 500 pixels

When editing a Gitlab Wiki page in version 13.0.3, the editor area can be dragged no taller than 500 pixels, which is pretty restrictive. The limitation seems to be the `.markdown-area` style, which has a `max-height` property of `500px`. Using Chrome/Inspect, changing this to `1000px` allows a taller editing window.

(You would think that using the "Go full screen" button would be a workaround, but it isn't; the resulting display has larger text and a narrower editing field, which adds unnecessary line wraps. I've filed this separately as issue #880.)

Story points: 1.0
Proposal: Merge GlSkeletonLoading functionality into GlSkeletonLoader and deprecate GlSkeletonLoading

[`GlSkeletonLoading`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-skeleton-loading--default) and [`GlSkeletonLoader`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-skeleton-loader--default) have very similar functionality that could be combined to reduce confusion and make GitLab UI more maintainable.

# Proposal

### Changes to [`GlSkeletonLoader`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-skeleton-loader--default)

- Add `DEFAULT_LINE_WIDTH_PERCENTAGES` as a constant from https://gitlab.com/gitlab-org/gitlab-ui/-/blob/master/src/components/base/skeleton_loading/skeleton_loading.scss#L4
- Add `lines` prop that defaults to `3` and is used to render the default [`slot`](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/master/src/components/base/skeleton_loader/skeleton_loader.vue#L53) value.
- Add `equal-width-lines` prop that defaults to `false`. The default lines will be the same width if this is `true`.
- Add default value to [`slot`](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/master/src/components/base/skeleton_loader/skeleton_loader.vue#L53). This default value would be a SVG rectangle that is rendered based on the `lines` prop, `equal-width-lines` prop and `DEFAULT_LINE_WIDTH_PERCENTAGES` constant.

### Changes to [`GlSkeletonLoading`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-skeleton-loading--default)
- Add deprecated message. "This component is deprecated, please use [`GlSkeletonLoader`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-skeleton-loader--default)."

Story points: 3.0
Chart legend clickability hover-state

### Problem

- From: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/614#note_364422937
- Charts do not easily let users know that they can click on the chart legend to show/hide values

### Solution

- Add additional signifiers to the chart's on-hover interaction

[See prototype](https://www.figma.com/proto/GevTEMYLCPyWn2bo564C2V/Grouped-Stacked-Column?node-id=24%3A16&viewport=1665%2C1559%2C2.4460501670837402&scaling=min-zoom)

Story points: 1.0
Reverse order of popover values in stacked column chart

From: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/614#note_364403374

### Problem

- Values are in reverse order for stacked column chart's popover 

### Solution

- Put them in the same order as how they appear in the chart

![image](/uploads/32ec59acb3139dad1566cbe03395687b/image.png)

Story points: 1.0
Single util class for a 1px solid $border-color'd border

Currently it takes lots of typing to add a border

```html
class="gl-border-b-1 gl-border-b-gray-200 gl-border-b-solid"
```

We should add a `.gl-border-bottom` util class that adds width, style, and color at the same time. They are usually `1px`, `solid`, and `$border-color`ed.

Similar to https://gitlab.com/gitlab-org/gitlab-ui/-/issues/844

Story points: 1.0
GlButton > Icon buttons > Add borderless variant

We need a borderless icon button variant for instances such as actions in the headers:

![Screen_Shot_2020-06-09_at_11.32.07_AM](/uploads/944b8d9ce5fc6e9a58a297eef19148fa/Screen_Shot_2020-06-09_at_11.32.07_AM.png)

Story points: 1.0
Heat map > Spacing of x axis label

In the design, we have 8px space between the x-axis label and the top of the legend. Right now, it looks like there's no space between the container holding the legend and the container holding the x-axis label.

![space](https://gitlab.com/gitlab-org/gitlab-ui/uploads/76dc02653d3596f0dc73d6bea7f75e04/space.png)

Story points: 2.0
Segmented control > Update styling of selected button

The selected button styling for segmented controls needs to be updated to match the new style displayed in Figma

|Current GitLab UI|Figma|
|--|--|
| ![Screen_Shot_2020-05-29_at_1.10.06_PM](/uploads/9f8ec212c16de2a5ef0cd745742d41d1/Screen_Shot_2020-05-29_at_1.10.06_PM.png) |  ![Screen_Shot_2020-05-29_at_1.10.12_PM](/uploads/400a2ae4d19769c952dc5be274096b39/Screen_Shot_2020-05-29_at_1.10.12_PM.png) |

https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit?node-id=3280%3A6829

Story points: 1.0
Allow only safe urls in GlLink

[GlLink Component](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/master/src/components/base/link/link.vue) should accept only safe (secure) URLs and thus preventing `javascript://` XSSes.

* 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

Story points: 5.0
Selected item from Recent searches doesn't populate search input

Passing a `historyItems` array to `GlFilteredSearch` lists will render those items under a dropdown. Selecting an item from the list will trigger a `search`. However, the search input field won't get populated with the selected item. If we decided that this should not be part of the component's implementation, then we should at expose an event that the outside world can listen to.

![recent_searches](/uploads/ebf0e7fd579e8d841517bc5436a2561a/recent_searches.mp4)

Story points: 1.0
Allow colorize token in filters

It seems we have already two use cases of using colored token:
Status: ![image](/uploads/77c2d528edf6f00fe497434968fc13f1/image.png)
and labels, where token inherits color of label

We need to provide a way in ~"component:filter" to create such tokens
/cc @tauriedavis @wortschi

Story points: 2.0
Consider adding lighter-weight table components

A recent MR made it clear how heavy a component `GlTable` (i.e., `BTable`) really is: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/31471#note_346621145

In short, it adds ~120KB to a page bundle.

This is no doubt why `bootstrap-vue` also has `BTableLite` and `BTableSimple` components! We should consider wrapping those as well in GitLab UI.

**Implementation Plan:**

- [x] Add TableLite component to GitLabUI
- [x] Add TableSimple component to GitLabUI
- [x] Update GitLab to the latest GitLabUI package
- [x] create Epic to reconsider using lightweight tables on existing GlTables in Gitlab

Story points: 3.0
Create "NewCard" Component

This issue captures the implementation of the UI-component for https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/287

Related epics:

* [Components of Pajamas Design System](https://gitlab.com/groups/gitlab-org/-/epics/973)
* [Pajamas component: Cards](https://gitlab.com/groups/gitlab-org/-/epics/1118)

Related issues:

* [FY20-Q2 UX OKR: Improve the quality and consistency of our UI](https://gitlab.com/gitlab-com/www-gitlab-com/issues/4355)
* [Pajamas](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/287)

Related discussion / Context:

* [Why `NewCard`?](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/287#note_347484969)

## Implementation Plan

* [ ] Rebase / Update https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1314
* [ ] Finish work (eg.: add documentation)

Story points: 3.0
Make GlBanner follow design system again

!1280 revealed that more components than we are expected do not follow design system. `GlBanner` is one of such components, we need to update CSS to make it compatible once again

Figma specs: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=19944%3A6

Story points: 1.0
Change GlInfiniteScroll to not display totalItems in its legend if it wasn't supplied

This will fix the underlying cause for how [this bug](https://gitlab.com/gitlab-org/gitlab/-/issues/196526) occurred.

Rationale:

* `GlInfiniteScroll`'s `totalItems` prop is optional; unfortunately, the component *always* renders its "legend". Since `totalItems` defaults to `0`, the legend in this case will say `Showing n items of 0`, which is precisely what caused the [bug](https://gitlab.com/gitlab-org/gitlab/-/issues/196526).
  * `GlInfiniteScroll` should change the legend to not display `totalItems` if it wasn't supplied.

Story points: 1.0
Create a component for truncating filepaths

We need a component for secure that truncates filepaths intelligently.

Consider the following string, `ee/app/assets/javascripts/vue_shared/security_reports/store/utils.js`:

1. Truncate end: `ee/app/assets/javascript…`
1. Truncate start: `…y_reports/store/utils.js`
1. Smart truncation: `ee/app/…/store/utils.js`

If we truncate the end of the string, we cut out the most important imformation.
If we truncate the start of the string, we could also cut out important information.
The final solution would be ideal, but tricky to impliment.

I've made a quick CSS POC that should help getting started.
https://codepen.io/samdbeckham/pen/JjYpNMd

cc @gitlab-org/secure/frontend 

Related:
https://gitlab.com/gitlab-org/gitlab/-/issues/196148

Story points: 3.0