@patternfly/patternfly 4.204.1 → 4.204.4

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

package/docs/components/Popover/examples/Popover.md

@@ -8,9 +8,10 @@ cssPrefix: pf-c-popover
 
 ### Top
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-top"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -33,9 +34,10 @@ cssPrefix: pf-c-popover
 
 ### Right
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-right"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-right-header"
   aria-describedby="popover-right-body"
@@ -58,9 +60,10 @@ cssPrefix: pf-c-popover
 
 ### Bottom
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-bottom"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-bottom-header"
   aria-describedby="popover-bottom-body"
@@ -83,9 +86,10 @@ cssPrefix: pf-c-popover
 
 ### Left
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-left"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-left-header"
   aria-describedby="popover-left-body"
@@ -106,11 +110,12 @@ cssPrefix: pf-c-popover
 
 ```
 
-### Left with top and bottom positions
+### Left top
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-left-top"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-left-start-header"
   aria-describedby="popover-left-start-body"
@@ -128,9 +133,15 @@ cssPrefix: pf-c-popover
     <footer class="pf-c-popover__footer">Popover footer</footer>
   </div>
 </div>
-<br />
+
+```
+
+### Left bottom
+
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-left-bottom"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-left-end-header"
   aria-describedby="popover-left-end-body"
@@ -151,11 +162,12 @@ cssPrefix: pf-c-popover
 
 ```
 
-### Bottom with left and right positions
+### Bottom left
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-bottom-left"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-bottom-start-header"
   aria-describedby="popover-bottom-start-body"
@@ -176,9 +188,15 @@ cssPrefix: pf-c-popover
     <footer class="pf-c-popover__footer">Popover footer</footer>
   </div>
 </div>
-<br />
+
+```
+
+### Bottom right
+
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-bottom-right"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-bottom-end-header"
   aria-describedby="popover-bottom-end-body"
@@ -201,9 +219,10 @@ cssPrefix: pf-c-popover
 
 ### Without header/footer
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-right"
+  role="dialog"
   aria-modal="true"
   aria-label="Popover with no header example"
   aria-describedby="popover-no-header-body"
@@ -224,9 +243,10 @@ cssPrefix: pf-c-popover
 
 ### No padding
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-right pf-m-no-padding"
+  role="dialog"
   aria-modal="true"
   aria-label="Popover with no padding example"
   aria-describedby="popover-no-padding-body"
@@ -244,9 +264,10 @@ cssPrefix: pf-c-popover
 
 ### Width auto
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-right pf-m-width-auto"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-width-auto-header"
   aria-describedby="popover-width-auto-body"
@@ -266,9 +287,10 @@ cssPrefix: pf-c-popover
 
 ### Popover with icon in the title
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-left"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -298,9 +320,10 @@ cssPrefix: pf-c-popover
 
 ### Default alert popover
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-default pf-m-left"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -334,9 +357,10 @@ cssPrefix: pf-c-popover
 
 ### Info alert popover
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-info pf-m-top"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -370,9 +394,10 @@ cssPrefix: pf-c-popover
 
 ### Success alert popover
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-success pf-m-top"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -406,9 +431,10 @@ cssPrefix: pf-c-popover
 
 ### Warning alert popover
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-warning pf-m-top"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -442,9 +468,10 @@ cssPrefix: pf-c-popover
 
 ### Danger alert popover
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-danger pf-m-top"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -486,7 +513,7 @@ A popover is used to provide contextual information for another component on cli
 
 | Attribute                                             | Applies to                                                            | Outcome                                                                                                                                                                                                                                                             |
 | ----------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="dialog"`                                       | `.pf-c-popover`                                                       | Identifies the element that serves as the popover 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-popover`                                                       | Identifies the element that serves as the popover container. **Required**                                                                                                                                                                                           |
 | `aria-labelledby="[id value of .pf-c-title]"`         | `.pf-c-popover`                                                       | Gives the popover an accessible name by referring to the element that provides the dialog title. **Required when .pf-c-title is present**                                                                                                                           |
 | `aria-label="[title of popover]"`                     | `.pf-c-popover`                                                       | Gives the popover an accessible name. **Required when .pf-c-title is _not_ present**                                                                                                                                                                                |
 | `aria-describedby="[id value of applicable content]"` | `.pf-c-popover`                                                       | Gives the popover an accessible description by referring to the popover content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the popover.                                                        |