@gitlab/ui

What is @gitlab/ui?

@gitlab/ui is a comprehensive UI component library designed to be used with GitLab projects. It provides a wide range of reusable and customizable components that adhere to GitLab's design guidelines, making it easier to build consistent and visually appealing user interfaces.

What are @gitlab/ui's main functionalities?

Buttons

The @gitlab/ui package provides various button components with different styles and variants. This example demonstrates how to use a primary button.

<template>
  <gl-button variant="primary">Primary Button</gl-button>
</template>

<script>
import { GlButton } from '@gitlab/ui';

export default {
  components: {
    GlButton
  }
};
</script>

Alerts

The package includes alert components for displaying different types of messages. This example shows a dismissible success alert.

<template>
  <gl-alert variant="success" dismissible>
    This is a success alert!
  </gl-alert>
</template>

<script>
import { GlAlert } from '@gitlab/ui';

export default {
  components: {
    GlAlert
  }
};
</script>

Modals

The @gitlab/ui package provides modal components for creating dialog boxes. This example demonstrates a modal with a title, body, and footer.

<template>
  <gl-modal :visible="isVisible" @close="isVisible = false">
    <template #title>
      Modal Title
    </template>
    <template #body>
      This is the modal body.
    </template>
    <template #footer>
      <gl-button @click="isVisible = false">Close</gl-button>
    </template>
  </gl-modal>
</template>

<script>
import { GlModal, GlButton } from '@gitlab/ui';

export default {
  components: {
    GlModal,
    GlButton
  },
  data() {
    return {
      isVisible: false
    };
  }
};
</script>

Other packages similar to @gitlab/ui

element-ui

Element UI is a popular Vue 2.0-based component library that provides a wide range of customizable UI components. It is similar to @gitlab/ui in terms of offering reusable components, but it is more general-purpose and not specifically tailored to GitLab's design guidelines.

vuetify

Vuetify is a Vue.js framework that follows the Material Design specification. It offers a comprehensive suite of UI components and is known for its rich feature set and extensive customization options. Unlike @gitlab/ui, Vuetify is based on Material Design principles.

bootstrap-vue

BootstrapVue provides Vue.js components and directives based on Bootstrap 4. It allows developers to use Bootstrap's responsive grid system and components within Vue applications. While @gitlab/ui is tailored for GitLab's design, BootstrapVue leverages the popular Bootstrap framework.

README

GitLab UI

GitLab UI is a UI component library that implements Pajamas, our design system. GitLab UI is written in Vue.js and its objectives are to:

• Create reusable UI components to accelerate frontend development.
• Create UI consistency for all components within GitLab.

See https://gitlab-org.gitlab.io/gitlab-ui/ for documentation.

Usage

1. To use GitLab UI in your project, add it as a dependency:

   yarn add @gitlab/ui
   

   Note: Make sure to also install GitLab UI's peer dependencies. Refer to the package.json for the list of peer dependencies and their expected versions.

2. In your main entrypoint before importing or using any component:

   import setConfigs from '@gitlab/ui/dist/config'
   
   setConfigs()
   

   This will set the global configs used by GitLab UI.

3. Include the required stylesheets in your app. Refer to the CSS docs for installation options.

4. Import the components as desired:

   import { GlButton } from '@gitlab/ui';
   

   Note: GitLab UI is compatible with tree-shaking, you may enable this in your project to reduce bundle sizes.

Quick start - development

Note: GitLab UI isn't designed to be built on Windows natively. Either WSL or GitPod can be used to set up a UNIX-like environment in which to build it.

Make sure you have Node 16.x (LTS) and Yarn 1.22 or newer.

# Clone the project
git clone [e-mail]:gitlab-org/gitlab-ui.git

# Navigate to the root of the project
cd gitlab-ui

# Install all the dependencies of the project
yarn # or yarn install

# Build and launch storybook to see the components in the browser
yarn storybook

Go to http://localhost:9001/

Testing

Unit tests

Components’ unit tests live in the tests/components. The tests are organized following the same directory structure used to organize components.

• yarn test:unit runs all unit tests.

• yarn test:unit:watch runs all unit tests in watch mode.

• yarn test:unit:debug runs all unit tests and allow to attach a debugger to the test runner process.

• yarn jest [name_pattern] runs spec files that match the specified name pattern.

Examples

• yarn jest datepicker will match all spec files with a name that contains the word datepicker.

• yarn jest datepicker -t "when draw event is emitted" goes a step further and only runs the test with a description that matches the argument passed to the t flag.

SCSS tests

Even though we try to avoid writing complex SASS code to maintain CSS complexity low, we’ve implemented some functions that benefit from automated testing. SASS tests live in the tests/scss directory. GitLab UI uses sass-true to implement these tests, and jest run them.

yarn jest run_scss_tests runs all SCSS tests.

Visual regression tests

GitLab UI uses visual snapshot tests to prevent introducing regressions with CSS and layout changes on components. Read more on this in the visual testing documentation.

GitLab visual regression tests

GitLab UI components are a reference implementation of the Pajamas Design System components. These components should conform with the design system specs, and they should look correct in the pajamas website and the GitLab product. Please see Debugging GitLab UI issues with GitLab product CSS for information on how to debug issues with GitLab product CSS in GitLab UI.

End to end tests

Components’ end to end tests live in the cypress/e2e folder. See our end to end testing documentation for more details.

yarn run cypress open runs Cypress locally to run end to end tests.

Design tokens

GitLab UI uses design tokens to maintain a single source of truth that, through automation, can be formatted for different uses. Read more on this in the design tokens documentation.

Releases

See Updating GitLab UI Packages for information on how the @gitlab/ui package is kept up to date in various projects.

Contributing guide

Please refer to CONTRIBUTING.md for details on how to add new components and contribute in general to GitLab UI.

FAQs

Any question? Have a look at our FAQ.md, you might find the answer there.