@patternfly/react-core 6.0.0-alpha.4 → 6.0.0-alpha.40

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

@@ -6,7 +6,7 @@ exports[`Matches snapshot 1`] = `
     aria-atomic="false"
     aria-label="Toast alert label"
     aria-live="polite"
-    class="pf-v5-c-alert pf-m-custom"
+    class="pf-v6-c-alert pf-m-custom"
     data-ouia-component-id="ouia-id"
     data-ouia-component-type="PF5/Alert"
     data-ouia-safe="true"
@@ -20,17 +20,17 @@ exports[`Matches snapshot 1`] = `
       </p>
     </div>
     <h4
-      class="pf-v5-c-alert__title"
+      class="pf-v6-c-alert__title"
     >
       <span
-        class="pf-v5-screen-reader"
+        class="pf-v6-screen-reader"
       >
         Custom alert:
       </span>
       Some title
     </h4>
     <div
-      class="pf-v5-c-alert__description"
+      class="pf-v6-c-alert__description"
     >
       Some toast alert
     </div>

package/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`Matches the snapshot 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="pf-v5-svg"
+      class="pf-v6-svg"
       fill="currentColor"
       height="1em"
       role="img"

package/src/components/Alert/__tests__/__snapshots__/AlertIcon.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-alert__icon"
+    class="pf-v6-c-alert__icon"
   >
     Bell icon mock
   </div>

package/src/components/Alert/__tests__/__snapshots__/AlertToggleExpandButton.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`Matches snapshot 1`] = `
     aria-label="Toggle variantLabel alert: title"
   >
     <span
-      class="pf-v5-c-alert__toggle-icon"
+      class="pf-v6-c-alert__toggle-icon"
     >
       Icon mock
     </span>

package/src/components/Alert/examples/alert.css

@@ -1,3 +1,3 @@
-.ws-react-c-alert .pf-v5-c-alert {
+.ws-react-c-alert .pf-v6-c-alert {
   margin-bottom: 21px;
 }

package/src/components/Avatar/Avatar.tsx

@@ -4,36 +4,30 @@ import { css } from '@patternfly/react-styles';
 
 export interface AvatarProps
   extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
-  /** Additional classes added to the Avatar. */
+  /** Additional classes added to the avatar. */
   className?: string;
-  /** Attribute that specifies the URL of the image for the Avatar. */
+  /** Attribute that specifies the URL of the image for the avatar. */
   src?: string;
-  /** Attribute that specifies the alternate text of the image for the Avatar. */
+  /** Attribute that specifies the alternate text of the image for the avatar. */
   alt: string;
-  /** Border to add */
-  border?: 'light' | 'dark';
+  /** Flag to indicate the avatar should have a border. */
+  isBordered?: boolean;
   /** Size variant of avatar. */
   size?: 'sm' | 'md' | 'lg' | 'xl';
 }
 
 export const Avatar: React.FunctionComponent<AvatarProps> = ({
-  className = '',
+  className,
   src = '',
   alt,
-  border,
+  isBordered,
   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
-    )}
+    className={css(styles.avatar, styles.modifiers[size], isBordered && styles.modifiers.bordered, className)}
     {...props}
   />
 );

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

@@ -12,19 +12,14 @@ test('Renders simple avatar', () => {
   expect(screen.getByTestId('avatar').firstChild).toBeVisible();
 });
 
-test('Renders without any modifier class when border and size props are not passed', () => {
+test('Renders without any modifier class when isBordered and size props are not passed', () => {
   render(<Avatar alt="avatar" />);
   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" />);
-  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" />);
-  expect(screen.getByRole('img')).toHaveClass('pf-m-dark');
+test('Renders with class name pf-m-bordered when isBordered is passed', () => {
+  render(<Avatar alt="avatar" isBordered />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-bordered');
 });
 
 test('Renders with class name pf-m-xl when "xl" is passed as size prop', () => {

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

@@ -5,7 +5,7 @@ exports[`Matches the snapshot 1`] = `
   <img
     alt="avatar"
     aria-label="Avatar test"
-    class="pf-v5-c-avatar test-class"
+    class="pf-v6-c-avatar test-class"
     src="test.png"
   />
 </DocumentFragment>

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

@@ -6,63 +6,20 @@ propComponents: ['Avatar']
 ---
 
 import avatarImg from '../../assets/avatarImg.svg';
-import avatarImgDark from '../../assets/avatarImgDark.svg';
-import './example.css';
 
 ## Examples
 
 ### Basic
 
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
-
-<Avatar src={avatarImg} alt="avatar" />;
-```
-
-### Size variations
-
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
-
-<React.Fragment>
-  Small
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="sm" />
-  <br />
-  Medium
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="md" />
-  <br />
-  Large
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="lg" />
-  <br />
-  Extra Large
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="xl" />
-</React.Fragment>;
+```ts file="./AvatarBasic.tsx"
 ```
 
-### Bordered - light
-
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
+### Bordered 
 
-<Avatar src={avatarImg} alt="avatar" border="light" />;
+```ts file="./AvatarBordered.tsx"
 ```
 
-### Bordered - dark
-
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImgDark from '../../assets/avatarImgDark.svg';
+### Size variations
 
-<Avatar src={avatarImgDark} alt="avatar" border="dark" />;
+```ts file="./AvatarSizeVariations.tsx"
 ```

package/src/components/Avatar/examples/AvatarBasic.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from '../../assets/avatarImg.svg';
+
+<Avatar src={avatarImg} alt="avatar" />;

package/src/components/Avatar/examples/AvatarBordered.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from '../../assets/avatarImg.svg';
+
+<Avatar src={avatarImg} alt="avatar" isBordered />;

package/src/components/Avatar/examples/AvatarSizeVariations.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from '../../assets/avatarImg.svg';
+
+<React.Fragment>
+  Small
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="sm" />
+  <br />
+  Medium
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="md" />
+  <br />
+  Large
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="lg" />
+  <br />
+  Extra Large
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="xl" />
+</React.Fragment>;

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-back-to-top pf-m-hidden"
+    class="pf-v6-c-back-to-top pf-m-hidden"
   >
     <button>
       Back to top
@@ -27,7 +27,7 @@ exports[`Matches the snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="pf-v5-svg"
+        class="pf-v6-svg"
         fill="currentColor"
         height="1em"
         role="img"

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-backdrop"
+    class="pf-v6-c-backdrop"
   >
     Backdrop
   </div>

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

@@ -3,9 +3,9 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-background-image"
+    class="pf-v6-c-background-image"
     data-testid="test-id"
-    style="--pf-v5-c-background-image--BackgroundImage: url(/image/url.png);"
+    style="--pf-v6-c-background-image--BackgroundImage: url(/image/url.png);"
   />
 </DocumentFragment>
 `;

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/Badge.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Badge/badge';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
   /** Text announced by screen readers to indicate the current content/status of the badge. */
   screenReaderText?: string;
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
+  /**  Adds styling to the badge to indicate it has a toggle. A badge with a toggle must be passed to a MenuToggle component. */
+  isToggle?: boolean;
   /** content rendered inside the Badge */
   children?: React.ReactNode;
   /** additional classes added to the Badge */
@@ -15,6 +18,7 @@ export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
 
 export const Badge: React.FunctionComponent<BadgeProps> = ({
   isRead = false,
+  isToggle = false,
   className = '',
   children = '',
   screenReaderText,
@@ -25,7 +29,12 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
     className={css(styles.badge, (isRead ? styles.modifiers.read : styles.modifiers.unread) as any, className)}
   >
     {children}
-    {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
+    {screenReaderText && <span className="pf-v6-screen-reader">{screenReaderText}</span>}
+    {isToggle && (
+      <span className={css(styles.badgeToggleIcon)}>
+        <CaretDownIcon />
+      </span>
+    )}
   </span>
 );
 Badge.displayName = 'Badge';

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

@@ -32,9 +32,18 @@ test('Renders with class name pf-m-read when isRead prop is true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-read');
 });
 
-test('Does not render pf-v5-screen-reader class by default', () => {
+test('Renders with toggle styles and icon when isToggle prop is true', () => {
+  render(
+    <Badge isRead={true} isToggle={true}>
+      Test
+    </Badge>
+  );
+  expect(screen.getByText('Test').lastChild).toHaveClass(styles.badgeToggleIcon);
+});
+
+test('Does not render pf-v6-screen-reader class by default', () => {
   render(<Badge>Test</Badge>);
-  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v6-screen-reader"></span>');
 });
 
 test('Renders screenReaderText passed via prop', () => {

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-badge pf-m-unread"
+    class="pf-v6-c-badge pf-m-unread"
   >
     Test
   </span>

package/src/components/Badge/examples/Badge.css

@@ -0,0 +1,6 @@
+#ws-react-c-badge-read .pf-v6-c-badge,
+#ws-react-c-badge-unread .pf-v6-c-badge,
+#ws-react-c-badge-badge-as-toggle .pf-v6-c-badge {
+    margin-inline-end: var(--pf-t--global--spacer--xs); 
+    margin-block-end: var(--pf-t--global--spacer--xs); 
+}

package/src/components/Badge/examples/Badge.md

@@ -5,6 +5,8 @@ cssPrefix: pf-v5-c-badge
 propComponents: ['Badge']
 ---
 
+import './Badge.css';
+
 ## Examples
 
 ### Read
@@ -16,3 +18,8 @@ propComponents: ['Badge']
 
 ```ts file="./BadgeUnread.tsx"
 ```
+
+### Badge as toggle
+
+```ts file="./BadgeToggle.tsx"
+```

package/src/components/Badge/examples/BadgeRead.tsx

@@ -5,13 +5,13 @@ export const BadgeRead: React.FunctionComponent = () => (
   <React.Fragment>
     <Badge key={1} isRead>
       7
-    </Badge>{' '}
+    </Badge>
     <Badge key={2} isRead>
       24
-    </Badge>{' '}
+    </Badge>
     <Badge key={3} isRead>
       240
-    </Badge>{' '}
+    </Badge>
     <Badge key={4} isRead>
       999+
     </Badge>

package/src/components/Badge/examples/BadgeToggle.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Badge } from '@patternfly/react-core';
+
+export const BadgeToggle: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Badge key={1} screenReaderText="Unread Messages" isToggle>
+      7
+    </Badge>
+    <Badge key={2} screenReaderText="Read Messages" isRead isToggle>
+      7
+    </Badge>
+  </React.Fragment>
+);

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-v6-screen-reader">{screenReaderText}</span>}
+      {children}
+    </div>
+  );
+};
 Banner.displayName = 'Banner';

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

@@ -27,34 +27,79 @@ 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(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('Does not render pf-v5-screen-reader class by default', () => {
+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-v6-screen-reader class by default', () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v6-screen-reader"></span>');
 });
 
 test('Renders screenReaderText passed via prop', () => {

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-banner"
+    class="pf-v6-c-banner"
   >
     Test
   </div>

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.