IX css is affecting non-ix components

[daniel-dinges]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

Problem

An Insights Hub application started to use IX for their UI.
The IX css applies styles to native elements like lables, inputs without the use of any namespacing.
Thus, it is overriding elements of non-IX components.
This becomes an issue, as Insights Hub applications have to include the "OS Header" from Insights Hub.
Furthermore this will prevent existing applications from adopting IX in a step-wise way.

Example

Possible Solution(s)

• Namespacing the CSS so that developers have to add a class to a container (can be body or html too) which should use IX within.
• Do not apply styles to native elements by default, rather provide an additional class so developers can actively choose to use this rather error prone approach

What type of frontend framework are you seeing the problem on?

Others

Which version of iX do you use?

x.x.x

Code to produce this issue.

unfortunately I do not have access to the specific application that raised the issue.

[github-actions]

🤖 Hello @daniel-dinges

Your issue will be analyzed and is part of our internal workflow.
To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-1503

[ruqzuq]

@matthiashader Are there any plans to solve this issue in the near future?

In my view, it is a showstopper for integrating Siemens iX into enterprise code bases. I would like to include iX in our stack and promote it, but side effects on the overall HMI are unacceptable.
You could rebuild the entire styles without compromising on flexibility and performance, as fluentui does, for example:
https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts

Would help be welcome here? @danielleroux @nuke-ellington

[daniel-dinges]

Hello @danielleroux @matthiashader i am happy to see some progress on this issue after ~7 months (apologies for the sarcasm ;-))

We just saw another similar problem today, in which the box-sizing is overwritten with a wildcard selector

Is this also fixed with pull request?

[danielleroux]

Hello @danielleroux @matthiashader i am happy to see some progress on this issue after ~7 months (apologies for the sarcasm ;-))

We just saw another similar problem today, in which the box-sizing is overwritten with a wildcard selector

Is this also fixed with pull request?

No problem we try to solve it as fast as possible and have to keep in mind not to break existing applications. Any contributions in form of pull requests are super welcome.

[danielleroux]

Regarding box-size we followed the way like bootstrap did it: https://getbootstrap.com/docs/5.3/getting-started/introduction/#box-sizing