search

chromaui / storybook-addon-pseudo-states

CSS pseudo-classes for Storybook
MIT License
88 stars 28 forks source link

Pseudo states aren't applied when using certain CSS pseudo class selectors #125

Open theetrain opened 2 weeks ago

theetrain commented 2 weeks ago

Problem

Given this element style:

main-container:is(:hover, :focus) .tooltip {
  opacity: 1;
}

Writing a story that activates hover or focus styles do not apply.

<Story
  name="Tooltip Component Hover"
  parameters={{ pseudo: { hover: true } }}
/>

Workaround

Avoid using :is() and :where() when it involves :hover, :focus, and other desirable pseudo states.

-main-container:is(:hover, :focus) .tooltip {
+main-container:hover .tooltip,
+main-container:focus .tooltip, {
  opacity: 1;
}

Possibly relates to #99, #88, and other tickets that relate to pseudo states not applying.