@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.31

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

@@ -25,7 +25,11 @@ exports[`List icon large list 1`] = `
           />
         </svg>
       </span>
-      Apple
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Apple
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -47,7 +51,11 @@ exports[`List icon large list 1`] = `
           />
         </svg>
       </span>
-      Banana
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Banana
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -69,7 +77,11 @@ exports[`List icon large list 1`] = `
           />
         </svg>
       </span>
-      Orange
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Orange
+      </span>
     </li>
   </ul>
 </DocumentFragment>
@@ -101,7 +113,11 @@ exports[`List icon list 1`] = `
           />
         </svg>
       </span>
-      Apple
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Apple
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -123,7 +139,11 @@ exports[`List icon list 1`] = `
           />
         </svg>
       </span>
-      Banana
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Banana
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -145,7 +165,11 @@ exports[`List icon list 1`] = `
           />
         </svg>
       </span>
-      Orange
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Orange
+      </span>
     </li>
   </ul>
 </DocumentFragment>
@@ -162,17 +186,23 @@ exports[`List inline list 1`] = `
       <li
         class=""
       >
-        First
+        <span>
+          First
+        </span>
       </li>
       <li
         class=""
       >
-        Second
+        <span>
+          Second
+        </span>
       </li>
       <li
         class=""
       >
-        Third
+        <span>
+          Third
+        </span>
       </li>
     </ul>
   </ul>
@@ -188,17 +218,23 @@ exports[`List ordered list 1`] = `
     <li
       class=""
     >
-      Apple
+      <span>
+        Apple
+      </span>
     </li>
     <li
       class=""
     >
-      Banana
+      <span>
+        Banana
+      </span>
     </li>
     <li
       class=""
     >
-      Orange
+      <span>
+        Orange
+      </span>
     </li>
   </ol>
 </DocumentFragment>
@@ -215,17 +251,23 @@ exports[`List simple list 1`] = `
       <li
         class=""
       >
-        First
+        <span>
+          First
+        </span>
       </li>
       <li
         class=""
       >
-        Second
+        <span>
+          Second
+        </span>
       </li>
       <li
         class=""
       >
-        Third
+        <span>
+          Third
+        </span>
       </li>
     </ul>
   </ul>

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

@@ -63,7 +63,7 @@ exports[`Masthead verify inline display breakpoints 1`] = `
 exports[`Masthead verify inset2xl inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-2xl"
   >
     test
   </header>
@@ -83,7 +83,7 @@ exports[`Masthead verify inset3xl inset breakpoints 1`] = `
 exports[`Masthead verify insetLg inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-lg"
   >
     test
   </header>
@@ -93,7 +93,7 @@ exports[`Masthead verify insetLg inset breakpoints 1`] = `
 exports[`Masthead verify insetMd inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-md"
   >
     test
   </header>
@@ -103,7 +103,7 @@ exports[`Masthead verify insetMd inset breakpoints 1`] = `
 exports[`Masthead verify insetNone inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-none"
   >
     test
   </header>
@@ -113,7 +113,7 @@ exports[`Masthead verify insetNone inset breakpoints 1`] = `
 exports[`Masthead verify insetSm inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-sm"
   >
     test
   </header>
@@ -123,7 +123,7 @@ exports[`Masthead verify insetSm inset breakpoints 1`] = `
 exports[`Masthead verify insetXl inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-xl"
   >
     test
   </header>

package/src/components/Masthead/examples/Masthead.md

@@ -7,7 +7,7 @@ propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand',
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { Link } from '@reach/router';
-import pfIcon from '../../assets/pf-logo.svg';
+import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
 
 `Masthead` should contain the following components to maintain proper layout and formatting: `MastheadToggle`, `MastheadMain`, and `MastheadContent`.
 
@@ -17,173 +17,35 @@ import pfIcon from '../../assets/pf-logo.svg';
 
 ### Basic
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="basic-example">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadBasic.tsx"
 ```
 
 ### Basic with mixed content
 
-```ts
-import React from 'react';
-import {
-  Masthead,
-  MastheadToggle,
-  MastheadMain,
-  MastheadBrand,
-  MastheadContent,
-  Button,
-  Flex,
-  FlexItem
-} from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="basic-mixed">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <Flex>
-      <span>Testing text color</span>
-      <Button>testing</Button>
-      <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>
-        <Button>testing</Button>
-      </FlexItem>
-    </Flex>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadBasicMixedContent.tsx"
 ```
 
 ### Display inline
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="inline-masthead" display={{ default: 'inline' }}>
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadDisplayInline.tsx"
 ```
 
 ### Display stack
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="stack-masthead" display={{ default: 'stack' }}>
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadDisplayStack.tsx"
 ```
 
 ### Display stack, display inline responsive
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadDisplayStackInlineResponsive.tsx"
 ```
 
 ### Inset
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadInsets.tsx"
 ```
 
 ### With icon router link
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button, Brand } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import { Link } from '@reach/router';
-import pfIcon from '../../assets/pf-logo.svg';
-
-<Masthead id="icon-router-link">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand component={props => <Link {...props} to="#" />}>
-      <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
-    </MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadIconRouterLink.tsx"
 ```

package/src/components/Masthead/examples/MastheadBasic.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadBasic: React.FunctionComponent = () => (
+  <Masthead id="basic-example">
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadBasicMixedContent.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
+  Button,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadBasicMixedContent: React.FunctionComponent = () => (
+  <Masthead id="basic-mixed">
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <Flex>
+        <span>Content</span>
+        <Button>Primary</Button>
+        <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>
+          <Button variant="secondary">Secondary</Button>
+        </FlexItem>
+        <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>
+          <Button variant="tertiary">Tertiary</Button>
+        </FlexItem>
+      </Flex>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadDisplayInline.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadDisplayInline: React.FunctionComponent = () => (
+  <Masthead id="inline-masthead" display={{ default: 'inline' }}>
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadDisplayStack.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadDisplayStack: React.FunctionComponent = () => (
+  <Masthead id="stack-masthead" display={{ default: 'stack' }}>
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadDisplayStackInlineResponsive.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadDisplayStackInlineResponsive: React.FunctionComponent = () => (
+  <Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadIconRouterLink.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
+  Button,
+  Brand
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import { Link } from '@reach/router';
+import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
+
+export const MastheadIconRouterLink: React.FunctionComponent = () => (
+  <Masthead id="icon-router-link">
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component={(props) => <Link {...props} to="#" />}>
+        <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
+      </MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadInsets.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadInsets: React.FunctionComponent = () => (
+  <Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Menu/MenuItem.tsx

@@ -29,6 +29,8 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   target?: string;
   /** Navigation link relationship. Only set when the to property is present. */
   rel?: string;
+  /** Navigation link download. Only set when the to property is present. */
+  download?: string;
   /** Flag indicating the item has a checkbox */
   hasCheckbox?: boolean;
   /** Flag indicating whether the item is active */
@@ -119,6 +121,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   tooltipProps,
   rel,
   target,
+  download,
   ...props
 }: MenuItemProps) => {
   const {
@@ -271,7 +274,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       // prevent invalid 'disabled' attribute on <a> tags
       disabled: null,
       target: isExternalLink ? '_blank' : target,
-      rel
+      rel,
+      download
     };
   } else if (Component === 'button') {
     additionalProps = {

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -55,8 +55,8 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
 
   const toggle = (
     <div className={styles.multipleFileUploadStatusProgress}>
-      <div className={styles.multipleFileUploadStatusProgressIcon}>{icon}</div>
-      <div className={styles.multipleFileUploadStatusItemProgressText}>{statusToggleText}</div>
+      <div className={`${styles.multipleFileUploadStatusProgress}-icon`}>{icon}</div>
+      <div className={`${styles.multipleFileUploadStatusProgress}-text`}>{statusToggleText}</div>
     </div>
   );
 

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { Progress } from '../Progress';
 import { Button } from '../Button';
 import FileIcon from '@patternfly/react-icons/dist/esm/icons/file-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 /** Automatically reads an uploaded file to render a visual representation of it, including
  * its name, size, and read status. This sub-component also allows custom reading of files
@@ -165,9 +165,9 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
           helperText={progressHelperText}
         />
       </div>
-      <div className={styles.multipleFileUploadStatusItemClose}>
+      <div className={`${styles.multipleFileUploadStatusItem}-close`}>
         <Button variant="plain" aria-label={buttonAriaLabel} onClick={onClearClick}>
-          <TimesCircleIcon />
+          <TimesIcon />
         </Button>
       </div>
     </li>

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -42,7 +42,7 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
               class="pf-v5-c-multiple-file-upload__status-progress-icon"
             />
             <div
-              class="pf-v5-c-multiple-file-upload__status-item-progress-text"
+              class="pf-v5-c-multiple-file-upload__status-progress-text"
             />
           </div>
         </span>
@@ -121,7 +121,7 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
               </svg>
             </div>
             <div
-              class="pf-v5-c-multiple-file-upload__status-item-progress-text"
+              class="pf-v5-c-multiple-file-upload__status-progress-text"
             />
           </div>
         </span>
@@ -186,7 +186,7 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
               class="pf-v5-c-multiple-file-upload__status-progress-icon"
             />
             <div
-              class="pf-v5-c-multiple-file-upload__status-item-progress-text"
+              class="pf-v5-c-multiple-file-upload__status-progress-text"
             >
               test
             </div>
@@ -253,7 +253,7 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
               class="pf-v5-c-multiple-file-upload__status-progress-icon"
             />
             <div
-              class="pf-v5-c-multiple-file-upload__status-item-progress-text"
+              class="pf-v5-c-multiple-file-upload__status-progress-text"
             />
           </div>
         </span>