feat(alert): allow for actions render prop, make children required for alertactionlink

Author: seanforyou23

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

@@ -14,15 +14,23 @@ export enum AlertVariant {
   default = 'default'
 }
 
+export type AlertActionRenderer = ({
+  title,
+  variantLabel
+}: {
+  title: React.ReactNode;
+  variantLabel: string;
+}) => React.ReactNode;
+
 export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'action' | 'title'> {
   /** Adds Alert variant styles  */
   variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
   /** Flag to indicate if the Alert is inline */
   isInline?: boolean;
   /** Title of the Alert  */
   title: React.ReactNode;
-  /** Action button to put in the Alert. Should be <AlertActionLink> or <AlertActionCloseButton> */
-  action?: React.ReactNode;
+  /** Action button to put in the Alert. Often <AlertActionLink> or <AlertActionCloseButton> */
+  action?: AlertActionRenderer | React.ReactNode;
   /** Content rendered inside the Alert */
   children?: React.ReactNode;
   /** Additional classes added to the Alert  */
@@ -80,6 +88,9 @@ export const Alert: React.FunctionComponent<AlertProps & OUIAProps> = ({
         {action && (typeof action === 'object' || typeof action === 'string') && (
           <div className={css(styles.alertAction)}>{action}</div>
         )}
+        {action && typeof action === 'function' && (
+          <div className={css(styles.alertAction)}>{action({ title, variantLabel })}</div>
+        )}
       </AlertContext.Provider>
     </div>
   );

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

@@ -10,24 +10,21 @@ interface AlertActionCloseButtonProps extends ButtonProps {
   onClose?: () => void;
   /** Aria Label for the Close button */
   'aria-label'?: string;
-  /** Variant Label for the Close button */
-  variantLabel?: string;
 }
 
 export const AlertActionCloseButton = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   onClose = () => undefined as any,
   'aria-label': ariaLabel = '',
-  variantLabel,
   ...props
 }: AlertActionCloseButtonProps) => (
   <AlertContext.Consumer>
     {({ title, variantLabel: alertVariantLabel }) => (
       <Button
         variant={ButtonVariant.plain}
         onClick={onClose}
-        aria-label={ariaLabel === '' ? `Close ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
+        aria-label={ariaLabel === '' ? `Close ${alertVariantLabel} alert: ${title}` : ariaLabel}
         {...props}
       >
         <TimesIcon />

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

@@ -3,7 +3,7 @@ import { Button, ButtonVariant, ButtonProps } from '../Button';
 
 export interface AlertActionLinkProps extends ButtonProps {
   /** Content rendered inside the AlertLinkAction  */
-  children?: string;
+  children: string;
   /** Additional classes added to the AlertActionLink  */
   className?: string;
 }

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

@@ -83,6 +83,20 @@ Object.values(AlertVariant).forEach(variant => {
       expect(view).toMatchSnapshot();
     });
 
+    test('Custom action', () => {
+      const view = mount(
+        <Alert
+          variant={variant}
+          aria-label={`Custom aria label for ${variant}`}
+          action={({variantLabel, title}) => (<>{variantLabel} {title}</>)}
+          title="Some title"
+        >
+          Some alert
+        </Alert>
+      );
+      expect(view).toMatchSnapshot();
+    });
+
     test('inline variation', () => {
       const view = mount(
         <Alert variant={variant} isInline title="Some title">