Change Notice Opacity, Support FireFox, Custom Notification Container Syles

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.4",
+  "version": "0.4.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/alert/styles.ts

@@ -1,42 +1,39 @@
 import { css } from '@emotion/core';
-import { transparentize } from 'polished';
+import { transparentize, darken } from 'polished';
 import theme from '../theme';
 
 export const baseSeverityCSS = css`
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(10px);
 `;
-export const warningCSS = css(
-  baseSeverityCSS,
-  css`
-    border: 1px solid ${theme.colors.statusWarning};
-    background-color: ${transparentize(0.85, theme.colors.statusWarning)};
-    color: ${theme.colors.statusWarning};
-  `
-);
 
-export const infoCSS = css(
-  baseSeverityCSS,
-  css`
-    border: 1px solid ${theme.colors.statusInfo};
-    background-color: ${transparentize(0.85, theme.colors.statusInfo)};
-    color: ${theme.colors.statusInfo};
-  `
-);
+const bgDarken = 0.4,
+  bgTransparentize = 0.5,
+  // FireFox does not support backdrop-filter so needs to be less transparent and darker
+  bgDarkenFallback = 0.45,
+  bgTransparentizeFallback = 0.1;
 
-export const dangerCSS = css(
-  baseSeverityCSS,
-  css`
-    border: 1px solid ${theme.colors.statusDanger};
-    background-color: ${transparentize(0.85, theme.colors.statusDanger)};
-    color: ${theme.colors.statusDanger};
-  `
-);
+const generateSeverityCSS = (severityColor: string) =>
+  css(
+    baseSeverityCSS,
+    css`
+      border: 1px solid ${severityColor};
+      /* FireFox Only style */
+      background-color: ${transparentize(
+        bgTransparentizeFallback,
+        darken(bgDarkenFallback, severityColor)
+      )};
+      color: ${severityColor};
+      /* background-filter support (Chrome / Safari) */
+      @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+        background-color: ${transparentize(
+          bgTransparentize,
+          darken(bgDarken, severityColor)
+        )};
+      }
+    `
+  );
 
-export const successCSS = css(
-  baseSeverityCSS,
-  css`
-    border: 1px solid ${theme.colors.statusSuccess};
-    background-color: ${transparentize(0.85, theme.colors.statusSuccess)};
-    color: ${theme.colors.statusSuccess};
-  `
-);
+export const warningCSS = generateSeverityCSS(theme.colors.statusWarning);
+export const infoCSS = generateSeverityCSS(theme.colors.statusInfo);
+export const dangerCSS = generateSeverityCSS(theme.colors.statusDanger);
+export const successCSS = generateSeverityCSS(theme.colors.statusSuccess);

src/notification/Notification.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, CSSProperties } from 'react';
 import { css } from '@emotion/core';
 import { Overlay } from '../overlays';
 import { Notice } from './Notice';
@@ -10,7 +10,12 @@ import {
   TRANSITION_EXIT_DURATION_MS,
 } from './constants';
 
-export type NotificationProps = {};
+export type NotificationProps = {
+  /**
+   * If provided, the notification container will use this style as a final override
+   */
+  style?: CSSProperties;
+};
 
 type NotificationState = {
   notices: NoticeDefinition[];
@@ -72,6 +77,7 @@ export class Notification extends Component<
               margin-top: ${theme.spacing.margin16}px;
             }
           `}
+          {...this.props}
         >
           <TransitionGroup className="ac-notice-list">
             {this.state.notices.map(notice => (

stories/Gallery.stories.tsx

@@ -47,7 +47,10 @@ const Template: Story = args => {
               variant="default"
               onClick={() => {
                 notify({
-                  variant: 'success',
+                  // @ts-ignore
+                  variant: ['info', 'success', 'warning', 'danger'][
+                    Math.floor(Math.random() * 4)
+                  ],
                   title: 'Awesome!',
                   message: 'Things worked as expected',
                   action: {

stories/Notification.stories.tsx

@@ -86,3 +86,34 @@ const Template: Story<any> = args => {
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});
+
+export const WithCustomStyle = () => {
+  const [notice, holder] = useNotification({
+    style: { bottom: 100, right: 30 },
+  });
+  return (
+    <Provider>
+      <button
+        onClick={() => {
+          notice({
+            // @ts-ignore
+            variant: ['info', 'success', 'warning', 'danger'][
+              Math.floor(Math.random() * 4)
+            ],
+            title: 'Clicked',
+            message: 'Do you see this?',
+            action: {
+              text: 'Try This',
+              onClick: () => {
+                alert('Done');
+              },
+            },
+          });
+        }}
+      >
+        Click Me
+      </button>
+      {holder}
+    </Provider>
+  );
+};