@patternfly/patternfly 4.203.3 → 4.204.1

package/base/patternfly-variables.css

@@ -297,6 +297,7 @@
   --pf-global--danger-color--200: #fe6a5d;
   --pf-global--link--Color: #1fa7f8;
   --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--link--Color--visited: #a18fff;
   --pf-global--disabled-color--100: #57585a;
   --pf-global--disabled-color--200: #444548;
   --pf-global--disabled-color--300: #aaabac;

package/base/themes/dark/_variables.scss

@@ -40,6 +40,7 @@
   --pf-global--danger-color--200: #{$pf-global--danger-color--200};
   --pf-global--link--Color: #{$pf-global--link--Color};
   --pf-global--link--Color--hover: #{$pf-global--link--Color--hover};
+  --pf-global--link--Color--visited: #{$pf-global--link--Color--visited};
   --pf-global--disabled-color--100: #{$pf-global--disabled-color--100};
   --pf-global--disabled-color--200: #{$pf-global--disabled-color--200};
   --pf-global--disabled-color--300: #{$pf-global--disabled-color--300};

package/components/Drawer/drawer.css

@@ -303,7 +303,7 @@
 }
 
 .pf-c-drawer__body > .pf-c-page__main {
-  min-height: 100%;
+  height: 100%;
 }
 
 .pf-c-drawer__splitter {

package/components/Drawer/drawer.scss

@@ -373,9 +373,9 @@ $pf-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   }
 }
 
-// Page level drawer
+// Page level drawer - move to page component in breaking change
 .pf-c-drawer__body > .pf-c-page__main {
-  min-height: 100%;
+  height: 100%;
 }
 
 .pf-c-drawer__splitter {

package/components/Menu/menu.css

@@ -305,6 +305,7 @@
   background-color: transparent;
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
+  display: none;
   visibility: hidden;
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__item {

package/components/Menu/menu.scss

@@ -304,6 +304,7 @@
       }
 
       &:not(.pf-m-current-path) .pf-c-menu {
+        display: none;
         visibility: hidden;
       }
     }

package/components/NumberInput/number-input.css

@@ -10,11 +10,21 @@
   --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 + var(--pf-global--BorderWidth--sm) * 2);
+  --pf-c-number-input--c-form-control--width-icon: 0px;
+  --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
   --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);
+  --pf-c-number-input--c-form-control--Width:
+    calc(
+      calc(
+        var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
+      ) + var(--pf-c-number-input--c-form-control--width-icon)
+    );
   display: inline-flex;
   align-items: center;
 }
+.pf-c-number-input.pf-m-status {
+  --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
+}
 .pf-c-number-input .pf-c-form-control {
   display: inline-flex;
   width: var(--pf-c-number-input--c-form-control--Width);

package/components/NumberInput/number-input.scss

@@ -7,12 +7,26 @@
 
   // form control
   --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
+  // stylelint-disable length-zero-no-unit
+  --pf-c-number-input--c-form-control--width-icon: 0px;
+  // stylelint-enable length-zero-no-unit
+  --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl); // extra width to accommodate a status icon
   --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);
+  --pf-c-number-input--c-form-control--Width:
+    calc(
+      calc(
+        var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
+      ) + var(--pf-c-number-input--c-form-control--width-icon)
+    );
 
   display: inline-flex;
   align-items: center;
 
+  // This modifier can be removed in a breaking change and the extra space created can always be included.
+  &.pf-m-status {
+    --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
+  }
+
   .pf-c-form-control {
     display: inline-flex;
     width: var(--pf-c-number-input--c-form-control--Width);

package/docs/components/NumberInput/examples/NumberInput.md

@@ -191,6 +191,56 @@ cssPrefix: pf-c-number-input
 
 ```
 
+### With status
+
+```html
+<div class="pf-c-number-input pf-m-status">
+  <div class="pf-c-input-group">
+    <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
+      <span class="pf-c-number-input__icon">
+        <i class="fas fa-minus" aria-hidden="true"></i>
+      </span>
+    </button>
+    <input
+      class="pf-c-form-control"
+      type="number"
+      value="90"
+      name="number-input-status-name"
+      aria-label="Number input"
+    />
+    <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
+      <span class="pf-c-number-input__icon">
+        <i class="fas fa-plus" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+</div>
+<br />
+<br />
+<div class="pf-c-number-input pf-m-status">
+  <div class="pf-c-input-group">
+    <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
+      <span class="pf-c-number-input__icon">
+        <i class="fas fa-minus" aria-hidden="true"></i>
+      </span>
+    </button>
+    <input
+      class="pf-c-form-control pf-m-warning"
+      type="number"
+      value="90"
+      name="number-input-status-warning-name"
+      aria-label="Number input"
+    />
+    <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
+      <span class="pf-c-number-input__icon">
+        <i class="fas fa-plus" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+</div>
+
+```
+
 ### Varying sizes
 
 ```html
@@ -311,9 +361,10 @@ cssPrefix: pf-c-number-input
 
 ### Usage
 
-| Class                                              | Applied              | Outcome                                                  |
-| -------------------------------------------------- | -------------------- | -------------------------------------------------------- |
-| `.pf-c-number-input`                               | `<div>`              | Initiates the number input component.                    |
-| `.pf-c-number-input__icon`                         | `<span>`             | Initiates the number input icon.                         |
-| `.pf-c-number-input__unit`                         | `<span>`             | Initiates the number input unit.                         |
-| `--pf-c-number-input--c-form-control--width-chars` | `.pf-c-number-input` | Specifies the number of characters to show in the input. |
+| Class                                              | Applied to           | Outcome                                                                                                                                                                                                          |
+| -------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-c-number-input`                               | `<div>`              | Initiates the number input component.                                                                                                                                                                            |
+| `.pf-c-number-input__icon`                         | `<span>`             | Initiates the number input icon.                                                                                                                                                                                 |
+| `.pf-c-number-input__unit`                         | `<span>`             | Initiates the number input unit.                                                                                                                                                                                 |
+| `.pf-m-status`                                     | `.pf-c-number-input` | Modifies the width to create enough space for a status icon to be included in the form control portion of the number input. **Required** if a status icon may be shown, even if the icon is not currently shown. |
+| `--pf-c-number-input--c-form-control--width-chars` | `.pf-c-number-input` | Specifies the number of characters to show in the input.                                                                                                                                                         |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.203.3",
+  "version": "4.204.1",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -79,7 +79,7 @@
     "stylelint-scss": "^4.0.0",
     "stylelint-value-no-unknown-custom-properties": "^3.0.0",
     "surge": "^0.21.3",
-    "@patternfly/documentation-framework": "1.1.0",
+    "@patternfly/documentation-framework": "1.1.3",
     "unified": "^9.2.0",
     "webpack": "^4.43.0"
   },

package/patternfly-addons.css

@@ -8504,9 +8504,6 @@
 :where(.pf-theme-dark) .pf-u-color-light-200 {
   color: var(--pf-global--Color-200) !important;
 }
-:where(.pf-theme-dark) .pf-u-link-color-visited {
-  color: var(--pf-global--palette--purple-200) !important;
-}
 :where(.pf-theme-dark) .pf-u-default-color-300 {
   color: var(--pf-global--default-color--100) !important;
 }
@@ -8532,9 +8529,6 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-sm {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-link-color-visited-on-sm {
-    color: var(--pf-global--palette--purple-200) !important;
-  }
   :where(.pf-theme-dark) .pf-u-default-color-300-on-sm {
     color: var(--pf-global--default-color--100) !important;
   }
@@ -8561,9 +8555,6 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-md {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-link-color-visited-on-md {
-    color: var(--pf-global--palette--purple-200) !important;
-  }
   :where(.pf-theme-dark) .pf-u-default-color-300-on-md {
     color: var(--pf-global--default-color--100) !important;
   }
@@ -8590,9 +8581,6 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-lg {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-link-color-visited-on-lg {
-    color: var(--pf-global--palette--purple-200) !important;
-  }
   :where(.pf-theme-dark) .pf-u-default-color-300-on-lg {
     color: var(--pf-global--default-color--100) !important;
   }
@@ -8619,9 +8607,6 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-xl {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-link-color-visited-on-xl {
-    color: var(--pf-global--palette--purple-200) !important;
-  }
   :where(.pf-theme-dark) .pf-u-default-color-300-on-xl {
     color: var(--pf-global--default-color--100) !important;
   }
@@ -8648,9 +8633,6 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-2xl {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-link-color-visited-on-2xl {
-    color: var(--pf-global--palette--purple-200) !important;
-  }
   :where(.pf-theme-dark) .pf-u-default-color-300-on-2xl {
     color: var(--pf-global--default-color--100) !important;
   }

package/patternfly-base-no-reset.css

@@ -338,6 +338,7 @@
   --pf-global--danger-color--200: #fe6a5d;
   --pf-global--link--Color: #1fa7f8;
   --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--link--Color--visited: #a18fff;
   --pf-global--disabled-color--100: #57585a;
   --pf-global--disabled-color--200: #444548;
   --pf-global--disabled-color--300: #aaabac;

package/patternfly-base.css

@@ -338,6 +338,7 @@
   --pf-global--danger-color--200: #fe6a5d;
   --pf-global--link--Color: #1fa7f8;
   --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--link--Color--visited: #a18fff;
   --pf-global--disabled-color--100: #57585a;
   --pf-global--disabled-color--200: #444548;
   --pf-global--disabled-color--300: #aaabac;

package/patternfly-no-reset.css

@@ -447,6 +447,7 @@
   --pf-global--danger-color--200: #fe6a5d;
   --pf-global--link--Color: #1fa7f8;
   --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--link--Color--visited: #a18fff;
   --pf-global--disabled-color--100: #57585a;
   --pf-global--disabled-color--200: #444548;
   --pf-global--disabled-color--300: #aaabac;
@@ -13133,7 +13134,7 @@ label.pf-c-check, .pf-c-check__label,
 }
 
 .pf-c-drawer__body > .pf-c-page__main {
-  min-height: 100%;
+  height: 100%;
 }
 
 .pf-c-drawer__splitter {
@@ -18388,6 +18389,7 @@ ul.pf-c-list {
   background-color: transparent;
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
+  display: none;
   visibility: hidden;
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
@@ -31098,11 +31100,21 @@ svg.pf-c-spinner.pf-m-xl {
   --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 + var(--pf-global--BorderWidth--sm) * 2);
+  --pf-c-number-input--c-form-control--width-icon: 0px;
+  --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
   --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);
+  --pf-c-number-input--c-form-control--Width:
+    calc(
+      calc(
+        var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
+      ) + var(--pf-c-number-input--c-form-control--width-icon)
+    );
   display: inline-flex;
   align-items: center;
 }
+.pf-c-number-input.pf-m-status {
+  --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
+}
 .pf-c-number-input .pf-c-form-control {
   display: inline-flex;
   width: var(--pf-c-number-input--c-form-control--Width);

package/patternfly.css

@@ -447,6 +447,7 @@
   --pf-global--danger-color--200: #fe6a5d;
   --pf-global--link--Color: #1fa7f8;
   --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--link--Color--visited: #a18fff;
   --pf-global--disabled-color--100: #57585a;
   --pf-global--disabled-color--200: #444548;
   --pf-global--disabled-color--300: #aaabac;
@@ -13260,7 +13261,7 @@ label.pf-c-check, .pf-c-check__label,
 }
 
 .pf-c-drawer__body > .pf-c-page__main {
-  min-height: 100%;
+  height: 100%;
 }
 
 .pf-c-drawer__splitter {
@@ -18515,6 +18516,7 @@ ul.pf-c-list {
   background-color: transparent;
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
+  display: none;
   visibility: hidden;
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
@@ -31225,11 +31227,21 @@ svg.pf-c-spinner.pf-m-xl {
   --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 + var(--pf-global--BorderWidth--sm) * 2);
+  --pf-c-number-input--c-form-control--width-icon: 0px;
+  --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
   --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);
+  --pf-c-number-input--c-form-control--Width:
+    calc(
+      calc(
+        var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
+      ) + var(--pf-c-number-input--c-form-control--width-icon)
+    );
   display: inline-flex;
   align-items: center;
 }
+.pf-c-number-input.pf-m-status {
+  --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
+}
 .pf-c-number-input .pf-c-form-control {
   display: inline-flex;
   width: var(--pf-c-number-input--c-form-control--Width);