@patternfly/patternfly 4.189.0 → 4.192.0

package/components/Divider/divider.css

@@ -63,42 +63,58 @@
 }
 
 .pf-c-divider {
-  --pf-c-divider--Height: var(--pf-global--BorderWidth--sm);
+  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
+  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
   --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
-  --pf-c-divider--after--Height: var(--pf-c-divider--Height);
-  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
-  --pf-c-divider--Display: flex;
+  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
   --pf-c-divider--after--FlexBasis: 100%;
   --pf-c-divider--after--Inset: 0%;
   --pf-c-divider--m-vertical--after--FlexBasis: 100%;
-  --pf-c-divider--m-vertical--after--Width: var(--pf-global--BorderWidth--sm);
+  --pf-c-divider--m-horizontal--Display: flex;
+  --pf-c-divider--m-horizontal--FlexDirection: row;
+  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
+  --pf-c-divider--m-horizontal--after--Width: auto;
+  --pf-c-divider--m-vertical--Display: inline-flex;
+  --pf-c-divider--m-vertical--FlexDirection: column;
+  --pf-c-divider--m-vertical--after--Height: auto;
+  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
   --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
+  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+  width: 100%;
+  height: auto;
+  display: var(--pf-c-divider--Display);
+  flex-direction: var(--pf-c-divider--FlexDirection);
   align-items: center;
   align-self: stretch;
   flex-shrink: 0;
   justify-content: center;
-  width: 100%;
   border: 0;
 }
 .pf-c-divider::after {
-  flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2));
+  flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+}
+.pf-c-divider::after {
   align-self: stretch;
+  width: var(--pf-c-divider--after--Width);
   height: var(--pf-c-divider--after--Height);
   content: "";
   background-color: var(--pf-c-divider--after--BackgroundColor);
   justify-self: center;
 }
 .pf-c-divider.pf-m-vertical {
-  display: inline-flex;
-  flex-direction: column;
+  --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+  --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+  --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
   width: auto;
   height: inherit;
-  min-height: 100%;
-  max-height: 100%;
 }
 .pf-c-divider.pf-m-vertical::after {
-  flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
-  width: var(--pf-c-divider--m-vertical--after--Width);
+  flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
 }
 .pf-c-divider.pf-m-inset-none {
   --pf-c-divider--after--Inset: 0%;
@@ -124,6 +140,32 @@
 .pf-c-divider.pf-m-inset-3xl {
   --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
 }
+@media (min-width: 576px) {
+  .pf-c-divider.pf-m-horizontal-on-sm {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+  .pf-c-divider.pf-m-horizontal-on-sm::after {
+    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-divider.pf-m-vertical-on-sm {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+  .pf-c-divider.pf-m-vertical-on-sm::after {
+    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+  }
+}
 @media (min-width: 576px) {
   .pf-c-divider.pf-m-inset-none-on-sm {
     --pf-c-divider--after--Inset: 0%;
@@ -150,6 +192,32 @@
     --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
   }
 }
+@media (min-width: 768px) {
+  .pf-c-divider.pf-m-horizontal-on-md {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+  .pf-c-divider.pf-m-horizontal-on-md::after {
+    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-divider.pf-m-vertical-on-md {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+  .pf-c-divider.pf-m-vertical-on-md::after {
+    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+  }
+}
 @media (min-width: 768px) {
   .pf-c-divider.pf-m-inset-none-on-md {
     --pf-c-divider--after--Inset: 0%;
@@ -176,6 +244,32 @@
     --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
   }
 }
+@media (min-width: 992px) {
+  .pf-c-divider.pf-m-horizontal-on-lg {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+  .pf-c-divider.pf-m-horizontal-on-lg::after {
+    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-divider.pf-m-vertical-on-lg {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+  .pf-c-divider.pf-m-vertical-on-lg::after {
+    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+  }
+}
 @media (min-width: 992px) {
   .pf-c-divider.pf-m-inset-none-on-lg {
     --pf-c-divider--after--Inset: 0%;
@@ -202,6 +296,32 @@
     --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
   }
 }
+@media (min-width: 1200px) {
+  .pf-c-divider.pf-m-horizontal-on-xl {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+  .pf-c-divider.pf-m-horizontal-on-xl::after {
+    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-divider.pf-m-vertical-on-xl {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+  .pf-c-divider.pf-m-vertical-on-xl::after {
+    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+  }
+}
 @media (min-width: 1200px) {
   .pf-c-divider.pf-m-inset-none-on-xl {
     --pf-c-divider--after--Inset: 0%;
@@ -228,6 +348,32 @@
     --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
   }
 }
+@media (min-width: 1450px) {
+  .pf-c-divider.pf-m-horizontal-on-2xl {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+  .pf-c-divider.pf-m-horizontal-on-2xl::after {
+    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-divider.pf-m-vertical-on-2xl {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+  .pf-c-divider.pf-m-vertical-on-2xl::after {
+    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+  }
+}
 @media (min-width: 1450px) {
   .pf-c-divider.pf-m-inset-none-on-2xl {
     --pf-c-divider--after--Inset: 0%;

package/components/Divider/divider.scss

@@ -1,62 +1,107 @@
 $pf-c-divider--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 $pf-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl");
 
-.pf-c-divider {
-  // update during breaking change
-  --pf-c-divider--Height: var(--pf-global--BorderWidth--sm);
-  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
-  --pf-c-divider--after--Height: var(--pf-c-divider--Height);
-  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
+@mixin pf-c-divider--m-horizontal {
+  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+
+  width: 100%; // update to var breaking change
+  height: auto; // update to var breaking change
+
+  &::after {
+    flex-basis:
+      calc(
+        var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2)
+      ); // update at breaking change
+  }
+}
+
+@mixin pf-c-divider--m-vertical {
+  --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+  --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+  --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
 
-  // end - update during breaking change
+  width: auto; // update to var breaking change
+  height: inherit; // update to var at breaking change
 
-  --pf-c-divider--Display: flex;
+  &::after {
+    flex-basis:
+      calc(
+        var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset)
+      ); // update at breaking change
+  }
+}
 
-  // After
+.pf-c-divider {
+  // Base
+  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor); // update at breaking change
+  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base); // remove at breaking change
+  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100); // remove at breaking change
+  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base); // remove at breaking change
+
+  // Borders
   --pf-c-divider--after--FlexBasis: 100%;
   --pf-c-divider--after--Inset: 0%;
 
   // Vertical
-  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
-  --pf-c-divider--m-vertical--after--Width: var(--pf-global--BorderWidth--sm);
+  --pf-c-divider--m-vertical--after--FlexBasis: 100%; // remove at breaking change
+
+  // Horizontal mixin
+  --pf-c-divider--m-horizontal--Display: flex;
+  --pf-c-divider--m-horizontal--FlexDirection: row;
+  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height); // update at breaking change
+  --pf-c-divider--m-horizontal--after--Width: auto;
+
+  // Vertical mixin
+  --pf-c-divider--m-vertical--Display: inline-flex;
+  --pf-c-divider--m-vertical--FlexDirection: column;
+  --pf-c-divider--m-vertical--after--Height: auto;
+  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base); // remove at breaking change
 
+  // Vertical
   @include pf-hidden-visible(var(--pf-c-divider--Display));
+  @include pf-c-divider--m-horizontal; // set to default to horizontal
 
+  display: var(--pf-c-divider--Display);
+  flex-direction: var(--pf-c-divider--FlexDirection);
   align-items: center;
   align-self: stretch;
   flex-shrink: 0;
   justify-content: center;
-  width: 100%;
   border: 0; // removes the default border styling on an hr
 
   &::after {
-    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2));
     align-self: stretch;
+    width: var(--pf-c-divider--after--Width);
     height: var(--pf-c-divider--after--Height);
     content: "";
     background-color: var(--pf-c-divider--after--BackgroundColor);
     justify-self: center;
   }
 
-  &.pf-m-vertical {
-    display: inline-flex;
-    flex-direction: column;
-    width: auto;
-    height: inherit;
-    min-height: 100%;
-    max-height: 100%;
-
-    &::after {
-      flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
-      width: var(--pf-c-divider--m-vertical--after--Width);
-    }
-  }
-
   // stylelint-disable max-nesting-depth
-  // Build inset modifiers
+
   @each $breakpoint, $breakpoint-value in $pf-c-divider--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
+    @if ($breakpoint != "base") {
+      @include pf-apply-breakpoint($breakpoint) {
+        &.pf-m-horizontal#{$breakpoint-name} {
+          @include pf-c-divider--m-horizontal;
+        }
+      }
+    }
+
+    @include pf-apply-breakpoint($breakpoint) {
+      &.pf-m-vertical#{$breakpoint-name} {
+        @include pf-c-divider--m-vertical;
+      }
+    }
+
     @include pf-apply-breakpoint($breakpoint) {
       @each $spacer, $spacer-value in $pf-c-divider--spacer-map {
         @if $spacer == none {
@@ -69,5 +114,6 @@ $pf-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "xl"
       }
     }
   }
+
   // stylelint-enable
 }

package/components/Login/login.css

@@ -207,17 +207,25 @@
     grid-template-columns: 1fr auto;
   }
 }
+
+.pf-c-login__main-header-utilities,
 .pf-c-login__main-header .pf-c-dropdown {
   grid-column: auto;
   grid-row: auto;
 }
 @media (min-width: 768px) {
-  .pf-c-login__main-header .pf-c-dropdown {
+  .pf-c-login__main-header-utilities,
+.pf-c-login__main-header .pf-c-dropdown {
     grid-column: 2/3;
     grid-row: 1;
   }
 }
 
+.pf-c-login__main-header-utilities .pf-c-dropdown {
+  grid-column: auto;
+  grid-row: auto;
+}
+
 .pf-c-login__main-header-desc {
   margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
   font-size: var(--pf-c-login__main-header-desc--FontSize);

package/components/Login/login.scss

@@ -192,15 +192,23 @@
   @media (min-width: $pf-global--breakpoint--md) {
     grid-template-columns: 1fr auto;
   }
+}
+
+.pf-c-login__main-header-utilities,
+.pf-c-login__main-header .pf-c-dropdown {
+  grid-column: auto;
+  grid-row: auto;
+
+  @media (min-width: $pf-global--breakpoint--md) {
+    grid-column: 2 / 3;
+    grid-row: 1;
+  }
+}
 
+.pf-c-login__main-header-utilities {
   .pf-c-dropdown {
     grid-column: auto;
     grid-row: auto;
-
-    @media (min-width: $pf-global--breakpoint--md) {
-      grid-column: 2 / 3;
-      grid-row: 1;
-    }
   }
 }
 

package/components/Page/page.css

@@ -211,6 +211,7 @@
   --pf-c-page__main-wizard--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
   --pf-c-page__main-wizard--BorderTopColor: var(--pf-global--BorderColor--100);
   --pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
   display: grid;
   height: 100%;
   grid-template-columns: 1fr;
@@ -740,6 +741,9 @@
 .pf-c-page__main-wizard:first-child {
   --pf-c-page__main-wizard--BorderTopWidth: 0;
 }
+.pf-c-page__main-wizard.pf-m-light-200 {
+  --pf-c-page__main-wizard--BackgroundColor: var(--pf-c-page__main-wizard--m-light-200--BackgroundColor);
+}
 
 .pf-c-page__main-wizard .pf-c-page__main-body {
   min-height: 0;

package/components/Page/page.scss

@@ -185,6 +185,7 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
   --pf-c-page__main-wizard--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
   --pf-c-page__main-wizard--BorderTopColor: var(--pf-global--BorderColor--100);
   --pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
 
   // Base
   display: grid;
@@ -655,6 +656,10 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
   &:first-child {
     --pf-c-page__main-wizard--BorderTopWidth: 0;
   }
+
+  &.pf-m-light-200 {
+    --pf-c-page__main-wizard--BackgroundColor: var(--pf-c-page__main-wizard--m-light-200--BackgroundColor);
+  }
 }
 
 .pf-c-page__main-wizard .pf-c-page__main-body {

package/components/Wizard/wizard.css

@@ -206,7 +206,7 @@
   flex: 1 1 var(--pf-c-modal-box--c-wizard--FlexBasis);
   min-height: 0;
 }
-.pf-c-wizard > *:not(.pf-c-wizard__outer-wrap) {
+.pf-c-wizard > :not(.pf-c-wizard__outer-wrap):not(.pf-c-drawer) {
   flex-shrink: 0;
 }
 .pf-c-wizard.pf-m-finished {

package/components/Wizard/wizard.scss

@@ -210,7 +210,7 @@
     min-height: 0;
   }
 
-  > *:not(.pf-c-wizard__outer-wrap) {
+  > :not(.pf-c-wizard__outer-wrap):not(.pf-c-drawer) {
     flex-shrink: 0;
   }
 

package/docs/components/Divider/examples/Divider.css

@@ -1,7 +1,13 @@
-#ws-core-c-divider-vertical .ws-preview-html,
-#ws-core-c-divider-vertical-inset-medium .ws-preview-html,
-#ws-core-c-divider-vertical-md-inset-no-inset-on-md-lg-inset-on-lg-sm-inset-on-xl .ws-preview-html {
-  height: 3rem;
-  display: flex;
+[id*="ws-core-c-divider-vertical"],
+[id*="ws-core-c-divider-horizontal"] .ws-preview-html {
   align-items: center;
 }
+
+[id*="ws-core-c-divider-vertical"],
+#ws-core-c-divider-horizontal-on-lg {
+  height: 4rem;
+}
+
+[id*="ws-core-c-divider"] .ws-preview-html {
+  height: 100%;
+}

package/docs/components/Divider/examples/Divider.md

@@ -72,6 +72,20 @@ cssPrefix: pf-c-divider
 
 ```
 
+### Vertical on lg
+
+```html
+<div class="pf-c-divider pf-m-horizontal pf-m-vertical-on-lg" role="separator"></div>
+
+```
+
+### Horizontal on lg
+
+```html
+<div class="pf-c-divider pf-m-horizontal-on-lg pf-m-vertical" role="separator"></div>
+
+```
+
 ## Documentation
 
 ### Overview

package/docs/components/LogViewer/examples/LogViewer.md

@@ -49,7 +49,7 @@ cssPrefix: pf-c-log-viewer
               <ul
                 class="pf-c-select__menu"
                 role="listbox"
-                aria-labelledby="log-viewer-basic-example-select-menu-menu"
+                aria-labelledby="log-viewer-basic-example-select-menu-label"
                 hidden
               >
                 <li role="presentation">
@@ -598,7 +598,7 @@ cssPrefix: pf-c-log-viewer
               <ul
                 class="pf-c-select__menu"
                 role="listbox"
-                aria-labelledby="log-viewer-line-number-example-select-menu-menu"
+                aria-labelledby="log-viewer-line-number-example-select-menu-label"
                 hidden
               >
                 <li role="presentation">
@@ -1147,7 +1147,7 @@ cssPrefix: pf-c-log-viewer
               <ul
                 class="pf-c-select__menu"
                 role="listbox"
-                aria-labelledby="log-viewer-text-wrap-example-select-menu-menu"
+                aria-labelledby="log-viewer-text-wrap-example-select-menu-label"
                 hidden
               >
                 <li role="presentation">
@@ -1696,7 +1696,7 @@ cssPrefix: pf-c-log-viewer
               <ul
                 class="pf-c-select__menu"
                 role="listbox"
-                aria-labelledby="log-viewer-text-nowrap-example-select-menu-menu"
+                aria-labelledby="log-viewer-text-nowrap-example-select-menu-label"
                 hidden
               >
                 <li role="presentation">
@@ -2245,7 +2245,7 @@ cssPrefix: pf-c-log-viewer
               <ul
                 class="pf-c-select__menu"
                 role="listbox"
-                aria-labelledby="log-viewer-search-results-example-select-menu-menu"
+                aria-labelledby="log-viewer-search-results-example-select-menu-label"
                 hidden
               >
                 <li role="presentation">
@@ -2874,7 +2874,7 @@ cssPrefix: pf-c-log-viewer
               <ul
                 class="pf-c-select__menu"
                 role="listbox"
-                aria-labelledby="log-viewer-max-height-example-select-menu-menu"
+                aria-labelledby="log-viewer-max-height-example-select-menu-label"
                 hidden
               >
                 <li role="presentation">
@@ -3423,7 +3423,7 @@ cssPrefix: pf-c-log-viewer
               <ul
                 class="pf-c-select__menu"
                 role="listbox"
-                aria-labelledby="log-viewer-dropdowns-expanded-example-select-menu-menu"
+                aria-labelledby="log-viewer-dropdowns-expanded-example-select-menu-label"
                 hidden
               >
                 <li role="presentation">
@@ -3970,7 +3970,7 @@ cssPrefix: pf-c-log-viewer
               <ul
                 class="pf-c-select__menu"
                 role="listbox"
-                aria-labelledby="log-viewer-popover-expanded-example-select-menu-menu"
+                aria-labelledby="log-viewer-popover-expanded-example-select-menu-label"
                 hidden
               >
                 <li role="presentation">
@@ -4541,7 +4541,7 @@ cssPrefix: pf-c-log-viewer
               <ul
                 class="pf-c-select__menu"
                 role="listbox"
-                aria-labelledby="log-viewer-line-number-example-select-menu-menu"
+                aria-labelledby="log-viewer-line-number-example-select-menu-label"
                 hidden
               >
                 <li role="presentation">