@patternfly/patternfly 4.137.0 → 4.139.1

package/components/Backdrop/backdrop.css

@@ -1,7 +1,8 @@
 .pf-c-backdrop {
+  --pf-c-backdrop--Position: fixed;
   --pf-c-backdrop--ZIndex: var(--pf-global--ZIndex--lg);
   --pf-c-backdrop--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-100);
-  position: fixed;
+  position: var(--pf-c-backdrop--Position);
   top: 0;
   left: 0;
   z-index: var(--pf-c-backdrop--ZIndex);

package/components/Backdrop/backdrop.scss

@@ -1,8 +1,9 @@
 .pf-c-backdrop {
+  --pf-c-backdrop--Position: fixed;
   --pf-c-backdrop--ZIndex: var(--pf-global--ZIndex--lg);
   --pf-c-backdrop--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-100);
 
-  position: fixed;
+  position: var(--pf-c-backdrop--Position);
   top: 0;
   left: 0;
   z-index: var(--pf-c-backdrop--ZIndex);

package/components/Check/check.css

@@ -5,8 +5,8 @@
   --pf-c-check__label--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-check__label--FontSize: var(--pf-global--FontSize--md);
   --pf-c-check__label--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-check__input--Height: calc(var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight));
-  --pf-c-check__input--MarginTop: calc(-1px * (var(--pf-c-check__label--LineHeight) * 1.25));
+  --pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
+  --pf-c-check__input--MarginTop: calc(((var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight)) - var(--pf-c-check__input--Height)) / 2);
   --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-check__description--Color: var(--pf-global--Color--200);
   --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);

package/components/Check/check.scss

@@ -5,8 +5,8 @@
   --pf-c-check__label--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-check__label--FontSize: var(--pf-global--FontSize--md);
   --pf-c-check__label--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-check__input--Height: calc(var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight));
-  --pf-c-check__input--MarginTop: calc(-1px * (var(--pf-c-check__label--LineHeight) * 1.25));
+  --pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
+  --pf-c-check__input--MarginTop: calc(((var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight)) - var(--pf-c-check__input--Height)) / 2);
   --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-check__description--Color: var(--pf-global--Color--200);
   --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);

package/components/Form/form.css

@@ -5,8 +5,10 @@
   --pf-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-global--spacer--md);
   --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
   --pf-c-form--m-limit-width--MaxWidth: 31.25rem;
-  --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-form--m-horizontal__group-label--md--PaddingTop: calc((((((var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md)) + (2 * var(--pf-global--BorderWidth--sm))) - var(--pf-global--FontSize--md)) / 2) + var(--pf-global--FontSize--md)) - ((((var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--sm)) / 2) + var(--pf-global--FontSize--sm)) + var(--pf-global--BorderWidth--sm));
   --pf-c-form__group-label--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop: 0;
+  --pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--sm)) / 2) + var(--pf-global--FontSize--sm)) - ((((var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--md)) / 2) + var(--pf-global--FontSize--md)));
   --pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-form__label--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-form__label--m-disabled--Color: var(--pf-global--disabled-color--100);
@@ -111,7 +113,8 @@
     padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
   }
   .pf-c-form.pf-m-horizontal .pf-c-form__group-label.pf-m-no-padding-top {
-    --pf-c-form--m-horizontal__group-label--md--PaddingTop: 0;
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-c-form.pf-m-horizontal .pf-c-form__group-control {
     grid-column: 2;

package/components/Form/form.scss

@@ -11,9 +11,33 @@
   --pf-c-form--m-limit-width--MaxWidth: #{pf-size-prem(500px)};
 
   // Group label
-  --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-global--spacer--sm);
+
+  // Terminology and a note on vertical alignment of the group labels:
+  // Content area height = Font size
+  // Line Box height = Content area * Line Height
+  // Leading = Line Box - Content Area
+  // Leading is always split evenly above and below the content area (so the content area always sits vertically centered in the line box)
+
+  // So, to align the label's baseline with the text input's baseline, we need to calculate the difference between the (content area + top half of leading) of the label and of the control. We'll use the text input as the default control, and we also need to adjust for the border of the text input.
+
+  // Calculate the distance from top to baseline by (((font size * line height) + border widths - font size) / 2) + font size
+  // group__form-label distance from top to baseline (small font, small line height) is 16.1px
+  // group__form-control text input distance from top to baseline (medium font, medium line height) is 21px
+  // plus the border width used by the text inputs is 1px
+  // So we need to adjust by 21 - 16.1 + 1 = 5.9px
+
+  --pf-c-form--m-horizontal__group-label--md--PaddingTop: calc((((((var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md)) + (2 * var(--pf-global--BorderWidth--sm))) - var(--pf-global--FontSize--md)) / 2) + var(--pf-global--FontSize--md)) - ((((var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--sm)) / 2) + var(--pf-global--FontSize--sm)) + var(--pf-global--BorderWidth--sm));
   --pf-c-form__group-label--PaddingBottom: var(--pf-global--spacer--sm);
 
+  // Use the no-padding modifier to align form groups that aren't text inputs
+  // Use the formula above, except
+  // - no adjustment for borders needed
+  // - reverse the subtraction so we get a negative number to translate by
+  // - controls like checkboxes use the medium font and small line height
+  // - This comes out to a difference of 2.3px.
+  --pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop: 0;
+  --pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--sm)) / 2) + var(--pf-global--FontSize--sm)) - ((((var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--md)) / 2) + var(--pf-global--FontSize--md)));
+
   // Label
   --pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-form__label--LineHeight: var(--pf-global--LineHeight--sm);
@@ -150,7 +174,9 @@
 
         // stylelint-disable-next-line
         &.pf-m-no-padding-top {
-          --pf-c-form--m-horizontal__group-label--md--PaddingTop: 0;
+          --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+
+          transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
         }
       }
 

package/components/Label/label.css

@@ -88,6 +88,11 @@
   --pf-c-label--m-overflow__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--300);
   --pf-c-label--m-overflow__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-label--m-overflow__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--300);
+  --pf-c-label--m-compact--PaddingTop: 0;
+  --pf-c-label--m-compact--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-label--m-compact--PaddingBottom: 0;
+  --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-label__content--Color: var(--pf-global--Color--100);
   --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
   --pf-c-label__text--MaxWidth: 16ch;
@@ -114,6 +119,13 @@
   border: 0;
   border-radius: var(--pf-c-label--BorderRadius);
 }
+.pf-c-label.pf-m-compact {
+  --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop);
+  --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight);
+  --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
+  --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
+  --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
+}
 .pf-c-label.pf-m-blue {
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
   --pf-c-label__icon--Color: var(--pf-c-label--m-blue__icon--Color);

package/components/Label/label.scss

@@ -112,6 +112,13 @@
   --pf-c-label--m-overflow__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-label--m-overflow__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--300);
 
+  // Compact
+  --pf-c-label--m-compact--PaddingTop: 0;
+  --pf-c-label--m-compact--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-label--m-compact--PaddingBottom: 0;
+  --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
+
   // Content
   --pf-c-label__content--Color: var(--pf-global--Color--100);
   --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
@@ -148,6 +155,14 @@
   border: 0;
   border-radius: var(--pf-c-label--BorderRadius);
 
+  &.pf-m-compact {
+    --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop);
+    --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight);
+    --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
+    --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
+    --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
+  }
+
   &.pf-m-blue {
     --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
     --pf-c-label__icon--Color: var(--pf-c-label--m-blue__icon--Color);

package/components/LogViewer/log-viewer.css

@@ -172,6 +172,7 @@
   font-size: var(--pf-c-log-viewer__text--FontSize);
   color: var(--pf-c-log-viewer__text--Color);
   word-break: break-all;
+  white-space: break-spaces;
 }
 
 .pf-c-log-viewer__timestamp {

package/components/LogViewer/log-viewer.scss

@@ -198,6 +198,7 @@
   font-size: var(--pf-c-log-viewer__text--FontSize);
   color: var(--pf-c-log-viewer__text--Color);
   word-break: break-all;
+  white-space: break-spaces;
 }
 
 // Timestamp

package/components/Radio/radio.css

@@ -5,8 +5,8 @@
   --pf-c-radio__label--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-radio__label--FontSize: var(--pf-global--FontSize--md);
   --pf-c-radio__label--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-radio__input--Height: calc(var(--pf-c-radio__label--FontSize) * var(--pf-c-radio__label--LineHeight));
-  --pf-c-radio__input--MarginTop: calc(-1px * (var(--pf-c-radio__label--LineHeight) * 1.25));
+  --pf-c-radio__input--Height: var(--pf-c-radio__label--FontSize);
+  --pf-c-radio__input--MarginTop: calc(((var(--pf-c-radio__label--FontSize) * var(--pf-c-radio__label--LineHeight)) - var(--pf-c-radio__input--Height)) / 2);
   --pf-c-radio__input--first-child--MarginLeft: 0.0625rem;
   --pf-c-radio__input--last-child--MarginRight: 0.0625rem;
   --pf-c-radio__description--FontSize: var(--pf-global--FontSize--sm);

package/components/Radio/radio.scss

@@ -5,8 +5,8 @@
   --pf-c-radio__label--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-radio__label--FontSize: var(--pf-global--FontSize--md);
   --pf-c-radio__label--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-radio__input--Height: calc(var(--pf-c-radio__label--FontSize) * var(--pf-c-radio__label--LineHeight));
-  --pf-c-radio__input--MarginTop: calc(-1px * (var(--pf-c-radio__label--LineHeight) * 1.25));
+  --pf-c-radio__input--Height: var(--pf-c-radio__label--FontSize);
+  --pf-c-radio__input--MarginTop: calc(((var(--pf-c-radio__label--FontSize) * var(--pf-c-radio__label--LineHeight)) - var(--pf-c-radio__input--Height)) / 2);
   --pf-c-radio__input--first-child--MarginLeft: #{pf-size-prem(1px)};
   --pf-c-radio__input--last-child--MarginRight: #{pf-size-prem(1px)};
   --pf-c-radio__description--FontSize: var(--pf-global--FontSize--sm);

package/docs/components/Label/examples/Label.md

@@ -1032,6 +1032,90 @@ cssPrefix: pf-c-label
 
 ```
 
+### Compact
+
+```html
+<span class="pf-c-label pf-m-compact">
+  <span class="pf-c-label__content">Compact</span>
+</span>
+
+<span class="pf-c-label pf-m-compact">
+  <span class="pf-c-label__content">
+    <span class="pf-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    Compact icon
+  </span>
+</span>
+
+<span class="pf-c-label pf-m-compact">
+  <span class="pf-c-label__content">Compact removable</span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="compact-close-button"
+    aria-label="Remove"
+    aria-labelledby="compact-close-button compact-close-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-compact">
+  <span class="pf-c-label__content">
+    <span class="pf-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    Compact icon removable
+  </span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="compact-icon-close-button"
+    aria-label="Remove"
+    aria-labelledby="compact-icon-close-button compact-icon-close-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-compact">
+  <a class="pf-c-label__content" href="#">Compact link</a>
+</span>
+
+<span class="pf-c-label pf-m-compact">
+  <a class="pf-c-label__content" href="#">Compact link removable</a>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="compact-link-close-button"
+    aria-label="Remove"
+    aria-labelledby="compact-link-close-button compact-link-close-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-compact">
+  <span class="pf-c-label__content">
+    <span class="pf-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-c-label__text">Compact label with icon that truncates</span>
+  </span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="compact-icon-close-truncate-button"
+    aria-label="Remove"
+    aria-labelledby="compact-icon-close-truncate-button compact-icon-close-truncate-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+```
+
 ### Overflow
 
 ```html
@@ -1107,6 +1191,7 @@ cssPrefix: pf-c-label
 | `.pf-c-label__icon`     | `<span>`                    | Initiates a label icon.                                                                                                                                                                                                  |
 | `.pf-c-label__text`     | `<span>`                    | Initiates label text.                                                                                                                                                                                                    |
 | `.pf-m-outline`         | `.pf-c-label`               | Modifies label for outline styles.                                                                                                                                                                                       |
+| `.pf-m-compact`         | `.pf-c-label`               | Modifies label for compact styles.                                                                                                                                                                                       |
 | `.pf-m-overflow`        | `.pf-c-label`               | Modifies label for overflow styles for use in a label group.                                                                                                                                                             |
 | `.pf-m-blue`            | `.pf-c-label`               | Modifies the label to have blue colored styling.                                                                                                                                                                         |
 | `.pf-m-green`           | `.pf-c-label`               | Modifies the label to have green colored styling.                                                                                                                                                                        |