@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

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

@@ -18,7 +18,19 @@ cssPrefix: pf-v6-c-expandable-section
     >
       <span class="pf-v6-c-button__icon pf-m-start">
         <span class="pf-v6-c-expandable-section__toggle-icon">
-          <i class="fas fa-angle-right" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            />
+          </svg>
         </span>
       </span>
       <span class="pf-v6-c-button__text">Show more hidden example content</span>
@@ -49,7 +61,19 @@ cssPrefix: pf-v6-c-expandable-section
     >
       <span class="pf-v6-c-button__icon pf-m-start">
         <span class="pf-v6-c-expandable-section__toggle-icon">
-          <i class="fas fa-angle-right" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            />
+          </svg>
         </span>
       </span>
       <span class="pf-v6-c-button__text">Show less expanded example content</span>
@@ -79,7 +103,19 @@ cssPrefix: pf-v6-c-expandable-section
     >
       <span class="pf-v6-c-button__icon pf-m-start">
         <span class="pf-v6-c-expandable-section__toggle-icon">
-          <i class="fas fa-angle-right" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            />
+          </svg>
         </span>
       </span>
       <span class="pf-v6-c-button__text">Show less indented example content</span>
@@ -109,7 +145,19 @@ cssPrefix: pf-v6-c-expandable-section
     >
       <span class="pf-v6-c-button__icon pf-m-start">
         <span class="pf-v6-c-expandable-section__toggle-icon">
-          <i class="fas fa-angle-right" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            />
+          </svg>
         </span>
       </span>
       <span
@@ -144,7 +192,19 @@ cssPrefix: pf-v6-c-expandable-section
     >
       <span class="pf-v6-c-button__icon pf-m-start">
         <span class="pf-v6-c-expandable-section__toggle-icon">
-          <i class="fas fa-angle-right" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            />
+          </svg>
         </span>
       </span>
       <span
@@ -178,7 +238,19 @@ cssPrefix: pf-v6-c-expandable-section
     >
       <span class="pf-v6-c-button__icon pf-m-start">
         <span class="pf-v6-c-expandable-section__toggle-icon">
-          <i class="fas fa-angle-right" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            />
+          </svg>
         </span>
       </span>
       <span
@@ -227,7 +299,19 @@ cssPrefix: pf-v6-c-expandable-section
         >
           <span class="pf-v6-c-button__icon pf-m-start">
             <span class="pf-v6-c-expandable-section__toggle-icon">
-              <i class="fas fa-angle-right" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </span>
           </span>
           <span class="pf-v6-c-button__text">Show less detached example content</span>

package/docs/components/Form/examples/Form.md

@@ -803,7 +803,19 @@ cssPrefix: pf-v6-c-form
         >
           <span class="pf-v6-c-button__icon">
             <span class="pf-v6-c-form__field-group-toggle-icon">
-              <i class="fas fa-angle-right" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </span>
           </span>
         </button>
@@ -845,7 +857,19 @@ cssPrefix: pf-v6-c-form
             >
               <span class="pf-v6-c-button__icon">
                 <span class="pf-v6-c-form__field-group-toggle-icon">
-                  <i class="fas fa-angle-right" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </span>
               </span>
             </button>
@@ -980,7 +1004,19 @@ cssPrefix: pf-v6-c-form
             >
               <span class="pf-v6-c-button__icon">
                 <span class="pf-v6-c-form__field-group-toggle-icon">
-                  <i class="fas fa-angle-right" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </span>
               </span>
             </button>
@@ -1112,7 +1148,19 @@ cssPrefix: pf-v6-c-form
             >
               <span class="pf-v6-c-button__icon">
                 <span class="pf-v6-c-form__field-group-toggle-icon">
-                  <i class="fas fa-angle-right" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </span>
               </span>
             </button>
@@ -1287,7 +1335,19 @@ cssPrefix: pf-v6-c-form
         >
           <span class="pf-v6-c-button__icon">
             <span class="pf-v6-c-form__field-group-toggle-icon">
-              <i class="fas fa-angle-right" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </span>
           </span>
         </button>
@@ -1519,7 +1579,19 @@ cssPrefix: pf-v6-c-form
         >
           <span class="pf-v6-c-button__icon">
             <span class="pf-v6-c-form__field-group-toggle-icon">
-              <i class="fas fa-angle-right" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </span>
           </span>
         </button>

package/docs/components/Hero/examples/Hero.md

@@ -0,0 +1,25 @@
+---
+id: 'Hero'
+beta: true
+section: components
+cssPrefix: pf-v6-c-hero
+---## Examples
+
+### Basic
+
+```html isBeta
+<div class="pf-v6-c-hero">
+  <div class="pf-v6-c-hero__body">Basic hero content</div>
+</div>
+
+```
+
+## Documentation
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-hero` | `<div>` | Initiates the hero. **Required** |
+| `.pf-v6-c-hero__body` | `<div>` | Initiates the hero body. |
+| `.pf-m-no-glass` | `.pf-v6-c-hero` | Modifies the hero to remove glass styling when using glass theme. |

package/docs/components/Icon/examples/Icon.md

@@ -15,13 +15,37 @@ cssPrefix: pf-v6-c-icon
 
 <span class="pf-v6-c-icon">
   <span class="pf-v6-c-icon__content">
-    <i class="fas fa-angle-right" aria-hidden="true"></i>
+    <svg
+      class="pf-v6-svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+      />
+    </svg>
   </span>
 </span>
 
 <span class="pf-v6-c-icon">
   <span class="pf-v6-c-icon__content">
-    <i class="fas fa-angle-down" aria-hidden="true"></i>
+    <svg
+      class="pf-v6-svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+      />
+    </svg>
   </span>
 </span>
 
@@ -131,27 +155,87 @@ cssPrefix: pf-v6-c-icon
 ```html
 <span class="pf-v6-c-icon">
   <span class="pf-v6-c-icon__content pf-m-danger">
-    <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+    <svg
+      class="pf-v6-svg"
+      viewBox="0 0 32 32"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
+      />
+    </svg>
   </span>
 </span>
 <span class="pf-v6-c-icon">
   <span class="pf-v6-c-icon__content pf-m-warning">
-    <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
+    <svg
+      class="pf-v6-svg"
+      viewBox="0 0 32 32"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
+      />
+    </svg>
   </span>
 </span>
 <span class="pf-v6-c-icon">
   <span class="pf-v6-c-icon__content pf-m-success">
-    <i class="fas fa-check-circle" aria-hidden="true"></i>
+    <svg
+      class="pf-v6-svg"
+      viewBox="0 0 32 32"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
+      />
+    </svg>
   </span>
 </span>
 <span class="pf-v6-c-icon">
   <span class="pf-v6-c-icon__content pf-m-info">
-    <i class="fas fa-info-circle" aria-hidden="true"></i>
+    <svg
+      class="pf-v6-svg"
+      viewBox="0 0 32 32"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
+      />
+    </svg>
   </span>
 </span>
 <span class="pf-v6-c-icon">
   <span class="pf-v6-c-icon__content pf-m-custom">
-    <i class="fas fa-bell" aria-hidden="true"></i>
+    <svg
+      class="pf-v6-svg"
+      viewBox="0 0 32 32"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
+      />
+    </svg>
   </span>
 </span>
 
@@ -295,7 +379,7 @@ extra large
 
 The icon element is a container used to maintain a stable space for an icon or spinner, regardless of size or aspect ratio of the contents.
 
-Refer to the [icons](/design-foundations/icons) page for information about the PatternFly icon set and guidelines for use.
+Refer to the [icons](/foundations-and-styles/iconography) page for information about the PatternFly icon set and guidelines for use.
 
 ### Usage