Improve Notifications

.storybook/Story.scss

@@ -782,30 +782,51 @@ $color-grid-card-width: 154px;
     right: initial;
     margin: 12px;
   }
+}
 
-  button {
-    margin-bottom: 4px;
-    font-size: 12px;
-    font-weight: $cf-font-weight--bold;
-    height: 24px;
-    line-height: 24px;
-    padding: 0 8px;
-    border-radius: 4px;
-    background-color: $g5-pepper;
-    color: $g13-mist;
-    border: 0;
-    outline: none;
-    transition: color 0.25s ease, background-color 0.25s ease;
+.story--test-buttons button,
+.story--test-button {
+  font-size: 12px;
+  font-weight: $cf-font-weight--bold;
+  height: 24px;
+  line-height: 24px;
+  padding: 0 8px;
+  border-radius: $cf-radius;
+  background-color: $g5-pepper;
+  color: $g13-mist;
+  border: 0;
+  outline: none;
+  transition: color 0.25s ease, background-color 0.25s ease;
+  user-select: none;
 
-    &:hover {
-      background-color: $g6-smoke;
-      color: $g16-pearl;
-      cursor: pointer;
-    }
+  &:hover {
+    background-color: $g6-smoke;
+    color: $g16-pearl;
+    cursor: pointer;
+  }
 
-    &:active {
-      background-color: $c-pool;
-      color: $g20-white;
-    }
+  &:active {
+    background-color: $c-pool;
+    color: $g20-white;
+  }
+}
+
+.notification-tester {
+  margin: $cf-marg-c 0;
+  width: 400px;
+  height: 220px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: space-between;
+  padding: $cf-marg-b;
+  border: $cf-border solid $g2-kevlar;
+  border-radius: $cf-radius + 1;
+
+  > div {
+    display: flex;
+    justify-content: space-between;
   }
 }
+
+

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 
-#### 2.0.4 (Unreleased)
+#### 2.0.5 (Unreleased)
+
+- [#484](https://github.com/influxdata/clockface/pull/484): Fix `z-index` issue causing notifications to appear underneath `FunnelPage`
+
+#### 2.0.4
 
 - [#483](https://github.com/influxdata/clockface/pull/483): Add single-hue gradients for each color spectrum
 - [#481](https://github.com/influxdata/clockface/pull/481): Ensure `testID` and `onClick` are attached to the same element in `ResourceName` and `ResourceNameEditable`

src/Components/FunnelPage/Documentation/FunnelPage.stories.tsx

@@ -6,6 +6,7 @@ import marked from 'marked'
 import {storiesOf} from '@storybook/react'
 import {withKnobs, select, boolean} from '@storybook/addon-knobs'
 import {mapEnumKeys} from '../../../Utils/storybook'
+import {useState} from '@storybook/addons'
 
 // Components
 import {FunnelPage, FunnelPageRef, FunnelPageFooterRef} from '../'
@@ -17,6 +18,7 @@ import {Grid} from '../../Grid'
 import {Panel} from '../../Panel'
 import {FlexBox} from '../../FlexBox'
 import {Heading} from '../../Typography'
+import {Notification} from '../../Notification'
 
 // Types
 import {
@@ -29,6 +31,7 @@ import {
   ComponentSize,
   Columns,
   HeadingElement,
+  Gradients,
 } from '../../../Types'
 
 // Notes
@@ -201,6 +204,16 @@ funnelPageExampleStories.add(
       />
     )
 
+    const [notificationState, setNotificationState] = useState<boolean>(false)
+
+    const handleDismissNotification = (): void => {
+      setNotificationState(false)
+    }
+
+    const handleShowNotification = (): void => {
+      setNotificationState(true)
+    }
+
     return (
       <div className="mockPageWrapper">
         <div className="mockPage">
@@ -209,6 +222,15 @@ funnelPageExampleStories.add(
               logo={logo}
               enableGraphic={boolean('enableGraphic', false)}
             >
+              <Notification
+                size={ComponentSize.Small}
+                visible={notificationState}
+                icon={IconFont.Zap}
+                gradient={Gradients.KawaiiDesu}
+                onDismiss={handleDismissNotification}
+              >
+                Yeehaw I'm a notification
+              </Notification>
               <Grid>
                 <Grid.Row>
                   <Grid.Column widthSM={Columns.Eight} offsetSM={Columns.Two}>
@@ -324,6 +346,7 @@ funnelPageExampleStories.add(
                           color={ComponentColor.Secondary}
                           text="Upgrade to Usage-Based Plan"
                           size={ComponentSize.Large}
+                          onClick={handleShowNotification}
                         />
                       </FlexBox>
                     </Grid.Column>

src/Components/Notification/Documentation/Notification.md

@@ -7,11 +7,17 @@ This `Notification` component peeks in to quickly and temporarily provide feedba
 ```tsx
 import {Notification} from '@influxdata/clockface'
 ```
+```tsx
+<Notifcation />
+```
+This component uses react portals to render itself on the top of the DOM. You can control the position using the `verticalAlignment` and `horizontalAlignment` props. If there are multiple `Notifications` present they will automatically stack.
 
 ### Customization
 
 You can pass in a `backgroundColor` or `gradient` to control the colorization of the panel. If both props are passed in the `gradient` prop will override the `backgroundColor` prop.
 
+By default a notification will have `max-width: 500px`. If you want to change that pass in a new style object to the `style` prop.
+
 ### Example
 
 <!-- STORY -->