@patternfly/patternfly 4.218.0 → 4.219.0

package/components/Progress/progress.css

@@ -9,6 +9,7 @@
   --pf-c-progress__bar--before--Opacity: .2;
   --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
   --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
+  --pf-c-progress__helper-text--MarginTop: calc(var(--pf-global--spacer--xs) - var(--pf-c-progress--GridGap));
   --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100);
   --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100);
   --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100);
@@ -156,6 +157,12 @@
   background-color: var(--pf-c-progress__indicator--BackgroundColor);
 }
 
+.pf-c-progress__helper-text {
+  grid-column: 1/3;
+  grid-row: 3/4;
+  margin-top: var(--pf-c-progress__helper-text--MarginTop);
+}
+
 :where(.pf-theme-dark) .pf-c-progress {
   --pf-c-progress--m-inside__measure--Color: var(--pf-global--palette--black-900);
   --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--palette--black-900);

package/components/Progress/progress.scss

@@ -12,6 +12,7 @@
   --pf-c-progress__bar--before--Opacity: .2; // one-off change in opacity to allow progress bar to automatically coordinate with the indicator color
   --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
   --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
+  --pf-c-progress__helper-text--MarginTop: calc(var(--pf-global--spacer--xs) - var(--pf-c-progress--GridGap));
 
   // Modifier variables
   --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100);
@@ -201,6 +202,12 @@
   background-color: var(--pf-c-progress__indicator--BackgroundColor);
 }
 
+.pf-c-progress__helper-text {
+  grid-column: 1 / 3;
+  grid-row: 3 / 4;
+  margin-top: var(--pf-c-progress__helper-text--MarginTop);
+}
+
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/progress";
 

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

@@ -586,6 +586,38 @@ cssPrefix: pf-c-progress
 
 ```
 
+### Helper text
+
+```html
+<div class="pf-c-progress" id="progress-helper-text-example">
+  <div
+    class="pf-c-progress__description"
+    id="progress-helper-text-example-description"
+  >Title</div>
+  <div class="pf-c-progress__status" aria-hidden="true">
+    <span class="pf-c-progress__measure">33%</span>
+  </div>
+  <div
+    class="pf-c-progress__bar"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    aria-valuenow="33"
+    aria-labelledby="progress-helper-text-example-description"
+  >
+    <div class="pf-c-progress__indicator" style="width:33%;"></div>
+  </div>
+  <div class="pf-c-progress__helper-text">
+    <div class="pf-c-helper-text">
+      <div class="pf-c-helper-text__item">
+        <span class="pf-c-helper-text__item-text">Progress helper text</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
 ### Non-percantage progress
 
 If the status that displays with the bar is not a percentage, then the ARIA tag `aria-valuetext` should be used to provide this status to screen reader users. This is the only case when setting the `aria-valuemax` to a value other than "100" is recommended, given how different screen readers handle these attributes.
@@ -647,6 +679,7 @@ If this component is describing the loading progress of a particular region of a
 | `.pf-c-progress__status-icon` | `<span>`                                              | Displays the status icon. (optional)                                                                                                                          |
 | `.pf-c-progress__bar`         | `<div>`                                               | Displays across the entire width and represents the completed state.                                                                                          |
 | `.pf-c-progress__indicator`   | `<div>`                                               | Displays with the `.pf-c-progress__bar` to indicate the progress so far.                                                                                      |
+| `.pf-c-progress__helper-text` | `<div>`                                               | Displays additional text below the progress bar. (optional)                                                                                                   |
 | `.pf-m-lg`                    | `.pf-c-progress`                                      | Modifies the progress bar to be larger.                                                                                                                       |
 | `.pf-m-sm`                    | `.pf-c-progress`                                      | Modifies the progress bar to be smaller.                                                                                                                      |
 | `.pf-m-inside`                | `.pf-c-progress`                                      | Shows the measure within the progress indicator. NOTE: This option requires `.pf-m-lg`.                                                                       |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.218.0",
+  "version": "4.219.0",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-reset.css

@@ -23268,6 +23268,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-progress__bar--before--Opacity: .2;
   --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
   --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
+  --pf-c-progress__helper-text--MarginTop: calc(var(--pf-global--spacer--xs) - var(--pf-c-progress--GridGap));
   --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100);
   --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100);
   --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100);
@@ -23415,6 +23416,12 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   background-color: var(--pf-c-progress__indicator--BackgroundColor);
 }
 
+.pf-c-progress__helper-text {
+  grid-column: 1/3;
+  grid-row: 3/4;
+  margin-top: var(--pf-c-progress__helper-text--MarginTop);
+}
+
 :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-about-modal-box, :where(.pf-theme-dark) .pf-c-banner, :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, :where(.pf-theme-dark) .pf-c-login__header,
 :where(.pf-theme-dark) .pf-c-login__footer, :where(.pf-theme-dark) .pf-c-masthead, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
 :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],

package/patternfly.css

@@ -23395,6 +23395,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-progress__bar--before--Opacity: .2;
   --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
   --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
+  --pf-c-progress__helper-text--MarginTop: calc(var(--pf-global--spacer--xs) - var(--pf-c-progress--GridGap));
   --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100);
   --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100);
   --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100);
@@ -23542,6 +23543,12 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   background-color: var(--pf-c-progress__indicator--BackgroundColor);
 }
 
+.pf-c-progress__helper-text {
+  grid-column: 1/3;
+  grid-row: 3/4;
+  margin-top: var(--pf-c-progress__helper-text--MarginTop);
+}
+
 :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-about-modal-box, :where(.pf-theme-dark) .pf-c-banner, :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, :where(.pf-theme-dark) .pf-c-login__header,
 :where(.pf-theme-dark) .pf-c-login__footer, :where(.pf-theme-dark) .pf-c-masthead, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
 :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],