storybook-addon-pseudo-states 9.0.0-beta.4 → 9.0.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -10
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -35,8 +35,8 @@ npx storybook add storybook-addon-pseudo-states@4.0.3
|
|
|
35
35
|
You can have your stories automatically use a specific set of pseudo states, by setting the `pseudo` property on `parameters`:
|
|
36
36
|
|
|
37
37
|
```jsx
|
|
38
|
-
export const Hover = () => <Button>Label</Button
|
|
39
|
-
Hover.parameters = { pseudo: { hover: true } }
|
|
38
|
+
export const Hover = () => <Button>Label</Button>;
|
|
39
|
+
Hover.parameters = { pseudo: { hover: true } };
|
|
40
40
|
```
|
|
41
41
|
|
|
42
42
|
This is what enables snapshot testing your pseudo states in [Chromatic](https://www.chromatic.com/).
|
|
@@ -52,14 +52,14 @@ export const Buttons = () => (
|
|
|
52
52
|
<Button id="two">Hover focus</Button>
|
|
53
53
|
<Button id="three">Hover focus active</Button>
|
|
54
54
|
</>
|
|
55
|
-
)
|
|
55
|
+
);
|
|
56
56
|
Buttons.parameters = {
|
|
57
57
|
pseudo: {
|
|
58
|
-
hover: [
|
|
59
|
-
focus: [
|
|
60
|
-
active:
|
|
58
|
+
hover: ['#one', '#two', '#three'],
|
|
59
|
+
focus: ['#two', '#three'],
|
|
60
|
+
active: '#three',
|
|
61
61
|
},
|
|
62
|
-
}
|
|
62
|
+
};
|
|
63
63
|
```
|
|
64
64
|
|
|
65
65
|
This accepts a single CSS selector (string), or an array of CSS selectors on which to enable that pseudo style.
|
|
@@ -75,9 +75,9 @@ export const DialogButton = () => (
|
|
|
75
75
|
<Dialog>
|
|
76
76
|
<Button>Hover</Button>
|
|
77
77
|
</Dialog>
|
|
78
|
-
)
|
|
78
|
+
);
|
|
79
79
|
|
|
80
80
|
DialogButton.parameters = {
|
|
81
|
-
pseudo: { hover: true, rootSelector:
|
|
82
|
-
}
|
|
81
|
+
pseudo: { hover: true, rootSelector: 'body' },
|
|
82
|
+
};
|
|
83
83
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "storybook-addon-pseudo-states",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.5",
|
|
4
4
|
"description": "CSS pseudo states for Storybook",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"typescript": "^5.7.3"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
|
-
"storybook": "^9.0.0-beta.
|
|
60
|
+
"storybook": "^9.0.0-beta.5"
|
|
61
61
|
},
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public"
|