diff --git a/package-lock.json b/package-lock.json
index 97de983112cf1b..235b750396072f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7995,6 +7995,339 @@
}
}
},
+ "@storybook/addon-controls": {
+ "version": "6.3.12",
+ "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.3.12.tgz",
+ "integrity": "sha512-WO/PbygE4sDg3BbstJ49q0uM3Xu5Nw4lnHR5N4hXSvRAulZt1d1nhphRTHjfX+CW+uBcfzkq9bksm6nKuwmOyw==",
+ "dev": true,
+ "requires": {
+ "@storybook/addons": "6.3.12",
+ "@storybook/api": "6.3.12",
+ "@storybook/client-api": "6.3.12",
+ "@storybook/components": "6.3.12",
+ "@storybook/node-logger": "6.3.12",
+ "@storybook/theming": "6.3.12",
+ "core-js": "^3.8.2",
+ "ts-dedent": "^2.0.0"
+ },
+ "dependencies": {
+ "@emotion/styled": {
+ "version": "10.0.27",
+ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
+ "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
+ "dev": true,
+ "requires": {
+ "@emotion/styled-base": "^10.0.27",
+ "babel-plugin-emotion": "^10.0.27"
+ }
+ },
+ "@storybook/addons": {
+ "version": "6.3.12",
+ "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.3.12.tgz",
+ "integrity": "sha512-UgoMyr7Qr0FS3ezt8u6hMEcHgyynQS9ucr5mAwZky3wpXRPFyUTmMto9r4BBUdqyUvTUj/LRKIcmLBfj+/l0Fg==",
+ "dev": true,
+ "requires": {
+ "@storybook/api": "6.3.12",
+ "@storybook/channels": "6.3.12",
+ "@storybook/client-logger": "6.3.12",
+ "@storybook/core-events": "6.3.12",
+ "@storybook/router": "6.3.12",
+ "@storybook/theming": "6.3.12",
+ "core-js": "^3.8.2",
+ "global": "^4.4.0",
+ "regenerator-runtime": "^0.13.7"
+ }
+ },
+ "@storybook/api": {
+ "version": "6.3.12",
+ "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.3.12.tgz",
+ "integrity": "sha512-LScRXUeCWEW/OP+jiooNMQICVdusv7azTmULxtm72fhkXFRiQs2CdRNTiqNg46JLLC9z95f1W+pGK66X6HiiQA==",
+ "dev": true,
+ "requires": {
+ "@reach/router": "^1.3.4",
+ "@storybook/channels": "6.3.12",
+ "@storybook/client-logger": "6.3.12",
+ "@storybook/core-events": "6.3.12",
+ "@storybook/csf": "0.0.1",
+ "@storybook/router": "6.3.12",
+ "@storybook/semver": "^7.3.2",
+ "@storybook/theming": "6.3.12",
+ "@types/reach__router": "^1.3.7",
+ "core-js": "^3.8.2",
+ "fast-deep-equal": "^3.1.3",
+ "global": "^4.4.0",
+ "lodash": "^4.17.20",
+ "memoizerific": "^1.11.3",
+ "qs": "^6.10.0",
+ "regenerator-runtime": "^0.13.7",
+ "store2": "^2.12.0",
+ "telejson": "^5.3.2",
+ "ts-dedent": "^2.0.0",
+ "util-deprecate": "^1.0.2"
+ }
+ },
+ "@storybook/channel-postmessage": {
+ "version": "6.3.12",
+ "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.3.12.tgz",
+ "integrity": "sha512-Ou/2Ga3JRTZ/4sSv7ikMgUgLTeZMsXXWLXuscz4oaYhmOqAU9CrJw0G1NitwBgK/+qC83lEFSLujHkWcoQDOKg==",
+ "dev": true,
+ "requires": {
+ "@storybook/channels": "6.3.12",
+ "@storybook/client-logger": "6.3.12",
+ "@storybook/core-events": "6.3.12",
+ "core-js": "^3.8.2",
+ "global": "^4.4.0",
+ "qs": "^6.10.0",
+ "telejson": "^5.3.2"
+ }
+ },
+ "@storybook/channels": {
+ "version": "6.3.12",
+ "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.3.12.tgz",
+ "integrity": "sha512-l4sA+g1PdUV8YCbgs47fIKREdEQAKNdQIZw0b7BfTvY9t0x5yfBywgQhYON/lIeiNGz2OlIuD+VUtqYfCtNSyw==",
+ "dev": true,
+ "requires": {
+ "core-js": "^3.8.2",
+ "ts-dedent": "^2.0.0",
+ "util-deprecate": "^1.0.2"
+ }
+ },
+ "@storybook/client-api": {
+ "version": "6.3.12",
+ "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.3.12.tgz",
+ "integrity": "sha512-xnW+lKKK2T774z+rOr9Wopt1aYTStfb86PSs9p3Fpnc2Btcftln+C3NtiHZl8Ccqft8Mz/chLGgewRui6tNI8g==",
+ "dev": true,
+ "requires": {
+ "@storybook/addons": "6.3.12",
+ "@storybook/channel-postmessage": "6.3.12",
+ "@storybook/channels": "6.3.12",
+ "@storybook/client-logger": "6.3.12",
+ "@storybook/core-events": "6.3.12",
+ "@storybook/csf": "0.0.1",
+ "@types/qs": "^6.9.5",
+ "@types/webpack-env": "^1.16.0",
+ "core-js": "^3.8.2",
+ "global": "^4.4.0",
+ "lodash": "^4.17.20",
+ "memoizerific": "^1.11.3",
+ "qs": "^6.10.0",
+ "regenerator-runtime": "^0.13.7",
+ "stable": "^0.1.8",
+ "store2": "^2.12.0",
+ "ts-dedent": "^2.0.0",
+ "util-deprecate": "^1.0.2"
+ }
+ },
+ "@storybook/client-logger": {
+ "version": "6.3.12",
+ "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.3.12.tgz",
+ "integrity": "sha512-zNDsamZvHnuqLznDdP9dUeGgQ9TyFh4ray3t1VGO7ZqWVZ2xtVCCXjDvMnOXI2ifMpX5UsrOvshIPeE9fMBmiQ==",
+ "dev": true,
+ "requires": {
+ "core-js": "^3.8.2",
+ "global": "^4.4.0"
+ }
+ },
+ "@storybook/components": {
+ "version": "6.3.12",
+ "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.3.12.tgz",
+ "integrity": "sha512-kdQt8toUjynYAxDLrJzuG7YSNL6as1wJoyzNUaCfG06YPhvIAlKo7le9tS2mThVFN5e9nbKrW3N1V1sp6ypZXQ==",
+ "dev": true,
+ "requires": {
+ "@popperjs/core": "^2.6.0",
+ "@storybook/client-logger": "6.3.12",
+ "@storybook/csf": "0.0.1",
+ "@storybook/theming": "6.3.12",
+ "@types/color-convert": "^2.0.0",
+ "@types/overlayscrollbars": "^1.12.0",
+ "@types/react-syntax-highlighter": "11.0.5",
+ "color-convert": "^2.0.1",
+ "core-js": "^3.8.2",
+ "fast-deep-equal": "^3.1.3",
+ "global": "^4.4.0",
+ "lodash": "^4.17.20",
+ "markdown-to-jsx": "^7.1.3",
+ "memoizerific": "^1.11.3",
+ "overlayscrollbars": "^1.13.1",
+ "polished": "^4.0.5",
+ "prop-types": "^15.7.2",
+ "react-colorful": "^5.1.2",
+ "react-popper-tooltip": "^3.1.1",
+ "react-syntax-highlighter": "^13.5.3",
+ "react-textarea-autosize": "^8.3.0",
+ "regenerator-runtime": "^0.13.7",
+ "ts-dedent": "^2.0.0",
+ "util-deprecate": "^1.0.2"
+ }
+ },
+ "@storybook/core-events": {
+ "version": "6.3.12",
+ "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.3.12.tgz",
+ "integrity": "sha512-SXfD7xUUMazaeFkB92qOTUV8Y/RghE4SkEYe5slAdjeocSaH7Nz2WV0rqNEgChg0AQc+JUI66no8L9g0+lw4Gw==",
+ "dev": true,
+ "requires": {
+ "core-js": "^3.8.2"
+ }
+ },
+ "@storybook/node-logger": {
+ "version": "6.3.12",
+ "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.3.12.tgz",
+ "integrity": "sha512-iktOem/Ls2+dsZY9PhPeC6T1QhX/y7OInP88neLsqEPEbB2UXca3Ydv7OZBhBVbvN25W45b05MRzbtNUxYLNRw==",
+ "dev": true,
+ "requires": {
+ "@types/npmlog": "^4.1.2",
+ "chalk": "^4.1.0",
+ "core-js": "^3.8.2",
+ "npmlog": "^4.1.2",
+ "pretty-hrtime": "^1.0.3"
+ }
+ },
+ "@storybook/router": {
+ "version": "6.3.12",
+ "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.3.12.tgz",
+ "integrity": "sha512-G/pNGCnrJRetCwyEZulHPT+YOcqEj/vkPVDTUfii2qgqukup6K0cjwgd7IukAURnAnnzTi1gmgFuEKUi8GE/KA==",
+ "dev": true,
+ "requires": {
+ "@reach/router": "^1.3.4",
+ "@storybook/client-logger": "6.3.12",
+ "@types/reach__router": "^1.3.7",
+ "core-js": "^3.8.2",
+ "fast-deep-equal": "^3.1.3",
+ "global": "^4.4.0",
+ "lodash": "^4.17.20",
+ "memoizerific": "^1.11.3",
+ "qs": "^6.10.0",
+ "ts-dedent": "^2.0.0"
+ }
+ },
+ "@storybook/semver": {
+ "version": "7.3.2",
+ "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz",
+ "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==",
+ "dev": true,
+ "requires": {
+ "core-js": "^3.6.5",
+ "find-up": "^4.1.0"
+ }
+ },
+ "@storybook/theming": {
+ "version": "6.3.12",
+ "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.3.12.tgz",
+ "integrity": "sha512-wOJdTEa/VFyFB2UyoqyYGaZdym6EN7RALuQOAMT6zHA282FBmKw8nL5DETHEbctpnHdcrMC/391teK4nNSrdOA==",
+ "dev": true,
+ "requires": {
+ "@emotion/core": "^10.1.1",
+ "@emotion/is-prop-valid": "^0.8.6",
+ "@emotion/styled": "^10.0.27",
+ "@storybook/client-logger": "6.3.12",
+ "core-js": "^3.8.2",
+ "deep-object-diff": "^1.1.0",
+ "emotion-theming": "^10.0.27",
+ "global": "^4.4.0",
+ "memoizerific": "^1.11.3",
+ "polished": "^4.0.5",
+ "resolve-from": "^5.0.0",
+ "ts-dedent": "^2.0.0"
+ }
+ },
+ "color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "dev": true,
+ "requires": {
+ "color-name": "~1.1.4"
+ }
+ },
+ "color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "dev": true
+ },
+ "fast-deep-equal": {
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+ "dev": true
+ },
+ "find-up": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+ "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+ "dev": true,
+ "requires": {
+ "locate-path": "^5.0.0",
+ "path-exists": "^4.0.0"
+ }
+ },
+ "locate-path": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+ "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+ "dev": true,
+ "requires": {
+ "p-locate": "^4.1.0"
+ }
+ },
+ "p-limit": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+ "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+ "dev": true,
+ "requires": {
+ "p-try": "^2.0.0"
+ }
+ },
+ "p-locate": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+ "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+ "dev": true,
+ "requires": {
+ "p-limit": "^2.2.0"
+ }
+ },
+ "p-try": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+ "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+ "dev": true
+ },
+ "path-exists": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+ "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+ "dev": true
+ },
+ "qs": {
+ "version": "6.10.1",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
+ "integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==",
+ "dev": true,
+ "requires": {
+ "side-channel": "^1.0.4"
+ }
+ },
+ "resolve-from": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+ "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+ "dev": true
+ },
+ "side-channel": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+ "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+ "dev": true,
+ "requires": {
+ "call-bind": "^1.0.0",
+ "get-intrinsic": "^1.0.2",
+ "object-inspect": "^1.9.0"
+ }
+ }
+ }
+ },
"@storybook/addon-docs": {
"version": "6.3.2",
"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.3.2.tgz",
diff --git a/package.json b/package.json
index 9b67f738af3189..56d6ec47031de7 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
"@octokit/rest": "16.26.0",
"@octokit/webhooks": "7.1.0",
"@storybook/addon-a11y": "6.3.2",
+ "@storybook/addon-controls": "6.3.12",
"@storybook/addon-docs": "6.3.2",
"@storybook/addon-knobs": "6.2.9",
"@storybook/addon-storysource": "6.3.2",
diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 088f56f43d6bb4..f5cda274bb7610 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -277,14 +277,24 @@ import Button from '../';
export default { title: 'Components/Button', component: Button };
-export const _default = () => ;
-
-export const primary = () => ;
-
-export const secondary = () => ;
+const Template = ( args ) => ;
+
+export const Default = Template.bind( {} );
+Default.args = {
+ text: 'Default Button',
+ isBusy: false,
+ isSmall: false,
+};
+
+export const Primary = Template.bind( {} );
+Primary.args = {
+ ...Default.args,
+ text: 'Primary Button',
+ variant: 'primary',
+};
```
-A great tool to use when writing stories is the [Storybook Controls addon](https://storybook.js.org/addons/@storybook/addon-controls). Ideally props should be exposed by using this addon, which provides a graphical UI to interact dynamically with the component without needing to write code.
+A great tool to use when writing stories is the [Storybook Controls addon](https://storybook.js.org/addons/@storybook/addon-controls). Ideally props should be exposed by using this addon, which provides a graphical UI to interact dynamically with the component without needing to write code. Avoid using [Knobs](https://storybook.js.org/addons/@storybook/addon-knobs) for new stories, as this addon is deprecated.
The default value of each control should coincide with the default value of the props (i.e. it should be `undefined` if a prop is not required). A story should, therefore, also explicitly show how values from the Context System are applied to (sub)components. A good example of how this may look like is the [`Card` story](https://wordpress.github.io/gutenberg/?path=/story/components-card--default) (code [here](/packages/components/src/card/stories/index.js)).
diff --git a/packages/components/src/alignment-matrix-control/stories/index.js b/packages/components/src/alignment-matrix-control/stories/index.js
index a7139239fbd6c1..bf282fbbf5256b 100644
--- a/packages/components/src/alignment-matrix-control/stories/index.js
+++ b/packages/components/src/alignment-matrix-control/stories/index.js
@@ -19,6 +19,9 @@ const alignmentOptions = ALIGNMENTS.reduce( ( options, item ) => {
export default {
title: 'Components/AlignmentMatrixControl',
component: AlignmentMatrixControl,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
export const _default = () => {
diff --git a/packages/components/src/base-control/stories/index.js b/packages/components/src/base-control/stories/index.js
index 6e468d2769d474..40d61d1e1996f1 100644
--- a/packages/components/src/base-control/stories/index.js
+++ b/packages/components/src/base-control/stories/index.js
@@ -9,7 +9,13 @@ import { boolean, text } from '@storybook/addon-knobs';
import BaseControl from '../';
import TextareaControl from '../../textarea-control';
-export default { title: 'Components/BaseControl', component: BaseControl };
+export default {
+ title: 'Components/BaseControl',
+ component: BaseControl,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
export const _default = () => {
const id = text( 'Id', 'textarea-1' );
diff --git a/packages/components/src/button/stories/index.js b/packages/components/src/button/stories/index.js
index a6549008c4975d..5b8fe440552801 100644
--- a/packages/components/src/button/stories/index.js
+++ b/packages/components/src/button/stories/index.js
@@ -20,7 +20,13 @@ import {
import './style.css';
import Button from '../';
-export default { title: 'Components/Button', component: Button };
+export default {
+ title: 'Components/Button',
+ component: Button,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
export const _default = () => {
const label = text( 'Label', 'Default Button' );
diff --git a/packages/components/src/card/stories/index.js b/packages/components/src/card/stories/index.js
index 8bf66a57feaec5..747311bef6f0a9 100644
--- a/packages/components/src/card/stories/index.js
+++ b/packages/components/src/card/stories/index.js
@@ -21,6 +21,9 @@ import Button from '../../button';
export default {
component: Card,
title: 'Components/Card',
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const KNOBS_GROUPS = {
diff --git a/packages/components/src/checkbox-control/stories/index.js b/packages/components/src/checkbox-control/stories/index.js
index be0fb46aaa9208..0f107c2e0b39d2 100644
--- a/packages/components/src/checkbox-control/stories/index.js
+++ b/packages/components/src/checkbox-control/stories/index.js
@@ -16,6 +16,9 @@ import CheckboxControl from '../';
export default {
title: 'Components/CheckboxControl',
component: CheckboxControl,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const CheckboxControlWithState = ( { checked, ...props } ) => {
diff --git a/packages/components/src/color-indicator/stories/index.js b/packages/components/src/color-indicator/stories/index.js
index f01d534ad03353..d752706e90b5cc 100644
--- a/packages/components/src/color-indicator/stories/index.js
+++ b/packages/components/src/color-indicator/stories/index.js
@@ -11,6 +11,9 @@ import ColorIndicator from '../';
export default {
title: 'Components/ColorIndicator',
component: ColorIndicator,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
export const _default = () => {
diff --git a/packages/components/src/color-palette/stories/index.js b/packages/components/src/color-palette/stories/index.js
index 11096ce9ae67cf..d4b4190ae228bf 100644
--- a/packages/components/src/color-palette/stories/index.js
+++ b/packages/components/src/color-palette/stories/index.js
@@ -13,7 +13,13 @@ import { useState } from '@wordpress/element';
*/
import ColorPalette from '../';
-export default { title: 'Components/ColorPalette', component: ColorPalette };
+export default {
+ title: 'Components/ColorPalette',
+ component: ColorPalette,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
const ColorPaletteWithState = ( props ) => {
const [ color, setColor ] = useState( '#F00' );
diff --git a/packages/components/src/color-picker/stories/index.js b/packages/components/src/color-picker/stories/index.js
index 95a8fa1ef2bdbb..795c347bba3c31 100644
--- a/packages/components/src/color-picker/stories/index.js
+++ b/packages/components/src/color-picker/stories/index.js
@@ -19,6 +19,9 @@ import { space } from '../../ui/utils/space';
export default {
component: ColorPicker,
title: 'Components/ColorPicker',
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const PROP_UNSET = 'unset';
diff --git a/packages/components/src/date-time/stories/index.js b/packages/components/src/date-time/stories/index.js
index e929e9ab999555..8edf4ec6a3b4e0 100644
--- a/packages/components/src/date-time/stories/index.js
+++ b/packages/components/src/date-time/stories/index.js
@@ -16,6 +16,9 @@ import DateTimePicker from '../';
export default {
title: 'Components/DateTimePicker',
component: DateTimePicker,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const DateTimePickerWithState = ( { is12Hour } ) => {
diff --git a/packages/components/src/date-time/stories/time.js b/packages/components/src/date-time/stories/time.js
index 52ed6fb7ce8329..5622d5ce279bc5 100644
--- a/packages/components/src/date-time/stories/time.js
+++ b/packages/components/src/date-time/stories/time.js
@@ -9,7 +9,13 @@ import TimePicker from '../time';
import { date, boolean } from '@storybook/addon-knobs';
import { noop } from 'lodash';
-export default { title: 'Components/TimePicker', component: TimePicker };
+export default {
+ title: 'Components/TimePicker',
+ component: TimePicker,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
export const _default = () => {
return (
diff --git a/packages/components/src/divider/stories/index.js b/packages/components/src/divider/stories/index.js
index 6ba09152d874c4..a3a7b595db3bf9 100644
--- a/packages/components/src/divider/stories/index.js
+++ b/packages/components/src/divider/stories/index.js
@@ -11,6 +11,9 @@ import { Divider } from '..';
export default {
component: Divider,
title: 'Components (Experimental)/Divider',
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const BlackDivider = ( props ) => (
diff --git a/packages/components/src/dropdown-menu/stories/index.js b/packages/components/src/dropdown-menu/stories/index.js
index 6c73fe4c0127c1..9afcb69f58eb38 100644
--- a/packages/components/src/dropdown-menu/stories/index.js
+++ b/packages/components/src/dropdown-menu/stories/index.js
@@ -13,7 +13,13 @@ import DropdownMenu from '../';
*/
import { menu, arrowUp, arrowDown } from '@wordpress/icons';
-export default { title: 'Components/DropdownMenu', component: DropdownMenu };
+export default {
+ title: 'Components/DropdownMenu',
+ component: DropdownMenu,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
export const _default = () => {
const label = text( 'Label', 'Select a direction.' );
diff --git a/packages/components/src/elevation/stories/index.js b/packages/components/src/elevation/stories/index.js
index f52c1f8ae3216a..c03ff381380113 100644
--- a/packages/components/src/elevation/stories/index.js
+++ b/packages/components/src/elevation/stories/index.js
@@ -25,6 +25,9 @@ import { useCallback } from '@wordpress/element';
export default {
component: Elevation,
title: 'Components (Experimental)/Elevation',
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const ElevationWrapper = ( { children } ) => (
diff --git a/packages/components/src/external-link/stories/index.js b/packages/components/src/external-link/stories/index.js
index 82cc030f968820..ded0b1f3d8373b 100644
--- a/packages/components/src/external-link/stories/index.js
+++ b/packages/components/src/external-link/stories/index.js
@@ -7,7 +7,13 @@ import { text } from '@storybook/addon-knobs';
*/
import ExternalLink from '../';
-export default { title: 'Components/ExternalLink', component: ExternalLink };
+export default {
+ title: 'Components/ExternalLink',
+ component: ExternalLink,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
export const _default = () => {
const title = text( 'children', 'WordPress' );
diff --git a/packages/components/src/font-size-picker/stories/index.js b/packages/components/src/font-size-picker/stories/index.js
index 050ea47aa851de..aebfcfd422b772 100644
--- a/packages/components/src/font-size-picker/stories/index.js
+++ b/packages/components/src/font-size-picker/stories/index.js
@@ -16,6 +16,9 @@ import FontSizePicker from '../';
export default {
title: 'Components/FontSizePicker',
component: FontSizePicker,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const FontSizePickerWithState = ( { initialValue, ...props } ) => {
diff --git a/packages/components/src/form-token-field/stories/index.js b/packages/components/src/form-token-field/stories/index.js
index 2bc3d1ef9f2a71..fd0e9791f59b84 100644
--- a/packages/components/src/form-token-field/stories/index.js
+++ b/packages/components/src/form-token-field/stories/index.js
@@ -16,6 +16,9 @@ import FormTokenField from '../';
export default {
title: 'Components/FormTokenField',
component: FormTokenField,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const continents = [
diff --git a/packages/components/src/gradient-picker/stories/index.js b/packages/components/src/gradient-picker/stories/index.js
index 30d719ce4bec35..0b15c04226a972 100644
--- a/packages/components/src/gradient-picker/stories/index.js
+++ b/packages/components/src/gradient-picker/stories/index.js
@@ -16,6 +16,9 @@ import GradientPicker from '../';
export default {
title: 'Components/GradientPicker',
component: GradientPicker,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const GradientPickerWithState = ( props ) => {
diff --git a/packages/components/src/grid/stories/index.js b/packages/components/src/grid/stories/index.js
index 0d7b5c29b0563f..76abdf00cf27da 100644
--- a/packages/components/src/grid/stories/index.js
+++ b/packages/components/src/grid/stories/index.js
@@ -12,6 +12,9 @@ import { Grid } from '..';
export default {
component: Grid,
title: 'Components (Experimental)/Grid',
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const Item = ( props ) => (
diff --git a/packages/components/src/guide/stories/index.js b/packages/components/src/guide/stories/index.js
index cae514e84107ad..6daea82d72f61c 100644
--- a/packages/components/src/guide/stories/index.js
+++ b/packages/components/src/guide/stories/index.js
@@ -15,7 +15,13 @@ import { useState } from '@wordpress/element';
import Button from '../../button';
import Guide from '../';
-export default { title: 'Components/Guide', component: Guide };
+export default {
+ title: 'Components/Guide',
+ component: Guide,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
const ModalExample = ( { numberOfPages, ...props } ) => {
const [ isOpen, setOpen ] = useState( false );
diff --git a/packages/components/src/icon/stories/index.js b/packages/components/src/icon/stories/index.js
index 06d6f6c4d9bc49..4ade0384e6e261 100644
--- a/packages/components/src/icon/stories/index.js
+++ b/packages/components/src/icon/stories/index.js
@@ -14,7 +14,13 @@ import { wordpress } from '@wordpress/icons';
*/
import Icon from '../';
-export default { title: 'Components/Icon', component: Icon };
+export default {
+ title: 'Components/Icon',
+ component: Icon,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
const IconSizeLabel = ( { size } ) => (
{ size }px
diff --git a/packages/components/src/input-control/stories/index.js b/packages/components/src/input-control/stories/index.js
index 4e170267dea5ba..2a0d088f700650 100644
--- a/packages/components/src/input-control/stories/index.js
+++ b/packages/components/src/input-control/stories/index.js
@@ -16,6 +16,9 @@ import InputControl from '../';
export default {
title: 'Components/InputControl',
component: InputControl,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
function Example() {
diff --git a/packages/components/src/item-group/stories/index.js b/packages/components/src/item-group/stories/index.js
index 6be6717e1f9ae8..2ae503630345dc 100644
--- a/packages/components/src/item-group/stories/index.js
+++ b/packages/components/src/item-group/stories/index.js
@@ -26,6 +26,9 @@ import { ZStack } from '../../z-stack';
export default {
component: ItemGroup,
title: 'Components (Experimental)/ItemGroup',
+ parameters: {
+ knobs: { disabled: false },
+ },
};
// Using `unset` instead of `undefined` as Storybook seems to sometimes pass an
diff --git a/packages/components/src/modal/stories/index.js b/packages/components/src/modal/stories/index.js
index f08a08156efea2..862b5f05f6fc09 100644
--- a/packages/components/src/modal/stories/index.js
+++ b/packages/components/src/modal/stories/index.js
@@ -16,7 +16,13 @@ import Modal from '../';
import { useState } from '@wordpress/element';
import { wordpress } from '@wordpress/icons';
-export default { title: 'Components/Modal', component: Modal };
+export default {
+ title: 'Components/Modal',
+ component: Modal,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
const ModalExample = ( props ) => {
const [ isOpen, setOpen ] = useState( false );
diff --git a/packages/components/src/notice/stories/index.js b/packages/components/src/notice/stories/index.js
index 598bc420fbf950..646fe070fea947 100644
--- a/packages/components/src/notice/stories/index.js
+++ b/packages/components/src/notice/stories/index.js
@@ -11,6 +11,9 @@ import Notice from '../';
export default {
title: 'Components/Notice',
component: Notice,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
export const _default = () => {
diff --git a/packages/components/src/number-control/stories/index.js b/packages/components/src/number-control/stories/index.js
index c7bb15b41e80d0..42fb620217ee12 100644
--- a/packages/components/src/number-control/stories/index.js
+++ b/packages/components/src/number-control/stories/index.js
@@ -16,6 +16,9 @@ import NumberControl from '../';
export default {
title: 'Components/NumberControl',
component: NumberControl,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
function Example() {
diff --git a/packages/components/src/panel/stories/index.js b/packages/components/src/panel/stories/index.js
index 03674251dc6a04..7eb8ff5002ba72 100644
--- a/packages/components/src/panel/stories/index.js
+++ b/packages/components/src/panel/stories/index.js
@@ -15,7 +15,13 @@ import PanelBody from '../body';
*/
import { wordpress } from '@wordpress/icons';
-export default { title: 'Components/Panel', component: Panel };
+export default {
+ title: 'Components/Panel',
+ component: Panel,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
export const _default = () => {
const bodyTitle = text( 'Body Title', 'My Block Settings' );
diff --git a/packages/components/src/placeholder/stories/index.js b/packages/components/src/placeholder/stories/index.js
index 171b68860a2d60..20f80f3ee0e47a 100644
--- a/packages/components/src/placeholder/stories/index.js
+++ b/packages/components/src/placeholder/stories/index.js
@@ -9,7 +9,13 @@ import { boolean, text } from '@storybook/addon-knobs';
import Placeholder from '../';
import TextControl from '../../text-control';
-export default { title: 'Components/Placeholder', component: Placeholder };
+export default {
+ title: 'Components/Placeholder',
+ component: Placeholder,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
export const _default = () => {
const icon = text( 'Icon', 'smiley' );
diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js
index 3986a5bad8ec4e..4c163f2e5ccb7f 100644
--- a/packages/components/src/popover/stories/index.js
+++ b/packages/components/src/popover/stories/index.js
@@ -15,7 +15,13 @@ import { DraggableWrapper } from './_utils';
import Popover from '../';
import Button from '../../button';
-export default { title: 'Components/Popover', component: Popover };
+export default {
+ title: 'Components/Popover',
+ component: Popover,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
export const _default = () => {
const show = boolean( 'Example: Show', true );
diff --git a/packages/components/src/range-control/stories/index.js b/packages/components/src/range-control/stories/index.js
index febc98b4c8d809..d6b2e50e3a502a 100644
--- a/packages/components/src/range-control/stories/index.js
+++ b/packages/components/src/range-control/stories/index.js
@@ -16,7 +16,13 @@ import { wordpress } from '@wordpress/icons';
import RangeControl from '../index';
import { COLORS } from '../../utils';
-export default { title: 'Components/RangeControl', component: RangeControl };
+export default {
+ title: 'Components/RangeControl',
+ component: RangeControl,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
const RangeControlWithState = ( props ) => {
const initialValue = props.value === undefined ? 5 : props.value;
diff --git a/packages/components/src/resizable-box/stories/index.js b/packages/components/src/resizable-box/stories/index.js
index d5dbe702bc72cf..5afd1f6af7705d 100644
--- a/packages/components/src/resizable-box/stories/index.js
+++ b/packages/components/src/resizable-box/stories/index.js
@@ -13,7 +13,13 @@ import ResizableBox from '../';
*/
import { useState } from '@wordpress/element';
-export default { title: 'Components/ResizableBox', component: ResizableBox };
+export default {
+ title: 'Components/ResizableBox',
+ component: ResizableBox,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
const Example = ( props ) => {
const [ attributes, setAttributes ] = useState( {
diff --git a/packages/components/src/scrollable/stories/index.js b/packages/components/src/scrollable/stories/index.js
index d04c37b516d472..6065e83d8dc5ae 100644
--- a/packages/components/src/scrollable/stories/index.js
+++ b/packages/components/src/scrollable/stories/index.js
@@ -14,6 +14,9 @@ import { Scrollable } from '../';
export default {
component: Scrollable,
title: 'Components (Experimental)/Scrollable',
+ parameters: {
+ knobs: { disabled: false },
+ },
};
export const _default = () => {
diff --git a/packages/components/src/search-control/stories/index.js b/packages/components/src/search-control/stories/index.js
index 2710542a5d6a25..9b769ce0958e89 100644
--- a/packages/components/src/search-control/stories/index.js
+++ b/packages/components/src/search-control/stories/index.js
@@ -16,6 +16,9 @@ import SearchControl from '../';
export default {
title: 'Components/SearchControl',
component: SearchControl,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
export const _default = () => {
diff --git a/packages/components/src/select-control/stories/index.js b/packages/components/src/select-control/stories/index.js
index 61959555429c8c..bd3cca9e67320d 100644
--- a/packages/components/src/select-control/stories/index.js
+++ b/packages/components/src/select-control/stories/index.js
@@ -16,6 +16,9 @@ import SelectControl from '..';
export default {
title: 'Components/SelectControl',
component: SelectControl,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const SelectControlWithState = ( props ) => {
diff --git a/packages/components/src/slot-fill/stories/index.js b/packages/components/src/slot-fill/stories/index.js
index 2af19ecf012c31..665ac82d8e22de 100644
--- a/packages/components/src/slot-fill/stories/index.js
+++ b/packages/components/src/slot-fill/stories/index.js
@@ -16,6 +16,9 @@ import { Slot, Fill, Provider } from '../';
export default {
title: 'Components/SlotFill',
component: Slot,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
export const _default = () => {
diff --git a/packages/components/src/snackbar/stories/index.js b/packages/components/src/snackbar/stories/index.js
index bf634c2131ebc3..e9a52252a39579 100644
--- a/packages/components/src/snackbar/stories/index.js
+++ b/packages/components/src/snackbar/stories/index.js
@@ -8,7 +8,13 @@ import { text } from '@storybook/addon-knobs';
*/
import Snackbar from '../';
-export default { title: 'Components/Snackbar', component: Snackbar };
+export default {
+ title: 'Components/Snackbar',
+ component: Snackbar,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
export const _default = () => {
const content = text(
diff --git a/packages/components/src/spacer/stories/index.js b/packages/components/src/spacer/stories/index.js
index 230b5d1f298a8e..02ab9c8c704c23 100644
--- a/packages/components/src/spacer/stories/index.js
+++ b/packages/components/src/spacer/stories/index.js
@@ -14,6 +14,9 @@ import { Spacer } from '..';
export default {
component: Spacer,
title: 'Components (Experimental)/Spacer',
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const PROPS = [
diff --git a/packages/components/src/surface/stories/index.js b/packages/components/src/surface/stories/index.js
index ae514113374a80..463b5f29fddc82 100644
--- a/packages/components/src/surface/stories/index.js
+++ b/packages/components/src/surface/stories/index.js
@@ -12,6 +12,9 @@ import { Text } from '../../text';
export default {
component: Surface,
title: 'Components (Experimental)/Surface',
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const variantOptions = {
diff --git a/packages/components/src/tab-panel/stories/index.js b/packages/components/src/tab-panel/stories/index.js
index 3c15007f3aeadf..56108270134016 100644
--- a/packages/components/src/tab-panel/stories/index.js
+++ b/packages/components/src/tab-panel/stories/index.js
@@ -8,7 +8,13 @@ import { text } from '@storybook/addon-knobs';
*/
import TabPanel from '../';
-export default { title: 'Components/TabPanel', component: TabPanel };
+export default {
+ title: 'Components/TabPanel',
+ component: TabPanel,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
export const _default = () => {
return (
diff --git a/packages/components/src/text-control/stories/index.js b/packages/components/src/text-control/stories/index.js
index 4d7163faff5450..67614188e902dc 100644
--- a/packages/components/src/text-control/stories/index.js
+++ b/packages/components/src/text-control/stories/index.js
@@ -16,6 +16,9 @@ import TextControl from '../';
export default {
title: 'Components/TextControl',
component: TextControl,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const TextControlWithState = ( props ) => {
diff --git a/packages/components/src/text-highlight/stories/index.js b/packages/components/src/text-highlight/stories/index.js
index 4e788b0c3c78a5..eb4e3b6590995f 100644
--- a/packages/components/src/text-highlight/stories/index.js
+++ b/packages/components/src/text-highlight/stories/index.js
@@ -8,7 +8,13 @@ import { text } from '@storybook/addon-knobs';
*/
import TextHighlight from '../';
-export default { title: 'Components/TextHighlight', component: TextHighlight };
+export default {
+ title: 'Components/TextHighlight',
+ component: TextHighlight,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
export const _default = () => {
const textToMatch = text(
diff --git a/packages/components/src/textarea-control/stories/index.js b/packages/components/src/textarea-control/stories/index.js
index 64f0d140c6d7c0..6d971e580f0509 100644
--- a/packages/components/src/textarea-control/stories/index.js
+++ b/packages/components/src/textarea-control/stories/index.js
@@ -16,6 +16,9 @@ import TextareaControl from '../';
export default {
title: 'Components/TextareaControl',
component: TextareaControl,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const TextareaControlWithState = ( props ) => {
diff --git a/packages/components/src/tip/stories/index.js b/packages/components/src/tip/stories/index.js
index 19c0f2d0608c65..189d014c2f44ad 100644
--- a/packages/components/src/tip/stories/index.js
+++ b/packages/components/src/tip/stories/index.js
@@ -8,7 +8,13 @@ import { text } from '@storybook/addon-knobs';
*/
import Tip from '../';
-export default { title: 'Components/Tip', component: Tip };
+export default {
+ title: 'Components/Tip',
+ component: Tip,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
export const _default = () => {
const tipText = text( 'Text', 'An example tip' );
diff --git a/packages/components/src/toggle-control/stories/index.js b/packages/components/src/toggle-control/stories/index.js
index e006b68bc1a38c..b4b49b4e31dd9f 100644
--- a/packages/components/src/toggle-control/stories/index.js
+++ b/packages/components/src/toggle-control/stories/index.js
@@ -13,7 +13,13 @@ import { useState } from '@wordpress/element';
*/
import ToggleControl from '../';
-export default { title: 'Components/ToggleControl', component: ToggleControl };
+export default {
+ title: 'Components/ToggleControl',
+ component: ToggleControl,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
const ToggleControlWithState = ( {
helpTextChecked,
diff --git a/packages/components/src/toggle-group-control/stories/index.js b/packages/components/src/toggle-group-control/stories/index.js
index 3ca2b7ea602eb2..b6b05de08bb475 100644
--- a/packages/components/src/toggle-group-control/stories/index.js
+++ b/packages/components/src/toggle-group-control/stories/index.js
@@ -18,6 +18,9 @@ import Button from '../../button';
export default {
component: ToggleGroupControl,
title: 'Components/ToggleGroupControl',
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const KNOBS_GROUPS = {
diff --git a/packages/components/src/toolbar-button/stories/index.js b/packages/components/src/toolbar-button/stories/index.js
index 18818224a85a38..b24fafe0319874 100644
--- a/packages/components/src/toolbar-button/stories/index.js
+++ b/packages/components/src/toolbar-button/stories/index.js
@@ -14,7 +14,13 @@ import { wordpress } from '@wordpress/icons';
import { Toolbar } from '../../';
import ToolbarButton from '../';
-export default { title: 'Components/ToolbarButton', component: ToolbarButton };
+export default {
+ title: 'Components/ToolbarButton',
+ component: ToolbarButton,
+ parameters: {
+ knobs: { disabled: false },
+ },
+};
export const _default = () => {
const label = text( 'Label', 'This is an example label.' );
diff --git a/packages/components/src/tooltip/stories/index.js b/packages/components/src/tooltip/stories/index.js
index a15588c264ca2a..8685d6ecbe02eb 100644
--- a/packages/components/src/tooltip/stories/index.js
+++ b/packages/components/src/tooltip/stories/index.js
@@ -17,6 +17,9 @@ import Tooltip from '../';
export default {
title: 'Components/ToolTip',
component: Tooltip,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
export const _default = () => {
diff --git a/packages/components/src/tree-select/stories/index.js b/packages/components/src/tree-select/stories/index.js
index c4f299bde2b4cf..7a1e07c0f2a981 100644
--- a/packages/components/src/tree-select/stories/index.js
+++ b/packages/components/src/tree-select/stories/index.js
@@ -16,6 +16,9 @@ import TreeSelect from '../';
export default {
title: 'Components/TreeSelect',
component: TreeSelect,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const TreeSelectWithState = ( props ) => {
diff --git a/packages/components/src/truncate/stories/index.js b/packages/components/src/truncate/stories/index.js
index 0417514d068414..55dd719bf14bc5 100644
--- a/packages/components/src/truncate/stories/index.js
+++ b/packages/components/src/truncate/stories/index.js
@@ -11,6 +11,9 @@ import { Truncate } from '..';
export default {
component: Truncate,
title: 'Components (Experimental)/Truncate',
+ parameters: {
+ knobs: { disabled: false },
+ },
};
export const _default = () => {
diff --git a/packages/components/src/unit-control/stories/index.js b/packages/components/src/unit-control/stories/index.js
index 2605bc4b4c03b9..de4bdfc52a4fee 100644
--- a/packages/components/src/unit-control/stories/index.js
+++ b/packages/components/src/unit-control/stories/index.js
@@ -18,6 +18,9 @@ import { CSS_UNITS } from '../utils';
export default {
title: 'Components/UnitControl',
component: UnitControl,
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const ControlWrapperView = styled.div`
diff --git a/packages/components/src/z-stack/stories/index.js b/packages/components/src/z-stack/stories/index.js
index 49cacc95b9c131..04685fdf9dae42 100644
--- a/packages/components/src/z-stack/stories/index.js
+++ b/packages/components/src/z-stack/stories/index.js
@@ -14,6 +14,9 @@ import { ZStack } from '..';
export default {
component: ZStack,
title: 'Components (Experimental)/ZStack',
+ parameters: {
+ knobs: { disabled: false },
+ },
};
const Avatar = ( { backgroundColor } ) => {
diff --git a/storybook/main.js b/storybook/main.js
index 4aa2e1865ffc2c..faba3f05594960 100644
--- a/storybook/main.js
+++ b/storybook/main.js
@@ -40,7 +40,8 @@ module.exports = {
name: '@storybook/addon-docs',
options: { configureJSX: true },
},
- '@storybook/addon-knobs',
+ '@storybook/addon-controls',
+ '@storybook/addon-knobs', // deprecated, new stories should use addon-controls
'@storybook/addon-storysource',
'@storybook/addon-viewport',
'@storybook/addon-a11y',
diff --git a/storybook/preview.js b/storybook/preview.js
index cf9ba69d20c17c..58ad450bd011cd 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -20,3 +20,11 @@ export const globalTypes = {
};
export const decorators = [ WithRTL ];
+
+export const parameters = {
+ knobs: {
+ // Knobs are deprecated, and new stories should use addon-controls.
+ // Will be enabled on a per-story basis until migration is complete.
+ disabled: true,
+ },
+};