Open philippechevieux opened 7 months ago
Anyone ?
I just ran into this myself. I have a skip link with :not(:focus)
styles which breaks with this addon:
.skipLink {
position: absolute;
left: 0;
&:not(:focus) {
@include mixins.visually-hidden;
}
}
// Generates to
.skipLink:not(:focus), .skipLink:not(.pseudo-focus) { ... }
The .skipLink:not(.pseudo-focus)
part is always truthy which makes the link invisible even when it receives focus.
Is there any way to disable .pseudo-focus
per-story? Or disable the whole addon per-story? I tried adding following without success:
import type {Meta} from '@storybook/react';
export default {
parameters: {
pseudo: {
focus: false, // Or even ['.non-matching-selector']
},
},
} satisfies Meta;
Edit: Forcing the .pseudo-focus
on the conflicting element seems to work:
import type {Meta} from '@storybook/react';
export default {
parameters: {
pseudo: {
focus: ['[class*="skipLink"]'],
},
},
} satisfies Meta;
Hello there,
I'm using the add-on to test pseudo states on
Chromatic
and it work like a charm. However i've noticed an issue with a compoment based onAnt Design
.Config
Selector rewritten by the add-on
Default selector
The issue here is that
:hover
has been replaced by.pseudo-hover
in the storybook build causing a wrong render of my component