@storybook/addon-controls 8.0.0-alpha.6 → 8.0.0-alpha.7
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 +1 -35
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -176,38 +176,4 @@ Like [story parameters](https://storybook.js.org/docs/react/writing-stories/para
|
|
|
176
176
|
|
|
177
177
|
### How do controls work with MDX?
|
|
178
178
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
Consider this example in CSF:
|
|
182
|
-
|
|
183
|
-
```js
|
|
184
|
-
import { Button } from './Button';
|
|
185
|
-
export default {
|
|
186
|
-
title: 'Button',
|
|
187
|
-
component: Button,
|
|
188
|
-
argTypes: {
|
|
189
|
-
background: { control: 'color' },
|
|
190
|
-
},
|
|
191
|
-
};
|
|
192
|
-
|
|
193
|
-
const Template = (args) => <Button {...args} />;
|
|
194
|
-
export const Basic = Template.bind({});
|
|
195
|
-
Basic.args = { label: 'hello', background: '#ff0' };
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
Here's the MDX equivalent:
|
|
199
|
-
|
|
200
|
-
```jsx
|
|
201
|
-
import { Meta, Story } from '@storybook/addon-docs';
|
|
202
|
-
import { Button } from './Button';
|
|
203
|
-
|
|
204
|
-
<Meta title="Button" component={Button} argTypes={{ background: { control: 'color' } }} />
|
|
205
|
-
|
|
206
|
-
export const Template = (args) => <Button {...args} />
|
|
207
|
-
|
|
208
|
-
<Story name="Basic" args={{ label: 'hello', background: '#ff0' }}>
|
|
209
|
-
{Template.bind({})}
|
|
210
|
-
</Story>
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
For more info, see a full [Controls example in MDX for Vue](https://raw.githubusercontent.com/storybookjs/storybook/next/code/examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx).
|
|
179
|
+
When importing stories from your CSF file into MDX, controls will work the same way. See [the documentation](https://storybook.js.org/docs/writing-docs/mdx#basic-example) for examples.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-controls",
|
|
3
|
-
"version": "8.0.0-alpha.
|
|
3
|
+
"version": "8.0.0-alpha.7",
|
|
4
4
|
"description": "Interact with component inputs dynamically in the Storybook UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -51,19 +51,19 @@
|
|
|
51
51
|
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@storybook/blocks": "8.0.0-alpha.
|
|
54
|
+
"@storybook/blocks": "8.0.0-alpha.7",
|
|
55
55
|
"lodash": "^4.17.21",
|
|
56
56
|
"ts-dedent": "^2.0.0"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@storybook/client-logger": "8.0.0-alpha.
|
|
60
|
-
"@storybook/components": "8.0.0-alpha.
|
|
61
|
-
"@storybook/core-common": "8.0.0-alpha.
|
|
62
|
-
"@storybook/manager-api": "8.0.0-alpha.
|
|
63
|
-
"@storybook/node-logger": "8.0.0-alpha.
|
|
64
|
-
"@storybook/preview-api": "8.0.0-alpha.
|
|
65
|
-
"@storybook/theming": "8.0.0-alpha.
|
|
66
|
-
"@storybook/types": "8.0.0-alpha.
|
|
59
|
+
"@storybook/client-logger": "8.0.0-alpha.7",
|
|
60
|
+
"@storybook/components": "8.0.0-alpha.7",
|
|
61
|
+
"@storybook/core-common": "8.0.0-alpha.7",
|
|
62
|
+
"@storybook/manager-api": "8.0.0-alpha.7",
|
|
63
|
+
"@storybook/node-logger": "8.0.0-alpha.7",
|
|
64
|
+
"@storybook/preview-api": "8.0.0-alpha.7",
|
|
65
|
+
"@storybook/theming": "8.0.0-alpha.7",
|
|
66
|
+
"@storybook/types": "8.0.0-alpha.7",
|
|
67
67
|
"react": "^18.2.0",
|
|
68
68
|
"react-dom": "^18.2.0"
|
|
69
69
|
},
|