@patternfly/react-core 5.0.0-alpha.9 → 5.0.0-alpha.91

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -4,45 +4,45 @@ import {
   ActionListItem,
   Button,
   Dropdown,
+  DropdownList,
   DropdownItem,
-  DropdownSeparator,
-  KebabToggle
+  MenuToggle,
+  MenuToggleElement,
+  Divider
 } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ActionListSingleGroup: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (
-    isOpen: boolean,
-    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>
-  ) => {
-    event.stopPropagation();
-    setIsOpen(isOpen);
+  const onToggle = () => {
+    setIsOpen(!isOpen);
   };
 
-  const onSelect = (event: React.SyntheticEvent<HTMLDivElement, Event>) => {
-    event.stopPropagation();
+  const onSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined) => {
+    event?.stopPropagation();
     setIsOpen(!isOpen);
   };
 
-  const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
-      Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
-      Disabled Action
-    </DropdownItem>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
-      Separated Action
-    </DropdownItem>
-  ];
-
+  const dropdownItems = (
+    <>
+      <DropdownItem to="#" key="link">
+        Link
+      </DropdownItem>
+      <DropdownItem key="action">Action</DropdownItem>
+      <DropdownItem to="#" key="disabled link" isDisabled>
+        Disabled Link
+      </DropdownItem>
+      <DropdownItem key="disabled action" isDisabled>
+        Disabled Action
+      </DropdownItem>
+      <Divider component="li" key="separator" />
+      <DropdownItem to="#" key="separated link">
+        Separated Link
+      </DropdownItem>
+      <DropdownItem key="separated action">Separated Action</DropdownItem>
+    </>
+  );
   return (
     <React.Fragment>
       <ActionList>
@@ -73,12 +73,22 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
         <ActionListItem>
           <Dropdown
             onSelect={onSelect}
-            toggle={<KebabToggle onToggle={onToggle} />}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onToggle}
+                variant="plain"
+                isExpanded={isOpen}
+                aria-label="Action list single group kebab"
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            position="right"
-          />
+            onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </Dropdown>
         </ActionListItem>
       </ActionList>
     </React.Fragment>

package/src/components/Alert/Alert.tsx

@@ -15,7 +15,7 @@ export enum AlertVariant {
   danger = 'danger',
   warning = 'warning',
   info = 'info',
-  default = 'default'
+  custom = 'custom'
 }
 
 /** The main alert component. */
@@ -27,8 +27,6 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
    * or React.Fragment.
    */
   actionLinks?: React.ReactNode;
-  /** Adds accessible text to the alert. */
-  'aria-label'?: string;
   /** Content rendered inside the alert. */
   children?: React.ReactNode;
   /** Additional classes to add to the alert.  */
@@ -57,8 +55,6 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   timeoutAnimation?: number;
   /** Title of the alert.  */
   title: React.ReactNode;
-  /** @deprecated Sets the heading level to use for the alert title. Default is h4. */
-  titleHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   /** Sets the element to use as the alert title. Default is h4. */
   component?: keyof JSX.IntrinsicElements;
   /** Adds accessible text to the alert toggle. */
@@ -82,7 +78,7 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   /** Truncate title to number of lines. */
   truncateTitle?: number;
   /** Adds alert variant styles.  */
-  variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
+  variant?: 'success' | 'danger' | 'warning' | 'info' | 'custom';
   /** Variant label text for screen readers. */
   variantLabel?: string;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -92,16 +88,14 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
 }
 
 export const Alert: React.FunctionComponent<AlertProps> = ({
-  variant = AlertVariant.default,
+  variant = AlertVariant.custom,
   isInline = false,
   isPlain = false,
   isLiveRegion = false,
   variantLabel = `${capitalize(variant)} alert:`,
-  'aria-label': ariaLabel = `${capitalize(variant)} Alert`,
   actionClose,
   actionLinks,
   title,
-  titleHeadingLevel,
   component = 'h4',
   children = '',
   className = '',
@@ -129,13 +123,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   );
 
   const titleRef = React.useRef(null);
-  const TitleComponent = (titleHeadingLevel || component) as any;
-  if (titleHeadingLevel !== undefined) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'Alert: titleHeadingLevel is deprecated, please use the newer component prop instead to set the alert title element.'
-    );
-  }
+  const TitleComponent = component as any;
 
   const divRef = React.useRef<HTMLDivElement>();
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
@@ -226,10 +214,9 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
         isPlain && styles.modifiers.plain,
         isExpandable && styles.modifiers.expandable,
         isExpanded && styles.modifiers.expanded,
-        styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'],
+        styles.modifiers[variant],
         className
       )}
-      aria-label={ariaLabel}
       {...ouiaProps}
       {...(isLiveRegion && {
         'aria-live': 'polite',

package/src/components/Alert/AlertGroup.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { canUseDOM } from '../../helpers';
+import { AlertGroupInline } from './AlertGroupInline';
+
+export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>, 'className'> {
+  /** Additional classes added to the AlertGroup */
+  className?: string;
+  /** Alerts to be rendered in the AlertGroup */
+  children?: React.ReactNode;
+  /** Toast notifications are positioned at the top right corner of the viewport */
+  isToast?: boolean;
+  /** Turns the container into a live region so that changes to content within the AlertGroup, such as appending an Alert, are reliably announced to assistive technology. */
+  isLiveRegion?: boolean;
+  /** Determine where the alert is appended to */
+  appendTo?: HTMLElement | (() => HTMLElement);
+  /** Function to call if user clicks on overflow message */
+  onOverflowClick?: () => void;
+  /** Custom text to show for the overflow message */
+  overflowMessage?: string;
+  /** Adds an accessible label to the alert group. */
+  'aria-label'?: string;
+}
+
+interface AlertGroupState {
+  container: HTMLElement;
+}
+
+export class AlertGroup extends React.Component<AlertGroupProps, AlertGroupState> {
+  static displayName = 'AlertGroup';
+  state = {
+    container: undefined
+  } as AlertGroupState;
+
+  componentDidMount() {
+    const container = document.createElement('div');
+    const target: HTMLElement = this.getTargetElement();
+    this.setState({ container });
+    target.appendChild(container);
+  }
+
+  componentWillUnmount() {
+    const target: HTMLElement = this.getTargetElement();
+    if (this.state.container) {
+      target.removeChild(this.state.container);
+    }
+  }
+
+  getTargetElement() {
+    const appendTo = this.props.appendTo;
+    if (typeof appendTo === 'function') {
+      return appendTo();
+    }
+    return appendTo || document.body;
+  }
+
+  render() {
+    const {
+      className,
+      children,
+      isToast,
+      isLiveRegion,
+      onOverflowClick,
+      overflowMessage,
+      'aria-label': ariaLabel,
+      ...props
+    } = this.props;
+    const alertGroup = (
+      <AlertGroupInline
+        onOverflowClick={onOverflowClick}
+        className={className}
+        isToast={isToast}
+        isLiveRegion={isLiveRegion}
+        overflowMessage={overflowMessage}
+        aria-label={ariaLabel}
+        {...props}
+      >
+        {children}
+      </AlertGroupInline>
+    );
+    if (!this.props.isToast) {
+      return alertGroup;
+    }
+
+    const container = this.state.container;
+
+    if (!canUseDOM || !container) {
+      return null;
+    }
+
+    return ReactDOM.createPortal(alertGroup, container);
+  }
+}

package/src/components/Alert/AlertGroupInline.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Alert/alert-group';
+import { AlertGroupProps } from './AlertGroup';
+import { AlertProps } from '../Alert';
+
+export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
+  className,
+  children,
+  isToast,
+  isLiveRegion,
+  onOverflowClick,
+  overflowMessage,
+  ...rest
+}: AlertGroupProps) => (
+  <ul
+    role="list"
+    aria-live={isLiveRegion ? 'polite' : null}
+    aria-atomic={isLiveRegion ? false : null}
+    className={css(styles.alertGroup, className, isToast ? styles.modifiers.toast : '')}
+    {...rest}
+  >
+    {React.Children.toArray(children).map((alert, index) => (
+      <li key={(alert as React.ReactElement<AlertProps>).props?.id || index}>{alert}</li>
+    ))}
+    {overflowMessage && (
+      <li>
+        <button onClick={onOverflowClick} className={css(styles.alertGroupOverflowButton)}>
+          {overflowMessage}
+        </button>
+      </li>
+    )}
+  </ul>
+);
+AlertGroupInline.displayName = 'AlertGroupInline';

package/src/components/Alert/AlertIcon.tsx

@@ -12,7 +12,7 @@ export const variantIcons = {
   danger: ExclamationCircleIcon,
   warning: ExclamationTriangleIcon,
   info: InfoCircleIcon,
-  default: BellIcon
+  custom: BellIcon
 };
 
 export interface AlertIconProps extends React.HTMLProps<HTMLDivElement> {
@@ -21,7 +21,7 @@ export interface AlertIconProps extends React.HTMLProps<HTMLDivElement> {
   /** A custom icon. If not set the icon is set according to the variant. */
   customIcon?: React.ReactNode;
   /** Variant of the alert icon. */
-  variant: 'success' | 'danger' | 'warning' | 'info' | 'default';
+  variant: 'success' | 'danger' | 'warning' | 'info' | 'custom';
 }
 
 export const AlertIcon = ({ variant, customIcon, className = '', ...props }: AlertIconProps) => {

package/src/components/Alert/__tests__/Alert.test.tsx

@@ -40,24 +40,20 @@ test('Renders with class pf-c-alert on the containing div', () => {
       Some alert
     </Alert>
   );
-  expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-c-alert');
+  expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-v5-c-alert');
 });
 
 test('Renders with class pf-c-alert__title on the div containing the title', () => {
   render(<Alert title="Some title">Some alert</Alert>);
-  expect(screen.getByRole('heading', { name: 'Default alert: Some title' })).toHaveClass('pf-c-alert__title');
+  expect(screen.getByRole('heading', { name: 'Custom alert: Some title' })).toHaveClass('pf-v5-c-alert__title');
 });
 
-test('Renders with a default aria label of Default Alert', () => {
-  render(
-    <Alert title="Some title" data-testid="Alert-test-id">
-      Some alert
-    </Alert>
-  );
-  expect(screen.getByTestId('Alert-test-id')).toHaveAccessibleName('Default Alert');
+test('Renders with Custom hidden text of "Custom alert:"', () => {
+  render(<Alert title="Some title">Some alert</Alert>);
+  expect(screen.getByText('Custom alert:')).toBeInTheDocument();
 });
 
-['success', 'danger', 'warning', 'info'].forEach(variant => {
+['success', 'danger', 'warning', 'info'].forEach((variant) => {
   test(`Does not render with class pf-m-${variant} by default`, () => {
     render(
       <Alert title="Some title" data-testid="Alert-test-id">
@@ -76,13 +72,13 @@ test('Renders with a default aria label of Default Alert', () => {
     expect(screen.getByTestId('Alert-test-id')).toHaveClass(`pf-m-${variant}`);
   });
 
-  test(`Renders with aria label ${capitalize(variant)} Alert when variant = ${variant}`, () => {
+  test(`Renders with hidden text "${capitalize(variant)} alert:" when variant = ${variant}`, () => {
     render(
       <Alert variant={`${variant as AlertVariant}`} title="Some title" data-testid="Alert-test-id">
         Some alert
       </Alert>
     );
-    expect(screen.getByTestId('Alert-test-id')).toHaveAccessibleName(`${capitalize(variant)} Alert`);
+    expect(screen.getByText(`${capitalize(variant)} alert:`)).toBeInTheDocument();
   });
 
   test(`Renders the title with an accessible name of '${capitalize(
@@ -136,31 +132,39 @@ test('Renders with a default aria label of Default Alert', () => {
 });
 
 test('Does not render with class pf-m-inline by default', () => {
-  render(<Alert title="Some title">Some alert</Alert>);
-  expect(screen.getByLabelText('Default Alert')).not.toHaveClass('pf-m-inline');
+  render(
+    <Alert title="Some title" data-testid="Alert-test-id">
+      Some alert
+    </Alert>
+  );
+  expect(screen.getByTestId('Alert-test-id')).not.toHaveClass('pf-m-inline');
 });
 
 test('Renders with class pf-m-inline when isInline = true', () => {
   render(
-    <Alert isInline title="Some title">
+    <Alert isInline title="Some title" data-testid="Alert-test-id">
       Some alert
     </Alert>
   );
-  expect(screen.getByLabelText('Default Alert')).toHaveClass('pf-m-inline');
+  expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-m-inline');
 });
 
 test('Does not render with class pf-m-plain by default', () => {
-  render(<Alert title="Some title">Some alert</Alert>);
-  expect(screen.getByLabelText('Default Alert')).not.toHaveClass('pf-m-plain');
+  render(
+    <Alert title="Some title" data-testid="Alert-test-id">
+      Some alert
+    </Alert>
+  );
+  expect(screen.getByTestId('Alert-test-id')).not.toHaveClass('pf-m-plain');
 });
 
 test('Renders with class pf-m-plain when isPlain = true', () => {
   render(
-    <Alert isPlain title="Some title">
+    <Alert isPlain title="Some title" data-testid="Alert-test-id">
       Some alert
     </Alert>
   );
-  expect(screen.getByLabelText('Default Alert')).toHaveClass('pf-m-plain');
+  expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-m-plain');
 });
 
 test('Renders the title', () => {
@@ -172,17 +176,17 @@ test('Renders the title', () => {
 test('Renders the title as an h4 by default', () => {
   render(<Alert title="Some title">Some alert</Alert>);
 
-  expect(screen.getByRole('heading', { level: 4, name: 'Default alert: Some title' })).toBeVisible();
+  expect(screen.getByRole('heading', { level: 4, name: 'Custom alert: Some title' })).toBeVisible();
 });
 
-test('Renders the title as other heading levels when one is passed using titleHeadingLevel', () => {
+test('Renders the title as other heading levels when one is passed using component', () => {
   render(
-    <Alert title="Some title" titleHeadingLevel="h1">
+    <Alert title="Some title" component="h1">
       Some alert
     </Alert>
   );
 
-  expect(screen.getByRole('heading', { level: 1, name: 'Default alert: Some title' })).toBeVisible();
+  expect(screen.getByRole('heading', { level: 1, name: 'Custom alert: Some title' })).toBeVisible();
 });
 
 test('Renders the element passed via the actionClose prop', () => {
@@ -202,7 +206,7 @@ test('Renders the actionClose element inside pf-c-alert__action', () => {
     </Alert>
   );
 
-  expect(screen.getByText('Action close')).toHaveClass('pf-c-alert__action');
+  expect(screen.getByText('Action close')).toHaveClass('pf-v5-c-alert__action');
 });
 
 test('Provides the actionClose element access to the title via a context', () => {
@@ -242,7 +246,7 @@ test('Renders the actionLinks element inside pf-c-alert__action-group', () => {
     </Alert>
   );
 
-  expect(screen.getByText('Action link')).toHaveClass('pf-c-alert__action-group');
+  expect(screen.getByText('Action link')).toHaveClass('pf-v5-c-alert__action-group');
 });
 
 test('Renders children', () => {
@@ -254,7 +258,7 @@ test('Renders children', () => {
 test('Renders children inside pf-c-alert__description', () => {
   render(<Alert title="Some title">Some alert</Alert>);
 
-  expect(screen.getByText('Some alert')).toHaveClass('pf-c-alert__description');
+  expect(screen.getByText('Some alert')).toHaveClass('pf-v5-c-alert__description');
 });
 
 test('Renders with the aria label passed via prop', () => {
@@ -374,7 +378,7 @@ test('Removes the alert after a custom time when timeout is passed with a number
 
 test('Does not remove the alert on timeout if the user is focused on the alert', async () => {
   const user = userEvent.setup({
-    advanceTimers: delay => jest.advanceTimersByTime(delay)
+    advanceTimers: (delay) => jest.advanceTimersByTime(delay)
   });
   jest.useFakeTimers();
 
@@ -398,7 +402,7 @@ test('Does not remove the alert on timeout if the user is focused on the alert',
 
 test('Does not remove the alert on timeout if the user is hovered over the alert', async () => {
   const user = userEvent.setup({
-    advanceTimers: delay => jest.advanceTimersByTime(delay)
+    advanceTimers: (delay) => jest.advanceTimersByTime(delay)
   });
   jest.useFakeTimers();
 
@@ -422,7 +426,7 @@ test('Does not remove the alert on timeout if the user is hovered over the alert
 
 test('Removes the alert after the user removes focus from the alert and 3000ms have passed', async () => {
   const user = userEvent.setup({
-    advanceTimers: delay => jest.advanceTimersByTime(delay)
+    advanceTimers: (delay) => jest.advanceTimersByTime(delay)
   });
   jest.useFakeTimers();
 
@@ -455,7 +459,7 @@ test('Removes the alert after the user removes focus from the alert and 3000ms h
 
 test('Removes the alert after the user removes hover from the alert and 3000ms have passed', async () => {
   const user = userEvent.setup({
-    advanceTimers: delay => jest.advanceTimersByTime(delay)
+    advanceTimers: (delay) => jest.advanceTimersByTime(delay)
   });
   jest.useFakeTimers();
 
@@ -488,7 +492,7 @@ test('Removes the alert after the user removes hover from the alert and 3000ms h
 
 test('Removes the alert after the user removes hover from the alert and timeoutAnimation time has passed', async () => {
   const user = userEvent.setup({
-    advanceTimers: delay => jest.advanceTimersByTime(delay)
+    advanceTimers: (delay) => jest.advanceTimersByTime(delay)
   });
   jest.useFakeTimers();
 
@@ -574,7 +578,7 @@ test('Renders titles with the expected truncation styling when truncateTitle is
   const title = screen.getByRole('heading');
 
   expect(title).toHaveClass('pf-m-truncate');
-  expect(title).toHaveAttribute('style', '--pf-c-alert__title--max-lines: 3;');
+  expect(title).toHaveAttribute('style', '--pf-v5-c-alert__title--max-lines: 3;');
 });
 
 test('Passes customIcon value to AlertIcon', () => {
@@ -588,17 +592,21 @@ test('Passes customIcon value to AlertIcon', () => {
 });
 
 test('Does not render with class pf-m-expandable by default', () => {
-  render(<Alert title="Some title">Some alert</Alert>);
-  expect(screen.getByLabelText('Default Alert')).not.toHaveClass('pf-m-expandable');
+  render(
+    <Alert title="Some title" data-testid="Alert-test-id">
+      Some alert
+    </Alert>
+  );
+  expect(screen.getByTestId('Alert-test-id')).not.toHaveClass('pf-m-expandable');
 });
 
 test('Renders with class pf-m-expandable when isExpandable = true', () => {
   render(
-    <Alert isExpandable title="Some title">
+    <Alert isExpandable title="Some title" data-testid="Alert-test-id">
       Some alert
     </Alert>
   );
-  expect(screen.getByLabelText('Default Alert')).toHaveClass('pf-m-expandable');
+  expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-m-expandable');
 });
 
 test('Renders AlertToggleExpandButton inside pf-c-alert__toggle', () => {
@@ -608,31 +616,31 @@ test('Renders AlertToggleExpandButton inside pf-c-alert__toggle', () => {
     </Alert>
   );
 
-  expect(screen.getByRole('button').parentElement).toHaveClass('pf-c-alert__toggle');
+  expect(screen.getByRole('button').parentElement).toHaveClass('pf-v5-c-alert__toggle');
 });
 
 test('Does not render with class pf-m-expanded when AlertToggleExpandButton has not been clicked', () => {
   render(
-    <Alert isExpandable title="Some title">
+    <Alert isExpandable title="Some title" data-testid="Alert-test-id">
       Some alert
     </Alert>
   );
 
-  expect(screen.getByLabelText('Default Alert')).not.toHaveClass('pf-m-expanded');
+  expect(screen.getByTestId('Alert-test-id')).not.toHaveClass('pf-m-expanded');
 });
 
 test('Renders with class pf-m-expanded once the AlertToggleExpandButton is clicked', async () => {
   const user = userEvent.setup();
 
   render(
-    <Alert isExpandable title="Some title">
+    <Alert isExpandable title="Some title" data-testid="Alert-test-id">
       Some alert
     </Alert>
   );
 
   await user.click(screen.getByRole('button'));
 
-  expect(screen.getByLabelText('Default Alert')).toHaveClass('pf-m-expanded');
+  expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-m-expanded');
 });
 
 test('Does not render children when isExpandable = true and AlertToggleExpandButton has not been clicked', () => {

package/src/components/Alert/__tests__/AlertGroup.test.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Alert } from '../../Alert';
+import { AlertGroup } from '../../Alert';
+import { AlertActionCloseButton } from '../../../components/Alert/AlertActionCloseButton';
+
+describe('AlertGroup', () => {
+  test('Alert Group renders without children', () => {
+    const { asFragment } = render(<AlertGroup />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Alert Group works with n children', () => {
+    const { asFragment } = render(
+      <AlertGroup>
+        <Alert variant="success" title="alert title" />
+        <Alert variant="warning" title="another alert title" />
+      </AlertGroup>
+    );
+    expect(asFragment()).toBeTruthy();
+  });
+
+  test('Alert group overflow shows up', async () => {
+    const overflowMessage = 'View 2 more alerts';
+    const onOverflowClick = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <AlertGroup overflowMessage={overflowMessage} onOverflowClick={onOverflowClick}>
+        <Alert variant="danger" title="alert title" />
+      </AlertGroup>
+    );
+
+    expect(screen.getAllByRole('listitem')).toHaveLength(2);
+
+    const overflowButton = screen.getByRole('button', { name: 'View 2 more alerts' });
+    expect(overflowButton).toBeInTheDocument();
+
+    await user.click(overflowButton);
+    expect(onOverflowClick).toHaveBeenCalled();
+  });
+
+  test('Standard Alert Group is not a toast alert group', () => {
+    render(
+      <AlertGroup>
+        <Alert variant="danger" title="alert title" />
+      </AlertGroup>
+    );
+
+    expect(screen.getByText('alert title').parentElement).not.toHaveClass('pf-m-toast');
+  });
+
+  test('Toast Alert Group contains expected modifier class', () => {
+    render(
+      <AlertGroup isToast aria-label="group label">
+        <Alert variant="warning" title="alert title" />
+      </AlertGroup>
+    );
+
+    expect(screen.getByLabelText('group label')).toHaveClass('pf-m-toast');
+  });
+
+  test('alertgroup closes when alerts are closed', async () => {
+    const onClose = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <AlertGroup isToast appendTo={document.body}>
+        <Alert
+          isLiveRegion
+          title={'Test Alert'}
+          actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
+        />
+      </AlertGroup>
+    );
+
+    await user.click(screen.getByLabelText('Close'));
+    expect(onClose).toHaveBeenCalled();
+  });
+});