refactor(Alert, EmptyState, Popover): Upgraded to Core version 1.0.137 (

patternfly#1259)

* refactor(Alert EmptyState Popover): Upgraded to Core version 1.0,137 and refactored breaking changes

patternfly#1220 patternfly#1257 patternfly#1258

* fix build error

.gitignore

@@ -24,6 +24,7 @@ lerna-debug.log
 *.launch
 .settings/
 *.sublime-workspace
+.history/*
 
 # IDE - VSCode
 .vscode/*

packages/patternfly-4/react-charts/package.json

@@ -46,7 +46,7 @@
     "victory": "^30.1.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly-next": "1.0.126",
+    "@patternfly/patternfly-next": "1.0.137",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",

packages/patternfly-4/react-core/package.json

@@ -62,7 +62,7 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.0.0",
-    "@patternfly/patternfly-next": "1.0.126",
+    "@patternfly/patternfly-next": "1.0.137",
     "@types/enzyme": "^3.1.15",
     "@types/jest": "^23.3.10",
     "@types/prop-types": "^15.5.6",

packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalBox.test.js.snap

@@ -4,8 +4,9 @@ exports[`AboutModalBox Test 1`] = `
 .pf-c-about-modal-box {
   display: grid;
   z-index: 600;
-  grid-template-rows: max-content max-content auto max-content;
+  grid-template-rows: max-content max-content auto;
   grid-template-areas: "brand close" "header header" "content content";
+  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   background-color: #030303;

packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalBoxContent.test.js.snap

@@ -4,7 +4,6 @@ exports[`AboutModalBoxContent Test 1`] = `
 .pf-c-about-modal-box__content {
   display: block;
   grid-area: content;
-  min-height: calc(1rem * 4 * 1.5);
   margin: 2rem 2rem 2rem 2rem;
   overflow-x: hidden;
   overflow-y: auto;

packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalBoxHeader.test.js.snap

@@ -12,7 +12,6 @@ exports[`AboutModalBoxHeader Test 1`] = `
   display: flex;
   grid-area: header;
   flex-direction: column;
-  justify-content: flex-end;
   padding-right: 2rem;
   padding-bottom: 0.5rem;
   padding-left: 2rem;

packages/patternfly-4/react-core/src/components/Alert/Alert.d.ts

@@ -12,8 +12,9 @@ export interface AlertProps extends Omit<HTMLProps<HTMLDivElement>, 'action'> {
   variant: OneOf<typeof AlertVariant, keyof typeof AlertVariant>;
   children?: ReactNode;
   action?: ReactNode;
-  onClose?: Function;
-  closeButtonAriaLabel?: String;
+  title?: string;
+  'aria-label': string;
+  variantLabel?: string;
 }
 
 declare const Alert: SFC<AlertProps>;

packages/patternfly-4/react-core/src/components/Alert/Alert.docs.js

@@ -1,4 +1,4 @@
-import { Alert, AlertVariant } from '@patternfly/react-core';
+import { Alert, AlertVariant, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core';
 import SuccessExample from './examples/SuccessAlert';
 import DangerExample from './examples/DangerAlert';
 import InfoExample from './examples/InfoAlert';
@@ -8,7 +8,9 @@ import getContainerProps from './examples/common/getContainerProps';
 export default {
   title: 'Alert',
   components: {
-    Alert
+    Alert,
+    AlertActionCloseButton,
+    AlertActionLink
   },
   enumValues: {
     'Object.values(AlertVariant)': Object.values(AlertVariant)

packages/patternfly-4/react-core/src/components/Alert/Alert.js

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import styles from '@patternfly/patternfly-next/components/Alert/alert.css';
 import accessibleStyles from '@patternfly/patternfly-next/utilities/Accessibility/accessibility.css';
 import AlertIcon from './AlertIcon';
-import AlertBody from './AlertBody';
-import AlertAction from './AlertAction';
 import { capitalize } from '../../internal/util';
+import AlertActionCloseButton from './AlertActionCloseButton';
+import AlertActionLink from './AlertActionLink';
 
 export const AlertVariant = {
   success: 'success',
@@ -18,7 +18,7 @@ export const AlertVariant = {
 const propTypes = {
   /** Adds Alert variant styles */
   variant: PropTypes.oneOf(Object.values(AlertVariant)).isRequired,
-  /** Action button to put in the Alert */
+  /** Action button to put in the Alert.  Should be <AlertActionLink> or <AlertActionCloseButton> */
   action: PropTypes.node,
   /** Title of the Alert */
   title: PropTypes.string,
@@ -30,10 +30,6 @@ const propTypes = {
   'aria-label': PropTypes.string,
   /** Variant label text for screen readers */
   variantLabel: PropTypes.string,
-  /** A callback for when the close button is clicked (if undefined, no close button is rendered) */
-  onClose: PropTypes.func,
-  /** Allows localization of the accessible label on the close button */
-  closeButtonAriaLabel: PropTypes.string,
   /** Additional props are spread to the container <div>  */
   '': PropTypes.any
 };
@@ -44,9 +40,7 @@ const defaultProps = {
   title: '',
   children: '',
   className: '',
-  variantLabel: null,
-  onClose: undefined,
-  closeButtonAriaLabel: 'Close'
+  variantLabel: null
 };
 
 const getDefaultAriaLabel = variant => `${capitalize(AlertVariant[variant])} Notification`;
@@ -59,8 +53,6 @@ const Alert = ({
   title,
   children,
   className,
-  onClose,
-  closeButtonAriaLabel,
   ...props
 }) => {
   variantLabel = variantLabel || capitalize(AlertVariant[variant]);
@@ -76,10 +68,13 @@ const Alert = ({
   return (
     <div {...props} className={customClassName} aria-label={ariaLabel}>
       <AlertIcon variant={variant} />
-      <AlertBody title={readerTitle} onClose={onClose} closeButtonAriaLabel={closeButtonAriaLabel}>
-        {children}
-      </AlertBody>
-      {action && <AlertAction>{action}</AlertAction>}
+      {title && <h4 className={css(styles.alertTitle)}>{readerTitle}</h4>}
+      {children && (
+        <div className={css(styles.alertDescription)}>
+          <p>{children}</p>
+        </div>
+      )}
+      {action && <div className={css(styles.alertAction, className)}>{action}</div>}
     </div>
   );
 };

packages/patternfly-4/react-core/src/components/Alert/Alert.test.js

@@ -2,10 +2,12 @@ import React from 'react';
 import { mount } from 'enzyme';
 
 import Alert, { AlertVariant } from './Alert';
+import AlertActionLink from './AlertActionLink';
+import AlertActionCLoseButton from './AlertActionCloseButton';
 
 Object.keys(AlertVariant).forEach(variant => {
   describe(`Alert - ${variant}`, () => {
-    test('Body', () => {
+    test('Description', () => {
       const view = mount(<Alert variant={variant}>Some alert</Alert>);
       expect(view).toMatchSnapshot();
     });
@@ -19,28 +21,19 @@ Object.keys(AlertVariant).forEach(variant => {
       expect(view).toMatchSnapshot();
     });
 
-    test('Action', () => {
+    test('Action Link', () => {
       const view = mount(
-        <Alert variant={variant} action="action">
+        <Alert variant={variant} action={<AlertActionLink>test</AlertActionLink>}>
           Some alert
         </Alert>
       );
       expect(view).toMatchSnapshot();
     });
 
-    test('Action and Title', () => {
-      const view = mount(
-        <Alert variant={variant} action="action" title="Some title">
-          Some alert
-        </Alert>
-      );
-      expect(view).toMatchSnapshot();
-    });
-
-    test('Close button', () => {
+    test('Action Close Button', () => {
       const onClose = jest.fn();
       const view = mount(
-        <Alert variant={variant} onClose={onClose}>
+        <Alert variant={variant} action={<AlertActionCLoseButton aria-label="Close" onClose={onClose} />}>
           Some alert
         </Alert>
       );
@@ -49,21 +42,23 @@ Object.keys(AlertVariant).forEach(variant => {
       expect(onClose).toHaveBeenCalled();
     });
 
-    test('Close button and Title', () => {
-      const onClose = jest.fn();
+    test('Action and Title', () => {
       const view = mount(
-        <Alert variant={variant} onClose={onClose} title="Some title">
+        <Alert variant={variant} action={<AlertActionLink>test</AlertActionLink>} title="Some title">
           Some alert
         </Alert>
       );
       expect(view).toMatchSnapshot();
-      view.find('button[aria-label="Close"]').simulate('click');
-      expect(onClose).toHaveBeenCalled();
     });
 
     test('Custom aria label', () => {
       const view = mount(
-        <Alert variant={variant} aria-label={`Custom aria label for ${variant}`} action="action" title="Some title">
+        <Alert
+          variant={variant}
+          aria-label={`Custom aria label for ${variant}`}
+          action={<AlertActionLink>test</AlertActionLink>}
+          title="Some title"
+        >
           Some alert
         </Alert>
       );

packages/patternfly-4/react-core/src/components/Alert/AlertActionCloseButton.d.ts

@@ -0,0 +1,11 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+import { OneOf, Omit } from '../../typeUtils';
+
+export interface AlertActionCloseButtonProps extends HTMLProps<HTMLDivElement> {
+  onClose?: Function;
+  'aria-label'?: string;
+}
+
+declare const AlertActionCloseButton: SFC<AlertActionCloseButtonProps>;
+
+export default AlertActionCloseButton;

packages/patternfly-4/react-core/src/components/Alert/AlertActionCloseButton.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import styles from '@patternfly/patternfly-next/components/Alert/alert.css';
+import { Button, ButtonVariant } from '../Button';
+import { TimesIcon } from '@patternfly/react-icons';
+
+const propTypes = {
+  /** additional classes added to the AlertActionCloseButton */
+  className: PropTypes.string,
+  /** A callback for when the close button is clicked */
+  onClose: PropTypes.func,
+  /** Aria Label for the Close button */
+  'aria-label': PropTypes.string,
+  /** Additional props are spread to the container <Button>  */
+  '': PropTypes.any
+};
+
+const defaultProps = {
+  className: '',
+  onClose: () => undefined,
+  'aria-label': 'Close'
+};
+
+const AlertActionCloseButton = ({ className, onClose, 'aria-label': ariaLabel, ...props }) => (
+  <Button variant={ButtonVariant.plain} onClick={onClose} aria-label={ariaLabel} {...props}>
+    <TimesIcon />
+  </Button>
+);
+
+AlertActionCloseButton.propTypes = propTypes;
+AlertActionCloseButton.defaultProps = defaultProps;
+
+export default AlertActionCloseButton;

packages/patternfly-4/react-core/src/components/Alert/AlertActionLink.d.ts

@@ -0,0 +1,8 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+import { OneOf, Omit } from '../../typeUtils';
+
+export interface AlertActionLinkProps extends HTMLProps<HTMLDivElement> {}
+
+declare const AlertActionLink: SFC<AlertActionLinkProps>;
+
+export default AlertActionLink;

packages/patternfly-4/react-core/src/components/Alert/AlertActionLink.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import styles from '@patternfly/patternfly-next/components/Alert/alert.css';
+import { Button, ButtonVariant } from '../Button';
+
+const propTypes = {
+  /** content rendered inside the AlertLinkAction */
+  children: PropTypes.string,
+  /** additional classes added to the AlertActionLink */
+  className: PropTypes.string,
+  /** Additional props are spread to the container <Button>  */
+  '': PropTypes.any
+};
+
+const defaultProps = {
+  children: '',
+  className: ''
+};
+
+const AlertActionLink = ({ className, children, ...props }) => (
+  <Button variant={ButtonVariant.link} {...props}>
+    {children}
+  </Button>
+);
+
+AlertActionLink.propTypes = propTypes;
+AlertActionLink.defaultProps = defaultProps;
+
+export default AlertActionLink;

packages/patternfly-4/react-core/src/components/Alert/AlertBody.js

@@ -22,7 +22,7 @@ const defaultProps = {
 };
 
 const AlertBody = ({ title, className, children, onClose, closeButtonAriaLabel, ...props }) => (
-  <div {...props} className={css(styles.alertBody, className)}>
+  <div {...props} className={className}>
     {onClose && (
       <Button variant={ButtonVariant.plain} onClick={onClose} aria-label={closeButtonAriaLabel}>
         <TimesIcon />