@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

package/docs/components/ModalBox/examples/ModalBox.md

@@ -16,9 +16,11 @@ cssPrefix: pf-c-modal-box
   aria-labelledby="modal-title"
   aria-describedby="modal-description"
 >
-  <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <header class="pf-c-modal-box__header">
     <h1 class="pf-c-modal-box__title" id="modal-title">Modal title</h1>
   </header>
@@ -41,9 +43,11 @@ cssPrefix: pf-c-modal-box
   aria-labelledby="modal-help-title"
   aria-describedby="modal-help-description"
 >
-  <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <header class="pf-c-modal-box__header pf-m-help">
     <div class="pf-c-modal-box__header-main">
       <h1
@@ -79,13 +83,11 @@ cssPrefix: pf-c-modal-box
   aria-labelledby="modal-sm-title"
   aria-describedby="modal-sm-description"
 >
-  <button
-    class="pf-c-button pf-m-plain"
-    type="button"
-    aria-label="Close dialog"
-  >
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <header class="pf-c-modal-box__header">
     <h1 class="pf-c-modal-box__title" id="modal-sm-title">Modal title</h1>
   </header>
@@ -110,13 +112,11 @@ cssPrefix: pf-c-modal-box
   aria-labelledby="modal-md-title"
   aria-describedby="modal-md-description"
 >
-  <button
-    class="pf-c-button pf-m-plain"
-    type="button"
-    aria-label="Close dialog"
-  >
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <header class="pf-c-modal-box__header">
     <h1 class="pf-c-modal-box__title" id="modal-md-title">Modal title</h1>
   </header>
@@ -141,9 +141,11 @@ cssPrefix: pf-c-modal-box
   aria-labelledby="modal-lg-title"
   aria-describedby="modal-lg-description"
 >
-  <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <header class="pf-c-modal-box__header">
     <h1 class="pf-c-modal-box__title" id="modal-lg-title">Modal title</h1>
   </header>
@@ -168,9 +170,11 @@ cssPrefix: pf-c-modal-box
   aria-label="Example of a modal without a title"
   aria-describedby="modal-no-title-description"
 >
-  <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <div class="pf-c-modal-box__body">
     <span
       id="modal-no-title-description"
@@ -191,9 +195,11 @@ cssPrefix: pf-c-modal-box
   aria-labelledby="modal-with-description-title"
   aria-describedby="modal-with-description-description"
 >
-  <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <header class="pf-c-modal-box__header">
     <h1
       class="pf-c-modal-box__title"
@@ -222,9 +228,11 @@ cssPrefix: pf-c-modal-box
   aria-labelledby="modal-custom-title"
   aria-describedby="modal-custom-description"
 >
-  <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <header class="pf-c-modal-box__header">
     <h1 class="pf-c-title pf-m-4xl" id="modal-custom-title">Custom title</h1>
   </header>
@@ -263,9 +271,11 @@ cssPrefix: pf-c-modal-box
   aria-labelledby="icon-title"
   aria-describedby="icon-description"
 >
-  <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <header class="pf-c-modal-box__header">
     <h1 class="pf-c-modal-box__title pf-m-icon" id="icon-title">
       <span class="pf-c-modal-box__title-icon">
@@ -280,21 +290,23 @@ cssPrefix: pf-c-modal-box
 
 ```
 
-### Default alert
+### Custom alert
 
 ```html isFullscreen
 <div
-  class="pf-c-modal-box pf-m-default"
+  class="pf-c-modal-box pf-m-custom"
   role="dialog"
   aria-modal="true"
-  aria-labelledby="default-alert-title"
-  aria-describedby="default-alert-description"
+  aria-labelledby="custom-alert-title"
+  aria-describedby="custom-alert-description"
 >
-  <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <header class="pf-c-modal-box__header">
-    <h1 class="pf-c-modal-box__title pf-m-icon" id="default-alert-title">
+    <h1 class="pf-c-modal-box__title pf-m-icon" id="custom-alert-title">
       <span class="pf-c-modal-box__title-icon">
         <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
       </span>
@@ -302,12 +314,12 @@ cssPrefix: pf-c-modal-box
         Default
         alert:
       </span>
-      <span class="pf-c-modal-box__title-text">Default alert modal title</span>
+      <span class="pf-c-modal-box__title-text">Custom alert modal title</span>
     </h1>
   </header>
   <div
     class="pf-c-modal-box__body"
-    id="default-alert-description"
+    id="custom-alert-description"
   >Modal description</div>
   <footer class="pf-c-modal-box__footer">Modal footer</footer>
 </div>
@@ -324,9 +336,11 @@ cssPrefix: pf-c-modal-box
   aria-labelledby="info-alert-title"
   aria-describedby="info-alert-description"
 >
-  <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <header class="pf-c-modal-box__header">
     <h1 class="pf-c-modal-box__title pf-m-icon" id="info-alert-title">
       <span class="pf-c-modal-box__title-icon">
@@ -358,9 +372,11 @@ cssPrefix: pf-c-modal-box
   aria-labelledby="success-alert-title"
   aria-describedby="success-alert-description"
 >
-  <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <header class="pf-c-modal-box__header">
     <h1 class="pf-c-modal-box__title pf-m-icon" id="success-alert-title">
       <span class="pf-c-modal-box__title-icon">
@@ -392,9 +408,11 @@ cssPrefix: pf-c-modal-box
   aria-labelledby="warning-alert-title"
   aria-describedby="warning-alert-description"
 >
-  <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <header class="pf-c-modal-box__header">
     <h1 class="pf-c-modal-box__title pf-m-icon" id="warning-alert-title">
       <span class="pf-c-modal-box__title-icon">
@@ -426,9 +444,11 @@ cssPrefix: pf-c-modal-box
   aria-labelledby="danger-alert-title"
   aria-describedby="danger-alert-description"
 >
-  <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <div class="pf-c-modal-box__close">
+    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
   <header class="pf-c-modal-box__header">
     <h1 class="pf-c-modal-box__title pf-m-icon" id="danger-alert-title">
       <span class="pf-c-modal-box__title-icon">
@@ -458,41 +478,42 @@ A modal box is a generic rectangular container that can be used to build modals.
 
 ### Accessibility
 
-| Attribute                                                                      | Applies to                                                     | Outcome                                                                                                                                                                                                                                                              |
-| ------------------------------------------------------------------------------ | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="dialog"`                                                                | `.pf-c-modal-box`                                              | Identifies the element that serves as the modal container. **Required**                                                                                                                                                                                              |
-| `aria-labelledby="[id value of .pf-c-modal-box__title or custom modal title]"` | `.pf-c-modal-box`                                              | Gives the modal an accessible name by referring to the element that provides the dialog title. **Required when .pf-c-title is present**                                                                                                                              |
-| `aria-label="[title of modal]"`                                                | `.pf-c-modal-box`                                              | Gives the modal an accessible name. **Required when `.pf-c-modal-box__title` is _not_ present**                                                                                                                                                                      |
-| `aria-describedby="[id value of applicable content]"`                          | `.pf-c-modal-box`                                              | Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal.                                                               |
-| `aria-modal="true"`                                                            | `.pf-c-modal-box`                                              | Tells assistive technologies that the windows underneath the current modal are not available for interaction. **Required**                                                                                                                                           |
-| `aria-label="Close"`                                                           | `.pf-c-modal-box__close .pf-c-button`                          | Provides an accessible name for the close button as it uses an icon instead of text. **Required**                                                                                                                                                                    |
-| `aria-hidden="true"`                                                           | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
-| `form="[id of form in modal body]"`                                            | `.pf-c-modal-box__footer .pf-c-button`                         | Associates a submit button in the modal footer with a form in the modal body. For use when the submit button is outside of the `<form>` that the button submits.                                                                                                     |
-| `tabindex="0"`                                                                 | `.pf-c-modal-box__body`                                        | If a modal box body has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the body must include either a focusable element within the scrollable region or the body itself must be focusable by adding `tabindex="0"`.  |
+| Attribute | Applies to | Outcome |
+| -- | -- | -- |
+| `role="dialog"` | `.pf-c-modal-box` | Identifies the element that serves as the modal container. **Required** |
+| `aria-labelledby="[id value of .pf-c-modal-box__title or custom modal title]"` | `.pf-c-modal-box` | Gives the modal an accessible name by referring to the element that provides the dialog title. **Required when .pf-c-title is present** |
+| `aria-label="[title of modal]"` | `.pf-c-modal-box` | Gives the modal an accessible name. **Required when `.pf-c-modal-box__title` is *not* present** |
+| `aria-describedby="[id value of applicable content]"` | `.pf-c-modal-box` | Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal. |
+| `aria-modal="true"` | `.pf-c-modal-box` | Tells assistive technologies that the windows underneath the current modal are not available for interaction. **Required**|
+| `aria-label="Close"` | `.pf-c-modal-box__close .pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
+| `aria-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
+| `form="[id of form in modal body]"` | `.pf-c-modal-box__footer .pf-c-button` | Associates a submit button in the modal footer with a form in the modal body. For use when the submit button is outside of the `<form>` that the button submits. |
+| `tabindex="0"` | `.pf-c-modal-box__body` | If a modal box body has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the body must include either a focusable element within the scrollable region or the body itself must be focusable by adding `tabindex="0"`. |
 
 ### Usage
 
-| Class                          | Applied                                            | Outcome                                                                                               |
-| ------------------------------ | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| `.pf-c-modal-box`              | `<div>`                                            | Initiates a modal box. **Required**                                                                   |
-| `.pf-c-button.pf-m-plain`      | `<button>`                                         | Initiates a modal box close button.                                                                   |
-| `.pf-c-modal-box__header`      | `<header>`                                         | Initiates a modal box header. **Required** if using a `.pf-c-modal-box__title`.                       |
-| `.pf-c-modal-box__header-main` | `<div>`                                            | Initiates a modal box header main container. **Required** when `pf-c-modal-box__header-help` is used. |
-| `.pf-c-modal-box__header-help` | `<div>`                                            | Initiates the help button container in the modal box header actions.                                  |
-| `.pf-c-modal-box__title`       | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a modal box title. **Required** if using a modal description.                               |
-| `.pf-c-modal-box__title-icon`  | `<span>`                                           | Initiates a container for the modal box title icon.                                                   |
-| `.pf-c-modal-box__title-text`  | `<span>`                                           | Initiates a container for the modal box title text.                                                   |
-| `.pf-c-modal-box__description` | `<div>`                                            | Initiates a modal box description.                                                                    |
-| `.pf-c-modal-box__body`        | `<div>`                                            | Initiates a modal box body.                                                                           |
-| `.pf-c-modal-box__footer`      | `<footer>`                                         | Initiates a modal box footer.                                                                         |
-| `.pf-m-sm`                     | `.pf-c-modal-box`                                  | Modifies for a small modal box width.                                                                 |
-| `.pf-m-md`                     | `.pf-c-modal-box`                                  | Modifies for a medium modal box width.                                                                |
-| `.pf-m-lg`                     | `.pf-c-modal-box`                                  | Modifies for a large modal box width.                                                                 |
-| `.pf-m-align-top`              | `.pf-c-modal-box`                                  | Modifies for top alignment.                                                                           |
-| `.pf-m-icon`                   | `.pf-c-modal-box__title`                           | Modifies the title layout to accommodate an icon.                                                     |
-| `.pf-m-default`                | `.pf-c-modal-box`                                  | Modifies for the default alert state.                                                                 |
-| `.pf-m-info`                   | `.pf-c-modal-box`                                  | Modifies for the info alert state.                                                                    |
-| `.pf-m-success`                | `.pf-c-modal-box`                                  | Modifies for the success alert state.                                                                 |
-| `.pf-m-warning`                | `.pf-c-modal-box`                                  | Modifies for the warning alert state.                                                                 |
-| `.pf-m-danger`                 | `.pf-c-modal-box`                                  | Modifies for the danger alert state.                                                                  |
-| `.pf-m-help`                   | `.pf-c-modal-box__header`                          | Modifies the modal box header to support the help action                                              |
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-c-modal-box` | `<div>` | Initiates a modal box. **Required** |
+| `.pf-c-modal-box__close` | `<div>` | Creates a container for the modal box close button. **Required** if there is a close button. |
+| `.pf-c-button.pf-m-plain` | `<button>` | Initiates a modal box close button. |
+| `.pf-c-modal-box__header` | `<header>` | Initiates a modal box header. **Required** if using a `.pf-c-modal-box__title`. |
+| `.pf-c-modal-box__header-main` | `<div>` | Initiates a modal box header main container. **Required** when `pf-c-modal-box__header-help` is used. |
+| `.pf-c-modal-box__header-help` | `<div>` | Initiates the help button container in the modal box header actions. |
+| `.pf-c-modal-box__title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a modal box title. **Required** if using a modal description. |
+| `.pf-c-modal-box__title-icon` | `<span>` | Initiates a container for the modal box title icon. |
+| `.pf-c-modal-box__title-text` | `<span>` | Initiates a container for the modal box title text. |
+| `.pf-c-modal-box__description` | `<div>` | Initiates a modal box description. |
+| `.pf-c-modal-box__body` | `<div>` | Initiates a modal box body. |
+| `.pf-c-modal-box__footer` | `<footer>` | Initiates a modal box footer. |
+| `.pf-m-sm` | `.pf-c-modal-box` | Modifies for a small modal box width. |
+| `.pf-m-md` | `.pf-c-modal-box` | Modifies for a medium modal box width. |
+| `.pf-m-lg` | `.pf-c-modal-box` | Modifies for a large modal box width. |
+| `.pf-m-align-top` | `.pf-c-modal-box` | Modifies for top alignment.  |
+| `.pf-m-icon` | `.pf-c-modal-box__title` | Modifies the title layout to accommodate an icon. |
+| `.pf-m-custom` | `.pf-c-modal-box` | Modifies for the custom alert state. |
+| `.pf-m-info` | `.pf-c-modal-box` | Modifies for the info alert state. |
+| `.pf-m-success` | `.pf-c-modal-box` | Modifies for the success alert state. |
+| `.pf-m-warning` | `.pf-c-modal-box` | Modifies for the warning alert state. |
+| `.pf-m-danger` | `.pf-c-modal-box` | Modifies for the danger alert state. |
+| `.pf-m-help` | `.pf-c-modal-box__header` | Modifies the modal box header to support the help action |

package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -1,6 +1,7 @@
 ---
-id: 'File upload - multiple'
+id: 'Multiple file upload'
 section: components
+subsection: file-upload
 cssPrefix: pf-c-multiple-file-upload
 ---## Examples
 
@@ -147,7 +148,7 @@ cssPrefix: pf-c-multiple-file-upload
         </span>
       </button>
       <div class="pf-c-expandable-section__content" hidden>
-        <ul class="pf-c-multiple-file-upload__status-list">
+        <ul class="pf-c-multiple-file-upload__status-list" role="list">
           <li class="pf-c-multiple-file-upload__status-item">
             <div class="pf-c-multiple-file-upload__status-item-icon">
               <i class="fas fa-file" aria-hidden="true"></i>
@@ -340,7 +341,7 @@ cssPrefix: pf-c-multiple-file-upload
         </span>
       </button>
       <div class="pf-c-expandable-section__content">
-        <ul class="pf-c-multiple-file-upload__status-list">
+        <ul class="pf-c-multiple-file-upload__status-list" role="list">
           <li class="pf-c-multiple-file-upload__status-item">
             <div class="pf-c-multiple-file-upload__status-item-icon">
               <i class="fas fa-file" aria-hidden="true"></i>
@@ -533,7 +534,7 @@ cssPrefix: pf-c-multiple-file-upload
         </span>
       </button>
       <div class="pf-c-expandable-section__content">
-        <ul class="pf-c-multiple-file-upload__status-list">
+        <ul class="pf-c-multiple-file-upload__status-list" role="list">
           <li class="pf-c-multiple-file-upload__status-item">
             <div class="pf-c-multiple-file-upload__status-item-icon">
               <i class="fas fa-file" aria-hidden="true"></i>
@@ -687,25 +688,25 @@ cssPrefix: pf-c-multiple-file-upload
 
 ### Usage
 
-| Class                                                   | Applied | Outcome                                                    |
-| ------------------------------------------------------- | ------- | ---------------------------------------------------------- |
-| `.pf-c-multiple-file-upload`                            | `<div>` | Initiates the multiple file upload component. **Required** |
-| `.pf-c-multiple-file-upload__main`                      | `<div>` | Defines the main section.                                  |
-| `.pf-c-multiple-file-upload__title`                     | `<div>` | Defines the title.                                         |
-| `.pf-c-multiple-file-upload__title-icon`                | `<div>` | Defines the title icon.                                    |
-| `.pf-c-multiple-file-upload__title-text`                | `<div>` | Defines the title text.                                    |
-| `.pf-c-multiple-file-upload__title-text-separator`      | `<div>` | Defines the title text separator.                          |
-| `.pf-c-multiple-file-upload__upload`                    | `<div>` | Defines the upload button.                                 |
-| `.pf-c-multiple-file-upload__info`                      | `<div>` | Defines the info section.                                  |
-| `.pf-c-multiple-file-upload__status`                    | `<div>` | Defines the status section.                                |
-| `.pf-c-multiple-file-upload__status-progress`           | `<div>` | Defines the status toggle progress.                        |
-| `.pf-c-multiple-file-upload__status-progress-icon`      | `<div>` | Defines the status toggle progress icon.                   |
-| `.pf-c-multiple-file-upload__status-progress-text`      | `<div>` | Defines the status toggle progress text.                   |
-| `.pf-c-multiple-file-upload__status-list`               | `<div>` | Defines the status item list.                              |
-| `.pf-c-multiple-file-upload__status-item`               | `<div>` | Defines a status item.                                     |
-| `.pf-c-multiple-file-upload__status-item-icon`          | `<div>` | Defines the status item icon.                              |
-| `.pf-c-multiple-file-upload__status-item-main`          | `<div>` | Defines the status item main progress section.             |
-| `.pf-c-multiple-file-upload__status-item-close`         | `<div>` | Defines the status item close button.                      |
-| `.pf-c-multiple-file-upload__status-item-progress`      | `<div>` | Defines the status item progress description.              |
-| `.pf-c-multiple-file-upload__status-item-progress-text` | `<div>` | Defines the status item progress description text.         |
-| `.pf-c-multiple-file-upload__status-item-progress-size` | `<div>` | Defines the status item progress description size.         |
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-c-multiple-file-upload` | `<div>` | Initiates the multiple file upload component. **Required** |
+| `.pf-c-multiple-file-upload__main` | `<div>` | Defines the main section. |
+| `.pf-c-multiple-file-upload__title` | `<div>` | Defines the title. |
+| `.pf-c-multiple-file-upload__title-icon` | `<div>` | Defines the title icon. |
+| `.pf-c-multiple-file-upload__title-text` | `<div>` | Defines the title text. |
+| `.pf-c-multiple-file-upload__title-text-separator` | `<div>` | Defines the title text separator. |
+| `.pf-c-multiple-file-upload__upload` | `<div>` | Defines the upload button. |
+| `.pf-c-multiple-file-upload__info` | `<div>` | Defines the info section. |
+| `.pf-c-multiple-file-upload__status` | `<div>` | Defines the status section. |
+| `.pf-c-multiple-file-upload__status-progress` | `<div>` | Defines the status toggle progress. |
+| `.pf-c-multiple-file-upload__status-progress-icon` | `<div>` | Defines the status toggle progress icon. |
+| `.pf-c-multiple-file-upload__status-progress-text` | `<div>` | Defines the status toggle progress text. |
+| `.pf-c-multiple-file-upload__status-list` | `<div>` | Defines the status item list. |
+| `.pf-c-multiple-file-upload__status-item` | `<div>` | Defines a status item. |
+| `.pf-c-multiple-file-upload__status-item-icon` | `<div>` | Defines the status item icon. |
+| `.pf-c-multiple-file-upload__status-item-main` | `<div>` | Defines the status item main progress section. |
+| `.pf-c-multiple-file-upload__status-item-close` | `<div>` | Defines the status item close button. |
+| `.pf-c-multiple-file-upload__status-item-progress` | `<div>` | Defines the status item progress description. |
+| `.pf-c-multiple-file-upload__status-item-progress-text` | `<div>` | Defines the status item progress description text. |
+| `.pf-c-multiple-file-upload__status-item-progress-size` | `<div>` | Defines the status item progress description size. |