DOCSEARCHbyAlgolia
Submit Docs

Helios Design System

repository·main·Indexed 19 days ago

https://github.com/hashicorp/design-system

A collection of tools, components, and tokens for visual and functional consistency across HashiCorp products. It includes Ember.js components, a multi-format icon library, design tokens, and a set of codemods (@hashicorp/design-system-codemods) to automate migrations between v3 and v4 component APIs in Handlebars templates.

Tokens
216.4K
Snippets
415
Records
1.4K
Agent score
66%

What's inside Helios Design System

  1. Overview of the Helios Design System

    main
    The Helios Design System provides the building blocks to design and implement consistent, accessible, and delightful product experiences across HashiCorp. It is composed of several specialized packages including Ember.js components, icon libraries, and design tokens.

  3. Overview of the Code Editor component

    main

    The Code Editor is a component designed for editing formatted code. It provides several built-in developer experience features including:

    • Syntax Highlighting: Automatic colorization based on the code language.
    • Auto-closing: Automatically closes brackets and quotes as you type.
    • Custom Yielded Section: Supports a custom section for providing additional functions or UI elements related to the editor context.

  5. What is Helios (HDS) and when to use it

    main

    Helios (also known as HDS) is the HashiCorp design system. It provides a common design language across HashiCorp product lines.

    Usage Guidelines

    • Ember.js Teams: Helios is the recommended and primary design system for all HashiCorp product teams using Ember.js.
    • Other Frameworks (e.g., React): Support is provided on a case-by-case basis via design assets, tokens, and best practice guidance.
    • Customer-facing Products: Helios is specifically designed for building consumer-facing product UIs and serves as the single source of truth for foundations, components, and patterns.
    • Internal Products/Tools: Helios is not a general-purpose UI library. If you are building internal tools, you must contact the Design Systems Team before starting to ensure it is a good fit.
    • External Users: Helios is intended for HashiCorp employees. Non-employees may use it as a reference, but it is unsupported and subject to breaking changes without notice.

  6. Use the Select component for option selection

    main

    The Select component is a form element used to provide users with a way to choose one or more options from a predefined set.

    Note on Customization: Because the Select component is implemented as a native HTML <select> element, it relies on browser defaults for rendering. Consequently, you cannot customize the internal appearance or behavior of individual options within this component. For more details on native select behavior, refer to the MDN documentation.

  7. Accessibility conformance for Advanced Table

    main

    When used as recommended, the Advanced Table is designed to be WCAG conformant. It supports keyboard navigation for cell focus, interactive elements within cells, and specific modes for data navigation versus element interaction.

    Key Accessibility Requirements:

    • Interactive Elements: Must be contained within a cell (e.g., role="gridcell").
    • Row Selection: If using multi-select, ensure the total number of selected rows and the total row count are communicated to the user outside of the table component.
    • WCAG Compliance: The component is designed to meet several WCAG Success Criteria, including 1.3.1, 1.3.2, 1.4.1, 1.4.3, 1.4.4, 1.4.10, 1.4.11, 1.4.12, 1.4.13, 2.1.1, 2.1.2, 2.1.4, 2.4.3, 2.4.7, and 4.1.2.

  8. Use the Page Header component

    main

    The Page Header is a presentational component used to display high-level page information. It is designed to house the following elements:

    • Main Title: The primary heading of the page.
    • Breadcrumbs: Navigation links showing the user's location in the hierarchy.
    • Page Metadata: Secondary information related to the page context.
    • Page-level Actions: Primary buttons or controls relevant to the entire page.