@patternfly/patternfly 4.168.0 → 4.171.1

package/RELEASE-NOTES.md

@@ -3,6 +3,46 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 2022.01 release notes (2022-01-25)
+Packages released:
+- [@patternfly/patternfly@v4.171.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.171.1)
+
+### Components
+- **Button:** Added progress support with plain variation ([#4594](https://github.com/patternfly/patternfly/pull/4594))
+- **Context selector, dropdown, menu toggle, options menu, select:** Added hover state for all plain variant icons ([#4627](https://github.com/patternfly/patternfly/pull/4627))
+- **Description list:**
+  - Removed unnecessary column fill examples ([#4593](https://github.com/patternfly/patternfly/pull/4593))
+  - Added icon variant ([#4603](https://github.com/patternfly/patternfly/pull/4603))
+- **Expandable section:** Added indented variation ([#4571](https://github.com/patternfly/patternfly/pull/4571))
+- **Label:** Adjusted style of editable label ([#4551](https://github.com/patternfly/patternfly/pull/4551))
+- **Log viewer:**
+  - Updated scroll, added footer ([#4587](https://github.com/patternfly/patternfly/pull/4587))
+  - Updated the way dark theme is applied, adjusted border ([#4597](https://github.com/patternfly/patternfly/pull/4597))
+- **Login page:** Aligned login box to top ([#4591](https://github.com/patternfly/patternfly/pull/4591))
+- **Masthead:**
+  - Added horizontal nav demo ([#4617](https://github.com/patternfly/patternfly/pull/4617))
+  - Added resize observer conditional ([#4625](https://github.com/patternfly/patternfly/pull/4625))
+- **Notification badge:** Changed example to dark ([#4580](https://github.com/patternfly/patternfly/pull/4580))
+- **Table:**
+  - Added striped rows ([#4569](https://github.com/patternfly/patternfly/pull/4569))
+  - Fixed sort/fit-content width ([#4589](https://github.com/patternfly/patternfly/pull/4589))
+  - Moved expand all toggle in demo ([#4595](https://github.com/patternfly/patternfly/pull/4595))
+  - Removed cols/colgroups ([#4600](https://github.com/patternfly/patternfly/pull/4600))
+- **Text input group:** Added autocomplete ghosting ([#4616](https://github.com/patternfly/patternfly/pull/4616))
+- **Truncate:**
+  - Resolved spacing issues ([#4599](https://github.com/patternfly/patternfly/pull/4599))
+  - Fixed font size var value ([#4560](https://github.com/patternfly/patternfly/pull/4560))
+
+### Other
+- **Docs:**
+  - Promoted beta components ([#4613](https://github.com/patternfly/patternfly/pull/4613))
+  - Removed outdated modifiers page ([#4619](https://github.com/patternfly/patternfly/pull/4619))
+- **Global:** Updated/removed unused/undefined vars ([#4620](https://github.com/patternfly/patternfly/pull/4620))
+- **Build:**
+  - Cleaned up stylelint rules/sass ([#4567](https://github.com/patternfly/patternfly/pull/4567))
+  - Made reloading on change to markdown files work again ([#4574](https://github.com/patternfly/patternfly/pull/4574))
+  - Updated the watcher to handle crashes ([#4583](https://github.com/patternfly/patternfly/pull/4583))
+
 
 ## 2021.16 release notes (2021-12-07)
 Packages released:
@@ -1168,7 +1208,7 @@ Packages released:
 - **Pagination:** Added compact variation ([#2275](https://github.com/patternfly/patternfly/pull/2275))
 - **Radio:** Updated the radio component example to single components ([#2231](https://github.com/patternfly/patternfly/pull/2231))
 - **Select:**
-  - Added typeahead form wrapper, udpated css ([#2255](https://github.com/patternfly/patternfly/pull/2255))
+  - Added typeahead form wrapper, updated css ([#2255](https://github.com/patternfly/patternfly/pull/2255))
   - Add top expanded example ([#2026](https://github.com/patternfly/patternfly/pull/2026))
 - **Table:**
   - Fixed a11y issues in org documentation/html/table ([#2282](https://github.com/patternfly/patternfly/pull/2282))

package/components/ContextSelector/context-selector.css

@@ -38,6 +38,8 @@
   --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
+  --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
+  --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-context-selector__menu--Top: calc(100% + var(--pf-global--spacer--xs));
   --pf-c-context-selector__menu--ZIndex: var(--pf-global--ZIndex--sm);
   --pf-c-context-selector__menu--PaddingTop: var(--pf-global--spacer--sm);
@@ -200,6 +202,7 @@
 .pf-c-context-selector__toggle.pf-m-plain {
   --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector__toggle--m-plain--PaddingRight);
   --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector__toggle--m-plain--PaddingLeft);
+  --pf-c-context-selector__toggle-icon--Color: var(--pf-c-context-selector--m-plain__toggle-icon--Color);
 }
 .pf-c-context-selector__toggle.pf-m-plain.pf-m-text {
   --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector__toggle--m-plain--m-text--PaddingRight);
@@ -210,11 +213,12 @@
   width: auto;
   color: var(--pf-c-context-selector__toggle--m-plain--Color);
 }
-.pf-c-context-selector__toggle.pf-m-plain:not(.pf-m-text).pf-m-disabled, .pf-c-context-selector__toggle.pf-m-plain:not(.pf-m-text):disabled {
+.pf-c-context-selector__toggle.pf-m-plain.pf-m-disabled, .pf-c-context-selector__toggle.pf-m-plain:disabled {
   --pf-c-context-selector__toggle--m-plain--Color: var(--pf-c-context-selector__toggle--m-plain--disabled--Color);
 }
-.pf-c-context-selector__toggle.pf-m-plain:not(.pf-m-text):hover, .pf-c-context-selector__toggle.pf-m-plain:not(.pf-m-text):active, .pf-c-context-selector__toggle.pf-m-plain:not(.pf-m-text).pf-m-active, .pf-c-context-selector__toggle.pf-m-plain:not(.pf-m-text):focus, .pf-c-context-selector.pf-m-expanded > .pf-c-context-selector__toggle.pf-m-plain:not(.pf-m-text) {
+.pf-c-context-selector__toggle.pf-m-plain:hover, .pf-c-context-selector__toggle.pf-m-plain:active, .pf-c-context-selector__toggle.pf-m-plain.pf-m-active, .pf-c-context-selector__toggle.pf-m-plain:focus, .pf-c-context-selector.pf-m-expanded > .pf-c-context-selector__toggle.pf-m-plain {
   --pf-c-context-selector__toggle--m-plain--Color: var(--pf-c-context-selector__toggle--m-plain--hover--Color);
+  --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-c-context-selector--m-plain--hover__toggle-icon--Color);
 }
 .pf-c-context-selector__toggle.pf-m-plain::before {
   border: 0;
@@ -231,6 +235,7 @@
 .pf-c-context-selector__toggle-icon {
   margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight);
   margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
+  color: var(--pf-c-context-selector__toggle-icon--Color, inherit);
 }
 
 .pf-c-context-selector__menu {

package/components/ContextSelector/context-selector.scss

@@ -35,6 +35,8 @@
   // Toggle icon arrow
   --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
+  --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
+  --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
 
   // Menu
   --pf-c-context-selector__menu--Top: calc(100% + var(--pf-global--spacer--xs));
@@ -240,6 +242,7 @@
   &.pf-m-plain {
     --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector__toggle--m-plain--PaddingRight);
     --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector__toggle--m-plain--PaddingLeft);
+    --pf-c-context-selector__toggle-icon--Color: var(--pf-c-context-selector--m-plain__toggle-icon--Color);
 
     &.pf-m-text {
       --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector__toggle--m-plain--m-text--PaddingRight);
@@ -250,19 +253,20 @@
       display: inline-block;
       width: auto;
       color: var(--pf-c-context-selector__toggle--m-plain--Color);
+    }
 
-      &.pf-m-disabled,
-      &:disabled {
-        --pf-c-context-selector__toggle--m-plain--Color: var(--pf-c-context-selector__toggle--m-plain--disabled--Color);
-      }
+    &.pf-m-disabled,
+    &:disabled {
+      --pf-c-context-selector__toggle--m-plain--Color: var(--pf-c-context-selector__toggle--m-plain--disabled--Color);
+    }
 
-      &:hover,
-      &:active,
-      &.pf-m-active,
-      &:focus,
-      .pf-c-context-selector.pf-m-expanded > & {
-        --pf-c-context-selector__toggle--m-plain--Color: var(--pf-c-context-selector__toggle--m-plain--hover--Color);
-      }
+    &:hover,
+    &:active,
+    &.pf-m-active,
+    &:focus,
+    .pf-c-context-selector.pf-m-expanded > & {
+      --pf-c-context-selector__toggle--m-plain--Color: var(--pf-c-context-selector__toggle--m-plain--hover--Color);
+      --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-c-context-selector--m-plain--hover__toggle-icon--Color);
     }
 
     &::before {
@@ -282,6 +286,7 @@
 .pf-c-context-selector__toggle-icon {
   margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight);
   margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
+  color: var(--pf-c-context-selector__toggle-icon--Color, inherit);
 }
 
 .pf-c-context-selector__menu {

package/components/Dropdown/dropdown.css

@@ -73,6 +73,8 @@
   --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
   --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
+  --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
+  --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-dropdown__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
   --pf-c-dropdown__menu--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-dropdown__menu--PaddingTop: var(--pf-global--spacer--sm);
@@ -295,6 +297,9 @@
   --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);
 }
+.pf-c-dropdown__toggle.pf-m-plain {
+  --pf-c-dropdown__toggle-icon--Color: var(--pf-c-dropdown--m-plain__toggle-icon--Color);
+}
 .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
   --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
@@ -309,6 +314,7 @@
 }
 .pf-c-dropdown__toggle.pf-m-plain:hover, .pf-c-dropdown__toggle.pf-m-plain:focus, .pf-c-dropdown__toggle.pf-m-plain:active, .pf-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-plain {
   --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
+  --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-c-dropdown--m-plain--hover__toggle-icon--Color);
 }
 .pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-plain:disabled {
   --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
@@ -370,10 +376,15 @@
   white-space: nowrap;
 }
 
+.pf-c-dropdown__toggle-text {
+  flex: 0 1 auto;
+}
+
 .pf-c-dropdown__toggle-icon {
   margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
   margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
   line-height: var(--pf-c-dropdown__toggle-icon--LineHeight);
+  color: var(--pf-c-dropdown__toggle-icon--Color, inherit);
 }
 .pf-c-dropdown.pf-m-top.pf-m-expanded .pf-c-dropdown__toggle-icon {
   transform: rotate(var(--pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate));
@@ -381,6 +392,7 @@
 
 .pf-c-dropdown__toggle-image {
   display: inline-flex;
+  flex-shrink: 0;
   margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
   margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
   margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);

package/components/Dropdown/dropdown.scss

@@ -92,6 +92,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
   --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
+  --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
+  --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
 
   // Menu
   --pf-c-dropdown__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
@@ -407,6 +409,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   }
 
   &.pf-m-plain {
+    --pf-c-dropdown__toggle-icon--Color: var(--pf-c-dropdown--m-plain__toggle-icon--Color);
+
     &:not(.pf-m-text) {
       --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
       --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
@@ -430,6 +434,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
     &.pf-m-active,
     .pf-m-expanded > & {
       --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
+      --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-c-dropdown--m-plain--hover__toggle-icon--Color);
     }
 
     &.pf-m-disabled,
@@ -511,10 +516,15 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   }
 }
 
+.pf-c-dropdown__toggle-text {
+  flex: 0 1 auto;
+}
+
 .pf-c-dropdown__toggle-icon {
   margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
   margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
   line-height: var(--pf-c-dropdown__toggle-icon--LineHeight);
+  color: var(--pf-c-dropdown__toggle-icon--Color, inherit);
 
   // stylelint-disable-next-line
   .pf-c-dropdown.pf-m-top.pf-m-expanded & {
@@ -525,6 +535,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
 // Toggle image
 .pf-c-dropdown__toggle-image {
   display: inline-flex;
+  flex-shrink: 0;
   margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
   margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
   margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);

package/components/Masthead/masthead.css

@@ -148,13 +148,8 @@
   padding-left: var(--pf-c-masthead--PaddingLeft);
   background-color: var(--pf-c-masthead--BackgroundColor);
 }
-@media screen and (min-width: 1200px) {
-  .pf-c-masthead {
-    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
-  }
-}
 @media screen and (min-width: 768px) {
-  .pf-c-masthead {
+  .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
     --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
     --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
     --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -174,6 +169,14 @@
     --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
   }
 }
+@media screen and (min-width: 1200px) {
+  .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
+    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
+  }
+}
+.pf-c-page:where(.pf-m-breakpoint-xl) .pf-c-masthead {
+  --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
+}
 .pf-c-masthead.pf-m-light {
   color: var(--pf-global--Color--100);
   --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
@@ -230,6 +233,9 @@
   --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor);
   --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
 }
+.pf-c-masthead .pf-c-nav {
+  align-self: stretch;
+}
 
 .pf-c-masthead__main {
   position: relative;

package/components/Masthead/masthead.scss

@@ -150,16 +150,23 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
 
-  @media screen and (min-width: $pf-global--breakpoint--xl) {
-    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
-  }
 
   // Set layout to stack by default
   @include pf-c-masthead--m-display-stack;
 
   // Set layout to inline at medium breakpoint
-  @media screen and (min-width: $pf-global--breakpoint--md) {
-    @include pf-c-masthead--m-display-inline;
+  .pf-c-page:where(:not(.pf-m-resize-observer)) & {
+    @media screen and (min-width: $pf-global--breakpoint--md) {
+      @include pf-c-masthead--m-display-inline;
+    }
+
+    @media screen and (min-width: $pf-global--breakpoint--xl) {
+      --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
+    }
+  }
+
+  .pf-c-page:where(.pf-m-breakpoint-xl) & {
+    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
   }
 
   @include pf-t-dark; // force the container to follow the dark theme
@@ -242,6 +249,10 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
       --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
     }
   }
+
+  .pf-c-nav {
+    align-self: stretch;
+  }
 }
 
 // Main

package/components/Menu/menu.css

@@ -222,6 +222,7 @@
   --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
   --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
   --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
+  --pf-c-menu--m-nav--c-menu--m-top--bottom-offset: 0;
   --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
   --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
   --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));

package/components/Menu/menu.scss

@@ -360,6 +360,7 @@
 
   // Nested menus
   --pf-c-menu--m-nav--c-menu--left-offset: #{pf-size-prem(4px)};
+  --pf-c-menu--m-nav--c-menu--m-top--bottom-offset: 0;
   --pf-c-menu--m-nav--c-menu--m-left--right-offset: #{pf-size-prem(4px)};
   --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
   --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));

package/components/MenuToggle/menu-toggle.css

@@ -68,6 +68,11 @@
   --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
+  --pf-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
+  --pf-c-menu-toggle--m-plain--active__toggle-icon--Color: var(--pf-global--Color--100);
+  --pf-c-menu-toggle--m-plain--focus__toggle-icon--Color: var(--pf-global--Color--100);
+  --pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-menu-toggle--m-full-height--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-global--spacer--lg);
   --pf-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth: 0;
@@ -147,6 +152,9 @@
   --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
   --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
 }
+.pf-c-menu-toggle.pf-m-plain {
+  --pf-c-menu-toggle__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain__toggle-icon--Color);
+}
 .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
   --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
@@ -163,22 +171,26 @@
   --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--hover--BackgroundColor);
   --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--hover--after--BorderBottomWidth);
   --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--hover--after--BorderBottomColor);
+  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
 }
 .pf-c-menu-toggle:focus {
   --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
   --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
   --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
+  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color);
 }
 .pf-c-menu-toggle:active {
   --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--active--BackgroundColor);
   --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--active--after--BorderBottomWidth);
   --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--active--after--BorderBottomColor);
+  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--active__toggle-icon--Color);
 }
 .pf-c-menu-toggle.pf-m-expanded {
   --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-expanded--Color);
   --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--m-expanded--BackgroundColor);
   --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth);
   --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomColor);
+  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color);
 }
 .pf-c-menu-toggle:disabled {
   --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--disabled--Color);
@@ -223,4 +235,5 @@
 
 .pf-c-menu-toggle__toggle-icon {
   margin-right: var(--pf-c-menu-toggle__toggle-icon--MarginRight);
+  color: var(--pf-c-menu-toggle__toggle-icon--Color, inherit);
 }

package/components/MenuToggle/menu-toggle.scss

@@ -98,6 +98,11 @@
 
   // Toggle icon
   --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
+  --pf-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
+  --pf-c-menu-toggle--m-plain--active__toggle-icon--Color: var(--pf-global--Color--100);
+  --pf-c-menu-toggle--m-plain--focus__toggle-icon--Color: var(--pf-global--Color--100);
+  --pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
 
   // Full height
   --pf-c-menu-toggle--m-full-height--PaddingRight: var(--pf-global--spacer--lg);
@@ -197,36 +202,43 @@
     }
   }
 
-  &.pf-m-plain:not(.pf-m-text) {
-    --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
-    --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
-    --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
-    --pf-c-menu-toggle--active--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
-    --pf-c-menu-toggle--disabled--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
-    --pf-c-menu-toggle--PaddingRight: var(--pf-c-menu-toggle--m-plain--PaddingRight);
-    --pf-c-menu-toggle--PaddingLeft: var(--pf-c-menu-toggle--m-plain--PaddingLeft);
-    --pf-c-menu-toggle--disabled--BackgroundColor: transparent;
-    --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
-
-    display: inline-block;
+  &.pf-m-plain {
+    --pf-c-menu-toggle__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain__toggle-icon--Color);
+
+    &:not(.pf-m-text) {
+      --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
+      --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
+      --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
+      --pf-c-menu-toggle--active--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
+      --pf-c-menu-toggle--disabled--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
+      --pf-c-menu-toggle--PaddingRight: var(--pf-c-menu-toggle--m-plain--PaddingRight);
+      --pf-c-menu-toggle--PaddingLeft: var(--pf-c-menu-toggle--m-plain--PaddingLeft);
+      --pf-c-menu-toggle--disabled--BackgroundColor: transparent;
+      --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
+
+      display: inline-block;
+    }
   }
 
   &:hover {
     --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--hover--BackgroundColor);
     --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--hover--after--BorderBottomWidth);
     --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--hover--after--BorderBottomColor);
+    --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
   }
 
   &:focus {
     --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
     --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
     --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
+    --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color);
   }
 
   &:active {
     --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--active--BackgroundColor);
     --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--active--after--BorderBottomWidth);
     --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--active--after--BorderBottomColor);
+    --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--active__toggle-icon--Color);
   }
 
   &.pf-m-expanded {
@@ -234,6 +246,7 @@
     --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--m-expanded--BackgroundColor);
     --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth);
     --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomColor);
+    --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color);
   }
 
   &:disabled {
@@ -288,4 +301,5 @@
 
 .pf-c-menu-toggle__toggle-icon {
   margin-right: var(--pf-c-menu-toggle__toggle-icon--MarginRight);
+  color: var(--pf-c-menu-toggle__toggle-icon--Color, inherit);
 }

package/components/Nav/nav.css

@@ -348,7 +348,7 @@
   --pf-c-menu__list--PaddingTop: 0;
   --pf-c-menu__list--PaddingBottom: 0;
   --pf-c-menu__item--FontSize: var(--pf-c-nav--c-menu__item--FontSize);
-  --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color);
+  --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color, inherit);
   --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu--m-flyout__item--PaddingTop);
   --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu--m-flyout__item--PaddingRight);
   --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu--m-flyout__item--PaddingBottom);
@@ -532,9 +532,9 @@
   --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-horizontal-subnav__link--PaddingRight);
   --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-horizontal-subnav__link--PaddingBottom);
   --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-horizontal-subnav__link--PaddingLeft);
+  --pf-c-nav__link--Color: var(--pf-c-nav--m-horizontal-subnav__link--Color);
   --pf-c-nav__link--Right: var(--pf-c-nav--m-horizontal-subnav__link--Right);
   --pf-c-nav__link--Left: var(--pf-c-nav--m-horizontal-subnav__link--Left);
-  --pf-c-nav__link--Color: var(--pf-c-nav--m-horizontal-subnav__link--Color);
   --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-horizontal-subnav__link--hover--Color);
   --pf-c-nav__link--active--Color: var(--pf-c-nav--m-horizontal-subnav__link--active--Color);
   --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-horizontal-subnav__link--focus--Color);

package/components/Nav/nav.scss

@@ -418,7 +418,7 @@
       --pf-c-menu__list--PaddingTop: 0;
       --pf-c-menu__list--PaddingBottom: 0;
       --pf-c-menu__item--FontSize: var(--pf-c-nav--c-menu__item--FontSize);
-      --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color);
+      --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color, inherit);
       --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu--m-flyout__item--PaddingTop);
       --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu--m-flyout__item--PaddingRight);
       --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu--m-flyout__item--PaddingBottom);
@@ -578,8 +578,8 @@
     --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-horizontal__link--PaddingRight);
     --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-horizontal__link--PaddingBottom);
     --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-horizontal__link--PaddingLeft);
-    --pf-c-nav__link--Right: var(--pf-c-nav--m-horizontal__link--Right);
-    --pf-c-nav__link--Left: var(--pf-c-nav--m-horizontal__link--Left);
+    --pf-c-nav__link--Right: var(--pf-c-nav--m-horizontal__link--Right); // remove at breaking change
+    --pf-c-nav__link--Left: var(--pf-c-nav--m-horizontal__link--Left); // remove at breaking change
     --pf-c-nav__link--Color: var(--pf-c-nav--m-horizontal__link--Color);
     --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-horizontal__link--hover--Color);
     --pf-c-nav__link--active--Color: var(--pf-c-nav--m-horizontal__link--active--Color);
@@ -645,9 +645,9 @@
     --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-horizontal-subnav__link--PaddingRight);
     --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-horizontal-subnav__link--PaddingBottom);
     --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-horizontal-subnav__link--PaddingLeft);
+    --pf-c-nav__link--Color: var(--pf-c-nav--m-horizontal-subnav__link--Color);
     --pf-c-nav__link--Right: var(--pf-c-nav--m-horizontal-subnav__link--Right);
     --pf-c-nav__link--Left: var(--pf-c-nav--m-horizontal-subnav__link--Left);
-    --pf-c-nav__link--Color: var(--pf-c-nav--m-horizontal-subnav__link--Color);
     --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-horizontal-subnav__link--hover--Color);
     --pf-c-nav__link--active--Color: var(--pf-c-nav--m-horizontal-subnav__link--active--Color);
     --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-horizontal-subnav__link--focus--Color);

package/components/OptionsMenu/options-menu.css

@@ -28,6 +28,8 @@
   --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
   --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
+  --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
+  --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-options-menu__toggle-button--BackgroundColor: transparent;
   --pf-c-options-menu__toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-options-menu__toggle-button--PaddingRight: var(--pf-global--spacer--sm);
@@ -120,6 +122,9 @@
   --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
   border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
 }
+.pf-c-options-menu__toggle.pf-m-plain {
+  --pf-c-options-menu__toggle-icon--Color: var(--pf-c-options-menu--m-plain__toggle-icon--Color);
+}
 .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
   --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
@@ -129,10 +134,11 @@
 .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
   line-height: var(--pf-c-options-menu__toggle--LineHeight);
 }
-.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):hover, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
+.pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
   --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
+  --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);
 }
-.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):disabled {
+.pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
   --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
 }
 .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {
@@ -161,6 +167,11 @@
   white-space: nowrap;
 }
 
+.pf-c-options-menu__toggle-icon,
+.pf-c-options-menu__toggle-button-icon {
+  color: var(--pf-c-options-menu__toggle-icon--Color, inherit);
+}
+
 .pf-c-options-menu__toggle-icon {
   margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
   margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);

package/components/OptionsMenu/options-menu.scss

@@ -31,6 +31,8 @@
   --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
   --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
+  --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
+  --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
 
   // Text toggle button
   --pf-c-options-menu__toggle-button--BackgroundColor: transparent;
@@ -153,15 +155,19 @@
     }
   }
 
-  &.pf-m-plain:not(.pf-m-text) {
-    --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
-    --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
+  &.pf-m-plain {
+    --pf-c-options-menu__toggle-icon--Color: var(--pf-c-options-menu--m-plain__toggle-icon--Color);
 
-    display: inline-block;
-    color: var(--pf-c-options-menu__toggle--m-plain--Color);
+    &:not(.pf-m-text) {
+      --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
+      --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
 
-    .pf-c-options-menu__toggle-button-icon {
-      line-height: var(--pf-c-options-menu__toggle--LineHeight);
+      display: inline-block;
+      color: var(--pf-c-options-menu__toggle--m-plain--Color);
+
+      .pf-c-options-menu__toggle-button-icon {
+        line-height: var(--pf-c-options-menu__toggle--LineHeight);
+      }
     }
 
     &:hover,
@@ -170,6 +176,7 @@
     &:focus,
     .pf-c-options-menu.pf-m-expanded > & {
       --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
+      --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);
     }
 
     &.pf-m-disabled,
@@ -207,6 +214,11 @@
   @include pf-text-overflow;
 }
 
+.pf-c-options-menu__toggle-icon,
+.pf-c-options-menu__toggle-button-icon {
+  color: var(--pf-c-options-menu__toggle-icon--Color, inherit);
+}
+
 .pf-c-options-menu__toggle-icon {
   margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
   margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);