From 0e8061a6c5864841fb3880e2cf1f041bf661571d Mon Sep 17 00:00:00 2001
From: Caroline Taymor and Geoff Pleiss <ctaymor@pivotal.io>
Date: Wed, 22 Jul 2015 14:41:02 -0700
Subject: [PATCH] feat(notification): AlertNotifications passes through id,
 className, and style

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

[Finishes #98913374]
---
 .../notification/notification_spec.js         | 26 +++++++++++++++++--
 .../notifications/notifications.js            |  5 ++--
 .../notifications/package.json                |  1 +
 .../components/dropdowns/dropdowns.scss       |  1 +
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/spec/pivotal-ui-react/notification/notification_spec.js b/spec/pivotal-ui-react/notification/notification_spec.js
index 6dbe4a3f4..93cdf9682 100644
--- a/spec/pivotal-ui-react/notification/notification_spec.js
+++ b/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);
diff --git a/src/pivotal-ui-react/notifications/notifications.js b/src/pivotal-ui-react/notifications/notifications.js
index a3297f4a7..58f318b52 100644
--- a/src/pivotal-ui-react/notifications/notifications.js
+++ b/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>;
   }
 });
 
diff --git a/src/pivotal-ui-react/notifications/package.json b/src/pivotal-ui-react/notifications/package.json
index 2a1421db9..13374f4d3 100644
--- a/src/pivotal-ui-react/notifications/package.json
+++ b/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"
   }
diff --git a/src/pivotal-ui/components/dropdowns/dropdowns.scss b/src/pivotal-ui/components/dropdowns/dropdowns.scss
index 335c1432f..76b837383 100644
--- a/src/pivotal-ui/components/dropdowns/dropdowns.scss
+++ b/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.
 
 */