From ecb0fe3d631dcaaf65abfed674878ce24d7f2e86 Mon Sep 17 00:00:00 2001
From: "Jeong, Heon" <blmarket@gmail.com>
Date: Sat, 25 Feb 2017 22:12:10 +0900
Subject: [PATCH] [Chip] Add containerElement property

Fixes #4830
---
 src/Chip/Chip.js      | 12 +++++++++++-
 src/Chip/Chip.spec.js | 27 +++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/Chip/Chip.js b/src/Chip/Chip.js
index 896c6960e99809..9da780f4676615 100644
--- a/src/Chip/Chip.js
+++ b/src/Chip/Chip.js
@@ -57,6 +57,14 @@ class Chip extends Component {
      * CSS `className` of the root element.
      */
     className: PropTypes.node,
+    /**
+     * The element to use as the container for the Chip. Either a string to
+     * use a DOM element or a ReactElement.
+     */
+    containerElement: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element,
+    ]),
     /**
      * Override the label color.
      */
@@ -103,6 +111,7 @@ class Chip extends Component {
   };
 
   static defaultProps = {
+    containerElement: 'div', // Firefox doesn't support nested buttons
     onBlur: () => {},
     onFocus: () => {},
     onKeyDown: () => {},
@@ -234,6 +243,7 @@ class Chip extends Component {
 
     const {
       children: childrenProp,
+      containerElement,
       style,
       className,
       labelStyle,
@@ -278,7 +288,7 @@ class Chip extends Component {
         {...other}
         {...buttonEventHandlers}
         className={className}
-        containerElement="div" // Firefox doesn't support nested buttons
+        containerElement={containerElement}
         disableTouchRipple={true}
         disableFocusRipple={true}
         style={Object.assign(styles.root, style)}
diff --git a/src/Chip/Chip.spec.js b/src/Chip/Chip.spec.js
index c74a52bbdba68c..7ea0d3828c4dcc 100644
--- a/src/Chip/Chip.spec.js
+++ b/src/Chip/Chip.spec.js
@@ -160,4 +160,31 @@ describe('<Chip />', () => {
       });
     });
   });
+
+  describe('prop: containerElement', () => {
+    it('should use div if no containerElement specified', () => {
+      const wrapper = themedShallow(
+        <Chip>Label</Chip>
+      );
+      const button = wrapper.dive({context: {muiTheme}});
+      assert.strictEqual(button.is('div'), true, 'should match an div element');
+    });
+
+    it('should use the given string containerElement prop', () => {
+      const wrapper = themedShallow(
+        <Chip containerElement="span">Label</Chip>
+      );
+      const button = wrapper.dive({context: {muiTheme}});
+      assert.strictEqual(button.is('span'), true, 'should match an span element');
+    });
+
+    it('should use the given ReactElement containerElement prop', () => {
+      const CustomElement = (props) => <a {...props} />;
+      const wrapper = themedShallow(
+        <Chip containerElement={<CustomElement />}>Label</Chip>
+      );
+      const button = wrapper.dive({context: {muiTheme}});
+      assert.strictEqual(button.is(CustomElement), true, 'should match the custom element');
+    });
+  });
 });