@patternfly/patternfly 4.176.0 → 4.177.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/Label/label.css

@@ -95,7 +95,9 @@
   --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
   --pf-c-label__content--Color: var(--pf-global--Color--100);
+  --pf-c-label__content--MaxWidth: 100%;
   --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
+  --pf-c-label--m-editable__content--MaxWidth: 16ch;
   --pf-c-label__text--MaxWidth: 16ch;
   --pf-c-label__icon--Color: var(--pf-global--Color--100);
   --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
@@ -108,8 +110,6 @@
   --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-label__editable-text--MaxWidth: 16ch;
-  --pf-c-label__editable-text--BorderWidth: 0;
   --pf-c-label--m-editable--Cursor: pointer;
   --pf-c-label--m-editable--TextDecoration: underline;
   --pf-c-label--m-editable--TextDecorationStyle: dashed;
@@ -118,6 +118,12 @@
   --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
   --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
   --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
   --pf-c-label--m-editable--m-editable-active--Cursor: auto;
   --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
   --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
@@ -151,6 +157,9 @@
   --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
   --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
   --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
+  --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
+  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
+  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
 }
 .pf-c-label.pf-m-green {
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
@@ -163,6 +172,9 @@
   --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
   --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
   --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
+  --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
+  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
+  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
 }
 .pf-c-label.pf-m-orange {
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
@@ -175,6 +187,9 @@
   --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
   --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
   --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
+  --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
+  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
+  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
 }
 .pf-c-label.pf-m-red {
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
@@ -187,6 +202,9 @@
   --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
   --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
   --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
+  --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
+  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
+  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
 }
 .pf-c-label.pf-m-purple {
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
@@ -199,6 +217,9 @@
   --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
   --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
   --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
+  --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
+  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
+  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
 }
 .pf-c-label.pf-m-cyan {
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
@@ -211,12 +232,18 @@
   --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
   --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
   --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
+  --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
+  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
+  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
 }
 .pf-c-label.pf-m-outline {
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
+  --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
+  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
+  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
 }
 .pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
 .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
@@ -236,6 +263,15 @@
   text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
   text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
   text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
+  --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
+  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
+  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
+  --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
+  --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
+  --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
+  --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
+  --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
+  --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
 }
 .pf-c-label.pf-m-editable:hover {
   --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
@@ -247,19 +283,10 @@
   --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
   --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
-  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
-  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
 }
 .pf-c-label.pf-m-editable-active .pf-c-button {
   visibility: hidden;
 }
-.pf-c-label .pf-c-label__editable-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: var(--pf-c-label__editable-text--MaxWidth);
-  border-width: var(--pf-c-label__editable-text--BorderWidth);
-}
 .pf-c-label .pf-c-button {
   --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
   --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
@@ -296,8 +323,12 @@
 }
 
 .pf-c-label__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: var(--pf-c-label__content--MaxWidth);
   color: var(--pf-c-label__content--Color);
-  border: 0;
+  border-width: 0;
 }
 .pf-c-label__content::before {
   position: absolute;