@patternfly/patternfly 4.203.4 → 4.204.2

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/DescriptionList/examples/DescriptionList.md

@@ -1235,7 +1235,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
 
 ```html
 <dl class="pf-c-description-list pf-m-2-col-on-lg">
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
     </dt>
@@ -1243,7 +1243,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Namespace</span>
     </dt>
@@ -1253,7 +1253,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Labels</span>
     </dt>
@@ -1261,7 +1261,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Pod selector</span>
     </dt>
@@ -1276,7 +1276,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Annotation</span>
     </dt>
@@ -1292,7 +1292,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
 
 ```html
 <dl class="pf-c-description-list pf-m-display-lg pf-m-2-col-on-lg">
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
     </dt>
@@ -1300,7 +1300,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Namespace</span>
     </dt>
@@ -1310,7 +1310,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Labels</span>
     </dt>
@@ -1318,7 +1318,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Pod selector</span>
     </dt>
@@ -1333,7 +1333,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Annotation</span>
     </dt>
@@ -1349,7 +1349,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
 
 ```html
 <dl class="pf-c-description-list pf-m-display-2xl pf-m-2-col-on-lg">
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
     </dt>
@@ -1357,7 +1357,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Namespace</span>
     </dt>
@@ -1367,7 +1367,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Labels</span>
     </dt>
@@ -1375,7 +1375,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Pod selector</span>
     </dt>
@@ -1390,7 +1390,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Annotation</span>
     </dt>
@@ -1406,7 +1406,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
 
 ```html
 <dl class="pf-c-description-list pf-m-3-col-on-lg pf-m-display-lg">
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
     </dt>
@@ -1414,7 +1414,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Namespace</span>
     </dt>
@@ -1424,7 +1424,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Labels</span>
     </dt>
@@ -1443,7 +1443,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
   class="pf-c-description-list pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal"
   style="--pf-c-description-list__term--width: 10ch;"
 >
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
     </dt>
@@ -1451,7 +1451,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Namespace</span>
     </dt>
@@ -1461,7 +1461,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Labels</span>
     </dt>

package/docs/components/LogViewer/examples/LogViewer.md

@@ -4476,6 +4476,7 @@ cssPrefix: pf-c-log-viewer
 </div>
 <div
   class="pf-c-popover pf-m-bottom"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-bottom-header"
   aria-describedby="popover-bottom-body"

package/docs/components/ModalBox/examples/ModalBox.css

@@ -0,0 +1,10 @@
+.ws-core-c-modal .ws-preview-html {
+ position: relative;
+}
+
+.ws-core-c-modal .pf-c-modal-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

package/docs/components/ModalBox/examples/ModalBox.md

@@ -2,13 +2,16 @@
 id: Modal
 section: components
 cssPrefix: pf-c-modal-box
----## Examples
+---import './ModalBox.css'
+
+## Examples
 
 ### Basic
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="modal-title"
   aria-describedby="modal-description"
@@ -30,9 +33,10 @@ cssPrefix: pf-c-modal-box
 
 ### With help button
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="modal-help-title"
   aria-describedby="modal-help-description"
@@ -67,9 +71,10 @@ cssPrefix: pf-c-modal-box
 
 ### Small
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box pf-m-sm"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="modal-sm-title"
   aria-describedby="modal-sm-description"
@@ -97,9 +102,10 @@ cssPrefix: pf-c-modal-box
 
 ### Medium
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box pf-m-md"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="modal-md-title"
   aria-describedby="modal-md-description"
@@ -127,9 +133,10 @@ cssPrefix: pf-c-modal-box
 
 ### Large
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box pf-m-lg"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="modal-lg-title"
   aria-describedby="modal-lg-description"
@@ -153,9 +160,10 @@ cssPrefix: pf-c-modal-box
 
 ### Without title
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box"
+  role="dialog"
   aria-modal="true"
   aria-label="Example of a modal without a title"
   aria-describedby="modal-no-title-description"
@@ -175,9 +183,10 @@ cssPrefix: pf-c-modal-box
 
 ### With description
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="modal-with-description-title"
   aria-describedby="modal-with-description-description"
@@ -205,9 +214,10 @@ cssPrefix: pf-c-modal-box
 
 ### Custom title
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="modal-custom-title"
   aria-describedby="modal-custom-description"
@@ -229,9 +239,10 @@ cssPrefix: pf-c-modal-box
 
 ### Modal box as generic container
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="modal-generic-container-description"
 >
@@ -244,9 +255,10 @@ cssPrefix: pf-c-modal-box
 
 ### Icon
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="icon-title"
   aria-describedby="icon-description"
@@ -270,9 +282,10 @@ cssPrefix: pf-c-modal-box
 
 ### Default alert
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box pf-m-default"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="default-alert-title"
   aria-describedby="default-alert-description"
@@ -303,9 +316,10 @@ cssPrefix: pf-c-modal-box
 
 ### Info alert
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box pf-m-info"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="info-alert-title"
   aria-describedby="info-alert-description"
@@ -336,9 +350,10 @@ cssPrefix: pf-c-modal-box
 
 ### Success alert
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box pf-m-success"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="success-alert-title"
   aria-describedby="success-alert-description"
@@ -369,9 +384,10 @@ cssPrefix: pf-c-modal-box
 
 ### Warning alert
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box pf-m-warning"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="warning-alert-title"
   aria-describedby="warning-alert-description"
@@ -402,9 +418,10 @@ cssPrefix: pf-c-modal-box
 
 ### Danger alert
 
-```html
+```html isFullscreen
 <div
   class="pf-c-modal-box pf-m-danger"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="danger-alert-title"
   aria-describedby="danger-alert-description"
@@ -443,7 +460,7 @@ A modal box is a generic rectangular container that can be used to build modals.
 
 | Attribute                                                                      | Applies to                                                     | Outcome                                                                                                                                                                                                                                                              |
 | ------------------------------------------------------------------------------ | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="dialog"`                                                                | `.pf-c-modal-box`                                              | Identifies the element that serves as the modal container. **Note:** `role="dialog"` is not included on the static examples on this page as it interferes with VoiceOver. Refer to the react examples to see the role in use. **Required**                           |
+| `role="dialog"`                                                                | `.pf-c-modal-box`                                              | Identifies the element that serves as the modal container. **Required**                                                                                                                                                                                              |
 | `aria-labelledby="[id value of .pf-c-modal-box__title or custom modal title]"` | `.pf-c-modal-box`                                              | Gives the modal an accessible name by referring to the element that provides the dialog title. **Required when .pf-c-title is present**                                                                                                                              |
 | `aria-label="[title of modal]"`                                                | `.pf-c-modal-box`                                              | Gives the modal an accessible name. **Required when `.pf-c-modal-box__title` is _not_ present**                                                                                                                                                                      |
 | `aria-describedby="[id value of applicable content]"`                          | `.pf-c-modal-box`                                              | Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal.                                                               |

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/docs/components/Popover/examples/Popover.css

@@ -1,10 +1,10 @@
-#ws-core-c-popover-width-auto .ws-preview-html {
+.ws-core-c-popover .ws-preview-html {
   position: relative;
-  height: 125px;
-}
+ }
 
-#ws-core-c-popover-width-auto .pf-c-popover {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
+ .ws-core-c-popover .pf-c-popover {
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   transform: translate(-50%, -50%);
+ }