feat(notification): AlertNotifications passes through id, className, …

…and style

Adds documentation for how notification and
alertnotifications pass through id, className, and style.

[Finishes #98913374]

spec/pivotal-ui-react/notification/notification_spec.js

@@ -53,7 +53,9 @@ describe('Notification', function() {
       expect('.dropdown-notifications-title .dropdown-notifications-badge').toContainText('4');
     });
 
-    itPropagatesAttributes('#root li:first', itemProps);
+    describe('NotificationItem', function() {
+      itPropagatesAttributes('#root li:first', itemProps);
+    });
 
     it('renders the children in a dropdown menu', function() {
       expect('.dropdown-menu a:eq(0)').toContainText('fee');
@@ -102,9 +104,16 @@ describe('Alert Notifications', function() {
   });
 
   describe('when there are children', function() {
+    var props = {
+      className: 'test-class',
+      id: 'test-id',
+      style: {
+        opacity: '0.5'
+      }
+    };
     beforeEach(function() {
       React.render((
-        <AlertNotifications>
+        <AlertNotifications {...props}>
           <NotificationItem href="my-fee-link">fee</NotificationItem>
           <NotificationItem href="my-fi-link">fi</NotificationItem>
           <NotificationItem href="my-fo-link">fo</NotificationItem>
@@ -124,8 +133,21 @@ describe('Alert Notifications', function() {
       expect('.dropdown-menu').toContainText('fo');
       expect('.dropdown-menu').toContainText('fum');
     });
+
+    it('passes through the className to the btn-group', function() {
+      expect('#root .btn-group').toHaveClass(props.className);
+    });
+
+    it('passes through style to the button', function() {
+      expect('#root .btn').toHaveCss(props.style);
+    });
+
+    it('passes through id to the button', function() {
+      expect('#root .btn#test-id').toExist();
+    });
   });
 
+
   describe('when there are no children', function() {
     beforeEach(function() {
       React.render(<AlertNotifications/>, root);

src/pivotal-ui-react/notifications/notifications.js

@@ -96,7 +96,7 @@ var AlertNotifications = React.createClass({
     size: React.PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
   },
   render() {
-    var {size, children} = this.props;
+    var {size, children, ...others} = this.props;
     var badge = children ? <Icon name="exclamation-triangle" className="dropdown-notifications-alert"></Icon> : null;
     var dropdownTitleClasses = classnames('dropdown-notifications-title', size);
     var dropdownTitle = (
@@ -113,7 +113,8 @@ var AlertNotifications = React.createClass({
         </div>
       </li>
     );
-    return <LinkDropdown title={dropdownTitle} className="dropdown-notifications">{children}</LinkDropdown>;
+    var props = mergeProps(others, {className: 'dropdown-notifications'});
+    return <LinkDropdown title={dropdownTitle} {...props}>{children}</LinkDropdown>;
   }
 });
 

src/pivotal-ui-react/notifications/package.json

@@ -4,6 +4,7 @@
   "homepage": "http://styleguide.pivotal.io/react.html#notifications_react",
   "dependencies": {
     "pui-react-dropdowns": "1.10.0",
+    "pui-react-helpers": "^0.0.1",
     "pui-react-iconography": "1.10.0",
     "classnames": "^2.1.3"
   }

src/pivotal-ui/components/dropdowns/dropdowns.scss

@@ -530,6 +530,7 @@ var alertImage = <UI.Icon name="exclamation-triangle" className="h4 type-warn-2
 </UI.AlertNotifications>
 ```
 
+If you want to customize the notification dropdown, you can use `className` to add a modifier class to the `btn-group`. `id` and `style` will be applied to the notfication button.
 
 */