feat(Alert): Add the default alert variant (#2648)

* feat(Alert): Add the default alert variant #2596 * update snapshot test * fix linting error
patternfly · Aug 6, 2019 · 322a242 · 322a242
1 parent 3d6304a
commit 322a242
Show file tree

Hide file tree

Showing 6 changed files with 662 additions and 9 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Alert/Alert.md b/packages/patternfly-4/react-core/src/components/Alert/Alert.md
@@ -7,6 +7,47 @@ propComponents: ['Alert', 'AlertActionCloseButton', 'AlertActionLink']
 import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core';
 import './examples/alert.scss';
 
+## Default alert
+```js
+import React from 'react';
+import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core';
+
+class DefaultAlert extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { alertOneVisible: true, alertTwoVisible: true };
+    this.hideAlertOne = () => this.setState({ alertOneVisible: false });
+    this.hideAlertTwo = () => this.setState({ alertTwoVisible: false });
+  }
+
+  render() {
+    const { alertOneVisible, alertTwoVisible } = this.state;
+    return (
+      <React.Fragment>
+        {alertOneVisible && (
+          <Alert
+            variant="default"
+            title="Default alert title"
+            action={<AlertActionCloseButton onClose={this.hideAlertOne} />}
+          >
+            Info alert description. <a href="#">This is a link.</a>
+          </Alert>
+        )}
+        {alertTwoVisible && (
+          <Alert
+            variant="default"
+            title="Default alert title"
+            action={<AlertActionCloseButton onClose={this.hideAlertTwo} />}
+          />
+        )}
+        <Alert variant="default" title="Default alert title" action={<AlertActionLink>Action Button</AlertActionLink>} />
+        <Alert variant="default" title="Default alert title" />
+      </React.Fragment>
+    );
+  }
+}
+```
+
 ## Info alert
 ```js
 import React from 'react';
@@ -185,6 +226,7 @@ class InlineAlert extends React.Component {
   render() {
     return (
       <React.Fragment>
+        <Alert variant="default" isInline title="Default inline alert title"/>
         <Alert variant="info" isInline title="Info inline alert title"/>
         <Alert variant="success" isInline title="Success inline alert title" />
         <Alert variant="warning" isInline title="Warning inline alert title" />

diff --git a/packages/patternfly-4/react-core/src/components/Alert/Alert.tsx b/packages/patternfly-4/react-core/src/components/Alert/Alert.tsx
@@ -10,13 +10,14 @@ export enum AlertVariant {
   success = 'success',
   danger = 'danger',
   warning = 'warning',
-  info = 'info'
+  info = 'info',
+  default = 'default'
 }
 
 export interface AlertProps
   extends Omit<React.HTMLProps<HTMLDivElement>, 'action' | 'title'> {
   /** Adds Alert variant styles  */
-  variant?: 'success' | 'danger' | 'warning' | 'info';
+  variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
   /** Flag to indicate if the Alert is inline */
   isInline?: boolean;
   /** Title of the Alert  */
@@ -51,7 +52,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
     </React.Fragment>
   );
 
-  const customClassName = css(styles.alert, isInline && styles.modifiers.inline, getModifier(styles, variant, styles.modifiers.info), className);
+  const customClassName = css(styles.alert, isInline && styles.modifiers.inline, (variant !== AlertVariant.default ) && getModifier(styles, variant, styles.modifiers.info), className);
 
   return (
     <div {...props} className={customClassName} aria-label={ariaLabel}>

diff --git a/packages/patternfly-4/react-core/src/components/Alert/AlertIcon.tsx b/packages/patternfly-4/react-core/src/components/Alert/AlertIcon.tsx
@@ -5,19 +5,21 @@ import {
   CheckCircleIcon,
   ExclamationCircleIcon,
   ExclamationTriangleIcon,
-  InfoCircleIcon
+  InfoCircleIcon,
+  BellIcon
 } from '@patternfly/react-icons';
 
 export const variantIcons = {
   success: CheckCircleIcon,
   danger: ExclamationCircleIcon,
   warning: ExclamationTriangleIcon,
-  info: InfoCircleIcon
+  info: InfoCircleIcon,
+  default: BellIcon
 };
 
 export interface AlertIconProps extends React.HTMLProps<HTMLDivElement> {
   /** variant */
-  variant: 'success' | 'danger' | 'warning' | 'info';
+  variant: 'success' | 'danger' | 'warning' | 'info' | 'default';
   /** className */
   className?: string;
 };