Note: This article was generated in part by ChatGPT. The content was checked by a human and adjusted if necessary.

What is a component library?​

A component library is a collection of reusable software components that can be used to develop applications. These components are typically specific to a particular technology or framework and provide pre-built functionality, modules, or building blocks that can be used in various applications.

A component library typically contains a variety of predefined components, such as user interface elements (e.g. buttons, input fields, drop-down menus), charts, tables, forms and other functions required in applications. These components are usually well-documented and follow a specific design or programming paradigm to allow for consistent development of applications.

Using a component library can speed up the development of applications because developers don't have to create new components from scratch every time. Instead, they can take the pre-built components, customize them, and integrate them into their applications. This saves time and effort and allows developers to focus on the specific needs of their application instead of dealing with the implementation of fundamental components.

Component libraries are widely used in web and software development, especially in frameworks like React, Angular or Vue.js to facilitate the development of user-friendly and consistent user interfaces. They provide a way to build modular and scalable applications by allowing code reuse and separation of duties.

Was ist ein Designsystem?​

A design system is a collection of guidelines, rules, principles, components, and resources designed to ensure consistent and efficient design for a brand, product line, or application. It provides a unified framework and design language to harmonize the look and feel, interactions and user experience across different platforms and channels.

A design system typically includes various elements, such as:

1. Design Guidelines: A detailed documentation that describes the design principles, guidelines and standards. Fonts, color palettes, layouts, icons, animations and other visual elements are defined here.

2. Component Library: A collection of reusable design components that can be used in application development. Examples of these components include buttons, form elements, cards, navigation elements, and other UI elements.

3. UI Patterns: Predefined solutions to recurring design problems or interaction patterns that may arise in application development. They provide best practices for user interaction and improve user experience consistency.

4. Style Guide: A document or resource that describes in detail the visual elements of the design, such as colors, fonts, spacing, shading, and other design attributes.

5. Resources and Assets: This includes graphics, icons, images and other media elements used in the design process.

The purpose of a design system is to improve efficiency and consistency in the design process, strengthen brand identity, encourage collaboration between designers and developers, and ensure the scalability and maintainability of designs over time. By providing clear guidelines and reusable components, a theme system makes it easier to implement and update the theme, and helps create a seamless and engaging user experience.

What is the difference between a component library and a design system​

A component library and a design system are two related concepts, but they have different emphases. Here are the main differences between the two:

1. Focus: A component library mainly focuses on providing reusable software components that can be used in the development of applications. These components are designed to provide specific functionality or UI elements and can be applied independently of a specific theme. A design system, on the other hand, focuses on defining the design guidelines, principles, and elements that shape the look and feel and user experience of a brand or application.

2. Scope: A component library is typically part of a design system. It contains a collection of reusable components that conform to the design system's design guidelines and principles. However, the design system also includes other elements such as design guidelines, UI patterns, style guides, and resources that go beyond the component library.

3. Audience: A component library is primarily aimed at developers and provides them with pre-built components to develop applications faster. A design system, on the other hand, caters to both designers and developers because it provides a common design language and guidelines for the entire design and development team.

4. Purpose: The purpose of a component library is to accelerate application development and encourage code reusability. A theme system, on the other hand, serves to ensure a consistent visual identity and user experience across different platforms and channels.

Overall, a component library is a convenient part of a design system, while the design system is a broader concept that goes beyond just providing components and provides a common design language, guidelines, and resources for a consistent design and a pleasing user experience.

What are the 5 most important characteristics of a component library?​

The five most important characteristics of a component library are:

1. Reusability: A component library is characterized by reusable software components. These components can be used in various applications to save time and effort in development. Reusability also ensures consistency in design and functionality.

2. Modularity: A component library consists of individual, independent modules that can be used individually or in combination. Each component performs a specific function or provides a specific UI element. The modularity allows developers to select only the components they need and customize or expand them as needed.

3. Documentation: A good component library comes with comprehensive documentation that explains how the components can be used. The documentation includes how-to guides, examples, code snippets, API references, and best practices to help developers get started and use the components. Clear and comprehensive documentation is critical to maximize the value and effectiveness of the component library.

4. Consistency: A component library aims to ensure consistency in design and user experience. The components should follow consistent design guidelines and principles to allow for a coherent appearance and smooth user interaction. Using components from the library minimizes the risk of inconsistent or fragmented design.

5. Updatable and Maintainable: A good component library will be updated regularly to introduce new features, bug fixes, and improvements. This requires solid maintenance and an active community or development team that supports and further develops the component library. The ability to easily update and maintain the component library is critical to ensure it can keep up with changing requirements and technology.

These characteristics help make a component library effective and useful by providing developers with a solid foundation for developing applications while promoting consistency and reusability.

What are the 5 most important characteristics of a design system?​

The five most important characteristics of a design system are:

1. Design Guidelines: A design system contains detailed design guidelines that establish the design principles, standards, and best practices for a brand or application. These guidelines define the visual style, color palette, typography, use of icons, spacing, and other design elements. The design guidelines serve as a reference and guide for the entire design team to ensure a consistent and unified visual identity.

2. Component Library: A design system includes an extensive component library containing reusable design components. These components, like buttons, form elements, cards, navigation elements, etc. are developed in accordance with the design guidelines and can be used by designers and developers to ensure a consistent design and a smooth user experience.

3. UI Patterns: A design system provides ready-made solutions for recurring design problems and interaction patterns that can occur in an application. These UI patterns, such as dropdown menus, search boxes, tables, modals, etc., are developed to provide proven design and interaction patterns that improve user experience and promote consistency.

4. Style Guide: A style guide is an important element of a design system. It contains detailed information about the design's visual elements, such as colors, fonts, spacing, shading, proportions, and other design attributes. The style guide serves as a reference for designers and developers to ensure that the design is implemented consistently and a consistent visual aesthetic is maintained.

5. Governance and Documentation: A design system also includes governance practices to ensure that the design system is effectively managed and maintained. This includes defining roles and responsibilities within the design team, as well as documenting the design decisions, processes, and versioning of the design system. Clear documentation is essential to support the design process, encourage collaboration and ensure the design system is continuously improved and kept up to date.

These characteristics enable a design system to ensure consistent and efficient design across different applications, platforms and channels. They encourage collaboration between designers and developers and make it easier to scale and maintain the design over time.

Sollte man eine Komponentenbibliothek mit einem Designsystem vereinen oder getrennt verwalten?​

The decision to unify or maintain a component library with a design system depends on several factors, including the size of the project, the needs of the design team, and the organizational structure. There are pros and cons to both approaches:

1. Union of component library and design system:

   • Advantages:

     • Consistency: A tight integration of the component library and the design system facilitates compliance with design guidelines and promotes a consistent user experience.
     • Efficiency: Designers and developers have access to the same resources and components, which makes collaboration easier and speeds up development.
     • Scalability: The design system can be easily extended with new components, and changes in the design system can be automatically applied to the component library.

   • Disadvantages:

     • Dependencies: A tight link between the component library and the design system can result in changes in one area having unexpected effects on other areas.
     • Complexity: Managing a combined system may require additional effort to update and maintain.

2. Separate management of component library and design system:

   • Advantages:

     • Flexibility: A separate design system allows greater flexibility in customizing and developing applications, since the components can be used independently of the design system.
     • Independence: Changes in the design system have no direct impact on the component library, and vice versa.
     • Modularity: Separate management can encourage modularity by allowing different component libraries to be combined into a single design system.

   • Disadvantages:

     • Consistency challenges: Separate management requires careful coordination to ensure components adhere to design guidelines and provide a consistent user experience.
     • Repeated effort: It may be necessary to duplicate certain design elements and components in different component libraries.

Ultimately, the decision should be made based on the specific needs and challenges of the project. Tight integration of the component library and design system can provide benefits in terms of consistency and efficiency, but may require careful management. Separate management offers more flexibility, but requires good coordination to ensure consistency.

Why decouple a design system from a component library?​

Decoupling a design system from a component library provides more flexibility and scalability. Here are some reasons:

1. Independence: A design system should be decoupled from specific technical implementations in order to have the possibility to use it on different platforms and technologies.

2. Adaptability: By separating the design system and component library, design updates can be made independently of the technical implementations. This allows for faster customization and evolution of the design.

3. Reusability: A decoupled design system can be reused in different projects and products, independent of the underlying component libraries. This ensures consistency across different applications.

4. Team Collaboration: When design and development can work independently, collaboration between teams is facilitated. Design can focus on the design of the system, while development implements the component library efficiently.

5. Future-proof: Technologies and frameworks can change over time. By decoupling the design system from the component library, the design system remains more stable and less susceptible to technical changes.

By decoupling the design system from the component library, one can take full advantage of both approaches and build a flexible, scalable, and adaptable design system.

More articles on the topic​

The following articles are also worth reading for a different perspective on the topic of component libraries vs. design systems:

• https://www.ramotion.com/blog/design-system-vs-component-library/#section-component-library-definition (EN)
• https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/ (EN)

WIP: Dieser Artikel wird immer wieder entwicklungsbegleitend aktualisiert.

Die wichtigsten Änderungen sind:

• Verbesserungen
• Refactorings
  • Vereinheitlichung von Properties der Komponenten (siehe -Konzept)
    • _alignment vom Popover in _align umbenannt
    • Typ Alignment wurde intern in Align umbenannt
    • _label wird in Version 2 folgende Properties ersetzen:
      • _aria-label von Breadcrumb, Button, ButtonLink, Icon, Link, LinkButton, Modal, Nav, SkipNav, SplitButton, Symbol und Tabs
      • _caption von Quote und Table
      • _heading von Accordion, Alert, Card und Toast
      • _headline von Card
      • _quote von Quote (?)
      • _summary von Details
      • _symbol von Symbol
      • _title von Abbr
    • Properties, die zukünftig nicht mehr benötigt werden
      • _has-footer von Card
      • _height_ von Select
      • _icon-align ...
      • _part ...
      • _show-dropdown ...
• Expert-Slot
  • Alle Inputs-, Select- und Textarea-Komponenten haben nun einen Expert-Slot und das _label ist Pflicht. Wenn das _label="" leer bleibt, dann wird das Label über den Slot, wie gewohnt angezeigt.
  • Code-Replacement - am besten einzeln ersetzen:
    • (<Kol(Button|Button|Link|Heading|Input[^>]+|Link|LinkButton|Select|Textarea))>(\n?\t*)([^\n]+)[^<]+<\/Kol(Button|Button|Link|Heading|Input[^>]+|Link|LinkButton|Select|Textarea)> -> $1 _label="$5" />
• Theming
• Dokumentation
• Adapter
  • Vaadin: Optimierungen am Code-Generator
  • JSF: Verbesserung für statische/klassische Formulare (experimental)

Basically, each component can be freely styled within its HTML structure.

With the help of our designer or the SCSS script, existing themes can be adapted or your own themes can be created.

• Designer
• SCSS-Script

Button and custom class​

The button/switch has 5 types derived from the design language of the design systems:

• primary: switch for main action (e.g. save)
• secondary: switch for secondary action (e.g. cancel)
• normal/tertiary: switch for tertiary action (e.g. back)
• danger: switch for "dangerous" actions (e.g. delete)
• ghost: switch for "inconspicuous" actions (e.g. help)

In addition to these basic types, other types can be added using a custom class. To do this, however, all custom classes must be stored in the CSS of the theme.

Store custom class in the theme​

1. Open Theme Designer
2. Select theme
3. Select Button component
4. Switch to component styling
5. Enter and save CSS for the custom button (look at primary)
6. Theme in project übernehmen

Example of custom class loading:

.loading :is(a, button) > kol-span-wc kol-icon {
 animation: spin 2.5s infinite linear;
 display: block;
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
@media (prefers-reduced-motion) {
 .loading :is(a, button) > kol-span-wc kol-icon {
  animation-duration: 5s;
 }
}
@keyframes spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}

Use custom class​

To switch to custom mode, the property _variant must be set to custom. Thereafter any predefined custom classes can be passed via the property _custom-class.

<kol-button _custom-class="loading" _label="Save" variant="custom"></kol-button>

Style the icon in the button from the outside​

It is possible to transfer an icon style to the button. To do this, the desired style must be passed to the property _icon.

<KolButton
 _icons={{
  left: {
   icon: 'codicon codicon-home',
   style: {
    color: 'red',
    'font-size': '300%',
   },
  },
 }}
 _label="Switch with big red icon"
></KolButton>