Generate TextControlWithAffixes documentation from the component itself.

plugins/woocommerce-admin/docs/components/_sidebar.md

@@ -27,4 +27,5 @@
   * [Summary](components/summary.md)
   * [Table](components/table.md)
   * [Tag](components/tag.md)
+  * [TextControlWithAffixes](components/text-control-with-affixes.md)
   * [ViewMoreList](components/view-more-list.md)

plugins/woocommerce-admin/docs/components/table.md

@@ -65,6 +65,13 @@ It will display `TablePlaceholder` component instead of `Table` if that's the ca
 
 A function which returns a callback function to update the query string for a given `param`.
 
+### `onColumnsChange`
+
+- Type: Function
+- Default: `noop`
+
+A function which returns a callback function which is called upon the user changing the visiblity of columns.
+
 ### `downloadable`
 
 - Type: Boolean

plugins/woocommerce-admin/docs/components/text-control-with-affixes.md

@@ -1,64 +1,69 @@
-Text Control With Affixes
-============================
-
-This component is essentially a wrapper (really a reimplementation) around the TextControl component that adds support for affixes, i.e. the ability to display a fixed part either at the beginning or at the end of the text input.
-
+`TextControlWithAffixes` (component)
+====================================
 
+This component is essentially a wrapper (really a reimplementation) around the
+TextControl component that adds support for affixes, i.e. the ability to display
+a fixed part either at the beginning or at the end of the text input.
 
 Props
 -----
 
-The set of props accepted by the component will be specified below.
-Props not included in this set will be applied to the input element.
-
 ### `label`
 
+- Type: String
+- Default: null
+
 If this property is added, a label will be generated using label property as the content.
 
-- Type: `String`
-
 ### `help`
 
+- Type: String
+- Default: null
+
 If this property is added, a help text will be generated using help property as the content.
 
-- Type: `String`
-
 ### `type`
 
+- Type: String
+- Default: `'text'`
+
 Type of the input element to render. Defaults to "text".
 
-- Type: `String`
-- Default: "text"
-
 ### `value`
 
+- **Required**
+- Type: String
+- Default: null
+
 The current value of the input.
 
-- **Required**
-- Type: `String`
-
 ### `className`
 
+- Type: String
+- Default: null
+
 The class that will be added with "components-base-control" to the classes of the wrapper div.
 If no className is passed only components-base-control is used.
 
-- Type: `String`
-
 ### `onChange`
 
+- **Required**
+- Type: Function
+- Default: null
+
 A function that receives the value of the input.
 
-- **Required**
-- Type: `function`
-
 ### `prefix`
 
+- Type: ReactNode
+- Default: null
+
 Markup to be inserted at the beginning of the input.
 
-- Type: ReactNode
-
 ### `suffix`
 
+- Type: ReactNode
+- Default: null
+
 Markup to be appended at the end of the input.
 
-- Type: ReactNode

plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/index.js

@@ -7,6 +7,11 @@ import PropTypes from 'prop-types';
 import { BaseControl } from '@wordpress/components';
 import { withInstanceId } from '@wordpress/compose';
 
+/**
+ * This component is essentially a wrapper (really a reimplementation) around the
+ * TextControl component that adds support for affixes, i.e. the ability to display
+ * a fixed part either at the beginning or at the end of the text input.
+ */
 class TextControlWithAffixes extends Component {
     render() {
         const {
@@ -18,7 +23,7 @@ class TextControlWithAffixes extends Component {
             onChange,
             prefix,
             suffix,
-            type = 'text',
+            type,
             ...props
         } = this.props;
 
@@ -46,8 +51,43 @@ class TextControlWithAffixes extends Component {
     }
 }
 
+TextControlWithAffixes.defaultProps = {
+    type: 'text',
+};
+
 TextControlWithAffixes.propTypes = {
+    /**
+     * If this property is added, a label will be generated using label property as the content.
+     */
+    label: PropTypes.string,
+    /**
+     * If this property is added, a help text will be generated using help property as the content.
+     */
+    help: PropTypes.string,
+    /**
+     * Type of the input element to render. Defaults to "text".
+     */
+    type: PropTypes.string,
+    /**
+     * The current value of the input.
+     */
+    value: PropTypes.string.isRequired,
+    /**
+     * The class that will be added with "components-base-control" to the classes of the wrapper div.
+     * If no className is passed only components-base-control is used.
+     */
+    className: PropTypes.string,
+    /**
+     * A function that receives the value of the input.
+     */
+    onChange: PropTypes.func.isRequired,
+    /**
+     * Markup to be inserted at the beginning of the input.
+     */
     prefix: PropTypes.node,
+    /**
+     * Markup to be appended at the end of the input.
+     */
     suffix: PropTypes.node,
 };