giseldo/neodataset huggingface dataset:
Pajamas Migration Day: June 10, 2022

As part of our ongoing [component migration push](https://gitlab-org.gitlab.io/frontend/epic-burndown-charts/fy23-q1/), we are hosting another Pajamas Migration Day!

- **When:** June 10, 2022
- **Who:** Everyone! FE, BE, Designers, Product, etc. Everyone is encouraged to contribute.
- **Where:** Your very own home or work space, but also join the `#pajamas_migration_day` slack channel to hang out and chat with fellow contributors!
- **Why:** We want to encourage a day of migrating legacy components / css to use Pajamas!
- **Bonus:** If you contribute three merge requests on Pajamas Migration Day, you can expense a meal for up to $25 USD! Please use the ~"Pajamas Migration Day" label on your MRs to be eligible. In Expensify, use the `Meals Company Provided (Non-Client related)` category.

**Need help?** Ping any member of the [Foundations team](https://about.gitlab.com/company/team/?department=ecosystem-foundations-team) for support or help throughout the day. We are here to assist!

## How to contribute

- ~~[Migrate a few angle icons to chevrons →](https://gitlab.com/groups/gitlab-org/-/epics/8087)~~ All assigned
- Or if you like buttons more than chevrons :see_no_evil:  - you can pick one of the [Haml/Ruby button to Pajamas::ButtonComponent migrations](https://gitlab.com/groups/gitlab-org/-/epics/8153)
- ~~There are also a couple of ["banners" to migrate to `Pajamas::BannerComponent`](https://gitlab.com/groups/gitlab-org/-/epics/8076) ViewComponent.~~ All assigned
- Treat migration day like a scavenger hunt! Review the product and find components/legacy CSS and update it to align with Pajamas!
- Pick up any issue that that is [ready for development](https://gitlab.com/gitlab-org/gitlab/-/issues/?sort=created_date&state=opened&label_name%5B%5D=pajamas%3A%3Aintegrate&label_name%5B%5D=OKR&assignee_id=None&first_page_size=20).

There does not need to be a specific issue open to contribute! Starting with MRs that migrate legacy code is a great way to contribute to the effort.

**Reminder:** Please add the ~"Pajamas Migration Day" label to your MRs, as well as the specific component label that relates to your change (for example: ~"component:alert")

Story points: 1.0
Consistent dast_environment_deploy job failure in main branch

Our pipelines are reliably failing in the `dast_environment_deploy` job with the following error message:

> Error: release dast-default failed, and has been uninstalled due to atomic being set: Ingress.extensions "dast-default-auto-deploy" is invalid: annotations.kubernetes.io/ingress.class: Invalid value: "nginx": can not be set when the class field is also set

Not sure who to ping regarding this issue. It looks like the [Jobs/DAST-Default-Branch-Deploy.gitlab-ci.yml](https://gitlab.com/gitlab-org/gitlab-foss/blob/master/lib/gitlab/ci/templates/Jobs/DAST-Default-Branch-Deploy.gitlab-ci.yml) template was updated recently, perhaps this is related?

https://gitlab.com/gitlab-org/gitlab/-/commit/a91bd39f2c

/cc @hfyngvason @jeldergl

Story points: 1.0
Dropdown > Reconsider component naming

## Purpose

Discuss renaming the current **listbox** component while simplifying the dropdown variants.

In https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/2832 the dropdown component naming was discussed, specifically in regards to the listbox. A `listbox` itself can be part of a disclosure or a `combobox`, but at the moment we're identifying it as its own component that includes the trigger button to reveal it.

It's possible we could reduce the number of documented dropdown variants by treating the listbox as a base component used in composite components.

For example:

- **Disclosure widget**:
  - Button that opens panel of links or a mix of links and actions (buttons).
  - Button that opens a `listbox` containing options (`role="option"`).
- **Combobox**:
  - Text input that opens a `listbox` containing options (`role="option"`).
- **Menu**:
  - Button that opens a panel of JavaScript app-like actions.

### Comments from the original MR

>This definition makes me wonder whether `GlListbox` is correctly named, since it implements the button *and* listbox … Maybe whether or not this matters depends on whether we'd ever want to implement a "bare" listbox that's always visible and not just in a popup.

>We could name it`GlCollapsibleListbox` as it is named in [the specs example](https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html).

Story points: 2.0
Improve disabled & focus states of Checkboxes/Radios

The current disabled state is quite inconsistant with other form elements and has a weak contrast.
In addition we should update the component to also allow other states as focus & disabled in instances.

Feature branch: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/branch/DGZF5tMtAdIHpX0oKK7fLn/Component-library?node-id=425%3A10

| Before | After |
| ------ | ------ |
| ![before](/uploads/79ad6ebf0002219adacc31a97eea86c9/before.png) | ![after](/uploads/710091118ec1dc4e008e4dd617ae980e/after.png) |

Story points: 1.0
List > Deprecate list as a component

In https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1198#note_930969297 it was proposed and validated that **List** should not be a component for these reasons:

>We don't create components of other semantic markup elements, like headings, etc., and I don't think we need to here.

As an outcome of this issue, we'll deprecate the current [List](https://design.gitlab.com/components/list) page in Pajamas and determine if any of the content from that page should be repurposed elsewhere.

We should also determine if the ~"component:list" label should be updated with a deprecation notice or removed. The assumption is removal since there was never a component built in GitLab UI to begin with.

Story points: 2.0
Create structure diagram for the Form component

### Description

Create structure diagram for the Form component.

### Checklist

Make sure the following are completed before closing the issue:

1. [ ] Assign the correct component label to this issue.
1. [ ] Create an MR with the additions or updates needed.
1. [ ] When applicable, [create an issue using the `Figma update` issue template][pajamas-figma-update-template] to update the component in Figma, and mark it as related to this one. Bring the issue to your team planning session for prioritization and scheduling.
1. [ ] When applicable, [create an MR in GitLab UI][gitlab-ui-mr] to update the component. If you do not have capacity or are unable to update the component directly, [create a GitLab UI issue using the `Component` issue template][gitlab-ui-component-template]. Mark the new issue as related to this one. Bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
1. [ ] When introducing a major or breaking change, communicate the changes within the Engineering Week in Review and UX Weekly meeting.
1. [ ] 🎉 Congrats, you made it! You can now close this issue.

<!--
### Resources

* [Component Lifecycle][component-lifecycle]
-->

[gitlab-ui-mr]: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/new
[component-lifecycle]: https://design.gitlab.com/get-started/lifecycle
[pajamas-figma-update-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Figma%20update
[gitlab-ui-component-template]: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/new?issuable_template=Component

Story points: 1.0
Add guidelines for hiding the UI on empty states

@dmoraBerlin and I have been chatting on Slack about the work we're doing on the empty group page: https://gitlab.com/gitlab-org/gitlab/-/issues/267014 This issue has been open for a while and now we've aligned on showing the main two options that make most sense in an empty group and hiding the UI that is usually on a group page. Daniel then warned me about Taurie's comment on another issue that could be related: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/78012#note_923457878

## Proposal

Let's add some guidance to the empty state guidelines, establish that it's ok to hide the UI in some occasions but that it needs to be carefully thought through as there are cases when showing the UI, even if there's seemingly nothing to show still makes sense and offers more value to the user and hence produces a better user experience.

Story points: 2.0
Content Security Policy (CSP) blocks iFrames on design.gitlab.com

## Problem to solve

User on LinkedIn reported

>>>
FYI, I noticed that the CSP blocks some iFrames on multiple pages.
>>>

![image](/uploads/c2b451667dce7e4e233641327aeac38e/image.png)

Created this issue following the contribution guide in https://design.gitlab.com/get-started/contribute 


## Resources

- LinkedIn comment: https://www.linkedin.com/feed/update/urn:li:activity:6925139998321053697?commentUrn=urn%3Ali%3Acomment%3A%28activity%3A6925139998321053697%2C6926915289175490563%29

Story points: 1.0
Figma: add icon to component library

As Figma now supports Emojis in Filenames to be set as Tab Icon, I'd vote
that we set one for the Pajamas Component library.

This can be very helpful to easier identify the tab of the component library!

### Proposal
Add the orange book emoji 📙\
Other Emoji proposals are welcome, too

| Before | After |
| ------ | ------ |
| ![figma_before](/uploads/0d43d503085af6bf018c2b5ce772b8a2/figma_before.png) | ![figma_after](/uploads/4e73d78166ab8caa093207f0e1169d6f/figma_after.png) |

### What's needed
Change Filename from `Component library` to `📙 Component library`, that's it! :rocket:

Story points: 1.0
Alert component: make icon optional

As in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2784 (and https://gitlab.com/gitlab-org/gitlab/-/merge_requests/86006 for the HAML version) we introduced the option to hide the icon, this issue will cover the Figma part to show/hide it.

| with Icon | without Icon |
| ------ | ------ |
| ![image](/uploads/d81d17c2ec54d8dcb19fdcb2fbc316e4/image.png) | ![image](/uploads/02be21754330b881ac77d4698d93b8d7/image.png) |

### Figma
I created a branch with the needed changes to make the icon optional:
https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/branch/jChRnVS9BonCCiQNlXaFPj/Component-library?node-id=425%3A1

Story points: 1.0
Figma pages list improvements

Let's improve the Figma pages list to add some visual hiearchy.

| Before | After |
| ------ | ------ |
| ![pages_before](/uploads/3746d088f6ca6a08477fc6e0915e52d3/pages_before.png) | ![pages_after](/uploads/ca0a0a804186df1ed5700541acc7e3b1/pages_after.png) |

Branch: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/branch/nrjAlk336791WXFtpC88w0/Component-library?node-id=3050%3A0

Story points: 1.0
Dropdown > Consider consistent widths for the dropdown panel and inputs

## Problem

<!-- Add a short description of the documentation addition or update. Remember to say why, not just what. -->

Currently we use inconsistent widths for the dropdown inputs and the dropdown panels. The problems I see:

- Often times the panel width doesn't match the dropdown button or input width
- The dropdown buttons and inputs are sometimes too long for the content

| The dropdown could match the input in width. | The dropdown could match the dropdown button in width. |
| ------ | ------ |
|![image__60_](/uploads/01772f1fddf7728f1151dce5bfaf3bfa/image__60_.png)  | ![image](/uploads/33f92e2a7863589bb685e08ddf111532/image.png) |

| Example in the "new MR" page with matching input and dropdown panel width |
| ------ | 
| ![image](/uploads/d3c584301531d987e7d1b0a02c55481a/image.png) |

## Proposal

I wonder if having set input field widths like `sm` `md` `lg` and `xl` would cover most cases in the product. If we already have fixed sizes for the dropdown button, input, and the dropdown panels, can we make the sizes match so the panel width can be same as the input in most cases?

The width of the dropdown button or input will be selected based on the average expected input string length, and the dropdown width should match the button/input width, except when the input is shorter than the dropdown panel min width. 

It'd make the input much more consistent visually.

### Checklist

Make sure the following are completed before closing the issue:

1. [ ] Assign the correct component label to this issue.
1. [ ] Create an MR with the additions or updates needed.
1. [ ] When applicable, [create an issue using the `Figma update` issue template][pajamas-figma-update-template] to update the component in Figma, and mark it as related to this one. Bring the issue to your team planning session for prioritization and scheduling.
1. [ ] When applicable, [create an MR in GitLab UI][gitlab-ui-mr] to update the component. If you do not have capacity or are unable to update the component directly, [create a GitLab UI issue using the `Component` issue template][gitlab-ui-component-template]. Mark the new issue as related to this one. Bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
1. [ ] When introducing a major or breaking change, communicate the changes within the Engineering Week in Review and UX Weekly meeting.
1. [ ] 🎉 Congrats, you made it! You can now close this issue.

<!--
### Resources

* [Component Lifecycle][component-lifecycle]
-->

[gitlab-ui-mr]: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/new
[component-lifecycle]: https://design.gitlab.com/get-started/lifecycle
[pajamas-figma-update-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Figma%20update
[gitlab-ui-component-template]: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/new?issuable_template=Component

Story points: 2.0
Update homepage banner

## Purpose

Update the Pajamas homepage to incorporate elements from the brand update and to remove elements from the background image that could become out of date (also, this will scale better than the current image that gets squished).

[View Figma working file →](https://www.figma.com/file/5ymbd6NElkEPD027vK570d/%231326-Pajamas-banner-JE?node-id=4%3A20)

| **Before** | **After** |
| ------ | ------ |
| ![image](/uploads/b81ecb7c4c1a519cf8fe10d7509bd614/image.png) | ![image](/uploads/273bcc77b145ae356ea78d41d719ca27/image.png) |

Story points: 1.0
VPAT > Introduce VPAT 2.4 WCAG template

## Purpose

GitLab currently uses the [VPAT 2.4 508 template](https://www.itic.org/dotAsset/7d1524dc-e602-47be-8276-ce32bdd58d6c.doc) that uses WCAG 2.0 Level AA Success Criteria as a reference. This doesn't satisfy the needs of those wanting to know where GitLab stands with WCAG 2.1, which is the latest release (WCAG 2.2 is still in draft). For that, there's a separate [VPAT 2.4 WCAG](https://www.itic.org/dotAsset/7edcd54d-c6a6-4649-8375-4a0f0c68eff2.doc) template that we can introduce. For a list of all VPAT templates, visit https://www.itic.org/policy/accessibility/vpat.

### Process

- Update navigation in Pajamas to create a "GitLab Accessibility Conformance Report" dropdown that reveals two options:
  - VPAT 2.4 508
  - VPAT 2.4 WCAG
- Update the current "GitLab Accessibility Conformance Report" page title to "VPAT 2.4 508"
- Add a new "VPAT 2.4 WCAG" page
  - Copy the WCAG 2.0 2.0 data from the VPAT 2.4 508 page into this page
  - Complete an evaluation that adds conformance findings for the [success criteria added in WCAG 2.1](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/)
- Clarify VPAT and WCAG level on the [Statement of Compliance](https://design.gitlab.com/accessibility/a11y) page

Story points: 3.0
Migrate to embedded stories in components/tooltip.md

Migrate away from legacy examples to embedded stories in `components/tooltip.md`
  
- [ ] Migrated the `vueComponents` property to `stories` in the frontmatter.
- [ ] Migrated `<example-display>` components to `<story-viewer>`.
- [ ] Removed the associated examples from the examples/ directory.

Story points: 1.0
Migrate to embedded stories in components/sorting.md

Migrate away from legacy examples to embedded stories in `components/sorting.md`
  
- [ ] Migrated the `vueComponents` property to `stories` in the frontmatter.
- [ ] Migrated `<example-display>` components to `<story-viewer>`.
- [ ] Removed the associated examples from the examples/ directory.

Story points: 1.0
Migrate to embedded stories in components/infinite-scroll.md

Migrate away from legacy examples to embedded stories in `components/infinite-scroll.md`
  
- [ ] Migrated the `vueComponents` property to `stories` in the frontmatter.
- [ ] Migrated `<example-display>` components to `<story-viewer>`.
- [ ] Removed the associated examples from the examples/ directory.

Story points: 2.0
Migrate to embedded stories in components/spinner.md

Migrate away from legacy examples to embedded stories in `components/spinner.md`
  
- [ ] Migrated the `vueComponents` property to `stories` in the frontmatter.
- [ ] Migrated `<example-display>` components to `<story-viewer>`.
- [ ] Removed the associated examples from the examples/ directory.

Story points: 1.0
Illustration library > Update Figma assets to align with brand

Update the [Illustration library](https://www.figma.com/file/1ui9w228X0S5WxaD0SRdIA/Illustration-library?node-id=0%3A1) in Figma to align with updates in https://gitlab.com/groups/gitlab-com/marketing/corporate_marketing/-/epics/201 and https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1288.

Updates will have to happen to:

- Styles
- Grid
- Components
- Other?

[View working file in Figma →](https://www.figma.com/file/1ui9w228X0S5WxaD0SRdIA/branch/tMPk4cKFcvn2A0GAp0M932/Illustration-library?node-id=0%3A1)

Updates to tanuki avatars and specific illustrations in the library will happen based on the results of https://gitlab.com/groups/gitlab-org/-/epics/7847 and will be handled on an individual basis.

Story points: 8.0
Dropdowns > Determine Pajamas IA to support new variants

## Purpose

In order to support the new "dropdown" components from the work in https://gitlab.com/groups/gitlab-org/-/epics/1059, we should consider how we might update the Pajamas navigation to help make it clear that there's more than one type of what is considered a dropdown. For example, a listbox, menu, or disclosure widget, etc.

## Proposal

Use "Dropdown" as a component category and have individual pages underneath for each type of implementation.

Story points: 1.0
Error reporting to VSCode OutputChannel

### Problem to solve

In my experience today, there was very little information about what was working or not. The side pane simply stayed blank and did not show anything apart from the default text ("there is no XYZ assigned to you" etc.). Which makes it very hard to understand at what point something goes wrong or what might be the cause (connection to GitLab? authentication? extension not configured correctly?).

### Proposal

Creating and logging to an OutputChannel (see https://code.visualstudio.com/api/references/vscode-api#window.createOutputChannel) instead of logging to console would probably make it easier for the user to understand what is happening (and what not).

### Further details

#### In scope

- bubble exceptions to the top-level client code (e.g. `extension.js`) and then log them to the output channel
- make sure that exceptions are not silenced (by empty try/catch blocks)
- **stretch**: separate exceptions from normal program flow - a lot of code in `git_service.js` and `gitlab_service.js` is using exceptions as a part of normal program flow (e.g. command returning empty result & command throwing exception is treated the same)
- making sure that the OutputChannel is shown during automated integratin tests (it will help understanding what's wrong)

#### Out of scope

- 

### Links / references

- https://code.visualstudio.com/api/references/vscode-api#window.createOutputChannel

Story points: 3.0
Insert Snippets in to current file in VS Code

## Problem to Solve

Snippets inside of a user account must be copy/pasted out of GitLab and into a file when they need to be used in another place. This is error prone and time consuming to context switch and find the appropriate Snippet and then paste the contents in to the file you're working on.

## Proposal

Create a command for `Insert Snippet` that talks to the GitLab Snippets API to retrieve a list of Snippets and then choose which file to insert.

![image](https://gitlab.com/gitlab-org/gitlab-vscode-extension/uploads/30999d43156eb226d562c61c1d314611/Kapture_2020-09-11_at_11.53.01.gif)

- If a user selects insert snippet from the command palette, display a list of single file project scoped snippets in the modal
- If a user selects a snippet from the list insert it's content to the editor at the cursor position
<!-- 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