@patternfly/patternfly 4.185.2 → 4.187.0

package/base/_globals.scss

@@ -87,6 +87,11 @@
     text-align: left;
   }
 
+  code,
+  pre {
+    font-family: var(--pf-global--FontFamily--monospace);
+  }
+
   // Patternfly base styles
 
   *,

package/base/patternfly-globals.css

@@ -81,6 +81,11 @@ th {
   text-align: left;
 }
 
+code,
+pre {
+  font-family: var(--pf-global--FontFamily--monospace);
+}
+
 *,
 *::before,
 *::after {

package/components/Card/card.css

@@ -51,6 +51,7 @@
   --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
   --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
   --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
+  --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
   --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
   --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
@@ -155,6 +156,7 @@
   --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
   --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
   --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
+  z-index: var(--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex);
   box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
   transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
   transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));

package/components/Card/card.scss

@@ -57,6 +57,7 @@
   --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
   --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
   --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
+  --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
   --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
   --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
@@ -196,6 +197,7 @@
       --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY); // moves before down when selected - same amount and speed as the selected card moves up
       --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY); // causes the before to grow in height - more performant than transitioning height
 
+      z-index: var(--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex); // allows elements (ie, dropdowns) from this card to appear on other cards since the transform creates a new stacking context
       box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
       transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
       transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY)); // moves card up when selected

package/components/Form/form.css

@@ -4,7 +4,7 @@
   --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
   --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-limit-width--MaxWidth: 55rem;
   --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;

package/components/Form/form.scss

@@ -33,7 +33,7 @@ $pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg",
   --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
 
   // limit width
-  --pf-c-form--m-limit-width--MaxWidth: #{pf-size-prem(500px)};
+  --pf-c-form--m-limit-width--MaxWidth: #{pf-size-prem(880px)};
 
   // Group label
 

package/components/FormControl/form-control.css

@@ -33,6 +33,7 @@
   --pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--focus--BorderBottomWidth));
   --pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100);
   --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200);
+  --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100);
   --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100);
   --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
   --pf-c-form-control--disabled--BorderColor: transparent;
@@ -293,6 +294,12 @@ select.pf-c-form-control.pf-m-warning {
 select.pf-c-form-control.pf-m-placeholder {
   color: var(--pf-c-form-control--placeholder--Color);
 }
+select.pf-c-form-control.pf-m-placeholder * {
+  color: var(--pf-c-form-control--placeholder--child--Color);
+}
+select.pf-c-form-control.pf-m-placeholder *:disabled {
+  color: revert;
+}
 
 textarea.pf-c-form-control {
   --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);

package/components/FormControl/form-control.scss

@@ -62,6 +62,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
 
   // input placeholder style
   --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200);
+  --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100);
 
   // input disabled style
   --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100);
@@ -407,6 +408,16 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
 
     &.pf-m-placeholder {
       color: var(--pf-c-form-control--placeholder--Color);
+
+      * {
+        color: var(--pf-c-form-control--placeholder--child--Color);
+
+        // stylelint-disable max-nesting-depth
+        &:disabled {
+          color: revert;
+        }
+        // stylelint-enable
+      }
     }
   }
 

package/components/Page/themes/dark/page.scss

@@ -1,5 +1,6 @@
 @mixin page() {
   .pf-c-page {
+    --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--200);
     --pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
     --pf-c-page__header--BackgroundColor: var(--pf-global--palette--black-1000);

package/components/Switch/switch.css

@@ -13,13 +13,13 @@
   --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
   --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
   --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
   --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
   --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
   --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
-  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
   --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
   --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
   --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);

package/components/Switch/switch.scss

@@ -20,15 +20,15 @@
   --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
   --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
   --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
   --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
   --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
 
   // Switch toggle
   --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
-  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
   --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
   --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
   --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);

package/components/Tabs/tabs.css

@@ -154,6 +154,10 @@
   --pf-c-tabs--before--BorderBottomWidth: 0;
   --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0;
 }
+.pf-c-tabs.pf-m-border-bottom {
+  --pf-c-tabs--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
+  --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
+}
 .pf-c-tabs.pf-m-box .pf-c-tabs__link, .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
   --pf-c-tabs__link--after--BorderBottomWidth: 0;
 }

package/components/Tabs/tabs.scss

@@ -199,6 +199,11 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
     --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0;
   }
 
+  &.pf-m-border-bottom {
+    --pf-c-tabs--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
+    --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
+  }
+
   // Remove bottom border for variants
   &.pf-m-box,
   &.pf-m-vertical {

package/docs/components/FormControl/examples/FormControl.md

@@ -124,6 +124,22 @@ cssPrefix: pf-c-form-control
   id="select-standard"
   name="select-standard"
   aria-label="Standard select example"
+>
+  <option value selected disabled>Please choose</option>
+  <option value="Mr">Mr</option>
+  <option value="Miss">Miss</option>
+  <option value="Mrs">Mrs</option>
+  <option value="Ms">Ms</option>
+  <option value="Dr">Dr</option>
+  <option value="Other">Other</option>
+</select>
+<br />
+<br />
+<select
+  class="pf-c-form-control pf-m-placeholder"
+  id="select-placeholder-enabled"
+  name="select-placeholder-enabled"
+  aria-label="Placeholder enabled select example"
 >
   <option value selected>Please choose</option>
   <option value="Mr">Mr</option>

package/docs/components/Switch/examples/Switch.md

@@ -13,7 +13,6 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-with-label-1"
     aria-labelledby="switch-with-label-1-on"
-    name="switchExample1"
     checked
   />
 
@@ -40,9 +39,7 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-with-label-2"
     aria-labelledby="switch-with-label-2-on"
-    name="switchExample2"
   />
-
   <span class="pf-c-switch__toggle"></span>
 
   <span
@@ -69,7 +66,6 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-reverse-1"
     aria-labelledby="switch-reverse-1-on"
-    name="switchExample1"
     checked
   />
 
@@ -96,9 +92,7 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-reverse-2"
     aria-labelledby="switch-reverse-2-on"
-    name="switchExample2"
   />
-
   <span class="pf-c-switch__toggle"></span>
 
   <span
@@ -116,6 +110,66 @@ cssPrefix: pf-c-switch
 
 ```
 
+### Label and check
+
+```html
+<label class="pf-c-switch" for="switch-label-check-1">
+  <input
+    class="pf-c-switch__input"
+    type="checkbox"
+    id="switch-label-check-1"
+    aria-labelledby="switch-label-check-1-on"
+    checked
+  />
+
+  <span class="pf-c-switch__toggle">
+    <span class="pf-c-switch__toggle-icon">
+      <i class="fas fa-check" aria-hidden="true"></i>
+    </span>
+  </span>
+  <span
+    class="pf-c-switch__label pf-m-on"
+    id="switch-label-check-1-on"
+    aria-hidden="true"
+  >Message when on</span>
+
+  <span
+    class="pf-c-switch__label pf-m-off"
+    id="switch-label-check-1-off"
+    aria-hidden="true"
+  >Message when off</span>
+</label>
+
+<br />
+<br />
+<label class="pf-c-switch" for="switch-label-check-2">
+  <input
+    class="pf-c-switch__input"
+    type="checkbox"
+    id="switch-label-check-2"
+    aria-labelledby="switch-label-check-2-off"
+  />
+
+  <span class="pf-c-switch__toggle">
+    <span class="pf-c-switch__toggle-icon">
+      <i class="fas fa-check" aria-hidden="true"></i>
+    </span>
+  </span>
+  <span
+    class="pf-c-switch__label pf-m-on"
+    id="switch-label-check-2-on"
+    aria-hidden="true"
+  >Message when on</span>
+
+  <span
+    class="pf-c-switch__label pf-m-off"
+    id="switch-label-check-2-off"
+    aria-hidden="true"
+  >Message when off</span>
+</label>
+
+```
+
 ### Without label
 
 ```html
@@ -125,7 +179,6 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-with-icon-1"
     aria-label="switch is off"
-    name="switchExample3"
     checked
   />
 
@@ -144,9 +197,7 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-with-icon-2"
     aria-label="switch is off"
-    name="switchExample4"
   />
-
   <span class="pf-c-switch__toggle">
     <span class="pf-c-switch__toggle-icon">
       <i class="fas fa-check" aria-hidden="true"></i>
@@ -165,7 +216,6 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-disabled-1"
     aria-labelledby="switch-disabled-1-on"
-    name="switchExample5"
     disabled
     checked
   />
@@ -193,7 +243,6 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-disabled-2"
     aria-labelledby="switch-disabled-2-on"
-    name="switchExample6"
     disabled
   />
 

package/docs/components/TabContent/examples/TabContent.md

@@ -43,40 +43,35 @@ cssPrefix: pf-c-tab-content
 ### Padding
 
 ```html
-<section
-  class="pf-c-tab-content pf-m-padding"
-  id="tab1-panel"
-  role="tabpanel"
-  tabindex="0"
->
-  <div class="pf-c-tab-content__body">Panel 1</div>
+<section class="pf-c-tab-content" id="tab1-panel" role="tabpanel" tabindex="0">
+  <div class="pf-c-tab-content__body pf-m-padding">Panel 1</div>
 </section>
 <section
-  class="pf-c-tab-content pf-m-padding"
+  class="pf-c-tab-content"
   id="tab2-panel"
   role="tabpanel"
   tabindex="0"
   hidden
 >
-  <div class="pf-c-tab-content__body">Panel 2</div>
+  <div class="pf-c-tab-content__body pf-m-padding">Panel 2</div>
 </section>
 <section
-  class="pf-c-tab-content pf-m-padding"
+  class="pf-c-tab-content"
   id="tab3-panel"
   role="tabpanel"
   tabindex="0"
   hidden
 >
-  <div class="pf-c-tab-content__body">Panel 3</div>
+  <div class="pf-c-tab-content__body pf-m-padding">Panel 3</div>
 </section>
 <section
-  class="pf-c-tab-content pf-m-padding"
+  class="pf-c-tab-content"
   id="tab4-panel"
   role="tabpanel"
   tabindex="0"
   hidden
 >
-  <div class="pf-c-tab-content__body">Panel 4</div>
+  <div class="pf-c-tab-content__body pf-m-padding">Panel 4</div>
 </section>
 
 ```

package/docs/components/Tabs/examples/Tabs.md

@@ -1910,6 +1910,7 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
 | `.pf-c-tabs__toggle-text`                                        | `<span>`            | Initiates a tabs expandable toggle text.                                                                                                                                                                        |
 | `.pf-m-secondary`                                                | `.pf-c-tabs`        | Applies secondary styling to the tab component.                                                                                                                                                                 |
 | `.pf-m-no-border-bottom`                                         | `.pf-c-tabs`        | Removes bottom border from a tab component.                                                                                                                                                                     |
+| `.pf-m-border-bottom`                                            | `.pf-c-tabs`        | Adds a bottom border to secondary tabs.                                                                                                                                                                         |
 | `.pf-m-box`                                                      | `.pf-c-tabs`        | Applies box styling to the tab component.                                                                                                                                                                       |
 | `.pf-m-vertical`                                                 | `.pf-c-tabs`        | Applies vertical styling to the tab component.                                                                                                                                                                  |
 | `.pf-m-fill`                                                     | `.pf-c-tabs`        | Modifies the tabs to fill the available space.                                                                                                                                                                  |