Skip to content

Latest commit

 

History

History
58 lines (39 loc) · 2.5 KB

adding_components.md

File metadata and controls

58 lines (39 loc) · 2.5 KB

Adding a new component to GitLab UI

The following provides guidance for engineers adding new components to GitLab UI.

General guidelines

You should use yarn generate:component to begin your component implementation. This scaffolding tool generates the file structure required by GitLab UI for every component. It also:

  • Exposes the component in GitLab UI's main entry point file.
  • Registers the component’s documentation.
  • Imports the component’s stylesheet in GitLab UI’s default CSS bundle.

You can choose between two templates: Create Component or Wrap BootstrapVue Component.

Merge Request guidelines

Create a Merge Request in GitLab UI with your new component code. The Merge Request should follow these conventions:

  • Name your MR feat([ComponentName]): Implement [ComponentName] component. This creates a conventional commit used by the npm release CI job to create a new version of the GitLab UI package.
  • Check the Squash commits when merge request is accepted option in the Merge Request edit page.

Run the manual CI job (update_screenshots) to generate the baseline snapshots used by the visual tests. You can find it in last stage of GitLab UI CI pipeline. This CI job commits the baseline snapshot images to the merge request branch.

Update screenshots CI job location

How to keep merge requests small

New components are usually introduced in a single, large MR.

You can make the review process easier by creating a primary branch and MR along with subsequent smaller branches and MRs. The smaller MRs will target the primary branch allowing for review to take place against each smaller MR individually.

Working on a Pajamas-documented component

If you are adding or updating a component documented in the Pajamas design system, you should comply with the component lifecycle workflow.

Wrapping a BootstrapVue component

Use yarn generate:component to quickly generate a BootstrapVue component wrapper in GitLab UI using the Wrap BootstrapVue Component template. After using the template, follow the same instructions described in the general guidelines.

Testing your new component in GitLab

This section has moved to Testing GitlLab UI changes in GitLab.