[docs] Move more prop docs into IntelliSense

docs/pages/api-docs/link.md

@@ -28,13 +28,13 @@ The `MuiLink` name can be used for providing [default props](/customization/glob
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name required">children<abbr title="required">*</abbr></span> | <span class="prop-type">node</span> |  | The content of the link. |
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the link. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">color</span> | <span class="prop-type">'initial'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'textPrimary'<br>&#124;&nbsp;'textSecondary'<br>&#124;&nbsp;'error'</span> | <span class="prop-default">'primary'</span> | The color of the link. |
+| <span class="prop-name">color</span> | <span class="prop-type">'error'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'initial'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'textPrimary'<br>&#124;&nbsp;'textSecondary'</span> | <span class="prop-default">'primary'</span> | The color of the link. |
 | <span class="prop-name">component</span> | <span class="prop-type">element type</span> | <span class="prop-default">'a'</span> | The component used for the root node. Either a string to use a HTML element or a component.<br>⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). |
 | <span class="prop-name">TypographyClasses</span> | <span class="prop-type">object</span> |  | `classes` prop applied to the [`Typography`](/api/typography/) element. |
-| <span class="prop-name">underline</span> | <span class="prop-type">'none'<br>&#124;&nbsp;'hover'<br>&#124;&nbsp;'always'</span> | <span class="prop-default">'hover'</span> | Controls when the link should have an underline. |
-| <span class="prop-name">variant</span> | <span class="prop-type">string</span> | <span class="prop-default">'inherit'</span> | Applies the theme typography styles. |
+| <span class="prop-name">underline</span> | <span class="prop-type">'always'<br>&#124;&nbsp;'hover'<br>&#124;&nbsp;'none'</span> | <span class="prop-default">'hover'</span> | Controls when the link should have an underline. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'body1'<br>&#124;&nbsp;'body2'<br>&#124;&nbsp;'button'<br>&#124;&nbsp;'caption'<br>&#124;&nbsp;'h1'<br>&#124;&nbsp;'h2'<br>&#124;&nbsp;'h3'<br>&#124;&nbsp;'h4'<br>&#124;&nbsp;'h5'<br>&#124;&nbsp;'h6'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'overline'<br>&#124;&nbsp;'subtitle1'<br>&#124;&nbsp;'subtitle2'</span> | <span class="prop-default">'inherit'</span> | Applies the theme typography styles. |
 
 The `ref` is forwarded to the root element.
 

docs/pages/api-docs/list-item.md

@@ -28,12 +28,12 @@ The `MuiListItem` name can be used for providing [default props](/customization/
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">alignItems</span> | <span class="prop-type">'flex-start'<br>&#124;&nbsp;'center'</span> | <span class="prop-default">'center'</span> | Defines the `align-items` style property. |
+| <span class="prop-name">alignItems</span> | <span class="prop-type">'center'<br>&#124;&nbsp;'flex-start'</span> | <span class="prop-default">'center'</span> | Defines the `align-items` style property. |
 | <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list item will be focused during the first mount. Focus will also be triggered if the value changes from false to true. |
 | <span class="prop-name">button</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list item will be a button (using `ButtonBase`). Props intended for `ButtonBase` can then be applied to `ListItem`. |
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. If a `ListItemSecondaryAction` is used it must be the last child. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> |  | The component used for the root node. Either a string to use a HTML element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. |
+| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> |  | The component used for the root node. Either a string to use a HTML element or a component. |
 | <span class="prop-name">ContainerComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'li'</span> | The container component used when a `ListItemSecondaryAction` is the last child. |
 | <span class="prop-name">ContainerProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the container component if used. |
 | <span class="prop-name">dense</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, compact vertical padding designed for keyboard and mouse input will be used. |

docs/pages/api-docs/list-subheader.md

@@ -30,7 +30,7 @@ The `MuiListSubheader` name can be used for providing [default props](/customiza
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">color</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'inherit'</span> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">color</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'</span> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'li'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
 | <span class="prop-name">disableGutters</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the List Subheader will not have gutters. |
 | <span class="prop-name">disableSticky</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the List Subheader will not stick to the top during scroll. |

docs/pages/api-docs/popover.md

@@ -39,7 +39,7 @@ The `MuiPopover` name can be used for providing [default props](/customization/g
 | <span class="prop-name">elevation</span> | <span class="prop-type">number</span> | <span class="prop-default">8</span> | The elevation of the popover. |
 | <span class="prop-name">getContentAnchorEl</span> | <span class="prop-type">func</span> |  | This function is called in order to retrieve the content anchor element. It's the opposite of the `anchorEl` prop. The content anchor element should be an element inside the popover. It's used to correctly scroll and set the position of the popover. The positioning strategy tries to make the content anchor element just above the anchor element. |
 | <span class="prop-name">marginThreshold</span> | <span class="prop-type">number</span> | <span class="prop-default">16</span> | Specifies how close to the edge of the window the popover can appear. |
-| <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be closed. |
+| <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be closed. The `reason` parameter can optionally be used to control the response to `onClose`. |
 | <span class="prop-name">onEnter</span> | <span class="prop-type">func</span> |  | Callback fired before the component is entering. |
 | <span class="prop-name">onEntered</span> | <span class="prop-type">func</span> |  | Callback fired when the component has entered. |
 | <span class="prop-name">onEntering</span> | <span class="prop-type">func</span> |  | Callback fired when the component is entering. |

packages/material-ui/src/Link/Link.d.ts

@@ -6,8 +6,26 @@ import { TypographyProps } from '../Typography';
 export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
   props: P &
     LinkBaseProps & {
+      /**
+       * The content of the link.
+       */
+      children?: React.ReactNode;
+      /**
+       * The color of the link.
+       */
+      color?: TypographyProps['color'];
+      /**
+       * `classes` prop applied to the [`Typography`](/api/typography/) element.
+       */
       TypographyClasses?: TypographyProps['classes'];
+      /**
+       * Controls when the link should have an underline.
+       */
       underline?: 'none' | 'hover' | 'always';
+      /**
+       * Applies the theme typography styles.
+       */
+      variant?: TypographyProps['variant'];
     };
   defaultComponent: D;
   classKey: LinkClassKey;
@@ -36,7 +54,7 @@ export type LinkClassKey =
   | 'focusVisible';
 
 export type LinkBaseProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
-  Omit<TypographyProps, 'component'>;
+  Omit<TypographyProps, 'children' | 'component' | 'color' | 'variant'>;
 
 export type LinkProps<
   D extends React.ElementType = LinkTypeMap['defaultComponent'],

packages/material-ui/src/Link/Link.js

@@ -113,15 +113,19 @@ const Link = React.forwardRef(function Link(props, ref) {
 });
 
 Link.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the link.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -130,13 +134,13 @@ Link.propTypes = {
    * The color of the link.
    */
   color: PropTypes.oneOf([
-    'initial',
+    'error',
     'inherit',
+    'initial',
     'primary',
     'secondary',
     'textPrimary',
     'textSecondary',
-    'error',
   ]),
   /**
    * The component used for the root node.
@@ -158,11 +162,26 @@ Link.propTypes = {
   /**
    * Controls when the link should have an underline.
    */
-  underline: PropTypes.oneOf(['none', 'hover', 'always']),
+  underline: PropTypes.oneOf(['always', 'hover', 'none']),
   /**
    * Applies the theme typography styles.
    */
-  variant: PropTypes.string,
+  variant: PropTypes.oneOf([
+    'body1',
+    'body2',
+    'button',
+    'caption',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'inherit',
+    'overline',
+    'subtitle1',
+    'subtitle2',
+  ]),
 };
 
 export default withStyles(styles, { name: 'MuiLink' })(Link);

packages/material-ui/src/List/List.d.ts

@@ -3,9 +3,24 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface ListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
   props: P & {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * If `true`, compact vertical padding designed for keyboard and mouse input will be used for
+     * the list and list items.
+     * The prop is available to descendant components as the `dense` context.
+     */
     dense?: boolean;
+    /**
+     * If `true`, vertical padding will be removed from the list.
+     */
     disablePadding?: boolean;
-    subheader?: React.ReactElement;
+    /**
+     * The content of the subheader, normally `ListSubheader`.
+     */
+    subheader?: React.ReactNode;
   };
   defaultComponent: D;
   classKey: ListClassKey;

packages/material-ui/src/List/List.js

@@ -62,6 +62,10 @@ const List = React.forwardRef(function List(props, ref) {
 });
 
 List.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component.
    */
@@ -70,7 +74,7 @@ List.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */

packages/material-ui/src/ListItem/ListItem.d.ts

@@ -4,16 +4,53 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface ListItemTypeMap<P, D extends React.ElementType> {
   props: P & {
+    /**
+     * Defines the `align-items` style property.
+     */
     alignItems?: 'flex-start' | 'center';
+    /**
+     * If `true`, the list item will be focused during the first mount.
+     * Focus will also be triggered if the value changes from false to true.
+     */
     autoFocus?: boolean;
+    /**
+     * If `true`, the list item will be a button (using `ButtonBase`). Props intended
+     * for `ButtonBase` can then be applied to `ListItem`.
+     */
     button?: boolean;
+    /**
+     * The content of the component. If a `ListItemSecondaryAction` is used it must
+     * be the last child.
+     */
+    children?: React.ReactNode;
+    /**
+     * The container component used when a `ListItemSecondaryAction` is the last child.
+     */
     ContainerComponent?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Props applied to the container component if used.
+     */
     ContainerProps?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * If `true`, compact vertical padding designed for keyboard and mouse input will be used.
+     */
     dense?: boolean;
+    /**
+     * If `true`, the list item will be disabled.
+     */
     disabled?: boolean;
+    /**
+     * If `true`, the left and right padding is removed.
+     */
     disableGutters?: boolean;
+    /**
+     * If `true`, a 1px light border is added to the bottom of the list item.
+     */
     divider?: boolean;
     focusVisibleClassName?: string;
+    /**
+     * Use to apply selected styling.
+     */
     selected?: boolean;
   };
   defaultComponent: D;

packages/material-ui/src/ListItem/ListItem.js

@@ -113,6 +113,7 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
     dense: dense || context.dense || false,
     alignItems,
   };
+
   const listItemRef = React.useRef(null);
   useEnhancedEffect(() => {
     if (autoFocus) {
@@ -154,6 +155,7 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
     disabled,
     ...other,
   };
+
   let Component = componentProp || 'li';
 
   if (button) {
@@ -199,10 +201,14 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
 });
 
 ListItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * Defines the `align-items` style property.
    */
-  alignItems: PropTypes.oneOf(['flex-start', 'center']),
+  alignItems: PropTypes.oneOf(['center', 'flex-start']),
   /**
    * If `true`, the list item will be focused during the first mount.
    * Focus will also be triggered if the value changes from false to true.
@@ -245,15 +251,14 @@ ListItem.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
   className: PropTypes.string,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
-   * By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`.
    */
   component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
   /**

packages/material-ui/src/ListSubheader/ListSubheader.d.ts

@@ -4,9 +4,25 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface ListSubheaderTypeMap<P = {}, D extends React.ElementType = 'li'> {
   props: P & {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     */
     color?: 'default' | 'primary' | 'inherit';
+    /**
+     * If `true`, the List Subheader will not have gutters.
+     */
     disableGutters?: boolean;
+    /**
+     * If `true`, the List Subheader will not stick to the top during scroll.
+     */
     disableSticky?: boolean;
+    /**
+     * If `true`, the List Subheader will be indented.
+     */
     inset?: boolean;
   };
   defaultComponent: D;

packages/material-ui/src/ListSubheader/ListSubheader.js

@@ -72,6 +72,10 @@ const ListSubheader = React.forwardRef(function ListSubheader(props, ref) {
 });
 
 ListSubheader.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component.
    */
@@ -80,15 +84,15 @@ ListSubheader.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
   className: PropTypes.string,
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
-  color: PropTypes.oneOf(['default', 'primary', 'inherit']),
+  color: PropTypes.oneOf(['default', 'inherit', 'primary']),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

packages/material-ui/src/MenuItem/MenuItem.d.ts

@@ -1,12 +1,17 @@
 import { ListItemTypeMap, ListItemProps } from '../ListItem';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ExtendButtonBase } from '../ButtonBase';
+import { Omit } from '@material-ui/types';
 
 export type MenuItemClassKey = 'root' | 'gutters' | 'selected' | 'dense';
 
 export interface MenuItemTypeMap<P = {}, D extends React.ElementType = 'li'> {
   props: P &
-    ListItemTypeMap<P, D>['props'] & {
+    Omit<ListItemTypeMap<P, D>['props'], 'children'> & {
+      /**
+       * Menu item contents.
+       */
+      children?: React.ReactNode;
       /**
        * `classes` prop applied to the [`ListItem`](/api/list-item/) element.
        */