siemens / ix

Siemens Industrial Experience is a design system for designers and developers, to consistently create the perfect digital experience for industrial software products.

Siemens Industrial Experience

Siemens Industrial Experience gives you access to a broad range of UI patterns, UI components, design tools, resources and content guidelines to accelerate collaboration between designers, developers and writers, helping to build efficient and consistent products.
Explore the documentation »

Quickstart · Community · Report Issue · Request Feature

About The Project

Siemens Industrial Experience is an open-source design system for designers and developers, to consistently create the perfect digital experience for industrial software products.

📦 Flexible components

Build based on native Web Components. Adopt major frameworks for seamless integration into your project.

🚀 Getting Started

You can find a getting started guide here

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Checkout our contribution guidelines

👨‍💻 Maintainers

• Daniel Leroux [email protected]
• Lukas Maurer [email protected]

📝 License

Copyright © 2022 Siemens AG.

This project is MIT licensed.

(back to top)

ix's Issues

settings page title does not update (e.g. on language changes)

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

When changing the language in the cui-settings-page the title does not update automatically

• cui version: 6.1.0
• npm version: 6.14.17
  

Expected behavior

The title of the cui-settings-page is updated according to changes in the input

Category filter without dropdown

I'm submitting a...

[ ] Bug report
[x] Feature request
[ ] Documentation issue or request

Current behavior

If there is an empty list for the dropdown it will display the string "filter by text".

Expected behavior

In certain use cases it might be useful to have the control not display any dropdown at all. This will only make sense for situtations where there are no categories involved.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

map-navigation overlay should be attachted via slot attribute

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Current implementation of map-navigation overlay leads into a lifecycle issue, because the overlay is attached via appendChild. This leads to multiple problems like:

• lifecycle handling in target frameworks (react, angular)
• It is not possible to get a direct HTMLElement reference out of every framework without implementing custom wrapper components.

Similar problems like: #74

Expected behavior

Implement map-navigation-overlay via slot attribute.

Example implementation can look like:

export const MapNavigation: React.FC = () => {
  const [overlay, setOverlay] = useState(false);

  function openOverlay() {
    setOverlay(true);
  }

  function closeOverlay() {
    setOverlay(false);
  }

  return (
    <IxMapNavigation>
      <IxMenu>
        <IxMenuItem>Item 1</IxMenuItem>
        <IxMenuItem>Item 2</IxMenuItem>
        <IxMenuItem>Item 3</IxMenuItem>
      </IxMenu>
      <div slot="sidebar-content">
        <IxButton
          onClick={() => {
            closeOverlay();
          }}
        >
          Close all
        </IxButton>
      </div>
      <div>
        <IxButton
          onClick={() => {
            openOverlay();
          }}
        >
          Open
        </IxButton>
        {overlay ? (
          <IxMapNavigationOverlay
            slot="overlay"
            onCloseClick={() => closeOverlay()}
          >
            Test 1
          </IxMapNavigationOverlay>
        ) : null}
      </div>
    </IxMapNavigation>
  );
};

Create Figma component: Radiobutton

• Component created
• Name reviewed
• Colors variables reviewed
• States and properties reviewed

Create Figma component: Buttons

Button types: Text Button, Icon button, Oval Icon Button, Dropdown Button

• Components created
• Name reviewed
• Colors variables reviewed
• States and properties reviewed

Create Figma component: Chip

• Components created
• Name reviewed
• Colors variables reviewed
• States and properties reviewed

index page of documentation is not displayed correctly on iOS devices

I'm submitting a...

[ ] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

The "ix" animation is not played if you visit the ix.siemens.com page with an iOS device.

docs: add theme name change to migration guide

I'm submitting a...

[ ] Bug report
[ ] Feature request
[x] Documentation issue or request

Current behavior

Missing breaking changes in migration guide regarding theme renaming.

theme-dark -> theme-classic-dark (default)
theme-light -> theme-classic-light

update angular-ouput-targets

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Angular output does not create correct event typings for some IDEs e.g. IntelliJ

This should be fixed with following issue ionic-team/stencil-ds-output-targets#242

vue support

I'm submitting a...

[ ] Bug report
[x] Feature request
[ ] Documentation issue or request

Current behavior

Add a vue wrapper library. (https://github.com/siemens/ix/discussions/104)

• PR make it easier to handle ix in vue3 #139

add additional build validation

I'm submitting a enhancement

Current behavior

Check if there are changed files after the build action is finished, to verify that all necessary code generation steps are fulfilled

Create Figma component: Pill (Counter, Status)

• Components (Counter and Status) created
• Name reviewed
• Colors variables reviewed
• States and properties reviewed

create separate docusaurus theme based on ix documentation

Idea

Create docusaurus theme based on current ix documentation

Breadcrumb dropdown does not have max height

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

The dropdown of the breadcrumb will grow past the screen borders if there are too many items inside.

Expected behavior

Both max height and overflow detection relative to the browser viewport should prevent items that are not accesible.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Create Figma component: Button Group

• Component created
• Name reviewed
• Colors variables reviewed
• States and properties reviewed
• Examples added

Create Figma component: Menu/Split Button

• Components created
• Name reviewed
• Colors variables reviewed
• States and properties reviewed

Create Figma component: Input

• Component created
• Name reviewed
• Colors variables reviewed
• States and properties reviewed

Create Figma component: Upload Control

• Component created
• Name reviewed
• Colors variables reviewed
• States and properties reviewed

wrong shadow in datepicker and timepicker

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Datepicker must have a dark shadow

Create Figma component: Breadcrumb navigation

• Component created
• Name reviewed
• Colors variables reviewed
• States and properties reviewed
• Examples added

documentation example versioning

• copy examples into version prefix folder
• replace library imports (<head>-section) with CDN imports from jsDeliver https://yarnpkg.com/package/@siemens/ix

cleanup deploy pages workflow

I'm submitting a...

[x] Enhancement
[ ] Bug report
[ ] Feature request
[ ] Documentation issue or request

To Do

Remove deploy-pages.yml after #56 is merged

tree item does not show selection and hover effects

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Tree item does not show selection and hover effects

Stepper component not migrated

I'm submitting a...

[ ] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Datetimepicker layout between date and time picker is not aligned

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Lower right corner of DateTimePicker layout not correct.

Add date selection properties to date/time-picker

I'm submitting a...

[ ] Bug report
[x] Feature request
[ ] Documentation issue or request

It is not possible to set a custom date/time for all three pickers.

Expected behavior

Custom date/time can be set for all three components.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

mouse states are missing in event-list component

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Mouse states are missing in event-list component

Create Figma component: Message Bar

• Components created
• Name reviewed
• Colors variables reviewed
• States and properties reviewed

create a tooltip component

I'm submitting a...

[ ] Bug report
[x] Feature request
[ ] Documentation issue or request

Current behavior

Implementation of custom ix tooltip is missing in the ix library

Map navigation not migrated

Please update map navigation as it is missed out from the documentation

Adding multiple tags and search to documentation

Discussed in https://github.com/siemens/ix/discussions/61

^{Originally posted by supreethaPavank October 17, 2022}
Certain UI components will have several names ex: A card is also called a Tile, A panel etc. A spinner is called a progress indicator.
A trash can icon is also called as dustbin, delete. Many more such examples.

Users might try to search using terms familair to them and the system might not return any results. Is it possible to provide multiple names to a component(tags) so that search return would return the relevant items instead of empty

• Implement search in docusaurus
• Search via index and tags

modal element not easily accessible without query document

I'm submitting a...

[ ] Bug report
[x] Feature request
[ ] Documentation issue or request

Current behavior

If you want to attach some additional event to the modal e.g. keyDown-event you must query the root document for you modal element.

Expected behavior

modal-function should expose the element reference as addition return property (https://github.com/siemens/ix/blob/main/packages/core/src/components/modal/modal-utils.ts)

implement ix-tab-content to handle tab content change from ix side

I'm submitting a...

[ ] Bug report
[x] Feature request
[ ] Documentation issue or request

Current behavior

ix-tabs content handling must be implemented by each user e.g.

Angular:

<div>
      <ix-tabs [selected]="selectedTab">
        <ix-tab-item (click)="changeTab(0)">Tab 1</ix-tab-item>
        <ix-tab-item (click)="changeTab(1)">Tab 2</ix-tab-item>
        <ix-tab-item (click)="changeTab(2)">Tab 3</ix-tab-item>
      </ix-tabs>
      <div *ngIf="selectedTab === 0">Content Tab 1</div>
      <div *ngIf="selectedTab === 1">Content Tab 2</div>
      <div *ngIf="selectedTab === 2">Content Tab 3</div>
</div>

We have chooses this method because remove content and adding content should be a part of the target framework.
If we create a WebComponent e.g <ix-tab-content> and create a wrapper IxTabContent. React initializes every component whether it's visible or not. This behavior can only be changed if we implement the wrapper components manual.

Any other methods like removeChild, appendChild will mess up the lifecycle algorithmus of the target framework.

Expected behavior

A ix-tab-content-component which handle the tab switch automaticly

Syntax 1:

<ix-tabs selected={selectedTab} onTabChange={handleChange} >
  <ix-tab-item>Tab 1</ix-tab-item>
  <ix-tab-item>Tab 2</ix-tab-item>
  <ix-tab-item>Tab 3</ix-tab-item>
</ix-tabs>
<ix-tab-content value={value} index={0}>
  Item One
</ix-tab-content >
<ix-tab-content  value={value} index={1}>
  Item Two
</ix-tab-content >
<ix-tab-content  value={value} index={2}>
  Item Three
</ix-tab-content >

Syntax 2:

<ix-tabs-context>
  <ix-tabs selected={selectedTab} >
    <ix-tab-item>Tab 1</ix-tab-item>
    <ix-tab-item>Tab 2</ix-tab-item>
    <ix-tab-item>Tab 3</ix-tab-item>
  </ix-tabs>
  <ix-tab-content index={0}>
    Item One
  </ix-tab-content >
  <ix-tab-content  index={1}>
    Item Two
  </ix-tab-content >
  <ix-tab-content  index={2}>
    Item Three
  </ix-tab-content >
</ix-tabs-context>

Both Syntax styles a valid from my perspective

What is the motivation / use case for changing the behavior?

https://github.com/siemens/ix/discussions/73

Dark mode bug for Drop Down & Filter combos

-->

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

When using dark mode the combo Drop box & Filter is shown in light mode

Expected behavior

Should be shown in dark mode

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

ix-expanding-search uses in collapsed state min-width of expanded

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

ix-expanding-search uses in collapsed state min-width of expanded

Create Figma component: Application Header

• Component created
• Name reviewed
• Colors variables reviewed
• States and properties reviewed

validation-tooltip not readable in light theme

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Validation Tooltip in light theme not readable

Create Figma component: Navigation

• Components created
• Name reviewed
• Colors variables reviewed
• States and properties reviewed
• Examples added

Navigation sub components:

• Burger menu button
• Avatar (placehoder, image, initials)
• Avatar button
• Vertical tabs (main nav, overlay nav at the bottom)

Navigation Layouts:

• Layout for "Basic Navigation"
• Layout for "Map Navigation"

focus handling of components

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Currently all components are implemented with

:focus {
}

Expected behavior

Replace :focus selector with :focus-visible

provide Sketch template for login screen

• Create Sketch template for light theme
• Create Sketch template for dark theme

Close menu overlays when (new) menu item gets selected

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

When an overlay is open (e.g. about and legal) and a menu item gets clicked the overlay persists and it is not clear to the user what happened.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

documentation issue list

• add footer links @danielleroux
• breadcrumb separator SVG color does not change in dark theme
  - [ ] remove edit this page button
• edit next buttons
• theme page rework (additional theme)
• color table (custom property names are editable)
• find better and globally consistent dummy data (e.g. Porsche, Toyota)
• menu avatar popover not vertically aligned with item
• about and legal is visible outside of iframe when opening/closing
• about and legal close button is partially outside of content area
• about and legal - no initial tab selection

Create Figma component: Checkbox

• Component created
• Name reviewed
• Colors variables reviewed
• States and properties reviewed

tree hover effect has been missed out

I'm submitting a...

[ x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

On hover, of the treelist and event list nothing happens.

Expected behavior

On hover, a grey color background should appear

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

It is not obvious to the user, what is being hovered. Also, this was working fine in the previous version

Button examples incomplete

I'm submitting a...

[ ] Bug report
[ ] Feature request
[x] Documentation issue or request

Current behavior

Only basic button examples exist. No icon buttons for example

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

scss import for aggrid is missing in documentation

I'm submitting a...

[ ] Bug report
[ ] Feature request
[x] Documentation issue or request

Current behavior

The scss import

@import '@siemens/ix-aggrid/dist/ix-aggrid/ix-aggrid.css';

is missing on the aggrid documentation (https://ix.siemens.io/docs/controls/grid/)

update ix-tabs example with tab content

I'm submitting a...

[ ] Bug report
[ ] Feature request
[x] Documentation issue or request

Current behavior

Tabs example (Angular/React/WebComponent) has no example code to display an content

What is the motivation / use case for changing the behavior?

https://github.com/siemens/ix/discussions/73

Map navigation sidebar styling is broken

I'm submitting a...

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Spec can be accessed through zeplin

Sidebar should strech vertically and both background color and a thicker left border

What is the motivation / use case for changing the behavior?

font color of echart theme not readable in dark themes

Legend text not readable in dark mode

Also check font color of axis in dark mode. seems to dark

Originally posted by @ChristianButter in #16 (comment)

Search field in icon library is set to case sensitive

I'm submitting a...

[X] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Search field in icon library is set to case sensitive

Expected behavior

Search field should not be case sensitive

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?