@patternfly/patternfly 4.186.0 → 4.188.0

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/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/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.                                                                                                                                                                  |

package/docs/demos/DataList/examples/DataList.md

@@ -3916,6 +3916,18 @@ wrapperTag: div
         <div class="pf-c-toolbar">
           <div class="pf-c-toolbar__content">
             <div class="pf-c-toolbar__content-section pf-m-nowrap">
+              <div class="pf-c-toolbar__item pf-m-expand-all">
+                <button
+                  class="pf-c-button pf-m-plain"
+                  type="button"
+                  aria-label="Expand all rows"
+                >
+                  <span class="pf-c-toolbar__expand-all-icon">
+                    <i class="fas fa-angle-right" aria-hidden="true"></i>
+                  </span>
+                </button>
+              </div>
+
               <div
                 class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
               >