@patternfly/react-core 6.0.0-alpha.20 → 6.0.0-alpha.21

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.19","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.20","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.19","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.20","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.19","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.20","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.20",
+  "version": "6.0.0-alpha.21",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -58,6 +58,7 @@
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
+    "case-anything": "^2.1.13",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
@@ -72,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d00a526836d0f533fdbf7f6144dd7a89dfad6542"
+  "gitHead": "1794095e336814dc8ed16282e1bae4a171ebaa46"
 }

package/src/components/Icon/Icon.tsx

@@ -3,6 +3,23 @@ import styles from '@patternfly/react-styles/css/components/Icon/icon';
 import { css } from '@patternfly/react-styles';
 import { Spinner } from '../Spinner';
 
+export type IconSize =
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | 'headingSm'
+  | 'headingMd'
+  | 'headingLg'
+  | 'headingXl'
+  | 'heading_2xl'
+  | 'heading_3xl'
+  | 'bodySm'
+  | 'bodyDefault'
+  | 'bodyLg';
+
 export interface IconComponentProps extends Omit<React.HTMLProps<HTMLSpanElement>, 'size'> {
   /** Icon content */
   children?: React.ReactNode;
@@ -11,11 +28,11 @@ export interface IconComponentProps extends Omit<React.HTMLProps<HTMLSpanElement
   /** Additional classes applied to the icon container */
   className?: string;
   /** Size of the icon component container and icon. */
-  size?: 'sm' | 'md' | 'lg' | 'xl';
+  size?: IconSize;
   /** Size of icon. Overrides the icon size set by the size property. */
-  iconSize?: 'sm' | 'md' | 'lg' | 'xl';
+  iconSize?: IconSize;
   /** Size of progress icon. Overrides the icon size set by the size property. */
-  progressIconSize?: 'sm' | 'md' | 'lg' | 'xl';
+  progressIconSize?: IconSize;
   /** Status color of the icon */
   status?: 'custom' | 'info' | 'success' | 'warning' | 'danger';
   /** Indicates the icon is inline and should inherit the text font size and color. Overriden by size and iconSize properties. */

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Icon } from '../Icon';
+import { kebabCase } from 'case-anything';
+import { Icon, IconSize } from '../Icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import styles from '@patternfly/react-styles/css/components/Icon/icon';
 
@@ -41,16 +42,60 @@ test('sets additional custom class successfully', () => {
   expect(iconContainer).toHaveClass('test');
 });
 
-Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
+Object.values([
+  'sm',
+  'md',
+  'lg',
+  'xl',
+  '2xl',
+  '3xl',
+  'headingSm',
+  'headingMd',
+  'headingLg',
+  'headingXl',
+  'heading_2xl',
+  'heading_3xl',
+  'bodySm',
+  'bodyDefault',
+  'bodyLg'
+]).forEach((size) => {
   test(`sets icon size modifier successfully - ${size}`, () => {
     render(
-      <Icon iconSize={size as 'sm' | 'md' | 'lg' | 'xl'} title={`content-${size}-icon`}>
+      <Icon iconSize={size as IconSize} title={`content-${size}-icon`}>
         <CheckIcon />
       </Icon>
     );
     const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector(`.${styles.iconContent}`);
 
-    expect(iconContainer).toHaveClass(`pf-m-${size}`);
+    const formattedSize = kebabCase(size).replace(/(\d)(-)/, '$1');
+
+    expect(iconContainer).toHaveClass(`pf-m-${formattedSize}`);
+  });
+
+  test(`sets progress icon size modifier successfully - ${size}`, () => {
+    render(
+      <Icon isInProgress progressIconSize={size as IconSize} title={`progress-content-${size}-icon`}>
+        <CheckIcon />
+      </Icon>
+    );
+    const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector(`.${styles.iconProgress}`);
+
+    const formattedSize = kebabCase(size).replace(/(\d)(-)/, '$1');
+
+    expect(iconContainer).toHaveClass(`pf-m-${formattedSize}`);
+  });
+
+  test(`sets size modifier successfully - ${size}`, () => {
+    render(
+      <Icon size={size as IconSize} title={`${size}-icon`}>
+        <CheckIcon />
+      </Icon>
+    );
+    const iconContainer = screen.getByTitle(`${size}-icon`);
+
+    const formattedSize = kebabCase(size).replace(/(\d)(-)/, '$1');
+
+    expect(iconContainer).toHaveClass(`pf-m-${formattedSize}`);
   });
 });
 
@@ -64,19 +109,6 @@ test('check icon without iconSize', () => {
   expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
-Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
-  test(`sets progress icon size modifier successfully - ${size}`, () => {
-    render(
-      <Icon isInProgress progressIconSize={size as 'sm' | 'md' | 'lg' | 'xl'} title={`progress-content-${size}-icon`}>
-        <CheckIcon />
-      </Icon>
-    );
-    const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector(`.${styles.iconProgress}`);
-
-    expect(iconContainer).toHaveClass(`pf-m-${size}`);
-  });
-});
-
 test('check icon without progress icon size', () => {
   render(
     <Icon title="no-progress-icon-size">
@@ -87,19 +119,6 @@ test('check icon without progress icon size', () => {
   expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
-Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
-  test(`sets size modifier successfully - ${size}`, () => {
-    render(
-      <Icon size={size as 'sm' | 'md' | 'lg' | 'xl'} title={`${size}-icon`}>
-        <CheckIcon />
-      </Icon>
-    );
-    const iconContainer = screen.getByTitle(`${size}-icon`);
-
-    expect(iconContainer).toHaveClass(`pf-m-${size}`);
-  });
-});
-
 test('check icon without size', () => {
   render(
     <Icon title="no-size">

package/src/components/Icon/examples/BodyIconSizes.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Icon } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const BodyIconSizes: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Icon size="bodySm">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="bodyDefault">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="bodyLg">
+      <PlusCircleIcon />
+    </Icon>
+  </React.Fragment>
+);

package/src/components/Icon/examples/HeadingIconSizes.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Icon } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const HeadingIconSizes: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Icon size="headingSm">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="headingMd">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="headingLg">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="headingXl">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="heading_2xl">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="heading_3xl">
+      <PlusCircleIcon />
+    </Icon>
+  </React.Fragment>
+);

package/src/components/Icon/examples/Icon.md

@@ -23,9 +23,25 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 ```ts file="IconBasic.tsx"
 ```
 
-### Sizes
+### Standalone icon sizes
 
-```ts file="IconSizes.tsx"
+These are the standard options for sizing icons.
+
+```ts file="StandaloneIconSizes.tsx"
+```
+
+### Body sizes
+
+These size options are meant to make icons match the size of body text.
+
+```ts file="BodyIconSizes.tsx"
+```
+
+### Heading sizes
+
+These size options are meant to make icons match the size of heading text.
+
+```ts file="HeadingIconSizes.tsx"
 ```
 
 ### Status colors

package/src/components/Icon/examples/IconContentSizes.tsx

@@ -4,16 +4,16 @@ import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-i
 
 export const IconContentSizes: React.FunctionComponent = () => (
   <React.Fragment>
-    <Icon size="xl" iconSize="sm">
+    <Icon size="3xl" iconSize="lg">
       <PlusCircleIcon />
     </Icon>
-    <Icon size="xl" iconSize="md">
+    <Icon size="3xl" iconSize="xl">
       <PlusCircleIcon />
     </Icon>
-    <Icon size="xl" iconSize="lg">
+    <Icon size="3xl" iconSize="2xl">
       <PlusCircleIcon />
     </Icon>
-    <Icon size="xl">
+    <Icon size="3xl">
       <PlusCircleIcon />
     </Icon>
   </React.Fragment>

package/src/components/Icon/examples/{IconSizes.tsx → StandaloneIconSizes.tsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
-export const IconSizes: React.FunctionComponent = () => (
+export const StandaloneIconSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon size="sm">
       <PlusCircleIcon />
@@ -16,5 +16,11 @@ export const IconSizes: React.FunctionComponent = () => (
     <Icon size="xl">
       <PlusCircleIcon />
     </Icon>
+    <Icon size="2xl">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="3xl">
+      <PlusCircleIcon />
+    </Icon>
   </React.Fragment>
 );

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,10 +165,9 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
           helperText={progressHelperText}
         />
       </div>
-      {/* TODO: Update with issue #9997.  Removed class "styles.multipleFileUploadStatusItemClose" that no longer exists */}
-      <div>
+      <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>

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

@@ -85,7 +85,9 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
         </div>
       </div>
     </div>
-    <div>
+    <div
+      class="pf-v5-c-multiple-file-upload__status-item-close"
+    >
       <button
         aria-disabled="false"
         aria-label="buttonAriaLabel"
@@ -101,11 +103,11 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 352 512"
           width="1em"
         >
           <path
-            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
           />
         </svg>
       </button>
@@ -196,7 +198,9 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
         </div>
       </div>
     </div>
-    <div>
+    <div
+      class="pf-v5-c-multiple-file-upload__status-item-close"
+    >
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -212,11 +216,11 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 352 512"
           width="1em"
         >
           <path
-            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
           />
         </svg>
       </button>
@@ -309,7 +313,9 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
         </div>
       </div>
     </div>
-    <div>
+    <div
+      class="pf-v5-c-multiple-file-upload__status-item-close"
+    >
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -325,11 +331,11 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 352 512"
           width="1em"
         >
           <path
-            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
           />
         </svg>
       </button>
@@ -422,7 +428,9 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
         </div>
       </div>
     </div>
-    <div>
+    <div
+      class="pf-v5-c-multiple-file-upload__status-item-close"
+    >
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -438,11 +446,11 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 352 512"
           width="1em"
         >
           <path
-            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
           />
         </svg>
       </button>
@@ -552,7 +560,9 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
         </div>
       </div>
     </div>
-    <div>
+    <div
+      class="pf-v5-c-multiple-file-upload__status-item-close"
+    >
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -568,11 +578,11 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 352 512"
           width="1em"
         >
           <path
-            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
           />
         </svg>
       </button>
@@ -665,7 +675,9 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
         </div>
       </div>
     </div>
-    <div>
+    <div
+      class="pf-v5-c-multiple-file-upload__status-item-close"
+    >
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -681,11 +693,11 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 352 512"
           width="1em"
         >
           <path
-            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
           />
         </svg>
       </button>
@@ -776,7 +788,9 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
         </div>
       </div>
     </div>
-    <div>
+    <div
+      class="pf-v5-c-multiple-file-upload__status-item-close"
+    >
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -792,11 +806,11 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 352 512"
           width="1em"
         >
           <path
-            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
           />
         </svg>
       </button>
@@ -889,7 +903,9 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
         </div>
       </div>
     </div>
-    <div>
+    <div
+      class="pf-v5-c-multiple-file-upload__status-item-close"
+    >
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -905,11 +921,11 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 352 512"
           width="1em"
         >
           <path
-            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
           />
         </svg>
       </button>