@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

package/docs/components/EmptyState/examples/EmptyState.md

@@ -46,6 +46,9 @@ cssPrefix: pf-v5-c-empty-state
 <div class="pf-v5-c-empty-state pf-m-xs">
   <div class="pf-v5-c-empty-state__content">
     <div class="pf-v5-c-empty-state__header">
+      <div class="pf-v5-c-empty-state__icon">
+        <i class="fas fa-cubes" aria-hidden="true"></i>
+      </div>
       <div class="pf-v5-c-empty-state__title">
         <h1 class="pf-v5-c-empty-state__title-text">Empty state</h1>
       </div>
@@ -53,7 +56,7 @@ cssPrefix: pf-v5-c-empty-state
 
     <div
       class="pf-v5-c-empty-state__body"
-    >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
+    >This represents an the empty state pattern in PatternFly. The icon is optional.</div>
 
     <div class="pf-v5-c-empty-state__footer">
       <div class="pf-v5-c-empty-state__actions">
@@ -190,6 +193,42 @@ cssPrefix: pf-v5-c-empty-state
 
 ```
 
+### With status
+
+```html
+<div class="pf-v5-c-empty-state pf-m-success">
+  <div class="pf-v5-c-empty-state__content">
+    <div class="pf-v5-c-empty-state__header">
+      <div class="pf-v5-c-empty-state__icon">
+        <i class="fas fa- fa-check-circle" aria-hidden="true"></i>
+      </div>
+      <div class="pf-v5-c-empty-state__title">
+        <h1 class="pf-v5-c-empty-state__title-text">You're all set</h1>
+      </div>
+    </div>
+
+    <div
+      class="pf-v5-c-empty-state__body"
+    >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
+
+    <div class="pf-v5-c-empty-state__footer">
+      <div class="pf-v5-c-empty-state__actions">
+        <button class="pf-v5-c-button pf-m-primary" type="button">Primary action</button>
+      </div>
+      <div class="pf-v5-c-empty-state__actions">
+        <button class="pf-v5-c-button pf-m-link" type="button">Multiple</button>
+        <button class="pf-v5-c-button pf-m-link" type="button">Action buttons</button>
+        <button class="pf-v5-c-button pf-m-link" type="button">Can</button>
+        <button class="pf-v5-c-button pf-m-link" type="button">Go here</button>
+        <button class="pf-v5-c-button pf-m-link" type="button">In the second</button>
+        <button class="pf-v5-c-button pf-m-link" type="button">Action area</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Accessibility
@@ -216,3 +255,8 @@ cssPrefix: pf-v5-c-empty-state
 | `.pf-m-lg` | `.pf-v5-c-empty-state` | Modifies the empty state for a large max-width. |
 | `.pf-m-xl` | `.pf-v5-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
 | `.pf-m-full-height` | `.pf-v5-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-v5-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-v5-c-empty-state` have an implicit or explicit `height` defined.  |
+| `.pf-m-danger` | `.pf-v5-c-empty-state` | Modifies the empty state for danger status. |
+| `.pf-m-warning` | `.pf-v5-c-empty-state` | Modifies the empty state for warning status. |
+| `.pf-m-success` | `.pf-v5-c-empty-state` | Modifies the empty state for success status. |
+| `.pf-m-info` | `.pf-v5-c-empty-state` | Modifies the empty state for info status. |
+| `.pf-m-custom` | `.pf-v5-c-empty-state` | Modifies the empty state for custom status. |

package/docs/components/ExpandableSection/examples/ExpandableSection.md

@@ -47,6 +47,27 @@ cssPrefix: pf-v5-c-expandable-section
 
 ```
 
+### Indented
+
+```html
+<div class="pf-v5-c-expandable-section pf-m-expanded pf-m-indented">
+  <button
+    type="button"
+    class="pf-v5-c-expandable-section__toggle"
+    aria-expanded="true"
+  >
+    <span class="pf-v5-c-expandable-section__toggle-icon">
+      <i class="fas fa-angle-right" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v5-c-expandable-section__toggle-text">Show less</span>
+  </button>
+  <div
+    class="pf-v5-c-expandable-section__content"
+  >This content is visible only when the component is expanded.</div>
+</div>
+
+```
+
 ### Disclosure variation (hidden)
 
 ```html
@@ -92,12 +113,35 @@ cssPrefix: pf-v5-c-expandable-section
 
 ```
 
-### Detached toggle
+### Disclosure variation (indented)
+
+```html
+<div
+  class="pf-v5-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width pf-m-indented"
+>
+  <button
+    type="button"
+    class="pf-v5-c-expandable-section__toggle"
+    aria-expanded="true"
+  >
+    <span class="pf-v5-c-expandable-section__toggle-icon">
+      <i class="fas fa-angle-right" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v5-c-expandable-section__toggle-text">Show less</span>
+  </button>
+  <div
+    class="pf-v5-c-expandable-section__content"
+  >This content is visible only when the component is expanded.</div>
+</div>
+
+```
+
+### Detached
 
 ```html
 <div class="pf-v5-l-stack pf-m-gutter">
   <div class="pf-v5-l-stack__item">
-    <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached">
+    <div class="pf-v5-c-expandable-section pf-m-expanded">
       <div
         class="pf-v5-c-expandable-section__content"
         id="detached-toggle-content"
@@ -106,7 +150,7 @@ cssPrefix: pf-v5-c-expandable-section
   </div>
 
   <div class="pf-v5-l-stack__item">
-    <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached">
+    <div class="pf-v5-c-expandable-section pf-m-expanded">
       <button
         type="button"
         class="pf-v5-c-expandable-section__toggle"
@@ -124,28 +168,7 @@ cssPrefix: pf-v5-c-expandable-section
 
 ```
 
-### Indented
-
-```html
-<div class="pf-v5-c-expandable-section pf-m-expanded pf-m-indented">
-  <button
-    type="button"
-    class="pf-v5-c-expandable-section__toggle"
-    aria-expanded="true"
-  >
-    <span class="pf-v5-c-expandable-section__toggle-icon">
-      <i class="fas fa-angle-right" aria-hidden="true"></i>
-    </span>
-    <span class="pf-v5-c-expandable-section__toggle-text">Show less</span>
-  </button>
-  <div
-    class="pf-v5-c-expandable-section__content"
-  >This content is visible only when the component is expanded.</div>
-</div>
-
-```
-
-### Truncate expansion
+### Truncate expansion (hidden)
 
 ```html
 <div class="pf-v5-c-expandable-section pf-m-truncate">
@@ -163,7 +186,7 @@ cssPrefix: pf-v5-c-expandable-section
 
 ```
 
-### Truncate expansion expanded
+### Truncate expansion (expanded)
 
 ```html
 <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-truncate">
@@ -205,9 +228,7 @@ cssPrefix: pf-v5-c-expandable-section
 | `.pf-v5-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
 | `.pf-m-expanded` | `.pf-v5-c-expandable-section` | Modifies the component for the expanded state. |
 | `.pf-m-display-lg` | `.pf-v5-c-expandable-section` | Modifies the styling of the component to have large display styling. |
-| `.pf-m-detached` | `.pf-v5-c-expandable-section` | Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup. |
 | `.pf-m-indented` | `.pf-v5-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
 | `.pf-m-truncate` | `.pf-v5-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
-| `.pf-m-active` | `.pf-v5-c-expandable-section__toggle` | Forces display of the active state of the toggle. |
 | `.pf-m-expand-top` | `.pf-v5-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
 | `--pf-v5-c-expandable-section--m-truncate__content--LineClamp` | `.pf-v5-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |

package/docs/components/FileUpload/examples/FileUpload.md

@@ -48,6 +48,57 @@ cssPrefix: pf-v5-c-file-upload
 
 ```
 
+### With helper text
+
+```html
+<div class="pf-v5-c-file-upload">
+  <div class="pf-v5-c-file-upload__file-select">
+    <div class="pf-v5-c-input-group">
+      <div class="pf-v5-c-input-group__item pf-m-fill">
+        <span class="pf-v5-c-form-control pf-m-readonly">
+          <input
+            readonly
+            id="file-upload-helper-text-text-input"
+            name="file-upload-helper-text-text-input"
+            aria-label="Drag and drop a file or upload one"
+            placeholder="Drag and drop a file or upload one"
+            aria-describedby="file-upload-helper-text-browse"
+          />
+        </span>
+      </div>
+      <div class="pf-v5-c-input-group__item">
+        <button
+          class="pf-v5-c-button pf-m-control"
+          type="button"
+          id="file-upload-helper-text-browse"
+          aria-describedby="helper-text-example"
+        >Upload</button>
+      </div>
+      <div class="pf-v5-c-input-group__item">
+        <button class="pf-v5-c-button pf-m-control" type="button" disabled>Clear</button>
+      </div>
+    </div>
+  </div>
+  <div class="pf-v5-c-file-upload__file-details">
+    <span class="pf-v5-c-form-control pf-m-resize-vertical">
+      <textarea
+        id="file-upload-helper-text-file-details"
+        name="file-upload-helper-text-file-details"
+        aria-label="Uploaded file content"
+      ></textarea>
+    </span>
+  </div>
+  <div class="pf-v5-c-file-upload__helper-text">
+    <div class="pf-v5-c-helper-text">
+      <div class="pf-v5-c-helper-text__item" id="helper-text-example">
+        <span class="pf-v5-c-helper-text__item-text">Upload a CSV file</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
 ### Upload complete non editable
 
 ```html
@@ -187,63 +238,70 @@ cssPrefix: pf-v5-c-file-upload
 ```html
 <form class="pf-v5-c-form" novalidate>
   <div class="pf-v5-c-form__group">
-    <div class="pf-v5-c-file-upload">
-      <div class="pf-v5-c-file-upload__file-select">
-        <div class="pf-v5-c-input-group">
-          <div class="pf-v5-c-input-group__item pf-m-fill">
-            <span class="pf-v5-c-form-control pf-m-required">
-              <input
-                required
-                id="file-upload-error-text-input"
-                name="file-upload-error-text-input"
-                aria-label="File upload error"
-                value="Sample.png"
-                aria-describedby="file-upload-error-browse"
-              />
-            </span>
-          </div>
-          <div class="pf-v5-c-input-group__item">
-            <button
-              class="pf-v5-c-button pf-m-control"
-              type="button"
-              id="file-upload-error-browse"
-            >Upload</button>
-          </div>
-          <div class="pf-v5-c-input-group__item">
-            <button class="pf-v5-c-button pf-m-control" type="button">Clear</button>
+    <div class="pf-v5-c-form__group-control">
+      <div class="pf-v5-c-file-upload">
+        <div class="pf-v5-c-file-upload__file-select">
+          <div class="pf-v5-c-input-group">
+            <div class="pf-v5-c-input-group__item pf-m-fill">
+              <span class="pf-v5-c-form-control pf-m-readonly">
+                <input
+                  readonly
+                  id="file-upload-error-text-input"
+                  name="file-upload-error-text-input"
+                  aria-label="File upload error"
+                  value="Sample.png"
+                  aria-describedby="file-upload-error-browse"
+                />
+              </span>
+            </div>
+            <div class="pf-v5-c-input-group__item">
+              <button
+                class="pf-v5-c-button pf-m-control"
+                type="button"
+                id="file-upload-error-browse"
+                aria-describedby="with-error-example-helper-text"
+              >Upload</button>
+            </div>
+            <div class="pf-v5-c-input-group__item">
+              <button class="pf-v5-c-button pf-m-control" type="button">Clear</button>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="pf-v5-c-file-upload__file-details"
-        aria-describedby="textAreaHelperText1"
-        aria-invalid="true"
-      >
-        <span class="pf-v5-c-form-control pf-m-error pf-m-resize-vertical">
-          <textarea
-            id="file-upload-error-file-details"
-            name="file-upload-error-file-details"
-            aria-label="Empty text area"
-            aria-describedby="textAreaHelperText1"
-            aria-invalid="true"
-          ></textarea>
-          <span class="pf-v5-c-form-control__utilities">
-            <span class="pf-v5-c-form-control__icon pf-m-status">
-              <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-            </span>
-          </span>
-        </span>
-      </div>
-    </div>
-    <div class="pf-v5-c-form__helper-text" aria-live="polite">
-      <div class="pf-v5-c-helper-text">
         <div
-          class="pf-v5-c-helper-text__item pf-m-error"
-          id="textAreaHelperText1"
+          class="pf-v5-c-file-upload__file-details"
+          aria-describedby="with-error-example-helper-text"
+          aria-invalid="true"
         >
-          <span
-            class="pf-v5-c-helper-text__item-text"
-          >We don't support this file type. Try again with a different file type.</span>
+          <span class="pf-v5-c-form-control pf-m-error pf-m-resize-vertical">
+            <textarea
+              id="file-upload-error-file-details"
+              name="file-upload-error-file-details"
+              aria-label="Empty text area"
+              aria-describedby="with-error-example-helper-text"
+              aria-invalid="true"
+            ></textarea>
+            <span class="pf-v5-c-form-control__utilities">
+              <span class="pf-v5-c-form-control__icon pf-m-status">
+                <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+              </span>
+            </span>
+          </span>
+        </div>
+
+        <div class="pf-v5-c-file-upload__helper-text">
+          <div class="pf-v5-c-helper-text">
+            <div
+              class="pf-v5-c-helper-text__item pf-m-error"
+              id="with-error-example-helper-text"
+            >
+              <span class="pf-v5-c-helper-text__item-icon">
+                <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+              </span>
+              <span
+                class="pf-v5-c-helper-text__item-text"
+              >Must be a CSV file no larger than 1 KB</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -327,5 +385,6 @@ cssPrefix: pf-v5-c-file-upload
 | `.pf-v5-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
 | `.pf-v5-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
 | `.pf-v5-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
+| `.pf-v5-c-file-upload__helper-text` | `<div>` | Initiates a container for [helper text](/components/helper-text) |
 | `.pf-m-drag-hover` | `.pf-v5-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
 | `.pf-m-loading` | `.pf-v5-c-file-upload` | Modifies file upload for the loading state. |