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

[storybook]: styles override #7406

Closed LidiyaGeorgieva closed 2 months ago

LidiyaGeorgieva commented 1 year ago

Bug Description

When I open the "Docs" section the styles that are applied to the different samples with decorators are applied to all samples. This produces issues and can be fixed only if iFrame is used. Sample: https://sap.github.io/ui5-webcomponents/nightly/playground/?path=/docs/main-card--docs Issue is reported here - https://github.com/SAP/ui5-webcomponents/issues/7284 "card with table" This issue is currently fixed, but in future most probably there will be more issues.

Affected Component

No response

Expected Behaviour

No response

Isolated Example

No response

Steps to Reproduce

1. 2. 3. ...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

main

Browser

Chrome

Operating System

Windоws

Additional Context

No response

Organization

No response

Declaration

LidiyaGeorgieva commented 1 year ago

Hi @SAP/ui5-webcomponents-topic-p,

The temporary fix I made has some bad side effects: When I change the theme in the StoryBook it is not applied to the iFrame content. Example with Evening Horizon: image Link: https://sap.github.io/ui5-webcomponents/nightly/playground/?path=/docs/main-card--docs&globals=theme:Evening+Horizon

Best Regards, Lidiya

PetyaMarkovaBogdanova commented 1 year ago

Hi @LidiyaGeorgieva , I am not sure if applying global styles for a reusable class, without using iframe is a good story writing approach, also it seems like the iframe workaround indeed has some issues, as the described one with applying the global theme, direction, etc.

I think in the Card particular case (as I also researched is the general approach, working with decorators in stories) is adding a wrapper, holding the width style, as the card has default width: 100%:

image

I will continue researching on extending the iframe approach with access to globals, but for now this is my preposition.

Best regards, Petya Markova. (UI5 WC Developer)

ilhan007 commented 2 months ago

Hi colleagues, storybook has been replaced - the issue can be closed as not relevant any more.