Merge pull request #14200 from storybookjs/14056-fix-vue-string-defaults

Addon-docs/Vue: Fix string docgen
storybookjs · Mar 11, 2021 · f2125d8 · f2125d8
2 parents 276aa9b + c5b260a
commit f2125d8
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/addons/docs/src/lib/docgen/createPropDef.ts b/addons/docs/src/lib/docgen/createPropDef.ts
@@ -23,12 +23,17 @@ function createDefaultValue(
   type: DocgenType
 ): PropDefaultValue {
   if (defaultValue != null) {
-    const { value, computed } = defaultValue;
+    const { value, computed, func } = defaultValue;
+
 
     if (!isDefaultValueBlacklisted(value)) {
       // Work around a bug in `react-docgen-typescript-loader`, which returns 'string' for a string
       // default, instead of "'string'" -- which is incorrect (PR to RDT to follow)
-      if (typeof computed === 'undefined' && type.name === 'string') {
+      if (
+        typeof computed === 'undefined' &&
+        typeof func === 'undefined' &&
+        type.name === 'string'
+      ) {
         return createSummaryValue(JSON.stringify(value));
       }
 

diff --git a/addons/docs/src/lib/docgen/extractDocgenProps.test.ts b/addons/docs/src/lib/docgen/extractDocgenProps.test.ts
@@ -93,6 +93,25 @@ TypeSystems.forEach((x) => {
         expect(propDef.required).toBe(false);
         expect(propDef.defaultValue.summary).toBe('"Default"');
       });
+
+      it('should map defaults docgen info properly, vue', () => {
+        const component = createComponent({
+          ...createStringType(x),
+          description: 'Hey! Hey!',
+          defaultValue: {
+            value: "'Default'",
+            func: false,
+          },
+        });
+
+        const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
+
+        expect(propDef.name).toBe(PROP_NAME);
+        expect(propDef.type.summary).toBe('string');
+        expect(propDef.description).toBe('Hey! Hey!');
+        expect(propDef.required).toBe(false);
+        expect(propDef.defaultValue.summary).toBe("'Default'");
+      });
     }
 
     it('should remove JSDoc tags from the description', () => {

diff --git a/addons/docs/src/lib/docgen/types.ts b/addons/docs/src/lib/docgen/types.ts
@@ -33,6 +33,7 @@ export interface DocgenTypeScriptType extends DocgenType {}
 export interface DocgenPropDefaultValue {
   value: string;
   computed?: boolean;
+  func?: boolean;
 }
 
 export interface DocgenInfo {

diff --git a/examples/vue-3-cli/src/stories/Button.vue b/examples/vue-3-cli/src/stories/Button.vue
@@ -1,5 +1,7 @@
 <template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
+  <button type="button" :class="classes" @click="onClick" :style="style">
+    {{ label }} - {{ sublabel }}
+  </button>
 </template>
 
 <script lang="typescript">
@@ -14,6 +16,10 @@ export default {
       type: String,
       required: true,
     },
+    sublabel: {
+      type: String,
+      default: 'sublabel',
+    },
     primary: {
       type: Boolean,
       default: false,