Merge pull request #6237 from blmarket/feature-chip-contiainerelement

[Chip] Add containerElement property

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)}

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');
+    });
+  });
 });