[Chip] Add component property

pages/api/chip.md

@@ -14,6 +14,7 @@ Chips represent complex entities in small blocks, such as a contact.
 |:-----|:-----|:--------|:------------|
 | avatar | element |  | Avatar element. |
 | classes | object |  | Useful to extend the style applied to components. |
+| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
 | deleteIcon | element |  | Custom delete icon element. Will be shown only if `onDelete` is set. |
 | label | node |  | The content of the label. |
 | onDelete | func |  | Callback function fired when the delete icon is clicked. If set, the delete icon will be shown. |

src/Chip/Chip.d.ts

@@ -4,6 +4,7 @@ import { StandardProps } from '..';
 export interface ChipProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ChipClassKey> {
   avatar?: React.ReactElement<any>;
+  component?: React.ReactType<ChipProps>;
   deleteIcon?: React.ReactElement<any>;
   label?: React.ReactNode;
   onDelete?: React.EventHandler<any>;

src/Chip/Chip.js

@@ -125,6 +125,7 @@ class Chip extends React.Component {
       avatar: avatarProp,
       classes,
       className: classNameProp,
+      component: ComponentProp,
       deleteIcon: deleteIconProp,
       label,
       onClick,
@@ -168,7 +169,7 @@ class Chip extends React.Component {
     }
 
     return (
-      <div
+      <ComponentProp
         role="button"
         className={className}
         tabIndex={tabIndex}
@@ -182,7 +183,7 @@ class Chip extends React.Component {
         {avatar}
         <span className={classes.label}>{label}</span>
         {deleteIcon}
-      </div>
+      </ComponentProp>
     );
   }
 }
@@ -200,6 +201,11 @@ Chip.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   /**
    * Custom delete icon element. Will be shown only if `onDelete` is set.
    */
@@ -227,4 +233,8 @@ Chip.propTypes = {
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
+Chip.defaultProps = {
+  component: 'div',
+};
+
 export default withStyles(styles, { name: 'MuiChip' })(Chip);