fix(alert): use context to set label (#3771)

Author: seanforyou23

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

@@ -35,6 +35,13 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   isLiveRegion?: boolean;
 }
 
+interface AlertContext {
+  title: React.ReactNode;
+  variantLabel?: string;
+}
+
+export const AlertContext = React.createContext<AlertContext>(null);
+
 const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
   variant = AlertVariant.info,
   isInline = false,
@@ -49,7 +56,7 @@ const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
   ouiaId = null,
   ...props
 }: AlertProps & InjectedOuiaProps) => {
-  const readerTitle = (
+  const getHeadingContent = (
     <React.Fragment>
       <span className={css(accessibleStyles.screenReader)}>{variantLabel}</span>
       {title}
@@ -78,11 +85,13 @@ const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
       })}
     >
       <AlertIcon variant={variant} />
-      <h4 className={css(styles.alertTitle)}>{readerTitle}</h4>
+      <h4 className={css(styles.alertTitle)}>{getHeadingContent}</h4>
       {children && <div className={css(styles.alertDescription)}>{children}</div>}
-      {action && (
-        <div className={css(styles.alertAction)}>{React.cloneElement(action as any, { title, variantLabel })}</div>
-      )}
+      <AlertContext.Provider value={{ title, variantLabel }}>
+        {action && (typeof action === 'object' || typeof action === 'string') && (
+          <div className={css(styles.alertAction)}>{action}</div>
+        )}
+      </AlertContext.Provider>
     </div>
   );
 };

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Button, ButtonVariant, ButtonProps } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { AlertContext } from '..';
 
 interface AlertActionCloseButtonProps extends ButtonProps {
   /** Additional classes added to the AlertActionCloseButton */
@@ -18,16 +19,19 @@ export const AlertActionCloseButton = ({
   className = '',
   onClose = () => undefined as any,
   'aria-label': ariaLabel = '',
-  title,
-  variantLabel = '',
+  variantLabel,
   ...props
 }: AlertActionCloseButtonProps) => (
-  <Button
-    variant={ButtonVariant.plain}
-    onClick={onClose}
-    aria-label={ariaLabel === '' ? `Close ${variantLabel} alert: ${title}` : ariaLabel}
-    {...props}
-  >
-    <TimesIcon />
-  </Button>
+  <AlertContext.Consumer>
+    {({ title, variantLabel: alertVariantLabel }) => (
+      <Button
+        variant={ButtonVariant.plain}
+        onClick={onClose}
+        aria-label={ariaLabel === '' ? `Close ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
+        {...props}
+      >
+        <TimesIcon />
+      </Button>
+    )}
+  </AlertContext.Consumer>
 );

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

@@ -10,7 +10,7 @@ export interface AlertActionLinkProps extends ButtonProps {
 
 export const AlertActionLink: React.FunctionComponent<AlertActionLinkProps> = ({
   className = '',
-  children = '',
+  children,
   ...props
 }: AlertActionLinkProps) => (
   <Button variant={ButtonVariant.link} className={className} {...props}>

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

@@ -47,7 +47,7 @@ Object.values(AlertVariant).forEach(variant => {
     test('Action Close Button', () => {
       const onClose = jest.fn();
       const view = mount(
-        <Alert variant={variant} action={<AlertActionCloseButton aria-label="Close" onClose={onClose} />} title="">
+        <Alert variant={variant} action={<AlertActionCloseButton aria-label="Close" onClose={onClose} />} title={`Sample ${variant} alert`}>
           Some alert
         </Alert>
       );

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

@@ -1,16 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlertActionCloseButton should match snapshot (auto-generated) 1`] = `
-<Component
-  aria-label="''"
-  onClick={[Function]}
-  variant="plain"
->
-  <TimesIcon
-    color="currentColor"
-    noVerticalAlign={false}
-    size="sm"
-    title={null}
-  />
-</Component>
+<ContextConsumer>
+  <Component />
+</ContextConsumer>
 `;