@patternfly/react-core 5.2.0-prerelease.9 → 6.0.0-alpha.10

package/src/components/Accordion/examples/AccordionBordered.tsx

@@ -26,17 +26,16 @@ export const AccordionBordered: React.FunctionComponent = () => {
   return (
     <>
       <Accordion isBordered displaySize={displaySize}>
-        <AccordionItem>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle1'}>
           <AccordionToggle
             onClick={() => {
               onToggle('bordered-toggle1');
             }}
-            isExpanded={expanded === 'bordered-toggle1'}
             id="bordered-toggle1"
           >
             Item one
           </AccordionToggle>
-          <AccordionContent id="bordered-expand1" isHidden={expanded !== 'bordered-toggle1'}>
+          <AccordionContent id="bordered-expand1">
             <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
               dolore magna aliqua.
@@ -44,17 +43,16 @@ export const AccordionBordered: React.FunctionComponent = () => {
           </AccordionContent>
         </AccordionItem>
 
-        <AccordionItem>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle2'}>
           <AccordionToggle
             onClick={() => {
               onToggle('bordered-toggle2');
             }}
-            isExpanded={expanded === 'bordered-toggle2'}
             id="bordered-toggle2"
           >
             Item two
           </AccordionToggle>
-          <AccordionContent id="bordered-expand2" isHidden={expanded !== 'bordered-toggle2'}>
+          <AccordionContent id="bordered-expand2">
             <p>
               Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
               ultrices, faucibus erat id, maximus nunc.
@@ -62,32 +60,30 @@ export const AccordionBordered: React.FunctionComponent = () => {
           </AccordionContent>
         </AccordionItem>
 
-        <AccordionItem>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle3'}>
           <AccordionToggle
             onClick={() => {
               onToggle('bordered-toggle3');
             }}
-            isExpanded={expanded === 'bordered-toggle3'}
             id="bordered-toggle3"
           >
             Item three
           </AccordionToggle>
-          <AccordionContent id="bordered-expand3" isHidden={expanded !== 'bordered-toggle3'}>
+          <AccordionContent id="bordered-expand3">
             <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
           </AccordionContent>
         </AccordionItem>
 
-        <AccordionItem>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle4'}>
           <AccordionToggle
             onClick={() => {
               onToggle('bordered-toggle4');
             }}
-            isExpanded={expanded === 'bordered-toggle4'}
             id="bordered-toggle4"
           >
             Item four
           </AccordionToggle>
-          <AccordionContent id="bordered-expand4" isHidden={expanded !== 'bordered-toggle4'} isCustomContent>
+          <AccordionContent id="bordered-expand4" isCustomContent>
             <AccordionExpandableContentBody>
               Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
               sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
@@ -104,17 +100,16 @@ export const AccordionBordered: React.FunctionComponent = () => {
             </AccordionExpandableContentBody>
           </AccordionContent>
         </AccordionItem>
-        <AccordionItem>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle5'}>
           <AccordionToggle
             onClick={() => {
               onToggle('bordered-toggle5');
             }}
-            isExpanded={expanded === 'bordered-toggle5'}
             id="bordered-toggle5"
           >
             Item five
           </AccordionToggle>
-          <AccordionContent id="bordered-expand5" isHidden={expanded !== 'bordered-toggle5'}>
+          <AccordionContent id="bordered-expand5">
             <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
           </AccordionContent>
         </AccordionItem>

package/src/components/Accordion/examples/AccordionDefinitionList.tsx

@@ -14,17 +14,16 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
 
   return (
     <Accordion asDefinitionList>
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle1'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle1');
           }}
-          isExpanded={expanded === 'def-list-toggle1'}
           id="def-list-toggle1"
         >
           Item one
         </AccordionToggle>
-        <AccordionContent id="def-list-expand1" isHidden={expanded !== 'def-list-toggle1'}>
+        <AccordionContent id="def-list-expand1">
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
@@ -32,17 +31,16 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle2'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle2');
           }}
-          isExpanded={expanded === 'def-list-toggle2'}
           id="def-list-toggle2"
         >
           Item two
         </AccordionToggle>
-        <AccordionContent id="def-list-expand2" isHidden={expanded !== 'def-list-toggle2'}>
+        <AccordionContent id="def-list-expand2">
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
@@ -50,32 +48,30 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle3'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle3');
           }}
-          isExpanded={expanded === 'def-list-toggle3'}
           id="def-list-toggle3"
         >
           Item three
         </AccordionToggle>
-        <AccordionContent id="def-list-expand3" isHidden={expanded !== 'def-list-toggle3'}>
+        <AccordionContent id="def-list-expand3">
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle4'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle4');
           }}
-          isExpanded={expanded === 'def-list-toggle4'}
           id="def-list-toggle4"
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="def-list-expand4" isHidden={expanded !== 'def-list-toggle4'}>
+        <AccordionContent id="def-list-expand4">
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -88,17 +84,16 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle5'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle5');
           }}
-          isExpanded={expanded === 'def-list-toggle5'}
           id="def-list-toggle5"
         >
           Item five
         </AccordionToggle>
-        <AccordionContent id="def-list-expand5" isHidden={expanded !== 'def-list-toggle5'}>
+        <AccordionContent id="def-list-expand5">
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>

package/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx

@@ -13,62 +13,41 @@ export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
 
   return (
     <Accordion asDefinitionList={false}>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle1')}
-          isExpanded={expanded.includes('ex2-toggle1')}
-          id="ex2-toggle1"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle1')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle1')} id="ex2-toggle1">
           Item one
         </AccordionToggle>
-        <AccordionContent id="ex2-expand1" isHidden={!expanded.includes('ex2-toggle1')} isFixed>
+        <AccordionContent id="ex2-expand1" isFixed>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
           </p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle2')}
-          isExpanded={expanded.includes('ex2-toggle2')}
-          id="ex2-toggle2"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle2')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle2')} id="ex2-toggle2">
           Item two
         </AccordionToggle>
-        <AccordionContent id="ex2-expand2" isHidden={!expanded.includes('ex2-toggle2')} isFixed>
+        <AccordionContent id="ex2-expand2" isFixed>
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
           </p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle3')}
-          isExpanded={expanded.includes('ex2-toggle3')}
-          id="ex2-toggle3"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle3')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle3')} id="ex2-toggle3">
           Item three
         </AccordionToggle>
-        <AccordionContent id="ex2-expand3" isHidden={!expanded.includes('ex2-toggle3')} isFixed>
+        <AccordionContent id="ex2-expand3" isFixed>
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle4')}
-          isExpanded={expanded.includes('ex2-toggle4')}
-          id="ex2-toggle4"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle4')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle4')} id="ex2-toggle4">
           Item four
         </AccordionToggle>
-        <AccordionContent
-          aria-labelledby="ex2-toggle4"
-          id="ex2-expand4"
-          isHidden={!expanded.includes('ex2-toggle4')}
-          isFixed
-        >
+        <AccordionContent aria-labelledby="ex2-toggle4" id="ex2-expand4" isFixed>
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -89,15 +68,11 @@ export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
           </p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle5')}
-          isExpanded={expanded.includes('ex2-toggle5')}
-          id="ex2-toggle5"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle5')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle5')} id="ex2-toggle5">
           Item five
         </AccordionToggle>
-        <AccordionContent id="ex2-expand5" isHidden={!expanded.includes('ex2-toggle5')} isFixed>
+        <AccordionContent id="ex2-expand5" isFixed>
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>

package/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx

@@ -14,17 +14,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
 
   return (
     <Accordion asDefinitionList={false}>
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle1'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle1');
           }}
-          isExpanded={expanded === 'ex-toggle1'}
           id="ex-toggle1"
         >
           Item one
         </AccordionToggle>
-        <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
+        <AccordionContent id="ex-expand1">
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
@@ -32,17 +31,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle2'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle2');
           }}
-          isExpanded={expanded === 'ex-toggle2'}
           id="ex-toggle2"
         >
           Item two
         </AccordionToggle>
-        <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
+        <AccordionContent id="ex-expand2">
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
@@ -50,32 +48,30 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle3'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle3');
           }}
-          isExpanded={expanded === 'ex-toggle3'}
           id="ex-toggle3"
         >
           Item three
         </AccordionToggle>
-        <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
+        <AccordionContent id="ex-expand3">
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle4'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle4');
           }}
-          isExpanded={expanded === 'ex-toggle4'}
           id="ex-toggle4"
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'}>
+        <AccordionContent id="ex-expand4">
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -88,17 +84,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle5'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle5');
           }}
-          isExpanded={expanded === 'ex-toggle5'}
           id="ex-toggle5"
         >
           Item five
         </AccordionToggle>
-        <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
+        <AccordionContent id="ex-expand5">
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>

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

@@ -19,7 +19,7 @@ test('Alert Group renders without children', () => {
 });
 
 test('Alert Group works with n children', () => {
-  const { asFragment } = render(
+  render(
     <AlertGroup data-testid="container">
       <Alert variant="success" title="alert title" />
       <Alert variant="warning" title="another alert title" />

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

@@ -12,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(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/__tests__/BackToTop.test.tsx

@@ -115,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/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/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';