@patternfly/patternfly 4.176.2 → 4.178.0

package/UPGRADE-GUIDE.md

@@ -3,6 +3,9 @@ id: Upgrade guide
 section: developer-resources
 ---
 
+**Note:** this guide details upgrading from PatternFly v3 to v4, and references [major release 2020.07](/developer-resources/release-notes/html/#2020.07-release-notes-2020-06-05) from 2020-06-05.
+<hr/>
+
 Hey, Flyers! We've been busy for the past 12 weeks working on significant changes to PatternFly's HTML and CSS. We made our components mobile-first and changed colors and the default font. This upgrade guide details **what** was broken and **how** to fix it. To learn **why** a change was made, check out the linked pull requests.
 
 ## Global

package/components/Avatar/avatar.css

@@ -4,6 +4,14 @@
   --pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg);
   --pf-c-avatar--Width: 2.25rem;
   --pf-c-avatar--Height: 2.25rem;
+  --pf-c-avatar--m-sm--Width: 1.5rem;
+  --pf-c-avatar--m-sm--Height: 1.5rem;
+  --pf-c-avatar--m-md--Width: 2.25rem;
+  --pf-c-avatar--m-md--Height: 2.25rem;
+  --pf-c-avatar--m-lg--Width: 4.5rem;
+  --pf-c-avatar--m-lg--Height: 4.5rem;
+  --pf-c-avatar--m-xl--Width: 8rem;
+  --pf-c-avatar--m-xl--Height: 8rem;
   --pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100);
   --pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700);
@@ -20,4 +28,220 @@
 .pf-c-avatar.pf-m-dark {
   --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
   --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-dark--BorderWidth);
+}
+.pf-c-avatar.pf-m-sm {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height);
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-xl, var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-2xl, var(--pf-c-avatar--m-sm--Width-on-xl, var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-xl, var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-2xl, var(--pf-c-avatar--m-sm--Height-on-xl, var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height))))));
+  }
+}
+.pf-c-avatar.pf-m-md {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height);
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-xl, var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-2xl, var(--pf-c-avatar--m-md--Width-on-xl, var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-xl, var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-2xl, var(--pf-c-avatar--m-md--Height-on-xl, var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height))))));
+  }
+}
+.pf-c-avatar.pf-m-lg {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height);
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-xl, var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-2xl, var(--pf-c-avatar--m-lg--Width-on-xl, var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-2xl, var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))))));
+  }
+}
+.pf-c-avatar.pf-m-xl {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-2xl, var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
+  }
 }

package/components/Avatar/avatar.scss

@@ -1,9 +1,20 @@
+$pf-c-avatar--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$sizes: "sm", "md", "lg", "xl";
+
 .pf-c-avatar {
   --pf-c-avatar--BorderColor: transparent;
   --pf-c-avatar--BorderWidth: 0;
   --pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg);
   --pf-c-avatar--Width: #{pf-size-prem(36px)};
   --pf-c-avatar--Height: #{pf-size-prem(36px)};
+  --pf-c-avatar--m-sm--Width: #{pf-size-prem(24px)};
+  --pf-c-avatar--m-sm--Height: #{pf-size-prem(24px)};
+  --pf-c-avatar--m-md--Width: #{pf-size-prem(36px)};
+  --pf-c-avatar--m-md--Height: #{pf-size-prem(36px)};
+  --pf-c-avatar--m-lg--Width: #{pf-size-prem(72px)};
+  --pf-c-avatar--m-lg--Height: #{pf-size-prem(72px)};
+  --pf-c-avatar--m-xl--Width: #{pf-size-prem(128px)};
+  --pf-c-avatar--m-xl--Height: #{pf-size-prem(128px)};
 
   // Light
   --pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100);
@@ -27,4 +38,11 @@
     --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
     --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-dark--BorderWidth);
   }
+
+  @each $size in $sizes {
+    &.pf-m-#{$size} {
+      @include pf-build-css-variable-stack("--pf-c-avatar--Width", "--pf-c-avatar--m-#{$size}--Width", $pf-c-avatar--breakpoint-map);
+      @include pf-build-css-variable-stack("--pf-c-avatar--Height", "--pf-c-avatar--m-#{$size}--Height", $pf-c-avatar--breakpoint-map);
+    }
+  }
 }

package/components/CodeEditor/code-editor.css

@@ -19,6 +19,8 @@
   --pf-c-code-editor__code--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-code-editor__code-pre--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-code-editor__code-pre--FontFamily: var(--pf-global--FontFamily--monospace);
+  --pf-c-code-editor__header-main--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-code-editor__header-main--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-code-editor__tab--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-code-editor__tab--Color: var(--pf-global--Color--200);
   --pf-c-code-editor__tab--PaddingTop: var(--pf-global--spacer--form-element);
@@ -67,6 +69,12 @@
   border-bottom-color: var(--pf-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
 }
 
+.pf-c-code-editor__header-main {
+  flex-grow: 1;
+  padding-right: var(--pf-c-code-editor__header-main--PaddingRight);
+  padding-left: var(--pf-c-code-editor__header-main--PaddingLeft);
+}
+
 .pf-c-code-editor__main {
   position: relative;
   background-color: var(--pf-c-code-editor__main--BackgroundColor);

package/components/CodeEditor/code-editor.scss

@@ -27,6 +27,10 @@
   --pf-c-code-editor__code-pre--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-code-editor__code-pre--FontFamily: var(--pf-global--FontFamily--monospace);
 
+  // content
+  --pf-c-code-editor__header-main--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-code-editor__header-main--PaddingLeft: var(--pf-global--spacer--sm);
+
   // tab
   --pf-c-code-editor__tab--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-code-editor__tab--Color: var(--pf-global--Color--200);
@@ -86,6 +90,12 @@
   }
 }
 
+.pf-c-code-editor__header-main {
+  flex-grow: 1;
+  padding-right: var(--pf-c-code-editor__header-main--PaddingRight);
+  padding-left: var(--pf-c-code-editor__header-main--PaddingLeft);
+}
+
 .pf-c-code-editor__main {
   position: relative;
   background-color: var(--pf-c-code-editor__main--BackgroundColor);
@@ -142,7 +152,7 @@
   display: flex;
   align-items: center;
   padding: var(--pf-c-code-editor__tab--PaddingTop) var(--pf-c-code-editor__tab--PaddingRight) var(--pf-c-code-editor__tab--PaddingBottom) var(--pf-c-code-editor__tab--PaddingLeft);
-  margin-left: auto;
+  margin-left: auto; // remove at breaking change
   color: var(--pf-c-code-editor__tab--Color);
   background-color: var(--pf-c-code-editor__tab--BackgroundColor);
   border-color: var(--pf-c-code-editor__tab--BorderColor);

package/components/Dropdown/dropdown.css

@@ -35,6 +35,7 @@
   --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-primary--disabled--Color: var(--pf-global--Color--100);
   --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
   --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
@@ -193,6 +194,7 @@
   border-color: var(--pf-c-dropdown__toggle--before--BorderTopColor) var(--pf-c-dropdown__toggle--before--BorderRightColor) var(--pf-c-dropdown__toggle--before--BorderBottomColor) var(--pf-c-dropdown__toggle--before--BorderLeftColor);
 }
 .pf-c-dropdown__toggle.pf-m-disabled, .pf-c-dropdown__toggle:disabled {
+  --pf-c-dropdown__toggle--m-primary--Color: var(--pf-c-dropdown__toggle--m-primary--disabled--Color);
   --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
   pointer-events: none;
 }
@@ -285,14 +287,14 @@
 .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
 }
-.pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
-  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
-  border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
-}
 .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
   border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
 }
+.pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
+  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
+  border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
+}
 .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
   border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
@@ -320,14 +322,13 @@
   --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
 }
 .pf-c-dropdown__toggle.pf-m-primary {
-  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
-}
-.pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled):not([disabled]) {
   --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
   --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
+  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
 }
-.pf-c-dropdown__toggle.pf-m-primary::before {
+.pf-c-dropdown__toggle.pf-m-primary::before,
+.pf-c-dropdown__toggle.pf-m-primary .pf-c-dropdown__toggle-button::before {
   border: 0;
 }
 .pf-c-dropdown__toggle.pf-m-primary:hover {
@@ -339,7 +340,7 @@
 .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
 }
-.pf-c-dropdown__toggle.pf-m-primary .pf-m-expanded > :not(.pf-m-disabled):not([disabled]) {
+.pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
 }
 .pf-c-dropdown__toggle.pf-m-secondary {

package/components/Dropdown/dropdown.scss

@@ -42,6 +42,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-primary--disabled--Color: var(--pf-global--Color--100);
 
   // Secondary
   --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
@@ -249,6 +250,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
 
   &.pf-m-disabled,
   &:disabled {
+    --pf-c-dropdown__toggle--m-primary--Color: var(--pf-c-dropdown__toggle--m-primary--disabled--Color);
     --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
 
     pointer-events: none;
@@ -380,22 +382,22 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
     }
   }
 
-  &:not(.pf-m-action):not(.pf-m-secondary):active,
-  &:not(.pf-m-action):not(.pf-m-secondary).pf-m-active,
-  &.pf-m-action .pf-c-dropdown__toggle-button:active {
+  &:not(.pf-m-action):not(.pf-m-secondary):focus,
+  &.pf-m-action .pf-c-dropdown__toggle-button:focus {
     &::before {
-      --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
+      --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
 
-      border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
+      border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
     }
   }
 
-  &:not(.pf-m-action):not(.pf-m-secondary):focus,
-  &.pf-m-action .pf-c-dropdown__toggle-button:focus {
+  &:not(.pf-m-action):not(.pf-m-secondary):active,
+  &:not(.pf-m-action):not(.pf-m-secondary).pf-m-active,
+  &.pf-m-action .pf-c-dropdown__toggle-button:active {
     &::before {
-      --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
+      --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
 
-      border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
+      border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
     }
   }
 
@@ -444,15 +446,14 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   }
 
   &.pf-m-primary {
-    &:not(.pf-m-disabled):not([disabled]) {
-      --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
-      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
-      --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
-    }
+    --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
+    --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
+    --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
 
     border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
 
-    &::before {
+    &::before,
+    .pf-c-dropdown__toggle-button::before {
       border: 0;
     }
 
@@ -469,7 +470,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
       --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
     }
 
-    .pf-m-expanded > :not(.pf-m-disabled):not([disabled]) {
+    .pf-m-expanded > & {
       --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
     }
   }

package/components/Nav/nav.css

@@ -868,6 +868,9 @@
 .pf-c-nav__section + .pf-c-nav__section {
   --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
 }
+.pf-c-nav__section.pf-m-no-title {
+  --pf-c-nav__section--MarginTop: 0;
+}
 
 .pf-c-nav__section-title {
   padding: var(--pf-c-nav__section-title--PaddingTop) var(--pf-c-nav__section-title--PaddingRight) var(--pf-c-nav__section-title--PaddingBottom) var(--pf-c-nav__section-title--PaddingLeft);

package/components/Nav/nav.scss

@@ -1077,6 +1077,10 @@
   & + & {
     --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
   }
+
+  &.pf-m-no-title {
+    --pf-c-nav__section--MarginTop: 0;
+  }
 }
 
 // Section title

package/components/Table/table.css

@@ -967,7 +967,8 @@
 .pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) > *:last-child {
   --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
 }
-.pf-c-table.pf-m-compact thead th {
+.pf-c-table.pf-m-compact thead th,
+.pf-c-table.pf-m-compact thead .pf-c-table__toggle {
   --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-compact-th--PaddingTop);
   --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-compact-th--PaddingBottom);
 }

package/components/Table/table.scss

@@ -85,8 +85,8 @@
   // ============================================================ //
 
   // Table cell - toggle
-  --pf-c-table__toggle--c-button--MarginTop: calc(#{pf-size-prem(6px)} * -1);
-  --pf-c-table__toggle--c-button--MarginBottom: calc(#{pf-size-prem(6px)} * -1);
+  --pf-c-table__toggle--c-button--MarginTop: calc(#{pf-size-prem(6px)} * -1); // use var(--pf-global--spacer--form-element) at breaking change
+  --pf-c-table__toggle--c-button--MarginBottom: calc(#{pf-size-prem(6px)} * -1); // use var(--pf-global--spacer--form-element) at breaking change
   --pf-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
   --pf-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
   --pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
@@ -1255,9 +1255,12 @@
   }
 
   // Thead only
-  thead th {
-    --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-compact-th--PaddingTop);
-    --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-compact-th--PaddingBottom);
+  thead {
+    th,
+    .pf-c-table__toggle {
+      --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-compact-th--PaddingTop);
+      --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-compact-th--PaddingBottom);
+    }
   }
 
   .pf-c-table__action {

package/docs/components/Avatar/examples/Avatar.md

@@ -39,6 +39,50 @@ cssPrefix: pf-c-avatar
 
 ```
 
+### Small
+
+```html
+<img
+  class="pf-c-avatar pf-m-sm"
+  src="/assets/images/img_avatar-light.svg"
+  alt="Avatar image small"
+/>
+
+```
+
+### Medium
+
+```html
+<img
+  class="pf-c-avatar pf-m-md"
+  src="/assets/images/img_avatar-light.svg"
+  alt="Avatar image medium"
+/>
+
+```
+
+### Large
+
+```html
+<img
+  class="pf-c-avatar pf-m-lg"
+  src="/assets/images/img_avatar-light.svg"
+  alt="Avatar image large"
+/>
+
+```
+
+### Extra large
+
+```html
+<img
+  class="pf-c-avatar pf-m-xl"
+  src="/assets/images/img_avatar-light.svg"
+  alt="Avatar image extra large"
+/>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -53,8 +97,12 @@ The avatar component provides a default SVG icon. If an image is used it should
 
 ### Usage
 
-| Class          | Applied to     | Outcome                                                |
-| -------------- | -------------- | ------------------------------------------------------ |
-| `.pf-c-avatar` | `<img>`        | Initiates an avatar image. **Required**                |
-| `.pf-m-light`  | `.pf-c-avatar` | Modifies an avatar for use against a light background. |
-| `.pf-m-dark`   | `.pf-c-avatar` | Modifies an avatar for use against a dark background.  |
+| Class                        | Applied to     | Outcome                                                                                                                                                                             |
+| ---------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-c-avatar`               | `<img>`        | Initiates an avatar image. **Required**                                                                                                                                             |
+| `.pf-m-light`                | `.pf-c-avatar` | Modifies an avatar for use against a light background.                                                                                                                              |
+| `.pf-m-dark`                 | `.pf-c-avatar` | Modifies an avatar for use against a dark background.                                                                                                                               |
+| `.pf-m-sm{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
+| `.pf-m-md{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** This is the default size. |
+| `.pf-m-lg{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
+| `.pf-m-xl{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                |

package/docs/components/Brand/examples/Brand.md

@@ -56,9 +56,9 @@ Simple brand component.
 
 ### Usage
 
-| Class                                              | Applied to         | Outcome                                 |
-| -------------------------------------------------- | ------------------ | --------------------------------------- |
-| `.pf-c-brand`                                      | `<img>, <picture>` | Initiates a brand image. **Required**   |
-| `.pf-m-picture`                                    | `.pf-c-brand`      | Modifies a brand image to a picture.    |
-| `--pf-c-brand--Width{-on-[breakpoint]}: {width}`   | `.pf-c-brand`      | Modifies the width value of a picture.  |
-| `--pf-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-c-brand`      | Modifies the height value of a picture. |
+| Class                                              | Applied to         | Outcome                                                                                                                                             |
+| -------------------------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-c-brand`                                      | `<img>, <picture>` | Initiates a brand image. **Required**                                                                                                               |
+| `.pf-m-picture`                                    | `.pf-c-brand`      | Modifies a brand image to a picture.                                                                                                                |
+| `--pf-c-brand--Width{-on-[breakpoint]}: {width}`   | `.pf-c-brand`      | Modifies the width value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  |
+| `--pf-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-c-brand`      | Modifies the height value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |