refactor(components): standardize custom tag names

eddywashere · eddywashere · commit 494e4ecc1f6a · 2016-03-27T12:44:48.000-07:00
BREAKING CHANGE: `El` prop is now `tag`. This standardizes the way
custom elements should render their html “tags”.
diff --git a/docs/lib/Components/ButtonsPage.jsx b/docs/lib/Components/ButtonsPage.jsx
@@ -34,7 +34,7 @@ export default class ButtonsPage extends React.Component {
 
   // Pass in a Component to override default button element
   // example: react-router Link
-  El: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
   onClick: PropTypes.func,
   size: PropTypes.string
diff --git a/lib/Button.jsx b/lib/Button.jsx
@@ -6,13 +6,14 @@ const propTypes = {
   block: PropTypes.bool,
   color: PropTypes.string,
   disabled: PropTypes.bool,
-  El: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   onClick: PropTypes.func,
   size: PropTypes.string
 };
 
 const defaultProps = {
-  color: 'primary'
+  color: 'primary',
+  tag: 'button'
 };
 
 class Button extends React.Component {
@@ -33,17 +34,15 @@ class Button extends React.Component {
   }
 
   render() {
-    const {
+    let {
       active,
       block,
-      children,
       className,
       color,
-      El,
       size,
+      tag: Tag,
       ...attributes
     } = this.props;
-    let Tag = 'button';
 
     const classes = classNames(
       className,
@@ -54,18 +53,12 @@ class Button extends React.Component {
       { active, disabled: this.props.disabled }
     );
 
-    if (El) {
-      Tag = El;
-    } else if (attributes.href) {
+    if (attributes.href && Tag === 'button') {
       Tag = 'a';
     }
 
     return (
-      <Tag {...attributes}
-        className={classes}
-        onClick={this.onClick}>
-        {children}
-      </Tag>
+      <Tag {...attributes} className={classes} onClick={this.onClick}/>
     );
   }
 }
diff --git a/lib/Dropdown.jsx b/lib/Dropdown.jsx
@@ -155,7 +155,7 @@ class Dropdown extends React.Component {
       className,
       dropup,
       group,
-      'tag': TagName,
+      'tag': Tag,
       ...attributes
     } = omit(this.props, ['children', 'isOpen']);
 
@@ -170,10 +170,10 @@ class Dropdown extends React.Component {
     );
 
     return (
-      <TagName {...attributes}
+      <Tag {...attributes}
         className={classes}>
         {this.renderChildren()}
-      </TagName>
+      </Tag>
     );
   }
 }
diff --git a/lib/DropdownItem.jsx b/lib/DropdownItem.jsx
@@ -1,17 +1,20 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
-import omit from 'lodash.omit';
 
 const propTypes = {
   children: PropTypes.node,
   disabled: PropTypes.bool,
   divider: PropTypes.bool,
-  El: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   header: PropTypes.bool,
   isOpen: PropTypes.bool,
   toggle: PropTypes.func
 };
 
+const defaultProps = {
+  tag: 'button'
+};
+
 class DropdownItem extends React.Component {
   constructor(props) {
     super(props);
@@ -41,13 +44,11 @@ class DropdownItem extends React.Component {
   }
 
   render() {
-    let Tagname = 'button';
     const tabIndex = this.getTabIndex();
-    const {
+    let {
       className,
-      children,
       divider,
-      El,
+      tag: Tag,
       header,
       ...props } = this.props;
 
@@ -61,34 +62,24 @@ class DropdownItem extends React.Component {
       }
     );
 
-    if (El) {
-      return (
-        <El {...props}
-          tabIndex={tabIndex}
-          className={classes}
-          onClick={this.onClick}>
-          {children}
-        </El>
-      );
-    }
-
-    if (header) {
-      Tagname = 'h6';
-    } else if (divider) {
-      Tagname = 'div';
+    if (Tag === 'button') {
+      if (header) {
+        Tag = 'h6';
+      } else if (divider) {
+        Tag = 'div';
+      }
     }
 
     return (
-      <Tagname {...props}
+      <Tag {...props}
         tabIndex={tabIndex}
         className={classes}
-        onClick={this.onClick}>
-        {children}
-      </Tagname>
+        onClick={this.onClick}/>
     );
   }
 }
 
 DropdownItem.propTypes = propTypes;
+DropdownItem.defaultProps = defaultProps;
 
 export default DropdownItem;
diff --git a/test/Button.spec.js b/test/Button.spec.js
@@ -12,7 +12,7 @@ describe('Button', () => {
 
   it('should render custom element', () => {
     const Link = (props) => <a href="/home" {...props}>{props.children}</a>;
-    const wrapper = mount(<Button El={Link}>Home</Button>);
+    const wrapper = mount(<Button tag={Link}>Home</Button>);
 
     expect(wrapper.find('a').length).toBe(1);
     expect(wrapper.text()).toBe('Home');
diff --git a/test/DropdownItem.spec.js b/test/DropdownItem.spec.js
@@ -22,7 +22,7 @@ describe('DropdownItem', () => {
 
   it('should render custom element', () => {
     const Link = (props) => <a href="/home" {...props}>{props.children}</a>;
-    const wrapper = mount(<DropdownItem isOpen={isOpen} toggle={toggle} El={Link}>Home</DropdownItem>);
+    const wrapper = mount(<DropdownItem isOpen={isOpen} toggle={toggle} tag={Link}>Home</DropdownItem>);
 
     expect(wrapper.find('a').length).toBe(1);
     expect(wrapper.find('a').hasClass('dropdown-item')).toBe(true);
