gitlab-org / gitlab-discussions

Design Overview

This document outlines the design choices and implementation details of the Design system for GitLab Discussions.

Design System

The Design system for GitLab Discussions aims to provide a consistent and unified user experience across all features and functionalities. It is built upon the principles of:

  • Consistency: All components and elements should adhere to a consistent visual style and interaction patterns.
  • Accessibility: All elements should be accessible to users with disabilities, adhering to WCAG guidelines.
  • Flexibility: The design system should be flexible enough to accommodate different contexts and use cases.
  • Scalability: The design system should be scalable to support the growth of GitLab Discussions.

Design Principles

The following principles guide the design of the GitLab Discussions Design system:

  • User-centered: The design system should prioritize the needs and experiences of users.
  • Data-driven: Design decisions should be informed by data and user research.
  • Iterative: The design system is a living document that will be constantly evolving based on feedback and new insights.

Components

The Design system for GitLab Discussions includes a set of reusable components that can be used to build various UI elements. These components are built with accessibility in mind and follow the established design principles.

Button

The Button component provides a standard way to trigger actions. It offers different variations, including:

  • Primary: Used for the most important actions.
  • Secondary: Used for less important actions.
  • Danger: Used for actions that could have negative consequences.

Modal

The Modal component provides a way to present information or interact with the user in a separate window. It is designed to be non-modal and can be dismissed by clicking outside of the modal or by pressing the Escape key.

Input Field

The Input Field component provides a standard way to collect user input. It supports different input types, including text, email, password, and number.

Dropdown

The Dropdown component provides a way to present a list of options to the user. It is designed to be accessible and can be navigated using the keyboard.

Implementation Details

The GitLab Discussions Design system is implemented using a combination of HTML, CSS, and JavaScript.

Styling

The styling for the Design system is managed using CSS variables, which allow for easy customization and theming.

JavaScript

JavaScript is used to provide interactive elements and enhance the user experience.

Testing

The Design system is thoroughly tested to ensure its quality and consistency. This includes:

  • Unit testing: Individual components are tested to ensure they work as expected.
  • Integration testing: Components are tested in combination to ensure they work together seamlessly.
  • Accessibility testing: The Design system is tested to ensure it meets accessibility standards.

Future Considerations

The Design system for GitLab Discussions is a work in progress and will continue to evolve based on feedback and new insights. Future considerations include:

  • Expanding the component library: Adding new components to address emerging needs.
  • Improving accessibility: Continuously improving the accessibility of existing components.
  • Integrating with other design systems: Ensuring compatibility with other design systems used within GitLab.

This documentation will be updated as the Design system evolves. Please refer to the GitLab Discussions repository for the latest updates.