@patternfly/patternfly 4.169.0 → 4.172.0

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);
@@ -378,6 +384,7 @@
   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));

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,
@@ -519,6 +524,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   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 & {

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);

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

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/NumberInput/number-input.css

@@ -1,7 +1,15 @@
+.pf-c-number-input .pf-c-form-control {
+  appearance: textfield;
+}
+.pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
 .pf-c-number-input {
   --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2);
+  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
   --pf-c-number-input--c-form-control--width-chars: 4;
   --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
   display: inline-flex;
@@ -11,11 +19,6 @@
   display: inline-flex;
   width: var(--pf-c-number-input--c-form-control--Width);
   text-align: right;
-  -moz-appearance: textfield;
-}
-.pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
 }
 
 .pf-c-input-group + .pf-c-number-input__unit,

package/components/NumberInput/number-input.scss

@@ -6,7 +6,7 @@
   --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
 
   // form control
-  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2); // element's padding
+  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2); // element's padding
   --pf-c-number-input--c-form-control--width-chars: 4;
   --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
 
@@ -18,15 +18,7 @@
     width: var(--pf-c-number-input--c-form-control--Width);
     text-align: right;
 
-    // disable default number increment arrows
-    // stylelint-disable
-    -moz-appearance: textfield;
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-    // stylelint-enable
+    @extend %pf-remove-num-arrows;
   }
 }
 

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);