From 75d46683bb54f058eba04bced74e4da967c9e837 Mon Sep 17 00:00:00 2001 From: Mikel King Date: Tue, 5 Apr 2022 10:05:15 -0600 Subject: [PATCH 1/3] WIP --- src/alert/styles.ts | 58 +++++++++++++++---------------------- stories/Gallery.stories.tsx | 5 +++- 2 files changed, 28 insertions(+), 35 deletions(-) diff --git a/src/alert/styles.ts b/src/alert/styles.ts index a8006034..8585321d 100644 --- a/src/alert/styles.ts +++ b/src/alert/styles.ts @@ -1,42 +1,32 @@ 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(20px); `; -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.5, + bgTransparentize = 0.5; -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}; + background-color: ${darken(bgDarken, severityColor)}; + color: ${severityColor}; + /* background-filter support */ + @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); diff --git a/stories/Gallery.stories.tsx b/stories/Gallery.stories.tsx index c9eb2be3..0e06d1d1 100644 --- a/stories/Gallery.stories.tsx +++ b/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: { From 9fdeef4d4a0ce3831b657caff056d1006cc8d5af Mon Sep 17 00:00:00 2001 From: Mikel King Date: Tue, 5 Apr 2022 19:11:09 -0600 Subject: [PATCH 2/3] Adjust opacity for Notice on FF, support custom noticification container style --- src/alert/styles.ts | 17 ++++++++++++----- src/notification/Notification.tsx | 10 ++++++++-- stories/Notification.stories.tsx | 31 +++++++++++++++++++++++++++++++ 3 files changed, 51 insertions(+), 7 deletions(-) diff --git a/src/alert/styles.ts b/src/alert/styles.ts index 8585321d..b4c0434f 100644 --- a/src/alert/styles.ts +++ b/src/alert/styles.ts @@ -3,20 +3,27 @@ import { transparentize, darken } from 'polished'; import theme from '../theme'; export const baseSeverityCSS = css` - backdrop-filter: blur(20px); + backdrop-filter: blur(10px); `; -const bgDarken = 0.5, - bgTransparentize = 0.5; +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; const generateSeverityCSS = (severityColor: string) => css( baseSeverityCSS, css` border: 1px solid ${severityColor}; - background-color: ${darken(bgDarken, severityColor)}; + /* FireFox Only style */ + background-color: ${transparentize( + bgTransparentizeFallback, + darken(bgDarkenFallback, severityColor) + )}; color: ${severityColor}; - /* background-filter support */ + /* background-filter support (Chrome / Safari) */ @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { background-color: ${transparentize( bgTransparentize, diff --git a/src/notification/Notification.tsx b/src/notification/Notification.tsx index 74412d54..502ffced 100644 --- a/src/notification/Notification.tsx +++ b/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} > {this.state.notices.map(notice => ( diff --git a/stories/Notification.stories.tsx b/stories/Notification.stories.tsx index 37b277ff..9926fe99 100644 --- a/stories/Notification.stories.tsx +++ b/stories/Notification.stories.tsx @@ -86,3 +86,34 @@ const Template: Story = 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 ( + + + {holder} + + ); +}; From 4b02be2b7fcd04fae3fb195fafb506771cad024c Mon Sep 17 00:00:00 2001 From: Mikel King Date: Wed, 6 Apr 2022 09:52:39 -0600 Subject: [PATCH 3/3] v0.4.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 851d3792..cecae390 100644 --- a/package.json +++ b/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",