From 897f09fd1cc05b6d6499afb7e37cf5edc6b50609 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Sat, 16 Jul 2022 22:57:23 +0200 Subject: [PATCH 1/3] docs(addon-controls): custom matchers are no longer default A PR at https://github.com/storybookjs/storybook/pull/14182 removed the default custom regex matchers for colors and dates Controls, and instead added them to the generated output from the CLI. However the docs don't reflect this change, and felt quite confusing for me working in a project that didn't use a recent version of the CLI, and therefore didn't have the "default" matchers from the CLI. I've tried to change the wording to reflect that they are only "defaults" if the reader actually sees them in the `.storybook/preview.js` file. I'm open to inputs on wording, or basically anything. --- docs/essentials/controls.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index 0fa30d0f92e1..ee58565ec658 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -84,14 +84,14 @@ This replaces the input with a radio group for a more intuitive experience. ## Custom control type matchers -For a few types, Controls will automatically infer them by using [regex](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp). You can change the matchers for a regex that suits you better. +For a few types, Controls can automatically be infered with [regex](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp). If you've used the Storybook CLI to setup the configuration it will automatically have created the following defaults in `.storybook/preview.js`: | Data type | Default regex | Description | | :-------: | :-----------------------: | :-------------------------------------------------------: | | **color** | `/(background\|color)$/i` | Will display a color picker UI for the args that match it | | **date** | `/Date$/` | Will display a date picker UI for the args that match it | -To do so, use the `matchers` property in the `controls` parameter: +If you haven't used the CLI to setup the configuration, or if you want to define your own patterns, use the `matchers` property in the `controls` parameter: From 8cc06acecd282603827489e934c844a6f22af4a2 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Sat, 16 Jul 2022 23:19:51 +0200 Subject: [PATCH 2/3] Fix regex typo --- docs/essentials/controls.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index ee58565ec658..5d35a0ed60b8 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -88,7 +88,7 @@ For a few types, Controls can automatically be infered with [regex](https://deve | Data type | Default regex | Description | | :-------: | :-----------------------: | :-------------------------------------------------------: | -| **color** | `/(background\|color)$/i` | Will display a color picker UI for the args that match it | +| **color** | `/(background|color)$/i` | Will display a color picker UI for the args that match it | | **date** | `/Date$/` | Will display a date picker UI for the args that match it | If you haven't used the CLI to setup the configuration, or if you want to define your own patterns, use the `matchers` property in the `controls` parameter: From 9cb56e940fe278dec76db4f06f44facb37c9a5b4 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 23 Nov 2022 13:08:11 +0100 Subject: [PATCH 3/3] change wording --- docs/essentials/controls.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index 5d35a0ed60b8..03be56a5ead6 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -84,7 +84,7 @@ This replaces the input with a radio group for a more intuitive experience. ## Custom control type matchers -For a few types, Controls can automatically be infered with [regex](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp). If you've used the Storybook CLI to setup the configuration it will automatically have created the following defaults in `.storybook/preview.js`: +For a few types, Controls can automatically be inferred with [regex](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp). If you've used the Storybook CLI to setup your project it should have automatically created the following defaults in `.storybook/preview.js`: | Data type | Default regex | Description | | :-------: | :-----------------------: | :-------------------------------------------------------: |