ensure css prop gets handled properly in storybook #35
Conversation
|
I also noticed, that our animations are not disabled in Chromatic. This is because of the Shadow DOM. I added this check in the base element, that animation-disabling is being loaded into every component when the ENV var The Chart component can also differ a few pixels because of highcharts. Disable this element for chromatic. |
|
|
||
| export const ActionKeystrokes = [' ', 'Enter']; | ||
|
|
||
| export default class BaseElement<EventsPayloadMap = Record<string, never>> extends LitElement { | ||
|
|
||
| protected static globalStyles = unsafeCSS(global); | ||
| protected static globalStyles = import.meta.env.VITE_IS_CHROMATIC |
There was a problem hiding this comment.
Idea:
i am not the biggest fan of doing this in the baseElement.
Could we do something like this in the .stories files to disable the animations?
var sheet = new CSSStyleSheet()
sheet.replaceSync( `.color { color: pink }`)
host.shadowRoot.adoptedStyleSheets.push(sheet)
There was a problem hiding this comment.
I don't like it too much either, but we need to be inside each components Shadow DOM. There is not a nice way to do this, if we have to place CSSStyleSheets on every story trying to reach into the Shadow DOM, it's going to be messy and we are going to miss some leading to unexpected errors.
In this way here we have every shadow DOM but only if at build time the env var IS_CHROMATIC is present. So all our prod builds do not have these CSS styles included. Which I think is a nice compromise that is very maintainable.
There was a problem hiding this comment.
Fair enough 👍🏻 could we do something similar also with reduced motion? I don't think we have any big animations but could this also be something that we want to support? Or is this more on application level?
There was a problem hiding this comment.
That's a good point! For the reset.css we used this as a base: https://dev.to/hankchizljaw/a-modern-css-reset-6p3
As you can see, in the end it disables all animations for people that have reduced motion set. With our client we had the problem though, that they used virtual desktops which always had reduced motion on, so we never got any animations which led us to remove this CSS.
We then ended up setting it for the bigger animations on a per component base. You can see the loadingPlaceholder for example: https://github.com/Zuehlke/design-system-starter/blob/main/web-components/src/components/loadingPlaceholder/loadingPlaceholder.css
I noticed, that
@csspropare getting generated into the custom-elements-manifest which then leads to Storybook displaying it in the attributes table. But there it can't be handled. Added the additional type and used the original name to propery handle it in Storybook.Old:
New:
