You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The next chapter of the Industrial Experience Design System is here. This version brings together thoughtful feature enhancements and essential style refinements, offering greater flexibility while reinforcing design consistency.
11
+
12
+
<!-- truncate -->
13
+
14
+
# How to start?
15
+
16
+
- Install `@siemens/ix` (`@siemens/ix-angular`, `@siemens/ix-react`, `@siemens/ix-vue`) via the `latest` tag
- Make sure you're using the latest published version of our Figma library
19
+
20
+
# Button update
21
+
22
+
23
+
24
+
The time of confusing button naming is officially behind us. With this release, we’ve introduced a clear and intuitive naming convention: primary, secondary, and tertiary [buttons](/docs/components/button/guide). Now labeled exactly as such. This change improves clarity, making it easier to choose the right button for the right context.
25
+
26
+
To implement this improvement, we had to introduce a breaking change. Existing variant names will need to be updated manually. Please refer to our [migration guide](/docs/home/migration/4_0_0) for detailed instructions.
27
+
28
+
In line with brand consistency efforts, all buttons now feature slightly rounded corners, offering a more modern and approachable look. Additionally, we’ve added support for placing icons to the right of the label. Especially useful for “Next” actions, where a left-aligned arrow often felt visually off.
29
+
30
+
# New app header options
31
+
32
+
33
+
34
+
The [app header](/docs/components/application-header/guide) is now more flexible than before. With the introduction of an additional secondary slot, teams can tailor the header to better fit their application needs.
35
+
36
+
We’ve also updated the documentation to showcase all available configuration options, including:
37
+
38
+
- Displaying a user avatar
39
+
- Using a secondary slot
40
+
- Enabling the borderless variant
41
+
- Showing an app icon
42
+
- Adding a sub-label to the app name
43
+
44
+
These enhancements come as additions to the existing header component, giving teams more options without disrupting current implementation.
45
+
46
+
# Elevation principle
47
+
48
+
49
+
50
+
Elevation helps create depth in the user interface. A simple elevation principle makes it easier for users to understand which elements sit above others, improving both hierarchy and interactivity.
51
+
52
+
With this major release, we are reducing the use of semi-transparent colors in favor of solid tones. This change improves visual separation between layers and aligns with our goal of a consistent design language.
53
+
54
+
The new colors are applied automatically when migrating to this version. Therefore, we recommend teams visually review their interfaces. To support this, our migration guide includes an overview where switching to outline variants is needed for good layer separation.
55
+
56
+
# Angular 20
57
+
58
+
59
+
60
+
This release brings full compatibility with Angular 20 and up, helping teams keep their projects aligned with the latest framework improvements.
61
+
62
+
To reflect this, the Angular specific peer dependencies have been updated to require at least version 20. Projects using this package will need to upgrade to Angular 20 or higher before migrating to the latest version of iX. See more in the [migration guide](/docs/home/migration/4_0_0).
63
+
64
+
# AG Grid update
65
+
66
+
67
+
68
+
We are now publishing a separate Figma library based on the [official AG Grid design system](https://www.figma.com/community/file/1360600846643230092) styled with the iX theme. This gives designers direct access to AG Grid’s native components and layout logic. Developers benefit from AG Grid’s new [theming API](https://blog.ag-grid.com/introducing-our-new-theming-api/), which makes styling grids easier and more flexible. Together, this change makes design and development faster, clearer, and better aligned.
69
+
70
+
# New section within UX writing guidelines: Formatting
71
+
72
+
We’ve just released a brand-new section in our [UX writing guidelines](/docs/guidelines/language/writing-style-guide-getting-started), designed to bring clarity, consistency, and user-friendliness to some of the most commonly used — and often overlooked — elements in digital communication. This update covers:
Copy file name to clipboardExpand all lines: docs/components/overview.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -97,7 +97,7 @@ import { CategoryButton } from '@site/src/components/CategoryButton';
97
97
|[Card list](./card-list/index.mdx)| Card lists display a large number of cards or items of the same type in a lightweight, grouped manner. |
98
98
|[Flip](./flip/index.mdx)| Flips are containers that flip when clicked to reveal additional content. |
99
99
|[Event list](./event-list/index.mdx)| Event lists display a list of any type of element with additional details. |
100
-
|[Drawer](legacy/drawer/index.mdx)| Drawers are containers that open on the click of a button to show additional content. |
100
+
|[Drawer](legacy/drawer/index.mdx)| Drawers are containers that open on the click of a button to show additional content. |
101
101
|[Layout auto](./layout-auto/index.mdx)| Auto-layouts are containers that automatically adjust the size of their columns based on the content. |
102
102
|[Layout grid](./layout-grid/index.mdx)| Layout grids are used to structure the layout of a page or screen responsively. |
103
103
|[Modal](./modal/index.mdx)| Modals present information prominently and are useful for gathering essential user input without navigating to another page. |
description: Welcome to the migration guide for upgrading from Siemens Industrial Experience design system v3 to v4. This guide introduces all major changes.
6
+
description: Welcome to the migration guide for upgrading from Siemens Industrial Experience design system V3 to V4. This guide supports you through all the major changes.
7
7
---
8
-
# Upgrade to v4.0.0
8
+
9
+
# Upgrade to V4.0.0
9
10
10
11
## TL;DR
11
-
- We renamed the [button variants](#ix-button) to better reflect their usage.
12
-
- Map and basic navigation have been removed in favor of the [application](../../../components/application/guide.md) component.
13
-
- Drawer has been deprecated in favor of [panes](../../../components/panes/index.mdx).
14
12
15
-
## Icons renamed or removed
13
+
- We upgraded to [Angular 20](#angular-20).
14
+
- We renamed the [button variants](#ix-button-variants) to better reflect their usage.
15
+
- Map and basic navigation have been removed in favor of the [application](#removed-basic-navigation-and-map-navigation) component.
16
+
- Drawer has been [deprecated](#drawer) in favor of [panes](/docs/components/panes/guide).
17
+
- We made changes to the [elevation principle](#updated-elevation-principle) which means teams need to check whether their components need an outline.
18
+
19
+
## Updated dependencies
20
+
21
+
### Angular 20
22
+
23
+
Important: Projects using `@siemens/ix-angular` must upgrade to Angular 20 or higher before updating to this version. Some APIs deprecated in previous Angular versions may have been removed; review the Angular 20 changelog for migration steps. Ensure all third-party Angular libraries are compatible with at least V20 to avoid runtime issues.
-[Pane (inline)](/docs/components/panes/guide) replacing the map navigation's left sidebar
42
+
-[Pane (floating)](/docs/components/panes/guide) or original overlay content replacing the map navigation's right overlay
27
43
28
-
### Deprecated drawer
44
+
### Drawer
29
45
30
-
The drawer component has been deprecated and will be removed in the next major release. We recommend using [panes](../../../components/panes/index.mdx) instead, which provide similar functionality with improved performance and usability. Use this configuration for a similar experience:
46
+
The drawer component has been deprecated and will be removed in the next major release. We recommend using [panes](/docs/components/panes/index.mdx) instead, which provide similar functionality with improved performance and usability. Use this configuration for a similar experience:
31
47
32
48
```html
33
49
<ix-pane
34
-
heading="Title"
35
-
variant="floating"
36
-
composition="right"
37
-
borderless="true"
38
-
size="320px"
39
-
close-on-click-outside="true"
40
-
hide-on-collapse>
41
-
My content
50
+
heading="Title"
51
+
variant="floating"
52
+
composition="right"
53
+
borderless="true"
54
+
size="320px"
55
+
close-on-click-outside="true"
56
+
hide-on-collapse
57
+
>
58
+
My content
42
59
</ix-pane>
43
60
```
44
61
45
62
Here is a comparison of the properties and events between the drawer and pane components:
To take over the changes, rename all button variants according to this table. Start with renaming `secondary` to `subtle-*` variants to avoid unwanted overriding.
For buttons without an explicity set variant, the default is used. As defaults differ between the button components, the renaming should be component-specific.
| AG Grid Building Blocks / Data Cell | Grid Cell |
201
+
| AG Grid Building Blocks / Header Cell | Grid Header |
202
+
| AG Grid Building Blocks / Header Row | not needed |
203
+
| AG Grid Building Blocks / Row | not needed |
204
+
| AG Grid component / AG Grid Column | - |
205
+
| AG Grid component / AG Grid Row | - |
206
+
| AG Grid component / AG Grid Table | iX AG Grid Table |
207
+
| AG Grid component / AG Grid Table Example | iX AG Grid Table Example |
208
+
</div>
209
+
210
+
#### Implementation
211
+
212
+
TBD
213
+
79
214
## Global style updates
80
215
81
-
Lorem ipsum
216
+
### Updated elevation principle
217
+
218
+
With the updated elevation principle, some components require a visual outline if they are placed on `color-2` or `component-1`. See more in the styles chapter on [elevation](/docs/styles/elevation).
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?v=4&size=40){kind=avatar}
0 commit comments