@patternfly/patternfly 4.204.0 → 4.204.3

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/FormControl/form-control.css

@@ -9,6 +9,7 @@
 }
 
 .pf-c-form-control {
+  --pf-c-form-control--Color: var(--pf-global--Color--100);
   --pf-c-form-control--FontSize: var(--pf-global--FontSize--md);
   --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -131,7 +132,7 @@
   --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
   --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + 0.0625rem);
   --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
-  color: var(--pf-global--Color--100);
+  color: var(--pf-c-form-control--Color);
   width: var(--pf-c-form-control--Width);
   padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
   font-size: var(--pf-c-form-control--FontSize);
@@ -176,8 +177,8 @@
   border-bottom-width: var(--pf-c-form-control--m-expanded--BorderBottomWidth);
 }
 .pf-c-form-control:disabled {
-  --pf-c-form-control--Color: var(--pf-c-form-control--disabled--Color);
   --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
+  color: var(--pf-c-form-control--disabled--Color);
   cursor: not-allowed;
   border-color: var(--pf-c-form-control--disabled--BorderColor);
 }

package/components/FormControl/form-control.scss

@@ -27,6 +27,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
 
 .pf-c-form-control {
   // Component
+  --pf-c-form-control--Color: var(--pf-global--Color--100);
   --pf-c-form-control--FontSize: var(--pf-global--FontSize--md);
   --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -199,7 +200,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
   --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
 
   // This component always needs to be light
-  @include pf-t-light;
+  @include pf-t-light("--pf-c-form-control--Color");
 
   width: var(--pf-c-form-control--Width);
   padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
@@ -216,7 +217,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
   // stylelint-enable
 
   &::placeholder {
-    color: var(--pf-c-form-control--placeholder--Color);
+    color: var(--pf-c-form-control--placeholder--Color); // update to set --pf-c-form-control--Color in breaking change - also look for any other place to do that in this component
   }
 
   &:not(textarea) {
@@ -261,9 +262,9 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
   }
 
   &:disabled {
-    --pf-c-form-control--Color: var(--pf-c-form-control--disabled--Color);
     --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
 
+    color: var(--pf-c-form-control--disabled--Color);
     cursor: not-allowed;
     border-color: var(--pf-c-form-control--disabled--BorderColor);
   }

package/components/Popover/popover.css

@@ -36,7 +36,7 @@
   --pf-c-popover__arrow--m-left--Rotate: 45deg;
   --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
-  --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
+  --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
   --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
   --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
   --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);

package/components/Popover/popover.scss

@@ -47,7 +47,7 @@
   // Close
   --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element)); // align top of button with top of text
-  --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
+  --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md)); // align right of content
   --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
 
   // Header

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

@@ -39,6 +39,16 @@ cssPrefix: pf-c-form-control
 />
 <br />
 <br />
+<input
+  class="pf-c-form-control"
+  disabled
+  type="text"
+  value="Disabled"
+  id="input-disabled"
+  aria-label="Disabled input example"
+/>
+<br />
+<br />
 <input
   class="pf-c-form-control pf-m-success"
   type="text"
@@ -68,16 +78,6 @@ cssPrefix: pf-c-form-control
 />
 <br />
 <br />
-<input
-  class="pf-c-form-control"
-  disabled
-  type="text"
-  value="Disabled"
-  id="input-disabled"
-  aria-label="Disabled input example"
-/>
-<br />
-<br />
 <input
   class="pf-c-form-control pf-m-expanded"
   type="text"
@@ -123,11 +123,11 @@ cssPrefix: pf-c-form-control
 ```html
 <select
   class="pf-c-form-control pf-m-placeholder"
-  id="select-standard"
-  name="select-standard"
-  aria-label="Standard select example"
+  id="select-selectable-placeholder"
+  name="select-selectable-placeholder"
+  aria-label="Selectable placeholder select example"
 >
-  <option value selected disabled>Please choose</option>
+  <option value selected>Selectable placeholder</option>
   <option value="Mr">Mr</option>
   <option value="Miss">Miss</option>
   <option value="Mrs">Mrs</option>
@@ -139,11 +139,11 @@ cssPrefix: pf-c-form-control
 <br />
 <select
   class="pf-c-form-control pf-m-placeholder"
-  id="select-placeholder-enabled"
-  name="select-placeholder-enabled"
-  aria-label="Placeholder enabled select example"
+  id="select-non-selectable-placeholder"
+  name="select-non-selectable-placeholder"
+  aria-label="Non-selectable placeholder select example"
 >
-  <option value selected>Please choose</option>
+  <option value selected disabled>Non-selectable placeholder</option>
   <option value="Mr">Mr</option>
   <option value="Miss">Miss</option>
   <option value="Mrs">Mrs</option>
@@ -161,7 +161,7 @@ cssPrefix: pf-c-form-control
 >
   <optgroup label="Group 1">
     <option value="Option 1">The first option</option>
-    <option value="Option 2" selected>The second option is selected by default</option>
+    <option value="Option 2" selected>Option groups (second option selected)</option>
   </optgroup>
   <optgroup label="Group 2">
     <option value="Option 3">The third option</option>
@@ -226,6 +226,21 @@ cssPrefix: pf-c-form-control
 </select>
 <br />
 <br />
+<select
+  class="pf-c-form-control pf-m-placeholder"
+  disabled
+  id="select-disabled"
+  name="select-disabled"
+  aria-label="Disabled select example"
+>
+  <option value selected>Disabled</option>
+  <option value="Mr">Mr</option>
+  <option value="Miss">Miss</option>
+  <option value="Mrs">Mrs</option>
+  <option value="Ms">Ms</option>
+  <option value="Dr">Dr</option>
+  <option value="Other">Other</option>
+</select>
 
 ```
 
@@ -251,6 +266,16 @@ cssPrefix: pf-c-form-control
 </textarea>
 <br />
 <br />
+<textarea
+  class="pf-c-form-control"
+  disabled
+  name="textarea-disabled"
+  id="textarea-disabled"
+  aria-label="Disabled textarea example"
+>Disabled
+</textarea>
+<br />
+<br />
 <textarea
   class="pf-c-form-control pf-m-success"
   name="textarea-success"

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/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%);
+ }