@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.10

package/src/components/Alert/examples/AlertGroupAsync.tsx

@@ -9,12 +9,13 @@ import {
   InputGroupItem,
   useInterval
 } from '@patternfly/react-core';
+import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupAsync: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
   const [isRunning, setIsRunning] = React.useState(false);
 
-  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

package/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx

@@ -8,6 +8,7 @@ import {
   InputGroup,
   InputGroupItem
 } from '@patternfly/react-core';
+import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
@@ -20,7 +21,7 @@ export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
     setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]);
   };
 
-  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');
 
   const getUniqueId = () => String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now();
 

package/src/components/Alert/examples/AlertGroupSingularDynamic.tsx

@@ -8,6 +8,7 @@ import {
   InputGroup,
   InputGroupItem
 } from '@patternfly/react-core';
+import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
@@ -20,7 +21,7 @@ export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
     setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]);
   };
 
-  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

package/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx

@@ -8,6 +8,7 @@ import {
   InputGroup,
   InputGroupItem
 } from '@patternfly/react-core';
+import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
@@ -34,7 +35,7 @@ export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =>
     setOverflowMessage(getOverflowMessage(newAlerts.length));
   };
 
-  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

package/src/components/Alert/examples/AlertGroupToast.tsx

@@ -8,6 +8,7 @@ import {
   InputGroup,
   InputGroupItem
 } from '@patternfly/react-core';
+import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupToast: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
@@ -20,7 +21,7 @@ export const AlertGroupToast: React.FunctionComponent = () => {
     setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]);
   };
 
-  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

package/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx

@@ -8,6 +8,7 @@ import {
   InputGroup,
   InputGroupItem
 } from '@patternfly/react-core';
+import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
@@ -34,7 +35,7 @@ export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
     setOverflowMessage(getOverflowMessage(newAlerts.length));
   };
 
-  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

package/src/components/Avatar/Avatar.tsx

@@ -10,8 +10,6 @@ export interface AvatarProps
   src?: string;
   /** Attribute that specifies the alternate text of the image for the Avatar. */
   alt: string;
-  /** Border to add */
-  border?: 'light' | 'dark';
   /** Size variant of avatar. */
   size?: 'sm' | 'md' | 'lg' | 'xl';
 }
@@ -20,21 +18,9 @@ export const Avatar: React.FunctionComponent<AvatarProps> = ({
   className = '',
   src = '',
   alt,
-  border,
   size,
   ...props
 }: AvatarProps) => (
-  <img
-    src={src}
-    alt={alt}
-    className={css(
-      styles.avatar,
-      styles.modifiers[size],
-      border === 'light' && styles.modifiers.light,
-      border === 'dark' && styles.modifiers.dark,
-      className
-    )}
-    {...props}
-  />
+  <img src={src} alt={alt} className={css(styles.avatar, styles.modifiers[size], className)} {...props} />
 );
 Avatar.displayName = 'Avatar';

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Avatar } from '../Avatar';
+import styles from '@patternfly/react-styles/css/components/Avatar/avatar';
 
 test('Renders simple avatar', () => {
   render(
@@ -11,18 +12,21 @@ test('Renders simple avatar', () => {
   expect(screen.getByTestId('avatar').firstChild).toBeVisible();
 });
 
+// TODO: Need to be updated as part of issue #9880
 test('Renders without any modifier class when border and size props are not passed', () => {
   render(<Avatar alt="avatar" />);
-  expect(screen.getByRole('img')).toHaveClass('pf-v5-c-avatar', { exact: true });
+  expect(screen.getByRole('img')).toHaveClass(styles.avatar, { exact: true });
 });
 
-test('Renders with class name pf-m-light when "light" is passed as border prop', () => {
-  render(<Avatar alt="avatar" border="light" />);
+// TODO: Need to be updated/removed as part of issue #9880
+xtest('Renders with class name pf-m-light when "light" is passed as border prop', () => {
+  render(<Avatar alt="avatar" />);
   expect(screen.getByRole('img')).toHaveClass('pf-m-light');
 });
 
-test('Renders with class name pf-m-dark when "dark" is passed as border prop', () => {
-  render(<Avatar alt="avatar" border="dark" />);
+// TODO: Need to be updated/removed as part of issue #9880
+xtest('Renders with class name pf-m-dark when "dark" is passed as border prop', () => {
+  render(<Avatar alt="avatar" />);
   expect(screen.getByRole('img')).toHaveClass('pf-m-dark');
 });
 

package/src/components/Avatar/examples/Avatar.md

@@ -54,7 +54,8 @@ import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImg from '../../assets/avatarImg.svg';
 
-<Avatar src={avatarImg} alt="avatar" border="light" />;
+// TODO: Need to be updated/removed as part of issue #9880
+<Avatar src={avatarImg} alt="avatar" />;
 ```
 
 ### Bordered - dark
@@ -64,5 +65,6 @@ import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImgDark from '../../assets/avatarImgDark.svg';
 
-<Avatar src={avatarImgDark} alt="avatar" border="dark" />;
+// TODO: Need to be updated/removed as part of issue #9880
+<Avatar src={avatarImgDark} alt="avatar" />;
 ```

package/src/components/BackToTop/BackToTop.tsx

@@ -34,12 +34,14 @@ const BackToTopBase: React.FunctionComponent<BackToTopProps> = ({
   const [scrollElement, setScrollElement] = React.useState(null);
 
   const toggleVisible = () => {
-    const scrolled = scrollElement.scrollY ? scrollElement.scrollY : scrollElement.scrollTop;
-    if (!isAlwaysVisible) {
-      if (scrolled > 400) {
-        setVisible(true);
-      } else {
-        setVisible(false);
+    if (scrollElement) {
+      const scrolled = scrollElement.scrollY ? scrollElement.scrollY : scrollElement.scrollTop;
+      if (!isAlwaysVisible) {
+        if (scrolled > 400) {
+          setVisible(true);
+        } else {
+          setVisible(false);
+        }
       }
     }
   };

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

@@ -2,6 +2,7 @@ import React, { RefObject } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { BackToTop } from '../BackToTop';
 import userEvent from '@testing-library/user-event';
+import styles from '@patternfly/react-styles/css/components/BackToTop/back-to-top';
 
 jest.mock('../../Button');
 
@@ -18,7 +19,7 @@ test('Renders BackToTop', () => {
 test('Renders with the default class', () => {
   render(<BackToTop />);
 
-  expect(screen.getByRole(`button`).parentElement).toHaveClass('pf-v5-c-back-to-top');
+  expect(screen.getByRole(`button`).parentElement).toHaveClass(styles.backToTop);
 });
 
 test('BackToTop is not yet visible', () => {
@@ -114,10 +115,11 @@ test('Clicking backToTop scrolls back to top of the element passed via scrollabl
   const user = userEvent.setup();
   const wrapper = document.getElementById('backToTopWrapper');
   fireEvent.scroll(wrapper as HTMLElement, { target: { scrollY: 401 } });
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   wrapper!.scrollTo = jest.fn();
   await user.click(screen.getByRole(`button`).parentElement as Element);
 
-  expect(wrapper?.scrollTo).toBeCalledTimes(1);
+  expect(wrapper?.scrollTo).toHaveBeenCalledTimes(1);
 });
 
 test('Passes correct text content to button child component', () => {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Backdrop } from '../Backdrop';
+import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the pf-v5-c-backdrop', () => {
+test(`Renders with the ${styles.backdrop}`, () => {
   render(<Backdrop>Test</Backdrop>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-backdrop');
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop);
 });
 
-test('Renders with only the class pf-v5-c-backdrop by default', () => {
+test(`Renders with only the class ${styles.backdrop} by default`, () => {
   render(<Backdrop>Test</Backdrop>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-backdrop', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

package/src/components/BackgroundImage/BackgroundImage.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
+import cssBackgroundImage from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage';
 
 export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement> {
   /** The URL or file path of the image for the background */
@@ -19,7 +20,7 @@ export const BackgroundImage: React.FunctionComponent<BackgroundImageProps> = ({
     className={css(styles.backgroundImage, className)}
     style={
       {
-        '--pf-v5-c-background-image--BackgroundImage': `url(${src})`
+        [cssBackgroundImage.name]: `url(${src})`
       } as React.CSSProperties
     }
     {...props}

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { BackgroundImage } from '../BackgroundImage';
 import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
+import cssBackgroundImage from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage';
 
 test(`renders with default className ${styles.backgroundImage}`, () => {
   render(<BackgroundImage src="/image/url.png" data-testid="test-id" />);
@@ -15,11 +16,7 @@ test('spreads additional props', () => {
 
 test('has src URL applied to style', () => {
   render(<BackgroundImage src="/image/url.png" data-testid="test-id" />);
-
-  expect(screen.getByTestId('test-id')).toHaveAttribute(
-    'style',
-    '--pf-v5-c-background-image--BackgroundImage: url(/image/url.png);'
-  );
+  expect(screen.getByTestId('test-id')).toHaveAttribute('style', `${cssBackgroundImage.name}: url(/image/url.png);`);
 });
 
 test('renders with custom className when one is provided', () => {

package/src/components/BackgroundImage/examples/BackgroundImageBasic.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { BackgroundImage } from '@patternfly/react-core';
 
 export const BackgroundImageBasic: React.FunctionComponent = () => (
-  <BackgroundImage src="/assets/images/pfbg-icon.svg" />
+  <BackgroundImage src="/assets/images/pf-background.svg" />
 );

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Badge } from '../Badge';
+import styles from '@patternfly/react-styles/css/components/Badge/badge';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-v5-c-badge', () => {
+test(`Renders with class name ${styles.badge}`, () => {
   render(<Badge>Test</Badge>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-badge');
+  expect(screen.getByText('Test')).toHaveClass(styles.badge);
 });
 
-test('Renders with class name pf-m-unread by default', () => {
+test(`Renders with class name ${styles.modifiers.unread} by default`, () => {
   render(<Badge>Test</Badge>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-unread');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.unread);
 });
 
 test('Renders with class name pf-m-read when isRead prop is true', () => {

package/src/components/Banner/Banner.tsx

@@ -2,6 +2,10 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Banner/banner';
 import { css } from '@patternfly/react-styles';
 
+export type BannerColor = 'red' | 'orangered' | 'orange' | 'gold' | 'green' | 'cyan' | 'blue' | 'purple';
+
+export type BannerStatus = 'success' | 'warning' | 'danger' | 'info' | 'custom';
+
 export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the banner. */
   children?: React.ReactNode;
@@ -13,29 +17,48 @@ export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
    * be passed in when the banner conveys status/severity.
    */
   screenReaderText?: string;
-  /** Variant styles for the banner. */
-  variant?: 'default' | 'blue' | 'red' | 'green' | 'gold';
+  /** Color options for the banner, will be overwritten by any applied using the status prop. */
+  color?: BannerColor;
+  /** Status style options for the banner, will overwrite any color applied using the color prop. */
+  status?: BannerStatus;
+}
+interface StatusBanner extends BannerProps {
+  color?: never;
+  status?: BannerStatus;
 }
 
-export const Banner: React.FunctionComponent<BannerProps> = ({
+interface NonStatusBanner extends BannerProps {
+  color?: BannerColor;
+  status?: never;
+}
+
+export const Banner: React.FunctionComponent<StatusBanner | NonStatusBanner> = ({
   children,
   className,
-  variant = 'default',
   screenReaderText,
   isSticky = false,
+  color,
+  status,
   ...props
-}: BannerProps) => (
-  <div
-    className={css(
-      styles.banner,
-      styles.modifiers[variant as 'green' | 'red' | 'gold' | 'blue'],
-      isSticky && styles.modifiers.sticky,
-      className
-    )}
-    {...props}
-  >
-    {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
-    {children}
-  </div>
-);
+}: BannerProps) => {
+  const getStatusOrColorModifier = () => {
+    if (status) {
+      return styles.modifiers[status];
+    }
+
+    if (color) {
+      return styles.modifiers[color];
+    }
+  };
+
+  return (
+    <div
+      className={css(styles.banner, getStatusOrColorModifier(), isSticky && styles.modifiers.sticky, className)}
+      {...props}
+    >
+      {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
+      {children}
+    </div>
+  );
+};
 Banner.displayName = 'Banner';

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Banner } from '../Banner';
+import styles from '@patternfly/react-styles/css/components/Banner/banner';
 
 test('Renders without children', () => {
   render(
@@ -16,9 +17,9 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-v5-c-banner', () => {
+test(`Renders with class name ${styles.banner}`, () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-banner');
+  expect(screen.getByText('Test')).toHaveClass(styles.banner);
 });
 
 test('Renders with custom class name when className prop is provided', () => {
@@ -26,31 +27,76 @@ test('Renders with custom class name when className prop is provided', () => {
   expect(screen.getByText('Test')).toHaveClass('custom-class');
 });
 
-test('Renders without any modifier class when variant prop is not passed', () => {
+test('Renders without any modifier class when color and status props are not passed', () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-banner', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.banner, { exact: true });
 });
 
-test('Renders with class name pf-m-green when "green" is passed to variant prop', () => {
-  render(<Banner variant="green">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-green');
+test('Renders with class name pf-m-red when "red" is passed to color prop', () => {
+  render(<Banner color="red">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-red');
 });
 
-test('Renders with class name pf-m-red when "red" is passed to variant prop', () => {
-  render(<Banner variant="red">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-red');
+test('Renders with class name pf-m-orangered when "orangered" is passed to color prop', () => {
+  render(<Banner color="orangered">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-orangered');
 });
 
-test('Renders with class name pf-m-gold when "gold" is passed to variant prop', () => {
-  render(<Banner variant="gold">Test</Banner>);
+test('Renders with class name pf-m-orange when "orange" is passed to color prop', () => {
+  render(<Banner color="orange">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-orange');
+});
+
+test('Renders with class name pf-m-gold when "gold" is passed to color prop', () => {
+  render(<Banner color="gold">Test</Banner>);
   expect(screen.getByText('Test')).toHaveClass('pf-m-gold');
 });
 
-test('Renders with class name pf-m-blue when "blue" is passed to variant prop', () => {
-  render(<Banner variant="blue">Test</Banner>);
+test('Renders with class name pf-m-green when "green" is passed to color prop', () => {
+  render(<Banner color="green">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-green');
+});
+
+test('Renders with class name pf-m-cyan when "cyan" is passed to color prop', () => {
+  render(<Banner color="cyan">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-cyan');
+});
+
+test('Renders with class name pf-m-blue when "blue" is passed to color prop', () => {
+  render(<Banner color="blue">Test</Banner>);
   expect(screen.getByText('Test')).toHaveClass('pf-m-blue');
 });
 
+test('Renders with class name pf-m-purple when "purple" is passed to color prop', () => {
+  render(<Banner color="purple">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-purple');
+});
+
+test('Renders with class name pf-m-success when "success" is passed to status prop', () => {
+  render(<Banner status="success">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-success');
+});
+
+test('Renders with class name pf-m-warning when "warning" is passed to status prop', () => {
+  render(<Banner status="warning">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-warning');
+});
+
+test('Renders with class name pf-m-danger when "danger" is passed to status prop', () => {
+  render(<Banner status="danger">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-danger');
+});
+
+test('Renders with class name pf-m-info when "info" is passed to status prop', () => {
+  render(<Banner status="info">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-info');
+});
+
+test('Renders with class name pf-m-custom when "custom" is passed to status prop', () => {
+  render(<Banner status="custom">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-custom');
+});
+
 test('Does not render pf-v5-screen-reader class by default', () => {
   render(<Banner>Test</Banner>);
   expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');

package/src/components/Banner/examples/Banner.md

@@ -15,7 +15,7 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 ### Basic
 
-Banners can be styled with one of 5 different colors. A basic banner should only be used when the banner color does not represent status or severity.
+Banners can be styled with one of 9 different colors using the `color` prop. A basic banner should only be used when the banner color does not represent status or severity.
 
 ```ts file="./BannerBasic.tsx"
 
@@ -23,7 +23,9 @@ Banners can be styled with one of 5 different colors. A basic banner should only
 
 ### Status
 
-When a banner is used to convey status, it is advised to pass in an icon inside the banner to convey the status in a way besides just color. The `screenReaderText` prop should also be passed in to convey the status/severity of the banner to users of certain assistive technologies such as screen readers.
+When a banner is used to convey status it should be styled using the `status` prop. Additionally, it is advised to pass an icon inside the banner to convey the status in a way besides just color.
+
+The `screenReaderText` prop should also be passed in to convey the status/severity of the banner to users of certain assistive technologies such as screen readers.
 
 In the following example, a flex layout is used inside the banner content to show one possible way to create spacing between the icons and banner text.
 

package/src/components/Banner/examples/BannerBasic.tsx

@@ -5,12 +5,20 @@ export const BannerBasic: React.FunctionComponent = () => (
   <>
     <Banner>Default banner</Banner>
     <br />
-    <Banner variant="blue">Blue banner</Banner>
+    <Banner color="red">Red banner</Banner>
     <br />
-    <Banner variant="red">Red banner</Banner>
+    <Banner color="orangered">Orangered banner</Banner>
     <br />
-    <Banner variant="green">Green banner</Banner>
+    <Banner color="orange">Orange banner</Banner>
     <br />
-    <Banner variant="gold">Gold banner</Banner>
+    <Banner color="gold">Gold banner</Banner>
+    <br />
+    <Banner color="green">Green banner</Banner>
+    <br />
+    <Banner color="cyan">Cyan banner</Banner>
+    <br />
+    <Banner color="blue">Blue banner</Banner>
+    <br />
+    <Banner color="purple">Purple banner</Banner>
   </>
 );

package/src/components/Banner/examples/BannerStatus.tsx

@@ -8,25 +8,25 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const BannerStatus: React.FunctionComponent = () => (
   <>
-    <Banner screenReaderText="Default banner">
+    <Banner screenReaderText="Success banner" status="success">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <BellIcon />
+          <CheckCircleIcon />
         </FlexItem>
-        <FlexItem>Default banner</FlexItem>
+        <FlexItem>Success banner</FlexItem>
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Info banner" variant="blue">
+    <Banner screenReaderText="Warning banner" status="warning">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <InfoCircleIcon />
+          <ExclamationTriangleIcon />
         </FlexItem>
-        <FlexItem>Info banner</FlexItem>
+        <FlexItem>Warning banner</FlexItem>
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Danger banner" variant="red">
+    <Banner screenReaderText="Danger banner" status="danger">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <ExclamationCircleIcon />
@@ -35,21 +35,21 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Success banner" variant="green">
+    <Banner screenReaderText="Info banner" status="info">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <CheckCircleIcon />
+          <InfoCircleIcon />
         </FlexItem>
-        <FlexItem>Success banner</FlexItem>
+        <FlexItem>Info banner</FlexItem>
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Warning banner" variant="gold">
+    <Banner screenReaderText="Custom banner" status="custom">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <ExclamationTriangleIcon />
+          <BellIcon />
         </FlexItem>
-        <FlexItem>Warning banner</FlexItem>
+        <FlexItem>Custom banner</FlexItem>
       </Flex>
     </Banner>
   </>