Merge pull request #3401 from storybooks/dd/docgen-prop-table

#3324 fix double quotes in prop table and add additional examples
storybookjs · Apr 12, 2018 · 8c2f644 · 8c2f644
2 parents 908ac7a + 3ffeddb
commit 8c2f644
Show file tree

Hide file tree

Showing 6 changed files with 350 additions and 35 deletions.
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
@@ -1105,9 +1105,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                                                           }
                                                         }
                                                       >
-                                                        "
                                                         a
-                                                        "
                                                       </span>
                                                     </PropVal>
                                                     , 
@@ -1167,9 +1165,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                                                           }
                                                         }
                                                       >
-                                                        "
                                                         b
-                                                        "
                                                       </span>
                                                     </PropVal>
                                                     }
@@ -1638,6 +1634,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                                           <span
                                             style={Object {}}
                                           >
+                                            "
                                             <ThemedComponent
                                               maxPropArrayLength={3}
                                               maxPropObjectKeys={3}
@@ -1747,12 +1744,11 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                                                     }
                                                   }
                                                 >
-                                                  "
                                                   seven
-                                                  "
                                                 </span>
                                               </PropVal>
                                             </ThemedComponent>
+                                            "
                                           </span>
                                         </span>
                                       </span>

diff --git a/addons/info/src/components/PropVal.js b/addons/info/src/components/PropVal.js
@@ -89,7 +89,7 @@ function PropVal(props) {
     if (val.length > maxPropStringLength) {
       val = `${val.slice(0, maxPropStringLength)}…`;
     }
-    content = <span style={valueStyles.string}>"{val}"</span>;
+    content = <span style={valueStyles.string}>{val}</span>;
     braceWrap = false;
   } else if (typeof val === 'boolean') {
     content = <span style={valueStyles.bool}>{`${val}`}</span>;

diff --git a/addons/info/src/components/Props.js b/addons/info/src/components/Props.js
@@ -45,12 +45,14 @@ export default function Props(props) {
           <span>
             =
             <span style={propValueStyle}>
+              {typeof nodeProps[name] === 'string' && '"'}
               <PropVal
                 val={nodeProps[name]}
                 maxPropObjectKeys={maxPropObjectKeys}
                 maxPropArrayLength={maxPropArrayLength}
                 maxPropStringLength={maxPropStringLength}
               />
+              {typeof nodeProps[name] === 'string' && '"'}
             </span>
           </span>
         )}

diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
@@ -592,7 +592,7 @@ exports[`Storyshots Button with new info 1`] = `
                     <span
                       style="color:#22a;word-break:break-word"
                     >
-                      "the best container ever"
+                      the best container ever
                     </span>
                   </td>
                   <td
@@ -1004,7 +1004,7 @@ exports[`Storyshots Button with some info 1`] = `
                     <span
                       style="color:#22a;word-break:break-word"
                     >
-                      "the best container ever"
+                      the best container ever
                     </span>
                   </td>
                   <td

diff --git a/examples/official-storybook/components/DocgenButton.js b/examples/official-storybook/components/DocgenButton.js
@@ -11,11 +11,36 @@ const DocgenButton = ({ disabled, label, onClick }) => (
 DocgenButton.defaultProps = {
   disabled: false,
   onClick: () => {},
+  optionalString: 'Default String',
+  one: { key: 1 },
+  two: {
+    thing: {
+      id: 2,
+      func: () => {},
+      arr: [],
+    },
+  },
+  obj: {
+    key: 'value',
+  },
+  shape: {
+    id: 3,
+    func: () => {},
+    arr: [],
+    shape: {
+      shape: {
+        foo: 'bar',
+      },
+    },
+  },
+  arrayOf: [1, 2, 3],
+  msg: new Set(),
+  enm: 'News',
+  enmEval: 'Photos',
+  union: 'hello',
 };
 
-/* eslint-disable react/no-unused-prop-types,react/require-default-props */
-
-const Message = {};
+/* eslint-disable react/no-unused-prop-types */
 
 DocgenButton.propTypes = {
   /** Boolean indicating whether the button should render as disabled */
@@ -95,12 +120,15 @@ DocgenButton.propTypes = {
     }),
   }),
 
+  /**
+   * array of a certain type
+   */
   arrayOf: PropTypes.arrayOf(PropTypes.number),
 
   /**
    * `instanceOf` is also supported and the custom type will be shown instead of `instanceOf`
    */
-  msg: PropTypes.instanceOf(Message),
+  msg: PropTypes.instanceOf(Set),
   /**
    * `oneOf` is basically an Enum which is also supported but can be pretty big.
    */
@@ -109,7 +137,11 @@ DocgenButton.propTypes = {
   /**
    *  A multi-type prop is also valid and is displayed as `Union<String|Message>`
    */
-  union: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Message)]),
+  union: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Set)]),
+  /**
+   * test string
+   */
+  optionalString: PropTypes.string,
 };
 
 export default DocgenButton;