Breaking/alert

packages/react-core/src/components/Alert/Alert.tsx

@@ -21,8 +21,10 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   isInline?: boolean;
   /** Title of the Alert  */
   title: React.ReactNode;
-  /** Action button to put in the Alert. Should be <AlertActionLink> or <AlertActionCloseButton> */
-  action?: React.ReactNode;
+  /** Close button; use the AlertActionCloseButton component  */
+  actionClose?: React.ReactNode;
+  /** Action links; use a single AlertActionLink component or multiple wrapped in an array or React.Fragment */
+  actionLinks?: React.ReactNode;
   /** Content rendered inside the Alert */
   children?: React.ReactNode;
   /** Additional classes added to the Alert  */
@@ -41,7 +43,8 @@ export const Alert: React.FunctionComponent<AlertProps & OUIAProps> = ({
   isLiveRegion = false,
   variantLabel = `${capitalize(variant)} alert:`,
   'aria-label': ariaLabel = `${capitalize(variant)} Alert`,
-  action = null,
+  actionClose,
+  actionLinks,
   title,
   children = '',
   className = '',
@@ -75,12 +78,13 @@ export const Alert: React.FunctionComponent<AlertProps & OUIAProps> = ({
     >
       <AlertIcon variant={variant} />
       <h4 className={css(styles.alertTitle)}>{getHeadingContent}</h4>
+      {actionClose && (
+        <AlertContext.Provider value={{ title, variantLabel }}>
+          <div className={css(styles.alertAction)}>{actionClose}</div>
+        </AlertContext.Provider>
+      )}
       {children && <div className={css(styles.alertDescription)}>{children}</div>}
-      <AlertContext.Provider value={{ title, variantLabel }}>
-        {action && (typeof action === 'object' || typeof action === 'string') && (
-          <div className={css(styles.alertAction)}>{action}</div>
-        )}
-      </AlertContext.Provider>
+      {actionLinks && <div className={css(styles.alertActionGroup)}>{actionLinks}</div>}
     </div>
   );
 };

packages/react-core/src/components/Alert/AlertActionCloseButton.tsx

@@ -3,7 +3,7 @@ import { Button, ButtonVariant, ButtonProps } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { AlertContext } from './AlertContext';
 
-interface AlertActionCloseButtonProps extends ButtonProps {
+export interface AlertActionCloseButtonProps extends ButtonProps {
   /** Additional classes added to the AlertActionCloseButton */
   className?: string;
   /** A callback for when the close button is clicked */

packages/react-core/src/components/Alert/AlertActionLink.tsx

@@ -13,7 +13,7 @@ export const AlertActionLink: React.FunctionComponent<AlertActionLinkProps> = ({
   children,
   ...props
 }: AlertActionLinkProps) => (
-  <Button variant={ButtonVariant.link} className={className} {...props}>
+  <Button variant={ButtonVariant.link} isInline className={className} {...props}>
     {children}
   </Button>
 );

packages/react-core/src/components/Alert/__tests__/Alert.test.tsx

@@ -37,7 +37,7 @@ Object.values(AlertVariant).forEach(variant => {
 
     test('Action Link', () => {
       const view = mount(
-        <Alert variant={variant} action={<AlertActionLink>test</AlertActionLink>} title="">
+        <Alert variant={variant} actionLinks={[<AlertActionLink>test</AlertActionLink>]} title="">
           Some alert
         </Alert>
       );
@@ -49,7 +49,7 @@ Object.values(AlertVariant).forEach(variant => {
       const view = mount(
         <Alert
           variant={variant}
-          action={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
+          actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
           title={`Sample ${variant} alert`}
         >
           Some alert
@@ -62,7 +62,7 @@ Object.values(AlertVariant).forEach(variant => {
 
     test('Action and Title', () => {
       const view = mount(
-        <Alert variant={variant} action={<AlertActionLink>test</AlertActionLink>} title="Some title">
+        <Alert variant={variant} actionLinks={[<AlertActionLink>test</AlertActionLink>]} title="Some title">
           Some alert
         </Alert>
       );
@@ -74,7 +74,7 @@ Object.values(AlertVariant).forEach(variant => {
         <Alert
           variant={variant}
           aria-label={`Custom aria label for ${variant}`}
-          action={<AlertActionLink>test</AlertActionLink>}
+          actionLinks={[<AlertActionLink>test</AlertActionLink>]}
           title="Some title"
         >
           Some alert

packages/react-core/src/components/Alert/__tests__/Generated/Alert.test.tsx

@@ -13,7 +13,8 @@ it('Alert should match snapshot (auto-generated)', () => {
       variant={'success'}
       isInline={false}
       title={<div>ReactNode</div>}
-      action={null}
+      actionClose={undefined}
+      actionLinks={[]}
       children={''}
       className={"''"}
       aria-label={'string'}

packages/react-core/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx

@@ -9,7 +9,12 @@ import {} from '../..';
 
 it('AlertActionCloseButton should match snapshot (auto-generated)', () => {
   const view = shallow(
-    <AlertActionCloseButton className={"''"} onClose={() => undefined as any} aria-label={"''"} variantLabel={"''"} />
+    <AlertActionCloseButton
+      className={"''"}
+      onClose={() => undefined as any}
+      aria-label={"''"}
+      variantLabel={'string'}
+    />
   );
   expect(view).toMatchSnapshot();
 });

packages/react-core/src/components/Alert/__tests__/Generated/AlertActionLink.test.tsx

@@ -8,6 +8,6 @@ import { AlertActionLink } from '../../AlertActionLink';
 import {} from '../..';
 
 it('AlertActionLink should match snapshot (auto-generated)', () => {
-  const view = shallow(<AlertActionLink children={"''"} className={"''"} />);
+  const view = shallow(<AlertActionLink children={'string'} className={"''"} />);
   expect(view).toMatchSnapshot();
 });

packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/Alert.test.tsx.snap

@@ -23,15 +23,8 @@ exports[`Alert should match snapshot (auto-generated) 1`] = `
       ReactNode
     </div>
   </h4>
-  <ContextProvider
-    value={
-      Object {
-        "title": <div>
-          ReactNode
-        </div>,
-        "variantLabel": "string",
-      }
-    }
+  <div
+    className="pf-c-alert__action-group"
   />
 </div>
 `;

packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap

@@ -3,8 +3,9 @@
 exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
 <Button
   className="''"
+  isInline={true}
   variant="link"
 >
-  ''
+  string
 </Button>
 `;