@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

package/docs/components/Avatar/examples/Avatar.md

@@ -88,7 +88,7 @@ The avatar component provides a default SVG icon. If an image is used it should
 | -- | -- | -- |
 | `.pf-v6-c-avatar` | `<img>` |  Initiates an avatar image. **Required** |
 | `.pf-m-bordered` | `.pf-v6-c-avatar` | Modifies an avatar to have a border. |
-| `.pf-m-sm{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `.pf-m-md{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/tokens/all-patternfly-tokens). **Note:** This is the default size. |
-| `.pf-m-lg{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `.pf-m-xl{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-sm{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-md{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). **Note:** This is the default size. |
+| `.pf-m-lg{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-xl{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |

package/docs/components/BackToTop/examples/BackToTop.md

@@ -13,7 +13,19 @@ cssPrefix: pf-v6-c-back-to-top
   <a class="pf-v6-c-button pf-m-primary" href="#">
     <span class="pf-v6-c-button__text">Back to top</span>
     <span class="pf-v6-c-button__icon pf-m-end">
-      <i class="fas fa-angle-up" aria-hidden="true"></i>
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 320 512"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
+        />
+      </svg>
     </span>
   </a>
 </div>

package/docs/components/Banner/examples/Banner.md

@@ -107,7 +107,19 @@ When a banner is used to convey status, it is advised to add an icon that also c
     <div class="pf-v6-l-flex__item">
       <span class="pf-v6-screen-reader">Success banner:</span>
 
-      <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>
     </div>
     <div class="pf-v6-l-flex__item">Success banner</div>
   </div>
@@ -120,7 +132,19 @@ When a banner is used to convey status, it is advised to add an icon that also c
     <div class="pf-v6-l-flex__item">
       <span class="pf-v6-screen-reader">Warning banner:</span>
 
-      <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>
     </div>
     <div class="pf-v6-l-flex__item">Warning banner</div>
   </div>
@@ -133,7 +157,19 @@ When a banner is used to convey status, it is advised to add an icon that also c
     <div class="pf-v6-l-flex__item">
       <span class="pf-v6-screen-reader">Danger banner:</span>
 
-      <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>
     </div>
     <div class="pf-v6-l-flex__item">Danger banner</div>
   </div>
@@ -146,7 +182,19 @@ When a banner is used to convey status, it is advised to add an icon that also c
     <div class="pf-v6-l-flex__item">
       <span class="pf-v6-screen-reader">Custom status banner:</span>
 
-      <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>
     </div>
     <div class="pf-v6-l-flex__item">Info banner</div>
   </div>
@@ -159,7 +207,149 @@ When a banner is used to convey status, it is advised to add an icon that also c
     <div class="pf-v6-l-flex__item">
       <span class="pf-v6-screen-reader">Custom status banner:</span>
 
-      <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>
+    </div>
+    <div class="pf-v6-l-flex__item">Custom banner</div>
+  </div>
+</div>
+
+```
+
+### Pill
+
+To display a banner with rounded corners, use `pf-m-pill`. The pill modifier can be combined with any Banner modifier.
+
+```html
+<div class="pf-v6-c-banner pf-m-pill pf-m-success">
+  <div class="pf-v6-l-flex pf-m-space-items-sm">
+    <div class="pf-v6-l-flex__item">
+      <span class="pf-v6-screen-reader">Success banner:</span>
+
+      <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>
+    </div>
+    <div class="pf-v6-l-flex__item">Success banner</div>
+  </div>
+</div>
+
+<br />
+
+<div class="pf-v6-c-banner pf-m-pill pf-m-warning">
+  <div class="pf-v6-l-flex pf-m-space-items-sm">
+    <div class="pf-v6-l-flex__item">
+      <span class="pf-v6-screen-reader">Warning banner:</span>
+
+      <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>
+    </div>
+    <div class="pf-v6-l-flex__item">Warning banner</div>
+  </div>
+</div>
+
+<br />
+
+<div class="pf-v6-c-banner pf-m-pill pf-m-danger">
+  <div class="pf-v6-l-flex pf-m-space-items-sm">
+    <div class="pf-v6-l-flex__item">
+      <span class="pf-v6-screen-reader">Danger banner:</span>
+
+      <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>
+    </div>
+    <div class="pf-v6-l-flex__item">Danger banner</div>
+  </div>
+</div>
+
+<br />
+
+<div class="pf-v6-c-banner pf-m-pill pf-m-info">
+  <div class="pf-v6-l-flex pf-m-space-items-sm">
+    <div class="pf-v6-l-flex__item">
+      <span class="pf-v6-screen-reader">Custom status banner:</span>
+
+      <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>
+    </div>
+    <div class="pf-v6-l-flex__item">Info banner</div>
+  </div>
+</div>
+
+<br />
+
+<div class="pf-v6-c-banner pf-m-pill pf-m-custom">
+  <div class="pf-v6-l-flex pf-m-space-items-sm">
+    <div class="pf-v6-l-flex__item">
+      <span class="pf-v6-screen-reader">Custom status banner:</span>
+
+      <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>
     </div>
     <div class="pf-v6-l-flex__item">Custom banner</div>
   </div>
@@ -188,3 +378,4 @@ When a banner is used to convey status, it is advised to add an icon that also c
 | `.pf-m-info` | `.pf-v6-c-banner` |  Modifies banner for info status styling. |
 | `.pf-m-custom` | `.pf-v6-c-banner` |  Modifies banner for custom status styling. |
 | `.pf-m-sticky` | `.pf-v6-c-banner` |  Modifies banner to be sticky to the top of its container. |
+| `.pf-m-pill` | `.pf-v6-c-banner` |  Modifies banner for pill styles. |

package/docs/components/Brand/examples/Brand.md

@@ -83,5 +83,5 @@ Simple brand component.
 | -- | -- | -- |
 | `.pf-v6-c-brand` | `<img>, <picture>` |  Initiates a brand image. **Required** |
 | `.pf-m-picture` | `.pf-v6-c-brand` |  Modifies a brand image to a picture. |
-| `--pf-v6-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-v6-c-brand` |  Modifies the width value of a picture on optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `--pf-v6-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-v6-c-brand` |  Modifies the height value of a picture on optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-v6-c-brand` |  Modifies the width value of a picture on optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `--pf-v6-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-v6-c-brand` |  Modifies the height value of a picture on optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |