Auto-generate readme

packages/components/src/tree-select/README.md

@@ -1,21 +1,22 @@
 # TreeSelect
 
-TreeSelect component is used to generate select input fields.
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-## Usage
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-treeselect--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
 
-Render a user interface to select the parent page in a hierarchy of pages:
+Generates a hierarchical select input.
 
 ```jsx
-import { useState } from 'react';
 import { TreeSelect } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 const MyTreeSelect = () => {
 	const [ page, setPage ] = useState( 'p21' );
 
 	return (
 		<TreeSelect
-		  __nextHasNoMarginBottom
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label="Parent page"
 			noOptionLabel="No parent page"
 			onChange={ ( newPage ) => setPage( newPage ) }
@@ -50,51 +51,159 @@ const MyTreeSelect = () => {
 	);
 }
 ```
-
 ## Props
 
-The set of props accepted by the component will be specified below.
-Props not included in this set will be applied to the SelectControl component being used.
+### `__next40pxDefaultSize`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+### `__nextHasNoMarginBottom`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+### `children`
+
+As an alternative to the `options` prop, `optgroup`s and `options` can be
+passed in as `children` for more customizability.
+
+ - Type: `ReactNode`
+ - Required: No
+
+### `disabled`
+
+If true, the `input` will be disabled.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+### `hideLabelFromVision`
+
+If true, the label will only be visible to screen readers.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+### `help`
+
+Additional description for the control.
+
+Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
+
+ - Type: `ReactNode`
+ - Required: No
 
-### label
+### `label`
 
 If this property is added, a label will be generated using label property as the content.
 
--   Type: `String`
--   Required: No
+ - Type: `ReactNode`
+ - Required: No
 
-### noOptionLabel
+### `labelPosition`
+
+The position of the label.
+
+ - Type: `"top" | "bottom" | "side" | "edge"`
+ - Required: No
+ - Default: `'top'`
+
+### `noOptionLabel`
 
 If this property is added, an option will be added with this label to represent empty selection.
 
--   Type: `String`
--   Required: No
+ - Type: `string`
+ - Required: No
+
+### `onChange`
+
+A function that receives the value of the new option that is being selected as input.
+
+ - Type: `(value: string, extra?: { event?: ChangeEvent<HTMLSelectElement>; }) => void`
+ - Required: No
+
+### `options`
+
+An array of option property objects to be rendered,
+each with a `label` and `value` property, as well as any other
+`<option>` attributes.
+
+ - Type: `readonly ({ label: string; value: string; } & Omit<OptionHTMLAttributes<HTMLOptionElement>, "label" | "value">)[]`
+ - Required: No
+
+### `prefix`
 
-### onChange
+Renders an element on the left side of the input.
 
-A function that receives the id of the new node element that is being selected.
+By default, the prefix is aligned with the edge of the input border, with no padding.
+If you want to apply standard padding in accordance with the size variant, wrap the element in
+the provided `<InputControlPrefixWrapper>` component.
+@example import {
+  __experimentalInputControl as InputControl,
+  __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
 
--   Type: `function`
--   Required: Yes
+<InputControl
+  prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
+/>
 
-### selectedId
+ - Type: `ReactNode`
+ - Required: No
+
+### `selectedId`
 
 The id of the currently selected node.
 
--   Type: `string` | `string[]`
--   Required: No
+ - Type: `string`
+ - Required: No
+
+### `size`
+
+Adjusts the size of the input.
+
+ - Type: `"default" | "small" | "compact" | "__unstable-large"`
+ - Required: No
+ - Default: `'default'`
+
+### `suffix`
 
-### tree
+Renders an element on the right side of the input.
+
+By default, the suffix is aligned with the edge of the input border, with no padding.
+If you want to apply standard padding in accordance with the size variant, wrap the element in
+the provided `<InputControlSuffixWrapper>` component.
+@example import {
+  __experimentalInputControl as InputControl,
+  __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+} from '@wordpress/components';
+
+<InputControl
+  suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
+/>
+
+ - Type: `ReactNode`
+ - Required: No
+
+### `tree`
 
 An array containing the tree objects with the possible nodes the user can select.
 
--   Type: `Object[]`
--   Required: No
+ - Type: `Tree[]`
+ - Required: No
 
-#### __nextHasNoMarginBottom
+### `variant`
 
-Start opting into the new margin-free styles that will become the default in a future version.
+The style variant of the control.
 
--   Type: `Boolean`
--   Required: No
--   Default: `false`
+ - Type: `"default" | "minimal"`
+ - Required: No
+ - Default: `'default'`

packages/components/src/tree-select/docs-manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "TreeSelect",
+	"filePath": "./index.tsx"
+}