@patternfly/patternfly 6.0.0-alpha.5 → 6.0.0-alpha.51

package/docs/components/DualListSelector/examples/DualListSelector.md

@@ -38,7 +38,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -252,7 +255,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -367,7 +373,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -575,7 +584,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -690,7 +702,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -898,7 +913,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1013,7 +1031,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1221,7 +1242,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1349,7 +1373,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1556,7 +1583,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -1684,7 +1714,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -2160,7 +2193,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -2275,7 +2311,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -2732,7 +2771,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -2914,7 +2956,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button
@@ -3099,7 +3144,10 @@ cssPrefix: pf-v5-c-dual-list-selector
           type="button"
           aria-label="Sort"
         >
-          <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+          <i
+            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+            aria-hidden="true"
+          ></i>
         </button>
         <div class="pf-v5-c-dropdown">
           <button

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. |