@patternfly/react-core 4.203.0 → 4.203.1

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

@@ -1,403 +1,669 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
-<li
-  className="pf-c-multiple-file-upload__status-item"
->
-  <div
-    className="pf-c-multiple-file-upload__status-item-icon"
+<DocumentFragment>
+  <li
+    class="pf-c-multiple-file-upload__status-item"
   >
-    <FileIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </div>
-  <div
-    className="pf-c-multiple-file-upload__status-item-main"
-  >
-    <Progress
-      aria-label="progressAriaLabel"
-      aria-labelledby="progressAriaLabelledBy"
-      className=""
-      id=""
-      isTitleTruncated={false}
-      label={null}
-      max={100}
-      measureLocation="top"
-      min={0}
-      size={null}
-      title={
-        <span
-          className="pf-c-multiple-file-upload__status-item-progress"
+    <div
+      class="pf-c-multiple-file-upload__status-item-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 384 512"
+        width="1em"
+      >
+        <path
+          d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
+        />
+      </svg>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-main"
+    >
+      <div
+        class="pf-c-progress"
+        id="test-progress-id"
+      >
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__description"
+          id="test-progress-id-description"
         >
           <span
-            className="pf-c-multiple-file-upload__status-item-progress-text"
+            class="pf-c-multiple-file-upload__status-item-progress"
           >
-            testFile.txt
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-text"
+            >
+              testFile.txt
+            </span>
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-size"
+            >
+              3B
+            </span>
           </span>
+        </div>
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__status"
+        >
           <span
-            className="pf-c-multiple-file-upload__status-item-progress-size"
+            class="pf-c-progress__measure"
           >
-            3B
+            0%
           </span>
-        </span>
-      }
-      tooltipPosition="top"
-      value={0}
-      valueText={null}
-      variant={null}
-    />
-  </div>
-  <div
-    className="pf-c-multiple-file-upload__status-item-close"
-  >
-    <Button
-      aria-label="buttonAriaLabel"
-      onClick={[Function]}
-      variant="plain"
+        </div>
+        <div
+          aria-label="progressAriaLabel"
+          aria-labelledby="test-progress-id-description"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          class="pf-c-progress__bar"
+          role="progressbar"
+        >
+          <div
+            class="pf-c-progress__indicator"
+            style="width: 0%;"
+          >
+            <span
+              class="pf-c-progress__measure"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-close"
     >
-      <TimesCircleIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-      />
-    </Button>
-  </div>
-</li>
+      <button
+        aria-disabled="false"
+        aria-label="buttonAriaLabel"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-6"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 512 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"
+          />
+        </svg>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
 `;
 
 exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
-<li
-  className="pf-c-multiple-file-upload__status-item test"
->
-  <div
-    className="pf-c-multiple-file-upload__status-item-icon"
-  >
-    <FileIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </div>
-  <div
-    className="pf-c-multiple-file-upload__status-item-main"
+<DocumentFragment>
+  <li
+    class="pf-c-multiple-file-upload__status-item test"
   >
-    <Progress
-      aria-label={null}
-      aria-labelledby={null}
-      className=""
-      id=""
-      isTitleTruncated={false}
-      label={null}
-      max={100}
-      measureLocation="top"
-      min={0}
-      size={null}
-      title={
-        <span
-          className="pf-c-multiple-file-upload__status-item-progress"
+    <div
+      class="pf-c-multiple-file-upload__status-item-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 384 512"
+        width="1em"
+      >
+        <path
+          d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
+        />
+      </svg>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-main"
+    >
+      <div
+        class="pf-c-progress"
+        id="test-progress-id"
+      >
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__description"
+          id="test-progress-id-description"
         >
           <span
-            className="pf-c-multiple-file-upload__status-item-progress-text"
+            class="pf-c-multiple-file-upload__status-item-progress"
           >
-            
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-text"
+            />
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-size"
+            >
+              0B
+            </span>
           </span>
+        </div>
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__status"
+        >
           <span
-            className="pf-c-multiple-file-upload__status-item-progress-size"
+            class="pf-c-progress__measure"
           >
-            0B
+            0%
           </span>
-        </span>
-      }
-      tooltipPosition="top"
-      value={0}
-      valueText={null}
-      variant={null}
-    />
-  </div>
-  <div
-    className="pf-c-multiple-file-upload__status-item-close"
-  >
-    <Button
-      aria-label="Remove from list"
-      onClick={[Function]}
-      variant="plain"
+        </div>
+        <div
+          aria-labelledby="test-progress-id-description"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          class="pf-c-progress__bar"
+          role="progressbar"
+        >
+          <div
+            class="pf-c-progress__indicator"
+            style="width: 0%;"
+          >
+            <span
+              class="pf-c-progress__measure"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-close"
     >
-      <TimesCircleIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-      />
-    </Button>
-  </div>
-</li>
+      <button
+        aria-disabled="false"
+        aria-label="Remove from list"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-2"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 512 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"
+          />
+        </svg>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
 `;
 
 exports[`MultipleFileUploadStatusItem renders custom file name/size/icon when passed 1`] = `
-<li
-  className="pf-c-multiple-file-upload__status-item"
->
-  <div
-    className="pf-c-multiple-file-upload__status-item-icon"
-  >
-    <FileImageIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </div>
-  <div
-    className="pf-c-multiple-file-upload__status-item-main"
+<DocumentFragment>
+  <li
+    class="pf-c-multiple-file-upload__status-item"
   >
-    <Progress
-      aria-label={null}
-      aria-labelledby={null}
-      className=""
-      id=""
-      isTitleTruncated={false}
-      label={null}
-      max={100}
-      measureLocation="top"
-      min={0}
-      size={null}
-      title={
-        <span
-          className="pf-c-multiple-file-upload__status-item-progress"
+    <div
+      class="pf-c-multiple-file-upload__status-item-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 384 512"
+        width="1em"
+      >
+        <path
+          d="M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
+        />
+      </svg>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-main"
+    >
+      <div
+        class="pf-c-progress"
+        id="test-progress-id"
+      >
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__description"
+          id="test-progress-id-description"
         >
           <span
-            className="pf-c-multiple-file-upload__status-item-progress-text"
+            class="pf-c-multiple-file-upload__status-item-progress"
           >
-            testCustomFileName.txt
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-text"
+            >
+              testCustomFileName.txt
+            </span>
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-size"
+            >
+              42
+            </span>
           </span>
+        </div>
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__status"
+        >
           <span
-            className="pf-c-multiple-file-upload__status-item-progress-size"
+            class="pf-c-progress__measure"
           >
-            42
+            0%
           </span>
-        </span>
-      }
-      tooltipPosition="top"
-      value={0}
-      valueText={null}
-      variant={null}
-    />
-  </div>
-  <div
-    className="pf-c-multiple-file-upload__status-item-close"
-  >
-    <Button
-      aria-label="Remove from list"
-      onClick={[Function]}
-      variant="plain"
+        </div>
+        <div
+          aria-labelledby="test-progress-id-description"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          class="pf-c-progress__bar"
+          role="progressbar"
+        >
+          <div
+            class="pf-c-progress__indicator"
+            style="width: 0%;"
+          >
+            <span
+              class="pf-c-progress__measure"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-close"
     >
-      <TimesCircleIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-      />
-    </Button>
-  </div>
-</li>
+      <button
+        aria-disabled="false"
+        aria-label="Remove from list"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-4"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 512 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"
+          />
+        </svg>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
 `;
 
 exports[`MultipleFileUploadStatusItem renders custom progress value/variant when passed 1`] = `
-<li
-  className="pf-c-multiple-file-upload__status-item"
->
-  <div
-    className="pf-c-multiple-file-upload__status-item-icon"
-  >
-    <FileIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </div>
-  <div
-    className="pf-c-multiple-file-upload__status-item-main"
+<DocumentFragment>
+  <li
+    class="pf-c-multiple-file-upload__status-item"
   >
-    <Progress
-      aria-label={null}
-      aria-labelledby={null}
-      className=""
-      id=""
-      isTitleTruncated={false}
-      label={null}
-      max={100}
-      measureLocation="top"
-      min={0}
-      size={null}
-      title={
-        <span
-          className="pf-c-multiple-file-upload__status-item-progress"
+    <div
+      class="pf-c-multiple-file-upload__status-item-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 384 512"
+        width="1em"
+      >
+        <path
+          d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
+        />
+      </svg>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-main"
+    >
+      <div
+        class="pf-c-progress pf-m-warning"
+        id="test-progress-id"
+      >
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__description"
+          id="test-progress-id-description"
         >
           <span
-            className="pf-c-multiple-file-upload__status-item-progress-text"
+            class="pf-c-multiple-file-upload__status-item-progress"
           >
-            testFile.txt
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-text"
+            >
+              testFile.txt
+            </span>
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-size"
+            >
+              3B
+            </span>
           </span>
+        </div>
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__status"
+        >
           <span
-            className="pf-c-multiple-file-upload__status-item-progress-size"
+            class="pf-c-progress__measure"
           >
-            3B
+            42%
           </span>
-        </span>
-      }
-      tooltipPosition="top"
-      value={42}
-      valueText={null}
-      variant="warning"
-    />
-  </div>
-  <div
-    className="pf-c-multiple-file-upload__status-item-close"
-  >
-    <Button
-      aria-label="Remove from list"
-      onClick={[Function]}
-      variant="plain"
+          <span
+            class="pf-c-progress__status-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 576 512"
+              width="1em"
+            >
+              <path
+                d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+              />
+            </svg>
+          </span>
+        </div>
+        <div
+          aria-labelledby="test-progress-id-description"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="42"
+          class="pf-c-progress__bar"
+          role="progressbar"
+        >
+          <div
+            class="pf-c-progress__indicator"
+            style="width: 42%;"
+          >
+            <span
+              class="pf-c-progress__measure"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-close"
     >
-      <TimesCircleIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-      />
-    </Button>
-  </div>
-</li>
+      <button
+        aria-disabled="false"
+        aria-label="Remove from list"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-5"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 512 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"
+          />
+        </svg>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
 `;
 
 exports[`MultipleFileUploadStatusItem renders expected values from a passed file object 1`] = `
-<li
-  className="pf-c-multiple-file-upload__status-item"
->
-  <div
-    className="pf-c-multiple-file-upload__status-item-icon"
-  >
-    <FileIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </div>
-  <div
-    className="pf-c-multiple-file-upload__status-item-main"
+<DocumentFragment>
+  <li
+    class="pf-c-multiple-file-upload__status-item"
   >
-    <Progress
-      aria-label={null}
-      aria-labelledby={null}
-      className=""
-      id=""
-      isTitleTruncated={false}
-      label={null}
-      max={100}
-      measureLocation="top"
-      min={0}
-      size={null}
-      title={
-        <span
-          className="pf-c-multiple-file-upload__status-item-progress"
+    <div
+      class="pf-c-multiple-file-upload__status-item-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 384 512"
+        width="1em"
+      >
+        <path
+          d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
+        />
+      </svg>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-main"
+    >
+      <div
+        class="pf-c-progress"
+        id="test-progress-id"
+      >
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__description"
+          id="test-progress-id-description"
         >
           <span
-            className="pf-c-multiple-file-upload__status-item-progress-text"
+            class="pf-c-multiple-file-upload__status-item-progress"
           >
-            testFile.txt
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-text"
+            >
+              testFile.txt
+            </span>
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-size"
+            >
+              3B
+            </span>
           </span>
+        </div>
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__status"
+        >
           <span
-            className="pf-c-multiple-file-upload__status-item-progress-size"
+            class="pf-c-progress__measure"
           >
-            3B
+            0%
           </span>
-        </span>
-      }
-      tooltipPosition="top"
-      value={0}
-      valueText={null}
-      variant={null}
-    />
-  </div>
-  <div
-    className="pf-c-multiple-file-upload__status-item-close"
-  >
-    <Button
-      aria-label="Remove from list"
-      onClick={[Function]}
-      variant="plain"
+        </div>
+        <div
+          aria-labelledby="test-progress-id-description"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          class="pf-c-progress__bar"
+          role="progressbar"
+        >
+          <div
+            class="pf-c-progress__indicator"
+            style="width: 0%;"
+          >
+            <span
+              class="pf-c-progress__measure"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-close"
     >
-      <TimesCircleIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-      />
-    </Button>
-  </div>
-</li>
+      <button
+        aria-disabled="false"
+        aria-label="Remove from list"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-3"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 512 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"
+          />
+        </svg>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
 `;
 
 exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
-<li
-  className="pf-c-multiple-file-upload__status-item"
->
-  <div
-    className="pf-c-multiple-file-upload__status-item-icon"
-  >
-    <FileIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  </div>
-  <div
-    className="pf-c-multiple-file-upload__status-item-main"
+<DocumentFragment>
+  <li
+    class="pf-c-multiple-file-upload__status-item"
   >
-    <Progress
-      aria-label={null}
-      aria-labelledby={null}
-      className=""
-      id=""
-      isTitleTruncated={false}
-      label={null}
-      max={100}
-      measureLocation="top"
-      min={0}
-      size={null}
-      title={
-        <span
-          className="pf-c-multiple-file-upload__status-item-progress"
+    <div
+      class="pf-c-multiple-file-upload__status-item-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 384 512"
+        width="1em"
+      >
+        <path
+          d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
+        />
+      </svg>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-main"
+    >
+      <div
+        class="pf-c-progress"
+        id="test-progress-id"
+      >
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__description"
+          id="test-progress-id-description"
         >
           <span
-            className="pf-c-multiple-file-upload__status-item-progress-text"
+            class="pf-c-multiple-file-upload__status-item-progress"
           >
-            
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-text"
+            />
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-size"
+            >
+              0B
+            </span>
           </span>
+        </div>
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__status"
+        >
           <span
-            className="pf-c-multiple-file-upload__status-item-progress-size"
+            class="pf-c-progress__measure"
           >
-            0B
+            0%
           </span>
-        </span>
-      }
-      tooltipPosition="top"
-      value={0}
-      valueText={null}
-      variant={null}
-    />
-  </div>
-  <div
-    className="pf-c-multiple-file-upload__status-item-close"
-  >
-    <Button
-      aria-label="Remove from list"
-      onClick={[Function]}
-      variant="plain"
+        </div>
+        <div
+          aria-labelledby="test-progress-id-description"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          class="pf-c-progress__bar"
+          role="progressbar"
+        >
+          <div
+            class="pf-c-progress__indicator"
+            style="width: 0%;"
+          >
+            <span
+              class="pf-c-progress__measure"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-close"
     >
-      <TimesCircleIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-      />
-    </Button>
-  </div>
-</li>
+      <button
+        aria-disabled="false"
+        aria-label="Remove from list"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 512 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"
+          />
+        </svg>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
 `;