chore: Bump storybook to 6.2 (#32638)

* chore(grafanaui): bump storybook to 6.2, remove nohoist babel conflict hack

* chore(grafanaui): update storybook react doc gen defaults

* feat(grafanaui): map public/img as storybook static path for images/icons

* refactor(grafanaui): remove storybook noopControl in favour of parameters.controls.exclude

* feat(grafanaui): add component for storybook docs theming

* chore(grafanaui): silence button docs react warnings

* chore(grafanaui): bump storybook to v6.2.3

* revert(grafanaui): remove test description param from legacy switch story

package.json

@@ -317,10 +317,7 @@
     ],
     "nohoist": [
       "**/@types/*",
-      "**/@types/*/**",
+      "**/@types/*/**"
-      "@storybook",
-      "**/@storybook",
-      "**/@storybook/**"
     ]
   },
   "_moduleAliases": {

packages/grafana-ui/.storybook/main.ts

@@ -12,12 +12,15 @@ if (process.env.NODE_ENV !== 'production') {
 module.exports = {
   stories: stories,
   addons: [
-    '@storybook/addon-docs',
+    {
-    '@storybook/addon-controls',
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+      },
+    },
     '@storybook/addon-knobs',
-    '@storybook/addon-actions',
-    'storybook-dark-mode/register',
     '@storybook/addon-storysource',
+    'storybook-dark-mode',
   ],
   reactOptions: {
     fastRefresh: true,
@@ -30,6 +33,7 @@ module.exports = {
       shouldExtractLiteralValuesFromEnum: true,
       shouldRemoveUndefinedFromOptional: true,
       propFilter: (prop: any) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+      savePropValueAsString: true,
     },
   },
   webpackFinal: async (config: any, { configType }: any) => {

packages/grafana-ui/.storybook/manager-head.html

@@ -1 +1 @@
-<link rel="icon" href="./fav32.png" />
+<link rel="icon" href="public/img/fav32.png" />

packages/grafana-ui/.storybook/preview.ts

@@ -16,6 +16,7 @@ import lightTheme from '../../../public/sass/grafana.light.scss';
 import darkTheme from '../../../public/sass/grafana.dark.scss';
 import { GrafanaLight, GrafanaDark } from './storybookTheme';
 import addons from '@storybook/addons';
+import { ThemedDocsContainer } from '../src/utils/storybook/ThemedDocsContainer';
 
 const handleThemeChange = (theme: any) => {
   if (theme !== 'light') {
@@ -35,14 +36,14 @@ addons.setConfig({
 export const decorators = [withTheme(handleThemeChange), withPaddedStory];
 
 export const parameters = {
-  info: {},
   docs: {
-    theme: GrafanaDark,
+    container: ThemedDocsContainer,
   },
   darkMode: {
     dark: GrafanaDark,
     light: GrafanaLight,
   },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   options: {
     showPanel: true,
     panelPosition: 'right',

packages/grafana-ui/.storybook/static/grafana_icon.svg

@@ -1,57 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="351px" height="365px" viewBox="0 0 351 365" style="enable-background:new 0 0 351 365;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:url(#SVGID_1_);}
-</style>
-<g id="Layer_1_1_">
-</g>
-<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="175.5" y1="30%" x2="175.5" y2="99%">
-	<stop  offset="0" style="stop-color:#F05A28"/>
-	<stop  offset="1" style="stop-color:#FBCA0A"/>
-</linearGradient>
-<path class="st0" d="M342,161.2c-0.6-6.1-1.6-13.1-3.6-20.9c-2-7.7-5-16.2-9.4-25c-4.4-8.8-10.1-17.9-17.5-26.8
-	c-2.9-3.5-6.1-6.9-9.5-10.2c5.1-20.3-6.2-37.9-6.2-37.9c-19.5-1.2-31.9,6.1-36.5,9.4c-0.8-0.3-1.5-0.7-2.3-1
-	c-3.3-1.3-6.7-2.6-10.3-3.7c-3.5-1.1-7.1-2.1-10.8-3c-3.7-0.9-7.4-1.6-11.2-2.2c-0.7-0.1-1.3-0.2-2-0.3
-	c-8.5-27.2-32.9-38.6-32.9-38.6c-27.3,17.3-32.4,41.5-32.4,41.5s-0.1,0.5-0.3,1.4c-1.5,0.4-3,0.9-4.5,1.3c-2.1,0.6-4.2,1.4-6.2,2.2
-	c-2.1,0.8-4.1,1.6-6.2,2.5c-4.1,1.8-8.2,3.8-12.2,6c-3.9,2.2-7.7,4.6-11.4,7.1c-0.5-0.2-1-0.4-1-0.4c-37.8-14.4-71.3,2.9-71.3,2.9
-	c-3.1,40.2,15.1,65.5,18.7,70.1c-0.9,2.5-1.7,5-2.5,7.5c-2.8,9.1-4.9,18.4-6.2,28.1c-0.2,1.4-0.4,2.8-0.5,4.2
-	C18.8,192.7,8.5,228,8.5,228c29.1,33.5,63.1,35.6,63.1,35.6c0,0,0.1-0.1,0.1-0.1c4.3,7.7,9.3,15,14.9,21.9c2.4,2.9,4.8,5.6,7.4,8.3
-	c-10.6,30.4,1.5,55.6,1.5,55.6c32.4,1.2,53.7-14.2,58.2-17.7c3.2,1.1,6.5,2.1,9.8,2.9c10,2.6,20.2,4.1,30.4,4.5
-	c2.5,0.1,5.1,0.2,7.6,0.1l1.2,0l0.8,0l1.6,0l1.6-0.1l0,0.1c15.3,21.8,42.1,24.9,42.1,24.9c19.1-20.1,20.2-40.1,20.2-44.4l0,0
-	c0,0,0-0.1,0-0.3c0-0.4,0-0.6,0-0.6l0,0c0-0.3,0-0.6,0-0.9c4-2.8,7.8-5.8,11.4-9.1c7.6-6.9,14.3-14.8,19.9-23.3
-	c0.5-0.8,1-1.6,1.5-2.4c21.6,1.2,36.9-13.4,36.9-13.4c-3.6-22.5-16.4-33.5-19.1-35.6l0,0c0,0-0.1-0.1-0.3-0.2
-	c-0.2-0.1-0.2-0.2-0.2-0.2c0,0,0,0,0,0c-0.1-0.1-0.3-0.2-0.5-0.3c0.1-1.4,0.2-2.7,0.3-4.1c0.2-2.4,0.2-4.9,0.2-7.3l0-1.8l0-0.9
-	l0-0.5c0-0.6,0-0.4,0-0.6l-0.1-1.5l-0.1-2c0-0.7-0.1-1.3-0.2-1.9c-0.1-0.6-0.1-1.3-0.2-1.9l-0.2-1.9l-0.3-1.9
-	c-0.4-2.5-0.8-4.9-1.4-7.4c-2.3-9.7-6.1-18.9-11-27.2c-5-8.3-11.2-15.6-18.3-21.8c-7-6.2-14.9-11.2-23.1-14.9
-	c-8.3-3.7-16.9-6.1-25.5-7.2c-4.3-0.6-8.6-0.8-12.9-0.7l-1.6,0l-0.4,0c-0.1,0-0.6,0-0.5,0l-0.7,0l-1.6,0.1c-0.6,0-1.2,0.1-1.7,0.1
-	c-2.2,0.2-4.4,0.5-6.5,0.9c-8.6,1.6-16.7,4.7-23.8,9c-7.1,4.3-13.3,9.6-18.3,15.6c-5,6-8.9,12.7-11.6,19.6c-2.7,6.9-4.2,14.1-4.6,21
-	c-0.1,1.7-0.1,3.5-0.1,5.2c0,0.4,0,0.9,0,1.3l0.1,1.4c0.1,0.8,0.1,1.7,0.2,2.5c0.3,3.5,1,6.9,1.9,10.1c1.9,6.5,4.9,12.4,8.6,17.4
-	c3.7,5,8.2,9.1,12.9,12.4c4.7,3.2,9.8,5.5,14.8,7c5,1.5,10,2.1,14.7,2.1c0.6,0,1.2,0,1.7,0c0.3,0,0.6,0,0.9,0c0.3,0,0.6,0,0.9-0.1
-	c0.5,0,1-0.1,1.5-0.1c0.1,0,0.3,0,0.4-0.1l0.5-0.1c0.3,0,0.6-0.1,0.9-0.1c0.6-0.1,1.1-0.2,1.7-0.3c0.6-0.1,1.1-0.2,1.6-0.4
-	c1.1-0.2,2.1-0.6,3.1-0.9c2-0.7,4-1.5,5.7-2.4c1.8-0.9,3.4-2,5-3c0.4-0.3,0.9-0.6,1.3-1c1.6-1.3,1.9-3.7,0.6-5.3
-	c-1.1-1.4-3.1-1.8-4.7-0.9c-0.4,0.2-0.8,0.4-1.2,0.6c-1.4,0.7-2.8,1.3-4.3,1.8c-1.5,0.5-3.1,0.9-4.7,1.2c-0.8,0.1-1.6,0.2-2.5,0.3
-	c-0.4,0-0.8,0.1-1.3,0.1c-0.4,0-0.9,0-1.2,0c-0.4,0-0.8,0-1.2,0c-0.5,0-1,0-1.5-0.1c0,0-0.3,0-0.1,0l-0.2,0l-0.3,0
-	c-0.2,0-0.5,0-0.7-0.1c-0.5-0.1-0.9-0.1-1.4-0.2c-3.7-0.5-7.4-1.6-10.9-3.2c-3.6-1.6-7-3.8-10.1-6.6c-3.1-2.8-5.8-6.1-7.9-9.9
-	c-2.1-3.8-3.6-8-4.3-12.4c-0.3-2.2-0.5-4.5-0.4-6.7c0-0.6,0.1-1.2,0.1-1.8c0,0.2,0-0.1,0-0.1l0-0.2l0-0.5c0-0.3,0.1-0.6,0.1-0.9
-	c0.1-1.2,0.3-2.4,0.5-3.6c1.7-9.6,6.5-19,13.9-26.1c1.9-1.8,3.9-3.4,6-4.9c2.1-1.5,4.4-2.8,6.8-3.9c2.4-1.1,4.8-2,7.4-2.7
-	c2.5-0.7,5.1-1.1,7.8-1.4c1.3-0.1,2.6-0.2,4-0.2c0.4,0,0.6,0,0.9,0l1.1,0l0.7,0c0.3,0,0,0,0.1,0l0.3,0l1.1,0.1
-	c2.9,0.2,5.7,0.6,8.5,1.3c5.6,1.2,11.1,3.3,16.2,6.1c10.2,5.7,18.9,14.5,24.2,25.1c2.7,5.3,4.6,11,5.5,16.9c0.2,1.5,0.4,3,0.5,4.5
-	l0.1,1.1l0.1,1.1c0,0.4,0,0.8,0,1.1c0,0.4,0,0.8,0,1.1l0,1l0,1.1c0,0.7-0.1,1.9-0.1,2.6c-0.1,1.6-0.3,3.3-0.5,4.9
-	c-0.2,1.6-0.5,3.2-0.8,4.8c-0.3,1.6-0.7,3.2-1.1,4.7c-0.8,3.1-1.8,6.2-3,9.3c-2.4,6-5.6,11.8-9.4,17.1
-	c-7.7,10.6-18.2,19.2-30.2,24.7c-6,2.7-12.3,4.7-18.8,5.7c-3.2,0.6-6.5,0.9-9.8,1l-0.6,0l-0.5,0l-1.1,0l-1.6,0l-0.8,0
-	c0.4,0-0.1,0-0.1,0l-0.3,0c-1.8,0-3.5-0.1-5.3-0.3c-7-0.5-13.9-1.8-20.7-3.7c-6.7-1.9-13.2-4.6-19.4-7.8
-	c-12.3-6.6-23.4-15.6-32-26.5c-4.3-5.4-8.1-11.3-11.2-17.4c-3.1-6.1-5.6-12.6-7.4-19.1c-1.8-6.6-2.9-13.3-3.4-20.1l-0.1-1.3l0-0.3
-	l0-0.3l0-0.6l0-1.1l0-0.3l0-0.4l0-0.8l0-1.6l0-0.3c0,0,0,0.1,0-0.1l0-0.6c0-0.8,0-1.7,0-2.5c0.1-3.3,0.4-6.8,0.8-10.2
-	c0.4-3.4,1-6.9,1.7-10.3c0.7-3.4,1.5-6.8,2.5-10.2c1.9-6.7,4.3-13.2,7.1-19.3c5.7-12.2,13.1-23.1,22-31.8c2.2-2.2,4.5-4.2,6.9-6.2
-	c2.4-1.9,4.9-3.7,7.5-5.4c2.5-1.7,5.2-3.2,7.9-4.6c1.3-0.7,2.7-1.4,4.1-2c0.7-0.3,1.4-0.6,2.1-0.9c0.7-0.3,1.4-0.6,2.1-0.9
-	c2.8-1.2,5.7-2.2,8.7-3.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.2,1.5-0.4,2.2-0.6c1.5-0.4,3-0.8,4.5-1.1c0.7-0.2,1.5-0.3,2.3-0.5
-	c0.8-0.2,1.5-0.3,2.3-0.5c0.8-0.1,1.5-0.3,2.3-0.4l1.1-0.2l1.2-0.2c0.8-0.1,1.5-0.2,2.3-0.3c0.9-0.1,1.7-0.2,2.6-0.3
-	c0.7-0.1,1.9-0.2,2.6-0.3c0.5-0.1,1.1-0.1,1.6-0.2l1.1-0.1l0.5-0.1l0.6,0c0.9-0.1,1.7-0.1,2.6-0.2l1.3-0.1c0,0,0.5,0,0.1,0l0.3,0
-	l0.6,0c0.7,0,1.5-0.1,2.2-0.1c2.9-0.1,5.9-0.1,8.8,0c5.8,0.2,11.5,0.9,17,1.9c11.1,2.1,21.5,5.6,31,10.3
-	c9.5,4.6,17.9,10.3,25.3,16.5c0.5,0.4,0.9,0.8,1.4,1.2c0.4,0.4,0.9,0.8,1.3,1.2c0.9,0.8,1.7,1.6,2.6,2.4c0.9,0.8,1.7,1.6,2.5,2.4
-	c0.8,0.8,1.6,1.6,2.4,2.5c3.1,3.3,6,6.6,8.6,10c5.2,6.7,9.4,13.5,12.7,19.9c0.2,0.4,0.4,0.8,0.6,1.2c0.2,0.4,0.4,0.8,0.6,1.2
-	c0.4,0.8,0.8,1.6,1.1,2.4c0.4,0.8,0.7,1.5,1.1,2.3c0.3,0.8,0.7,1.5,1,2.3c1.2,3,2.4,5.9,3.3,8.6c1.5,4.4,2.6,8.3,3.5,11.7
-	c0.3,1.4,1.6,2.3,3,2.1c1.5-0.1,2.6-1.3,2.6-2.8C342.6,170.4,342.5,166.1,342,161.2z"/>
-</svg>

packages/grafana-ui/.storybook/storybookTheme.ts

@@ -39,7 +39,7 @@ const createTheme = (theme: GrafanaTheme) => {
 
     brandTitle: 'Grafana UI',
     brandUrl: './',
-    brandImage: './grafana_icon.svg',
+    brandImage: 'public/img/grafana_icon.svg',
   });
 };
 

packages/grafana-ui/package.json

@@ -21,8 +21,8 @@
     "bundle": "rollup -c rollup.config.ts",
     "clean": "rimraf ./dist ./compiled",
     "docsExtract": "mkdir -p ../../reports/docs && api-extractor run 2>&1 | tee ../../reports/docs/$(basename $(pwd)).log",
-    "storybook": "start-storybook -p 9001 -c .storybook -s .storybook/static",
+    "storybook": "start-storybook -p 9001 -c .storybook -s ../../public/img:public/img",
-    "storybook:build": "build-storybook -o ./dist/storybook -c .storybook -s .storybook/static",
+    "storybook:build": "build-storybook -o ./dist/storybook -c .storybook -s ../../public/img:public/img",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -84,12 +84,11 @@
     "@rollup/plugin-commonjs": "16.0.0",
     "@rollup/plugin-image": "2.0.5",
     "@rollup/plugin-node-resolve": "10.0.0",
-    "@storybook/addon-controls": "6.1.15",
+    "@storybook/addon-essentials": "6.2.3",
-    "@storybook/addon-essentials": "6.1.15",
+    "@storybook/addon-knobs": "6.2.3",
-    "@storybook/addon-knobs": "6.1.15",
+    "@storybook/addon-storysource": "6.2.3",
-    "@storybook/addon-storysource": "6.1.15",
+    "@storybook/react": "6.2.3",
-    "@storybook/react": "6.1.15",
+    "@storybook/theming": "6.2.3",
-    "@storybook/theming": "6.1.15",
     "@types/react-router-dom": "^5.1.7",
     "@types/classnames": "2.2.7",
     "@types/common-tags": "^1.8.0",
@@ -117,7 +116,7 @@
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-typescript2": "0.29.0",
     "rollup-plugin-visualizer": "4.2.0",
-    "storybook-dark-mode": "1.0.4",
+    "storybook-dark-mode": "1.0.7",
     "ts-loader": "8.0.11",
     "typescript": "4.1.2",
     "webpack-filter-warnings-plugin": "1.2.1"

packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { Story, Meta } from '@storybook/react';
 import { BarGauge, BarGaugeDisplayMode } from '@grafana/ui';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
 import { Props } from './BarGauge';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -19,6 +18,19 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: [
+        'theme',
+        'field',
+        'value',
+        'display',
+        'orientation',
+        'text',
+        'onClick',
+        'className',
+        'alignmentFactors',
+      ],
+    },
   },
   args: {
     numeric: 70,
@@ -45,17 +57,8 @@ export default {
     height: { control: { type: 'range', min: 200, max: 800 } },
     threshold1Color: { control: 'color' },
     threshold2Color: { control: 'color' },
-    theme: NOOP_CONTROL,
-    field: NOOP_CONTROL,
-    value: NOOP_CONTROL,
-    display: NOOP_CONTROL,
-    orientation: NOOP_CONTROL,
-    text: NOOP_CONTROL,
-    onClick: NOOP_CONTROL,
-    className: NOOP_CONTROL,
-    alignmentFactors: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 interface StoryProps extends Partial<Props> {
   numeric: number;

packages/grafana-ui/src/components/BigValue/BigValue.story.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { Story, Meta } from '@storybook/react';
 import {
   BigValue,
   BigValueColorMode,
@@ -11,7 +11,6 @@ import {
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './BigValue.mdx';
 import { useTheme } from '../../themes';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { ArrayVector, FieldSparkline, FieldType } from '@grafana/data';
 
 export default {
@@ -25,6 +24,9 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['value', 'sparkline', 'onClick', 'className', 'alignmentFactors', 'text', 'count', 'theme'],
+    },
   },
   argTypes: {
     width: { control: { type: 'range', min: 200, max: 800 } },
@@ -45,16 +47,8 @@ export default {
       },
     },
     color: { control: 'color' },
-    value: NOOP_CONTROL,
-    sparkline: NOOP_CONTROL,
-    onClick: NOOP_CONTROL,
-    className: NOOP_CONTROL,
-    alignmentFactors: NOOP_CONTROL,
-    text: NOOP_CONTROL,
-    count: NOOP_CONTROL,
-    theme: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 interface StoryProps extends Partial<Props> {
   numeric: number;

packages/grafana-ui/src/components/Button/Button.mdx

@@ -13,13 +13,13 @@ If there is no primary action, all `Button` components should be secondary.
 
 <Preview>
   <div>
-    <Button variant="primary" size="sm" renderAs="button" style={{ margin: '5px' }}>
+    <Button variant="primary" size="sm" style={{ margin: '5px' }}>
       Small
     </Button>
-    <Button variant="primary" size="md" renderAs="button" style={{ margin: '5px' }}>
+    <Button variant="primary" size="md" style={{ margin: '5px' }}>
       Medium
     </Button>
-    <Button variant="primary" size="lg" renderAs="button" style={{ margin: '5px' }}>
+    <Button variant="primary" size="lg" style={{ margin: '5px' }}>
       Large
     </Button>
   </div>
@@ -34,13 +34,13 @@ The secondary `Button` is the default button style and can trigger various actio
 
 <Preview>
   <div>
-    <Button variant="secondary" size="sm" renderAs="button" style={{ margin: '5px' }}>
+    <Button variant="secondary" size="sm" style={{ margin: '5px' }}>
       Small
     </Button>
-    <Button variant="secondary" size="md" renderAs="button" style={{ margin: '5px' }}>
+    <Button variant="secondary" size="md" style={{ margin: '5px' }}>
       Medium
     </Button>
-    <Button variant="secondary" size="lg" renderAs="button" style={{ margin: '5px' }}>
+    <Button variant="secondary" size="lg" style={{ margin: '5px' }}>
       Large
     </Button>
   </div>
@@ -52,13 +52,13 @@ Used for triggering a removing or deleting action. Because of its dominant color
 
 <Preview>
   <div>
-    <Button variant="destructive" size="sm" renderAs="button" style={{ margin: '5px' }}>
+    <Button variant="destructive" size="sm" style={{ margin: '5px' }}>
       Small
     </Button>
-    <Button variant="destructive" size="md" renderAs="button" style={{ margin: '5px' }}>
+    <Button variant="destructive" size="md" style={{ margin: '5px' }}>
       Medium
     </Button>
-    <Button variant="destructive" size="lg" renderAs="button" style={{ margin: '5px' }}>
+    <Button variant="destructive" size="lg" style={{ margin: '5px' }}>
       Large
     </Button>
   </div>
@@ -70,13 +70,13 @@ Used for hyperlinks.
 
 <Preview>
   <div>
-    <Button href="/" variant="link" size="sm" renderAs="button" style={{ margin: '5px' }}>
+    <Button href="/" variant="link" size="sm" style={{ margin: '5px' }}>
       Small
     </Button>
-    <Button href="/" variant="link" size="md" renderAs="button" style={{ margin: '5px' }}>
+    <Button href="/" variant="link" size="md" style={{ margin: '5px' }}>
       Medium
     </Button>
-    <Button href="/" variant="link" size="lg" renderAs="button" style={{ margin: '5px' }}>
+    <Button href="/" variant="link" size="lg" style={{ margin: '5px' }}>
       Large
     </Button>
   </div>

packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { Story, Meta } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { ButtonCascader } from '@grafana/ui';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { ButtonCascaderProps } from './ButtonCascader';
 
 export default {
@@ -13,6 +12,9 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['className', 'value', 'fieldNames'],
+    },
   },
   args: {
     disabled: false,
@@ -32,11 +34,8 @@ export default {
   argTypes: {
     icon: { control: { type: 'select', options: ['plus', 'minus', 'table'] } },
     options: { control: 'object' },
-    className: NOOP_CONTROL,
-    value: NOOP_CONTROL,
-    fieldNames: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 const Template: Story<ButtonCascaderProps> = ({ children, ...args }) => {
   return <ButtonCascader {...args}>{children}</ButtonCascader>;

packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 import { CallToActionCard, CallToActionCardProps } from './CallToActionCard';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
+import { Story, Meta } from '@storybook/react';
-import { Story } from '@storybook/react';
 import { Button } from '../Button/Button';
 import { action } from '@storybook/addon-actions';
 
@@ -13,14 +12,14 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['className', 'callToActionElement', 'theme'],
+    },
   },
   argTypes: {
     Element: { control: { type: 'select', options: ['button', 'custom'] } },
-    className: NOOP_CONTROL,
-    callToActionElement: NOOP_CONTROL,
-    theme: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 interface StoryProps extends Partial<CallToActionCardProps> {
   Element: string;

packages/grafana-ui/src/components/Cascader/Cascader.story.tsx

@@ -1,6 +1,5 @@
-import { Story } from '@storybook/react';
+import { Story, Meta } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { Cascader } from '@grafana/ui';
 import { CascaderOption, CascaderProps } from './Cascader';
 import mdx from './Cascader.mdx';
@@ -43,6 +42,9 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['placeholder', 'initialValue', 'changeOnSelect'],
+    },
   },
   args: {
     onSelect,
@@ -50,11 +52,8 @@ export default {
   },
   argTypes: {
     width: { control: { type: 'range', min: 0, max: 70 } },
-    placeholder: NOOP_CONTROL,
-    initialValue: NOOP_CONTROL,
-    changeOnSelect: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 const Template: Story<CascaderProps> = (args) => <Cascader {...args} />;
 

packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
-import { Story } from '@storybook/react';
+import { Story, Meta } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { ClipboardButton, Props } from './ClipboardButton';
 import { Input } from '../Forms/Legacy/Input/Input';
 import mdx from './ClipboardButton.mdx';
@@ -17,15 +16,11 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['size', 'variant', 'icon', 'className', 'fullWidth'],
     },
-  argTypes: {
-    size: NOOP_CONTROL,
-    variant: NOOP_CONTROL,
-    icon: NOOP_CONTROL,
-    className: NOOP_CONTROL,
-    fullWidth: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 interface StoryProps extends Partial<Props> {
   inputText: string;

packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { SeriesColorPicker, ColorPicker } from '@grafana/ui';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { UseState } from '../../utils/storybook/UseState';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 import { ColorPickerProps } from './ColorPickerPopover';
@@ -21,16 +20,14 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['color', 'onChange', 'onColorChange'],
+    },
   },
   args: {
     enableNamedColors: false,
   },
-  argTypes: {
+} as Meta;
-    color: NOOP_CONTROL,
-    onChange: NOOP_CONTROL,
-    onColorChange: NOOP_CONTROL,
-  },
-};
 
 export const Basic: Story<ColorPickerProps> = ({ enableNamedColors }) => {
   return (

packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { NamedColorsPalette, NamedColorsPaletteProps } from './NamedColorsPalette';
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { UseState } from '../../utils/storybook/UseState';
 import mdx from './ColorPicker.mdx';
 
@@ -18,13 +17,14 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['theme', 'color'],
+    },
   },
   argTypes: {
     selectedColor: { control: { type: 'select', options: ['green', 'red', 'light-blue', 'yellow'] } },
-    theme: NOOP_CONTROL,
-    color: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 interface StoryProps extends Partial<NamedColorsPaletteProps> {
   selectedColor: string;

packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { ConfirmButton } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { action } from '@storybook/addon-actions';
 import { Button } from '../Button';
 import { DeleteButton } from './DeleteButton';
@@ -21,6 +20,9 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['className'],
+    },
   },
   args: {
     buttonText: 'Edit',
@@ -33,9 +35,8 @@ export default {
   argTypes: {
     confirmVariant: { control: { type: 'select' } },
     size: { control: { type: 'select' } },
-    className: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 interface StoryProps extends Partial<Props> {
   buttonText: string;

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { ConfirmModal } from '@grafana/ui';
 import mdx from './ConfirmModal.mdx';
 import { Props } from './ConfirmModal';
@@ -18,13 +17,14 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['isOpen', 'body'],
+    },
   },
   argTypes: {
     icon: { control: { type: 'select', options: ['exclamation-triangle', 'power', 'cog', 'lock'] } },
-    isOpen: NOOP_CONTROL,
-    body: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 const defaultActions = {
   onConfirm: () => {

packages/grafana-ui/src/components/Dropdown/ButtonSelect.story.internal.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 import { SelectableValue } from '@grafana/data';
 import { ButtonSelect } from './ButtonSelect';
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 
 export default {
   title: 'Forms/Select/ButtonSelect',
@@ -16,14 +15,11 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['className', 'options', 'value', 'tooltipContent'],
     },
-  argTypes: {
-    className: NOOP_CONTROL,
-    options: NOOP_CONTROL,
-    value: NOOP_CONTROL,
-    tooltipContent: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 export const Basic: Story = (args) => {
   const initialValue: SelectableValue<string> = { label: 'A label', value: 'A value' };

packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { FormField, Props } from './FormField';
 
@@ -12,6 +11,9 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['inputEl'],
+    },
   },
   args: {
     inputWidth: 20,
@@ -22,9 +24,8 @@ export default {
     inputWidth: { control: { type: 'range', min: 5, max: 30 } },
     labelWidth: { control: { type: 'range', min: 5, max: 30 } },
     tooltip: { control: { type: 'text' } },
-    inputEl: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 export const Basic: Story<Props> = (args) => {
   return <FormField {...args} />;

packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { FieldValidationMessage, FieldValidationMessageProps } from './FieldValidationMessage';
 import mdx from './FieldValidationMessage.mdx';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 
 export default {
   title: 'Forms/FieldValidationMessage',
@@ -14,6 +13,9 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['className'],
+    },
   },
   args: {
     horizontal: false,
@@ -21,9 +23,8 @@ export default {
   },
   argTypes: {
     children: { name: 'message' },
-    className: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 export const Basic: Story<FieldValidationMessageProps> = (args) => {
   return <FieldValidationMessage horizontal={args.horizontal}>{args.children}</FieldValidationMessage>;

packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx

@@ -3,9 +3,8 @@ import { zip, fromPairs } from 'lodash';
 
 import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory';
 import { Input } from './Input';
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { EventsWithValidation } from '../../../../utils';
-import { NOOP_CONTROL } from '../../../../utils/storybook/noopControl';
 
 export default {
   title: 'Forms/Legacy/Input',
@@ -15,6 +14,9 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['inputRef'],
+    },
   },
   argTypes: {
     validationEvents: {
@@ -24,9 +26,8 @@ export default {
       },
     },
     validation: { name: 'Validation regex (will do a partial match if you do not anchor it)' },
-    inputRef: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 const Wrapper: Story = (args) => {
   const [value, setValue] = useState('');

packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx

@@ -1,11 +1,10 @@
 import React, { useState, useCallback } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory';
 import { UseState } from '../../../../utils/storybook/UseState';
 import { SelectableValue } from '@grafana/data';
 import { Select, AsyncSelect as AsyncSelectComponent } from './Select';
-import { NOOP_CONTROL } from '../../../../utils/storybook/noopControl';
 
 export default {
   title: 'Forms/Legacy/Select',
@@ -15,29 +14,32 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: [
+        'className',
+        'menuPlacement',
+        'menuPosition',
+        'maxMenuHeight',
+        'minMenuHeight',
+        'maxVisibleValues',
+        'prefix',
+        'renderControl',
+        'value',
+        'tooltipContent',
+        'components',
+        'inputValue',
+        'id',
+        'inputId',
+        'defaultValue',
+        'loading',
+        'aria-label',
+      ],
+    },
   },
   argTypes: {
     width: { control: { type: 'range', min: 5, max: 30 } },
-    className: NOOP_CONTROL,
-    menuPlacement: NOOP_CONTROL,
-    menuPosition: NOOP_CONTROL,
-    maxMenuHeight: NOOP_CONTROL,
-    minMenuHeight: NOOP_CONTROL,
-    maxVisibleValues: NOOP_CONTROL,
-    prefix: NOOP_CONTROL,
-    renderControl: NOOP_CONTROL,
-    value: NOOP_CONTROL,
-    options: NOOP_CONTROL,
-    tooltipContent: NOOP_CONTROL,
-    components: NOOP_CONTROL,
-    inputValue: NOOP_CONTROL,
-    id: NOOP_CONTROL,
-    inputId: NOOP_CONTROL,
-    defaultValue: NOOP_CONTROL,
-    loading: NOOP_CONTROL,
-    'aria-label': NOOP_CONTROL,
   },
-};
+} as Meta;
 
 const initialValue: SelectableValue<string> = { label: 'A label', value: 'A value' };
 

packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.mdx

@@ -1,3 +0,0 @@
-# Switch
-
-A basic docs for Switch component

packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.story.internal.tsx

@@ -1,29 +1,20 @@
 import React, { useState } from 'react';
 
 import { Props, Switch } from './Switch';
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
-import mdx from './Switch.mdx';
-import { NOOP_CONTROL } from '../../../../utils/storybook/noopControl';
 
-const getStory = (title: string, component: any) => ({
+export default {
-  title,
+  title: 'Forms/Legacy/Switch',
+  component: Switch,
   parameters: {
-    component,
-    docs: {
-      page: mdx,
-    },
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['className', 'labelClass', 'switchClass'],
     },
-  argTypes: {
-    className: NOOP_CONTROL,
-    labelClass: NOOP_CONTROL,
-    switchClass: NOOP_CONTROL,
   },
-});
+} as Meta;
-
-export default getStory('Forms/Legacy/Switch', Switch);
 
 const SwitchWrapper: Story<Props> = ({ label, ...args }) => {
   const [checked, setChecked] = useState(false);

packages/grafana-ui/src/components/Forms/Legend.story.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 
 import { Legend } from '@grafana/ui';
 import mdx from './Legend.mdx';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 
 export default {
   title: 'Forms/Legend',
@@ -15,12 +14,14 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['description'],
+    },
   },
   argTypes: {
     children: { name: 'Label' },
-    description: NOOP_CONTROL,
   },
-};
+} as Meta;
 
 export const Basic: Story = (args) => {
   return <Legend>{args.children}</Legend>;

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.story.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import mdx from './RadioButtonGroup.mdx';
 import { RadioButtonGroup } from './RadioButtonGroup';
 import { Story } from '@storybook/react';
-import { NOOP_CONTROL } from '../../../utils/storybook/noopControl';
 
 export default {
   title: 'Forms/RadioButtonGroup',
@@ -14,6 +13,9 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['className', 'options', 'value'],
+    },
   },
   argTypes: {
     disabledOptions: {
@@ -21,9 +23,6 @@ export default {
       control: { type: 'select', options: ['', 'graphite', 'prometheus', 'elastic'] },
     },
     size: { control: { type: 'select' } },
-    className: NOOP_CONTROL,
-    options: NOOP_CONTROL,
-    value: NOOP_CONTROL,
   },
 };
 

packages/grafana-ui/src/components/Graph/Graph.story.tsx

@@ -6,7 +6,6 @@ import { Story } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { TooltipContentProps, TooltipMode } from '../Chart/Tooltip';
 import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { GraphProps } from './Graph';
 
 const series: GraphSeriesXY[] = [
@@ -86,6 +85,9 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['className', 'series', 'timeRange', 'ariaLabel'],
+    },
   },
   args: {
     series: series,
@@ -108,10 +110,6 @@ export default {
     width: { control: { type: 'range', min: 200, max: 800 } },
     height: { control: { type: 'range', min: 200, max: 800 } },
     lineWidth: { control: { type: 'range', min: 1, max: 10 } },
-    className: NOOP_CONTROL,
-    series: NOOP_CONTROL,
-    timeRange: NOOP_CONTROL,
-    ariaLabel: NOOP_CONTROL,
   },
 };
 

packages/grafana-ui/src/components/Graph/GraphWithLegend.story.tsx

@@ -5,7 +5,6 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { GraphWithLegend, GraphWithLegendProps } from './GraphWithLegend';
 import { LegendDisplayMode } from '../VizLegend/types';
 import { GraphSeriesXY, FieldType, ArrayVector, dateTime, FieldColorModeId } from '@grafana/data';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 
 export default {
   title: 'Visualizations/Graph/GraphWithLegend',
@@ -15,6 +14,9 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['className', 'series', 'timeRange', 'ariaLabel', 'legendDisplayMode'],
+    },
   },
   argTypes: {
     displayMode: { control: { type: 'radio', options: ['table', 'list', 'hidden'] } },
@@ -24,11 +26,6 @@ export default {
     width: { control: { type: 'range', min: 200, max: 800 } },
     height: { control: { type: 'range', min: 200, max: 800 } },
     lineWidth: { control: { type: 'range', min: 1, max: 10 } },
-    className: NOOP_CONTROL,
-    series: NOOP_CONTROL,
-    timeRange: NOOP_CONTROL,
-    ariaLabel: NOOP_CONTROL,
-    legendDisplayMode: NOOP_CONTROL,
   },
 };
 

packages/grafana-ui/src/components/GraphNG/GraphNG.story.tsx

@@ -6,7 +6,6 @@ import { LegendDisplayMode, LegendPlacement } from '../VizLegend/types';
 import { prepDataForStorybook } from '../../utils/storybook/data';
 import { useTheme } from '../../themes';
 import { Story } from '@storybook/react';
-import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 
 export default {
   title: 'Visualizations/GraphNG',
@@ -16,6 +15,9 @@ export default {
     knobs: {
       disable: true,
     },
+    controls: {
+      exclude: ['className', 'timeRange', 'data', 'legend', 'fields'],
+    },
   },
   argTypes: {
     legendDisplayMode: { control: { type: 'radio', options: ['table', 'list', 'hidden'] } },
@@ -23,11 +25,6 @@ export default {
     timeZone: { control: { type: 'radio', options: ['browser', 'utc'] } },
     width: { control: { type: 'range', min: 200, max: 800 } },
     height: { control: { type: 'range', min: 200, max: 800 } },
-    className: NOOP_CONTROL,
-    timeRange: NOOP_CONTROL,
-    data: NOOP_CONTROL,
-    legend: NOOP_CONTROL,
-    fields: NOOP_CONTROL,
   },
 };
 

packages/grafana-ui/src/utils/storybook/ThemedDocsContainer.tsx

@@ -0,0 +1,30 @@
+// This is a temporary workaround to allow theme switching storybook docs
+// see https://github.com/storybookjs/storybook/issues/10523 for further details
+import React from 'react';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+import { useDarkMode } from 'storybook-dark-mode';
+import { GrafanaLight, GrafanaDark } from '../../../.storybook/storybookTheme';
+
+type Props = {
+  context: any;
+};
+
+export const ThemedDocsContainer: React.FC<Props> = ({ children, context }) => {
+  const dark = useDarkMode();
+
+  return (
+    <DocsContainer
+      context={{
+        ...context,
+        parameters: {
+          ...context.parameters,
+          docs: {
+            theme: dark ? GrafanaDark : GrafanaLight,
+          },
+        },
+      }}
+    >
+      {children}
+    </DocsContainer>
+  );
+};

packages/grafana-ui/src/utils/storybook/noopControl.tsx

@@ -1 +0,0 @@
-export const NOOP_CONTROL = { control: { disable: true } };