Addon-docs: Tweak paragraph styles props table

examples/official-storybook/components/DocgenButton.js

@@ -1,7 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-/** DocgenButton component description imported from comments inside the component file */
+/**
+ * DocgenButton component description imported from comments inside the component file,
+ *
+ * *Important Note*: Unlike with normal `<input>` elements, setting this will
+ * not validate the input contents. This is because in this project we use
+ * Formik and Yup to validate fields at the form-level, not at the individual
+ * input level. It is still very important to set this value properly for
+ * accessibility and user experience.
+ *
+ * Here's a list to test out formatting.
+ *
+ *  * `"number"` Any number not represented by a more specific type.
+ *  * `"password"` A password.
+ *  * `"email"` An email address.
+ *  * `"tel"` A phone or fax number. Shows the phone number keypad on
+ *      mobile keyboards.
+ */
 export const DocgenButton = ({ disabled, label, onClick }) => (
   <button type="button" disabled={disabled} onClick={onClick}>
     {label}
@@ -131,6 +147,11 @@ DocgenButton.propTypes = {
   msg: PropTypes.instanceOf(Set),
   /**
    * `oneOf` is basically an Enum which is also supported but can be pretty big.
+   *
+   * Testing a list:
+   *
+   *  - `News` first
+   *  - `Photos` second
    */
   enm: PropTypes.oneOf(['News', 'Photos']),
   enmEval: PropTypes.oneOf((() => ['News', 'Photos'])()),

lib/components/src/blocks/PropsTable/PropRow.tsx

@@ -23,7 +23,7 @@ const Required = styled.span(({ theme }) => ({
 const Description = styled.div(({ theme }) => ({
   '&&': {
     p: {
-      margin: 0,
+      margin: '0 0 10px 0',
     },
   },