Merge pull request #10559 from storybookjs/10517-vue-props-controls

Addon-docs: Props controls for Vue

addons/docs/src/frameworks/common/inferControls.ts

@@ -23,6 +23,7 @@ const inferControl = (argType: ArgType): Control => {
     }
     case 'function':
     case 'symbol':
+    case 'void':
       return null;
     default:
       return { type: 'object' };

addons/docs/src/frameworks/vue/extractArgTypes.ts

@@ -1,5 +1,6 @@
 import { ArgTypes } from '@storybook/api';
 import { ArgTypesExtractor, hasDocgen, extractComponentProps } from '../../lib/docgen';
+import { convert } from '../../lib/sbtypes';
 import { trimQuotes } from '../../lib/sbtypes/utils';
 
 const SECTIONS = ['props', 'events', 'slots'];
@@ -13,8 +14,9 @@ export const extractArgTypes: ArgTypesExtractor = (component) => {
   const results: ArgTypes = {};
   SECTIONS.forEach((section) => {
     const props = extractComponentProps(component, section);
-    props.forEach(({ propDef, jsDocTags }) => {
-      const { name, sbType, type, description, defaultValue, required } = propDef;
+    props.forEach(({ propDef, docgenInfo, jsDocTags }) => {
+      const { name, type, description, defaultValue, required } = propDef;
+      const sbType = section === 'props' ? convert(docgenInfo) : { name: 'void' };
       results[name] = {
         name,
         description,

addons/docs/src/lib/sbtypes/proptypes/convert.ts

@@ -20,6 +20,7 @@ export const convert = (type: PTType): SBType | any => {
     case 'func':
       return { ...base, name: 'function' };
     case 'bool':
+    case 'boolean':
       return { ...base, name: 'boolean' };
     case 'arrayOf':
     case 'array':

examples/vue-kitchen-sink/.storybook/preview.js

@@ -1,4 +1,3 @@
-import { addParameters } from '@storybook/vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
 
@@ -7,8 +6,9 @@ import MyButton from '../src/stories/Button.vue';
 Vue.component('my-button', MyButton);
 Vue.use(Vuex);
 
-addParameters({
+export const parameters = {
+  passArgsFirst: true,
   docs: {
     iframeHeight: '60px',
   },
-});
+};

examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot

@@ -5,9 +5,6 @@ exports[`Storyshots Core/Parameters passed to story 1`] = `
   Parameters are 
   <pre>
     {
-  "docs": {
-    "iframeHeight": "60px"
-  },
   "globalParameter": "globalParameter",
   "framework": "vue",
   "chapterParameter": "chapterParameter",

examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot

@@ -48,9 +48,6 @@ exports[`Storyshots Custom/Decorator for Vue With Data 1`] = `
   "name": "With Data",
   "story": "With Data",
   "parameters": {
-    "docs": {
-      "iframeHeight": "60px"
-    },
     "globalParameter": "globalParameter",
     "framework": "vue",
     "__id": "custom-decorator-for-vue--with-data"

examples/vue-kitchen-sink/src/stories/components/__snapshots__/button.stories.storyshot

@@ -3,7 +3,7 @@
 exports[`Storyshots Button Rounded 1`] = `
 <button
   class="button rounded"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
+  style="color: rgb(255, 0, 0); border-color: #f00;"
 >
   A Button with rounded edges!
 </button>

examples/vue-kitchen-sink/src/stories/components/button.stories.js

@@ -5,10 +5,19 @@ export default {
   component: MyButton,
 };
 
-export const Rounded = () => ({
+export const Rounded = (args) => ({
   components: { MyButton },
-  template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
+  template: '<my-button :color="color" :rounded="rounded">A Button with rounded edges</my-button>',
+  data() {
+    return args;
+  },
 });
+Rounded.story = {
+  argTypes: {
+    rounded: { defaultValue: true },
+    color: { control: { type: 'color' }, defaultValue: '#f00' },
+  },
+};
 
 export const Square = () => ({
   components: { MyButton },