DOCSEARCHbyAlgolia
Submit Docs

Siemens Industrial Experience (IX)

repository·main·Indexed 18 days ago

https://github.com/siemens/ix

An open-source design system providing UI patterns and components tailored for industrial software products. Built on native Web Components via Stencil, it offers official wrappers for React (@siemens/ix-react), Vue (@siemens/ix-vue), and Angular (@siemens/ix-angular), as well as specialized themes for AG Grid (@siemens/ix-aggrid) and Apache ECharts (@siemens/ix-echarts).

Tokens
45.4K
Snippets
141
Records
215
Agent score
59%

What's inside Siemens Industrial Experience

  1. Overview of Siemens Industrial Experience - Web Components

    main
    Siemens Industrial Experience (IX) is a library of web components designed for industrial applications. It is part of a larger mono-repository containing various framework-specific integrations (such as Angular, React, and Vue) and specialized component packages. The core functionality is provided through standard Web Components, making them highly portable across different web environments.

  2. Overview of Siemens Industrial Experience

    main
    Siemens Industrial Experience (IX) is an open-source design system designed to help designers, developers, and writers build consistent and efficient digital experiences for industrial software products. It provides a broad range of UI patterns, components, design tools, and content guidelines.

  3. Use the Siemens Industrial Experience Theme for ECharts

    main
    The @siemens/ix-echarts package provides a specialized theme for Apache ECharts, designed to align with the Siemens Industrial Experience (IX) design system. This allows developers to use ECharts while maintaining visual consistency with other IX components.

  5. Use Siemens Industrial Experience Vue Components

    main
    The @siemens/ix-vue package provides Vue-specific component wrappers for the Siemens Industrial Experience (IX) library. This allows you to use IX components within Vue applications while maintaining the design system's standards. This package is part of the larger Siemens IX mono-repository.

  6. Use the Siemens Industrial Experience theme for AG Grid

    main
    The @siemens/ix-aggrid package provides a specialized theme for AG Grid, designed to align with the Siemens Industrial Experience (IX) design system. This allows you to apply IX styling to your AG Grid instances within your applications.

  7. Understanding the Stencil Core Patch and CSS Module conflicts

    main

    The @siemens/ix repository includes a patch for @stencil/core@4.38.3 to resolve type conflicts between Stencil's ambient module declarations and modern build tools like Vite.

    The Problem

    Stencil declares a broad declare module '*.css' which returns a string type. Because TypeScript uses wildcard matching, this declaration often intercepts *.module.css files before they can be correctly typed as CSS Modules. This causes issues in environments like Vite, which expects CSS Modules to have the type { readonly [key: string]: string } rather than a simple string.

    The Solution

    The patch comments out the declare module '*.css' statement in internal/stencil-ext-modules.d.ts within the Stencil core package. This allows:

    • CSS Modules (*.module.css) to use their correct types required by Vite.
    • Other file imports (like *.svg or *.txt) to continue functioning.
    • Compatibility with Stencil-based components without breaking changes.

    Alternatives if you avoid the patch

    If you choose not to use this patch, you must either:

    1. Avoid using CSS Modules in any package that depends on @siemens/ix-react.
    2. Modify the build configuration to publish @siemens/ix without exporting Stencil's internal types.

  8. How the Siemens IX architecture works

    main

    The Siemens Industrial Experience (IX) follows a layered architecture where packages/core (built with Stencil) is the single source of truth. All framework-specific packages (React, Angular, Vue) are auto-generated façades around these core Web Components.

    Key Layers:

    • Core Components: Stencil-based UI primitives that emit compiled Web Components and type metadata.
    • Framework Wrappers: Auto-generated bindings for React, Angular, and Vue. Warning: Never manually edit these generated proxies.
    • Theming Packages: Integration helpers like @siemens/ix-aggrid and @siemens/ix-echarts that align third-party libraries with IX design tokens.
    • Documentation: A pipeline that converts JSDoc and examples from test apps into documentation assets.

  9. Theming system overview

    main

    The IX theming system is based on SCSS and CSS custom properties (variables).

    • Source: Theme SCSS is located in packages/core/scss/theme/.
    • Tokens: Design tokens are exposed as CSS variables supporting both light and dark modes.
    • Usage: Consumers switch themes by applying a specific theme class to the root element.
    • Third-party integration: Packages like @siemens/ix-aggrid and @siemens/ix-echarts remap these core tokens to ensure external widgets visually align with the IX design system.

  10. How Siemens Industrial Experience components work

    main

    The IX component library is built on native Web Components, ensuring high flexibility and interoperability. To allow for seamless integration into modern development workflows, the system provides official wrappers and support for major frontend frameworks, including:

    • React (@siemens/ix-react)
    • Vue (@siemens/ix-vue)
    • Angular (@siemens/ix-angular)
    • Stencil (Core Web Components)

  12. Migrate ix-group-dropdown-item to standard ix-dropdown-item

    main

    The ix-group-dropdown-item component has been removed. To create grouped dropdown items, use a standard ix-dropdown with ix-group and ix-group-item components.

    <ix-group header="Header text" sub-header="Subheader text">
  <ix-dropdown slot="dropdown">
    <ix-dropdown-item label="Item 1"></ix-dropdown-item>
    <ix-dropdown-item label="Item 2"></ix-dropdown-item>
  </ix-dropdown>
  <ix-group-item text="Example text 1"></ix-group-item>
  <ix-group-item text="Example text 2"></ix-group-item>
  <ix-group-item text="Example text 3"></ix-group-item>
</ix-group>