search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.52k stars 263 forks source link

[theming]: How to expose a ui5-webcomponents setTheme function from custom webcomponents #8900

Closed akshil-verma closed 4 months ago

akshil-verma commented 5 months ago

Bug Description

Hi,

We have created a custom webcomponent based on ui5-webcomponent's framework. Our web component is utilized in a frontend project that is built using the Luigi micro frontend framework. Until version 1.18.0, everything worked fine, but from version 1.19.0 the frontend project has been facing theming-related issues, i.e., the theme changes only partially for the whole frontend project. We realized that this problem is due to the new CSS runtime fix in https://github.com/SAP/ui5-webcomponents/pull/7703 and this problem is solved when the frontend framework calls the setTheme function.

However, the frontend framework team insists on not importing any of the ui5-webcomponents packages as they are not directly dependent on it. So, my question is if there's any recommended way of exposing the setTheme function from within a custom webcomponent?

@ilhan007 This problem is from the discussion https://github.com/SAP/ui5-webcomponents/discussions/8755. I am converting this into a bug for better tracking as this problem is gaining traction from our product's side.

Best regards, Akshil Verma

Affected Component

@ui5/webcomponents-theming

Expected Behaviour

The project using Luigi micro-frontend should have a way to set theme from our custom webcomponent without importing/installing any of the @ui5/webcomponents packages.

Isolated Example

No response

Steps to Reproduce

1. 2. 3. ...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

MacOS

Additional Context

@ilhan007 I have already shared the links of the projects to you for this problem.

Organization

SAP

Declaration

niyap commented 5 months ago

Hello @SAP/ui5-webcomponents-core,

As there is already an ongoing discussion on the topic, I am forwarding the issue to you. Could you please check?

Thank you in advance!

Kind Regards, Niya

nnaydenow commented 5 months ago

HI @akshil-verma,

Regarding the issue you mentioned, we've made changes to how CSS variables are applied. This was done to ensure everything works smoothly together. Previously, sometimes older versions of CSS variables would take precedence, causing some variables to not function properly, which affected the appearance of the component. Currently, there isn't a direct way to make the setTheme method accessible from a custom component unless you create it yourself (by exposing it via some function that you have to create). However, this would mean that you need to have at least one component per runtime. One suggestion is to create a central registry (like a single storage place) where all the setTheme functions for each registered runtime are stored, and then iterate through them all whenever the theme changes.

akshil-verma commented 4 months ago

@nnaydenow Thanks for the reply. I have implemented your suggestions and resolved the issue from our end. I will be closing this issue and the discussion topic.