@patternfly/patternfly 6.3.0-prerelease.55 → 6.3.0-prerelease.57

package/docs/components/Progress/examples/Progress.md

@@ -132,185 +132,6 @@ cssPrefix: pf-v6-c-progress
 
 ```
 
-### Success
-
-```html
-<div class="pf-v6-c-progress pf-m-success" id="progress-success-example">
-  <div
-    class="pf-v6-c-progress__description"
-    id="progress-success-example-description"
-  >Title</div>
-  <div class="pf-v6-c-progress__status" aria-hidden="true">
-    <span class="pf-v6-c-progress__measure">100%</span>
-    <span class="pf-v6-c-progress__status-icon">
-      <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
-    </span>
-  </div>
-  <div
-    class="pf-v6-c-progress__bar"
-    role="progressbar"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-valuenow="100"
-    aria-labelledby="progress-success-example-description"
-  >
-    <div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
-  </div>
-</div>
-
-```
-
-### Warning
-
-```html
-<div class="pf-v6-c-progress pf-m-warning" id="progress-warning-example">
-  <div
-    class="pf-v6-c-progress__description"
-    id="progress-warning-example-description"
-  >Title</div>
-  <div class="pf-v6-c-progress__status" aria-hidden="true">
-    <span class="pf-v6-c-progress__measure">100%</span>
-    <span class="pf-v6-c-progress__status-icon">
-      <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
-    </span>
-  </div>
-  <div
-    class="pf-v6-c-progress__bar"
-    role="progressbar"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-valuenow="100"
-    aria-labelledby="progress-warning-example-description"
-  >
-    <div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
-  </div>
-</div>
-
-```
-
-### Failure
-
-```html
-<div class="pf-v6-c-progress pf-m-danger" id="progress-failure-example">
-  <div
-    class="pf-v6-c-progress__description"
-    id="progress-failure-example-description"
-  >Title</div>
-  <div class="pf-v6-c-progress__status" aria-hidden="true">
-    <span class="pf-v6-c-progress__measure">33%</span>
-    <span class="pf-v6-c-progress__status-icon">
-      <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
-    </span>
-  </div>
-  <div
-    class="pf-v6-c-progress__bar"
-    role="progressbar"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-valuenow="33"
-    aria-labelledby="progress-failure-example-description"
-  >
-    <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
-  </div>
-</div>
-
-```
-
-### Inside success
-
-```html
-<div
-  class="pf-v6-c-progress pf-m-lg pf-m-inside pf-m-success"
-  id="progress-inside-success-example"
->
-  <div
-    class="pf-v6-c-progress__description"
-    id="progress-inside-success-example-description"
-  >Title</div>
-  <div class="pf-v6-c-progress__status" aria-hidden="true">
-    <span class="pf-v6-c-progress__status-icon">
-      <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
-    </span>
-  </div>
-  <div
-    class="pf-v6-c-progress__bar"
-    role="progressbar"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-valuenow="100"
-    aria-labelledby="progress-inside-success-example-description"
-  >
-    <div class="pf-v6-c-progress__indicator" style="width:100%;">
-      <span class="pf-v6-c-progress__measure">100%</span>
-    </div>
-  </div>
-</div>
-
-```
-
-### Inside warning
-
-```html
-<div
-  class="pf-v6-c-progress pf-m-lg pf-m-inside pf-m-warning"
-  id="progress-inside-warning-example"
->
-  <div
-    class="pf-v6-c-progress__description"
-    id="progress-inside-warning-example-description"
-  >Title</div>
-  <div class="pf-v6-c-progress__status" aria-hidden="true">
-    <span class="pf-v6-c-progress__status-icon">
-      <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
-    </span>
-  </div>
-  <div
-    class="pf-v6-c-progress__bar"
-    role="progressbar"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-valuenow="100"
-    aria-labelledby="progress-inside-warning-example-description"
-  >
-    <div class="pf-v6-c-progress__indicator" style="width:100%;">
-      <span class="pf-v6-c-progress__measure">100%</span>
-    </div>
-  </div>
-</div>
-
-```
-
-### Outside failure
-
-```html
-<div
-  class="pf-v6-c-progress pf-m-outside pf-m-lg pf-m-danger"
-  id="progress-outside-failure-example"
->
-  <div
-    class="pf-v6-c-progress__description"
-    id="progress-outside-failure-example-description"
-  >Title</div>
-  <div class="pf-v6-c-progress__status" aria-hidden="true">
-    <span class="pf-v6-c-progress__measure">33%</span>
-    <span class="pf-v6-c-progress__status-icon">
-      <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
-    </span>
-  </div>
-  <div
-    class="pf-v6-c-progress__bar"
-    role="progressbar"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-valuenow="33"
-    aria-labelledby="progress-outside-failure-example-description"
-  >
-    <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
-  </div>
-</div>
-
-```
-
 ### Outside static width measure
 
 ```html
@@ -482,36 +303,6 @@ cssPrefix: pf-v6-c-progress
 
 ```
 
-### Failure without measure
-
-```html
-<div
-  class="pf-v6-c-progress pf-m-danger"
-  id="progress-no-measure-failure-example"
->
-  <div
-    class="pf-v6-c-progress__description"
-    id="progress-no-measure-failure-example-description"
-  >Title</div>
-  <div class="pf-v6-c-progress__status" aria-hidden="true">
-    <span class="pf-v6-c-progress__status-icon">
-      <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
-    </span>
-  </div>
-  <div
-    class="pf-v6-c-progress__bar"
-    role="progressbar"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-valuenow="33"
-    aria-labelledby="progress-no-measure-failure-example-description"
-  >
-    <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
-  </div>
-</div>
-
-```
-
 ### Finite step
 
 ```html
@@ -580,12 +371,16 @@ cssPrefix: pf-v6-c-progress
     aria-valuemin="0"
     aria-valuemax="100"
     aria-valuenow="33"
+    aria-describedby="progress-helper-text-example-help-text"
     aria-labelledby="progress-helper-text-example-description"
   >
     <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
   </div>
   <div class="pf-v6-c-progress__helper-text">
-    <div class="pf-v6-c-helper-text">
+    <div
+      class="pf-v6-c-helper-text"
+      id="progress-helper-text-example-help-text"
+    >
       <div class="pf-v6-c-helper-text__item">
         <span class="pf-v6-c-helper-text__item-text">Progress helper text</span>
       </div>
@@ -625,6 +420,223 @@ If the status that displays with the bar is not a percentage, then the ARIA tag
 
 ```
 
+## Status examples
+
+When conveying status, you should ensure:
+
+* There is visible helper text that explains the status.
+* The helper text includes the status icon, as seen in our [basic helper text example](/components/helper-text/html#basic).
+* The helper text is linked to the `.pf-v6-c-progress__bar[role="progressbar"]` element via an `aria-describedby` attribute, as seen in the [progress helper text example](#helper-text).
+
+### Success
+
+```html
+<div class="pf-v6-c-progress pf-m-success" id="progress-success-example">
+  <div
+    class="pf-v6-c-progress__description"
+    id="progress-success-example-description"
+  >Title</div>
+  <div class="pf-v6-c-progress__status" aria-hidden="true">
+    <span class="pf-v6-c-progress__measure">100%</span>
+    <span class="pf-v6-c-progress__status-icon">
+      <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
+    </span>
+  </div>
+  <div
+    class="pf-v6-c-progress__bar"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    aria-valuenow="100"
+    aria-labelledby="progress-success-example-description"
+  >
+    <div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
+  </div>
+</div>
+
+```
+
+### Warning
+
+```html
+<div class="pf-v6-c-progress pf-m-warning" id="progress-warning-example">
+  <div
+    class="pf-v6-c-progress__description"
+    id="progress-warning-example-description"
+  >Title</div>
+  <div class="pf-v6-c-progress__status" aria-hidden="true">
+    <span class="pf-v6-c-progress__measure">100%</span>
+    <span class="pf-v6-c-progress__status-icon">
+      <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
+    </span>
+  </div>
+  <div
+    class="pf-v6-c-progress__bar"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    aria-valuenow="100"
+    aria-labelledby="progress-warning-example-description"
+  >
+    <div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
+  </div>
+</div>
+
+```
+
+### Failure
+
+```html
+<div class="pf-v6-c-progress pf-m-danger" id="progress-failure-example">
+  <div
+    class="pf-v6-c-progress__description"
+    id="progress-failure-example-description"
+  >Title</div>
+  <div class="pf-v6-c-progress__status" aria-hidden="true">
+    <span class="pf-v6-c-progress__measure">33%</span>
+    <span class="pf-v6-c-progress__status-icon">
+      <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
+    </span>
+  </div>
+  <div
+    class="pf-v6-c-progress__bar"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    aria-valuenow="33"
+    aria-labelledby="progress-failure-example-description"
+  >
+    <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
+  </div>
+</div>
+
+```
+
+### Inside success
+
+```html
+<div
+  class="pf-v6-c-progress pf-m-lg pf-m-inside pf-m-success"
+  id="progress-inside-success-example"
+>
+  <div
+    class="pf-v6-c-progress__description"
+    id="progress-inside-success-example-description"
+  >Title</div>
+  <div class="pf-v6-c-progress__status" aria-hidden="true">
+    <span class="pf-v6-c-progress__status-icon">
+      <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
+    </span>
+  </div>
+  <div
+    class="pf-v6-c-progress__bar"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    aria-valuenow="100"
+    aria-labelledby="progress-inside-success-example-description"
+  >
+    <div class="pf-v6-c-progress__indicator" style="width:100%;">
+      <span class="pf-v6-c-progress__measure">100%</span>
+    </div>
+  </div>
+</div>
+
+```
+
+### Inside warning
+
+```html
+<div
+  class="pf-v6-c-progress pf-m-lg pf-m-inside pf-m-warning"
+  id="progress-inside-warning-example"
+>
+  <div
+    class="pf-v6-c-progress__description"
+    id="progress-inside-warning-example-description"
+  >Title</div>
+  <div class="pf-v6-c-progress__status" aria-hidden="true">
+    <span class="pf-v6-c-progress__status-icon">
+      <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
+    </span>
+  </div>
+  <div
+    class="pf-v6-c-progress__bar"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    aria-valuenow="100"
+    aria-labelledby="progress-inside-warning-example-description"
+  >
+    <div class="pf-v6-c-progress__indicator" style="width:100%;">
+      <span class="pf-v6-c-progress__measure">100%</span>
+    </div>
+  </div>
+</div>
+
+```
+
+### Outside failure
+
+```html
+<div
+  class="pf-v6-c-progress pf-m-outside pf-m-lg pf-m-danger"
+  id="progress-outside-failure-example"
+>
+  <div
+    class="pf-v6-c-progress__description"
+    id="progress-outside-failure-example-description"
+  >Title</div>
+  <div class="pf-v6-c-progress__status" aria-hidden="true">
+    <span class="pf-v6-c-progress__measure">33%</span>
+    <span class="pf-v6-c-progress__status-icon">
+      <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
+    </span>
+  </div>
+  <div
+    class="pf-v6-c-progress__bar"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    aria-valuenow="33"
+    aria-labelledby="progress-outside-failure-example-description"
+  >
+    <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
+  </div>
+</div>
+
+```
+
+### Failure without measure
+
+```html
+<div
+  class="pf-v6-c-progress pf-m-danger"
+  id="progress-no-measure-failure-example"
+>
+  <div
+    class="pf-v6-c-progress__description"
+    id="progress-no-measure-failure-example-description"
+  >Title</div>
+  <div class="pf-v6-c-progress__status" aria-hidden="true">
+    <span class="pf-v6-c-progress__status-icon">
+      <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
+    </span>
+  </div>
+  <div
+    class="pf-v6-c-progress__bar"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    aria-valuenow="33"
+    aria-labelledby="progress-no-measure-failure-example-description"
+  >
+    <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Overview

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.3.0-prerelease.55",
+  "version": "6.3.0-prerelease.57",
   "keywords": [],
   "license": "MIT",
   "engines": {

package/patternfly-base-no-globals.css

@@ -7173,42 +7173,6 @@
     var(--pf-t--global--box-shadow--color--lg--directional);
   --pf-t--global--list-style: disc outside;
   --pf-t--temp--dev--tbd: #BC11E0;
-  --pf-t--global--high-contrast--border--width--action--clicked: 0;
-  --pf-t--global--high-contrast--border--width--action--default: 0;
-  --pf-t--global--high-contrast--border--width--action--hover: 0;
-  --pf-t--global--high-contrast--border--width--box--clicked: 0;
-  --pf-t--global--high-contrast--border--width--box--default: 0;
-  --pf-t--global--high-contrast--border--width--box--hover: 0;
-  --pf-t--global--high-contrast--border--width--box--status--default: 0;
-  --pf-t--global--high-contrast--border--width--box--status--read: 0;
-  --pf-t--global--high-contrast--border--width--control--clicked: 0;
-  --pf-t--global--high-contrast--border--width--control--default: 0;
-  --pf-t--global--high-contrast--border--width--control--hover: 0;
-  --pf-t--global--high-contrast--border--width--divider--clicked: 0;
-  --pf-t--global--high-contrast--border--width--divider--default: 0;
-  --pf-t--global--high-contrast--border--width--divider--hover: 0;
-  --pf-t--global--high-contrast--border--width--extra-strong: 0;
-  --pf-t--global--high-contrast--border--width--regular: 0;
-  --pf-t--global--high-contrast--border--width--strong: 0;
-}
-:root:where(.pf-v6-theme-high-contrast) {
-  --pf-t--global--high-contrast--border--width--action--clicked: var(--pf-t--global--border--width--action--clicked);
-  --pf-t--global--high-contrast--border--width--action--default: var(--pf-t--global--border--width--action--default);
-  --pf-t--global--high-contrast--border--width--action--hover: var(--pf-t--global--border--width--action--hover);
-  --pf-t--global--high-contrast--border--width--box--clicked: var(--pf-t--global--border--width--box--clicked);
-  --pf-t--global--high-contrast--border--width--box--default: var(--pf-t--global--border--width--box--default);
-  --pf-t--global--high-contrast--border--width--box--hover: var(--pf-t--global--border--width--box--hover);
-  --pf-t--global--high-contrast--border--width--box--status--default: var(--pf-t--global--border--width--box--status--default);
-  --pf-t--global--high-contrast--border--width--box--status--read: var(--pf-t--global--border--width--box--status--read);
-  --pf-t--global--high-contrast--border--width--control--clicked: var(--pf-t--global--border--width--control--clicked);
-  --pf-t--global--high-contrast--border--width--control--default: var(--pf-t--global--border--width--control--default);
-  --pf-t--global--high-contrast--border--width--control--hover: var(--pf-t--global--border--width--control--hover);
-  --pf-t--global--high-contrast--border--width--divider--clicked: var(--pf-t--global--border--width--divider--clicked);
-  --pf-t--global--high-contrast--border--width--divider--default: var(--pf-t--global--border--width--divider--default);
-  --pf-t--global--high-contrast--border--width--divider--hover: var(--pf-t--global--border--width--divider--hover);
-  --pf-t--global--high-contrast--border--width--extra-strong: var(--pf-t--global--border--width--extra-strong);
-  --pf-t--global--high-contrast--border--width--regular: var(--pf-t--global--border--width--regular);
-  --pf-t--global--high-contrast--border--width--strong: var(--pf-t--global--border--width--strong);
 }
 
 :root:where(.pf-v6-theme-dark) {

package/patternfly-base.css

@@ -7313,42 +7313,6 @@ button) {
     var(--pf-t--global--box-shadow--color--lg--directional);
   --pf-t--global--list-style: disc outside;
   --pf-t--temp--dev--tbd: #BC11E0;
-  --pf-t--global--high-contrast--border--width--action--clicked: 0;
-  --pf-t--global--high-contrast--border--width--action--default: 0;
-  --pf-t--global--high-contrast--border--width--action--hover: 0;
-  --pf-t--global--high-contrast--border--width--box--clicked: 0;
-  --pf-t--global--high-contrast--border--width--box--default: 0;
-  --pf-t--global--high-contrast--border--width--box--hover: 0;
-  --pf-t--global--high-contrast--border--width--box--status--default: 0;
-  --pf-t--global--high-contrast--border--width--box--status--read: 0;
-  --pf-t--global--high-contrast--border--width--control--clicked: 0;
-  --pf-t--global--high-contrast--border--width--control--default: 0;
-  --pf-t--global--high-contrast--border--width--control--hover: 0;
-  --pf-t--global--high-contrast--border--width--divider--clicked: 0;
-  --pf-t--global--high-contrast--border--width--divider--default: 0;
-  --pf-t--global--high-contrast--border--width--divider--hover: 0;
-  --pf-t--global--high-contrast--border--width--extra-strong: 0;
-  --pf-t--global--high-contrast--border--width--regular: 0;
-  --pf-t--global--high-contrast--border--width--strong: 0;
-}
-:root:where(.pf-v6-theme-high-contrast) {
-  --pf-t--global--high-contrast--border--width--action--clicked: var(--pf-t--global--border--width--action--clicked);
-  --pf-t--global--high-contrast--border--width--action--default: var(--pf-t--global--border--width--action--default);
-  --pf-t--global--high-contrast--border--width--action--hover: var(--pf-t--global--border--width--action--hover);
-  --pf-t--global--high-contrast--border--width--box--clicked: var(--pf-t--global--border--width--box--clicked);
-  --pf-t--global--high-contrast--border--width--box--default: var(--pf-t--global--border--width--box--default);
-  --pf-t--global--high-contrast--border--width--box--hover: var(--pf-t--global--border--width--box--hover);
-  --pf-t--global--high-contrast--border--width--box--status--default: var(--pf-t--global--border--width--box--status--default);
-  --pf-t--global--high-contrast--border--width--box--status--read: var(--pf-t--global--border--width--box--status--read);
-  --pf-t--global--high-contrast--border--width--control--clicked: var(--pf-t--global--border--width--control--clicked);
-  --pf-t--global--high-contrast--border--width--control--default: var(--pf-t--global--border--width--control--default);
-  --pf-t--global--high-contrast--border--width--control--hover: var(--pf-t--global--border--width--control--hover);
-  --pf-t--global--high-contrast--border--width--divider--clicked: var(--pf-t--global--border--width--divider--clicked);
-  --pf-t--global--high-contrast--border--width--divider--default: var(--pf-t--global--border--width--divider--default);
-  --pf-t--global--high-contrast--border--width--divider--hover: var(--pf-t--global--border--width--divider--hover);
-  --pf-t--global--high-contrast--border--width--extra-strong: var(--pf-t--global--border--width--extra-strong);
-  --pf-t--global--high-contrast--border--width--regular: var(--pf-t--global--border--width--regular);
-  --pf-t--global--high-contrast--border--width--strong: var(--pf-t--global--border--width--strong);
 }
 
 :root:where(.pf-v6-theme-dark) {