feat(lists): react lists accept classname, id, and style props

[#87784030]
pivotal-cf · Jul 15, 2015 · 4f2a0e1 · 4f2a0e1
1 parent 1ecda1f
commit 4f2a0e1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/spec/pivotal-ui-react/lists/lists_spec.js b/spec/pivotal-ui-react/lists/lists_spec.js
@@ -127,5 +127,22 @@ describe('lists', function() {
       });
     });
   });
+
+  describe('List custom attributes', function() {
+    itRenders(UnorderedList, {
+      className: 'foo-list',
+      id: '12345',
+      style: {
+        padding: '5px'
+      }
+    });
+    it('renders custom attributes on lists', function () {
+      expect('#root ul').toHaveClass('foo-list');
+      expect('#root ul').toHaveClass('list-unordered');
+      expect('#root ul').toHaveAttr('id', '12345');
+      expect('#root ul').toHaveAttr('style', 'padding:5px;');
+    });
+  });
+
 });
 
diff --git a/src/pivotal-ui-react/lists/lists.js b/src/pivotal-ui-react/lists/lists.js
@@ -1,5 +1,5 @@
 var React = require('react/addons');
-var classnames = require('classnames');
+import classnames from 'classnames';
 
 /**
  * @component ListItem
@@ -20,14 +20,14 @@ function defList(tagName, spacingType, classNames, childClassNames) {
       spacing: React.PropTypes.oneOf(['n', 's', 'm', 'l', 'xl'])
     },
     render() {
-      var {className, spacing, children} = this.props;
+      var {className, spacing, children, ...others} = this.props;
       var classes = classnames(classNames(this.props), className, spacing && `${spacingType}${spacing}`);
       if (childClassNames) {
         children = React.Children.map(children, child => React.addons.cloneWithProps(child, {className: childClassNames}));
       }
       return (
-        tagName === 'ul' ? <ul className={classes}>{children}</ul> :
-        tagName === 'ol' ? <ol className={classes}>{children}</ol> :
+        tagName === 'ul' ? <ul className={classes} {...others}>{children}</ul> :
+        tagName === 'ol' ? <ol className={classes} {...others}>{children}</ol> :
         null
       );
     }