docs(addon-controls): add example usage of include/exclude

docs/essentials/controls.md

@@ -232,7 +232,7 @@ And here's what the resulting UI looks like:
 
 ### Disable controls for specific properties
 
-Asides from the features already documented here. Controls can also be disabled for individual properties.
+Aside from the features already documented here, Controls can also be disabled for individual properties.
 
 Suppose you want to disable Controls for a property called `foo` in a component's story. The following example illustrates how:
 
@@ -259,10 +259,10 @@ Resulting in the following change in Storybook UI:
 The previous example also removed the prop documentation from the table. In some cases this is fine, however sometimes you might want to still render the prop documentation but without a control. The following example illustrates how:
 
 <CodeSnippets
-  paths={[
-    'common/component-story-disable-controls-alt.js.mdx',
-    'common/component-story-disable-controls-alt.mdx.mdx'
-  ]}
+paths={[
+'common/component-story-disable-controls-alt.js.mdx',
+'common/component-story-disable-controls-alt.mdx.mdx'
+]}
 />
 
 <div class="aside">
@@ -284,3 +284,22 @@ If you don't plan to handle the control args inside your Story, you can remove t
 />
 
 <!-- prettier-ignore-end -->
+
+## Filtering controls
+
+In some cases, you may want to either only present a few controls in the controls panel, or present all controls except a small set.
+
+To make this possible, you can use optional `include` and `exclude` configuration fields in the `controls` parameter, which can be set to either an array of strings, or a regular expression.
+
+Consider the following story snippets:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+paths={[
+'common/component-story-disable-controls-regex.js.mdx',
+'common/component-story-disable-controls-regex.mdx.mdx'
+]}
+/>
+
+<!-- prettier-ignore-end -->

docs/snippets/common/component-story-disable-controls-regex.js.mdx

@@ -0,0 +1,15 @@
+```js
+// YourComponent.stories.js | YourComponent.stories.ts
+
+ArrayInclude = Template.bind({})
+ArrayInclude.parameters = { controls: { include: ['foo', 'bar'] } };
+
+RegexInclude = Template.bind({})
+RegexInclude.parameters = { controls: { include: /^hello*/ } };
+
+ArrayExclude = Template.bind({})
+ArrayExclude.parameters = { controls: { exclude: ['foo', 'bar'] } };
+
+RegexExclude = Template.bind({})
+RegexExclude.parameters = { controls: { exclude: /^hello*/ } };
+```

docs/snippets/common/component-story-disable-controls-regex.mdx.mdx

@@ -0,0 +1,18 @@
+```md
+<!--- YourComponent.stories.mdx -->
+<Story name="Array Include" parameters={{ controls: { include: ['foo', 'bar'] } }}>
+  {Template.bind({})}
+</Story>
+
+<Story name="Regex Include" parameters={{ controls: { include: /^hello*/ } }}>
+  {Template.bind({})}
+</Story>
+
+<Story name="Array Exclude" parameters={{ controls: { exclude: ['foo', 'bar'] } }}>
+  {Template.bind({})}
+</Story>
+
+<Story name="Regex Exclude" parameters={{ controls: { exclude: /^hello*/ } }}>
+  {Template.bind({})}
+</Story>
+```