From 322a242394f2608ae2f03970f545941d680e674b Mon Sep 17 00:00:00 2001 From: Titani Labaj <39532947+tlabaj@users.noreply.github.com> Date: Tue, 6 Aug 2019 16:18:53 -0400 Subject: [PATCH] feat(Alert): Add the default alert variant (#2648) * feat(Alert): Add the default alert variant #2596 * update snapshot test * fix linting error --- .../react-core/src/components/Alert/Alert.md | 42 ++ .../react-core/src/components/Alert/Alert.tsx | 7 +- .../src/components/Alert/AlertIcon.tsx | 8 +- .../Alert/__snapshots__/Alert.test.tsx.snap | 591 ++++++++++++++++++ .../cypress/integration/alert.spec.ts | 12 +- .../components/demos/AlertDemo/AlertDemo.tsx | 11 +- 6 files changed, 662 insertions(+), 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 index 613b2ff58a0..17a5017f64f 100644 --- 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 ( + + {alertOneVisible && ( + } + > + Info alert description. This is a link. + + )} + {alertTwoVisible && ( + } + /> + )} + Action Button} /> + + + ); + } +} +``` + ## Info alert ```js import React from 'react'; @@ -185,6 +226,7 @@ class InlineAlert extends React.Component { render() { return ( + diff --git a/packages/patternfly-4/react-core/src/components/Alert/Alert.tsx b/packages/patternfly-4/react-core/src/components/Alert/Alert.tsx index 315428dd421..c605c717485 100644 --- 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, '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 = ({ ); - 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 (
diff --git a/packages/patternfly-4/react-core/src/components/Alert/AlertIcon.tsx b/packages/patternfly-4/react-core/src/components/Alert/AlertIcon.tsx index 8edae6b4698..83e959d3cfb 100644 --- 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 { /** variant */ - variant: 'success' | 'danger' | 'warning' | 'info'; + variant: 'success' | 'danger' | 'warning' | 'info' | 'default'; /** className */ className?: string; }; diff --git a/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.tsx.snap index d9358a54b6b..3ce83263131 100644 --- a/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.tsx.snap +++ b/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.tsx.snap @@ -591,6 +591,597 @@ exports[`Alert - danger inline variation 1`] = ` `; +exports[`Alert - default Action Close Button 1`] = ` + + } + title="" + variant="default" +> +
+ +
+ + + + + +
+ +

+ + Default alert: + +

+
+ Some alert +
+
+ + + + + +
+
+ +`; + +exports[`Alert - default Action Link 1`] = ` + + test + + } + title="" + variant="default" +> +
+ +
+ + + + + +
+ +

+ + Default alert: + +

+
+ Some alert +
+
+ + + + + +
+
+ +`; + +exports[`Alert - default Action and Title 1`] = ` + + test + + } + title="Some title" + variant="default" +> +
+ +
+ + + + + +
+ +

+ + Default alert: + + Some title +

+
+ Some alert +
+
+ + + + + +
+
+ +`; + +exports[`Alert - default Custom aria label 1`] = ` + + test + + } + aria-label="Custom aria label for default" + title="Some title" + variant="default" +> +
+ +
+ + + + + +
+ +

+ + Default alert: + + Some title +

+
+ Some alert +
+
+ + + + + +
+
+ +`; + +exports[`Alert - default Description 1`] = ` + +
+ +
+ + + + + +
+ +

+ + Default alert: + +

+
+ Some alert +
+
+ +`; + +exports[`Alert - default Title 1`] = ` + +
+ +
+ + + + + +
+ +

+ + Default alert: + + Some title +

+
+ Some alert +
+
+ +`; + +exports[`Alert - default inline variation 1`] = ` + +
+ +
+ + + + + +
+ +

+ + Default alert: + + Some title +

+
+ Some alert +
+
+ +`; + exports[`Alert - info Action Close Button 1`] = ` { }); it('Verify info alert', () => { - cy.get('.pf-c-alert').should('have.class', 'pf-m-info'); + cy.get('#info-alert').should('have.class', 'pf-m-info'); + }); + + it('Verify default inline alert', () => { + cy.get('#default-alert').should('not.have.class', 'pf-m-info'); + cy.get('#default-alert').should('not.have.class', 'pf-success'); + cy.get('#default-alert').should('not.have.class', 'pf-m-danger'); + cy.get('#default-alert').should('not.have.class', 'pf-m-warning'); + cy.get('#default-alert').should('have.class', 'pf-m-inline'); }); it('Verify alert closes', () => { cy.get('#test-button').click(); - cy.get('.pf-c-alert').should('not.exist'); + cy.get('#info-alert').should('not.exist'); }); }); diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx index a19fb5b95ba..8a245a9978b 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx +++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx @@ -22,7 +22,8 @@ export class AlertDemo extends React.Component { return ( {alertOneVisible && ( - } @@ -30,6 +31,14 @@ export class AlertDemo extends React.Component { Info alert description. This is a link. )} + + Info alert description + ); }