@patternfly/patternfly 4.147.0 → 4.149.0

package/components/Popover/popover.scss

@@ -3,7 +3,21 @@
   --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + #{pf-size-prem(300px)});
   --pf-c-popover--MaxWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + #{pf-size-prem(300px)});
-  --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--lg);
+
+  // Title icon colors for states
+  --pf-c-popover--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
+  --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
+  --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
+  --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
+  --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
+
+  // Title text colors for states
+  --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
+  --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
+  --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
+  --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
+  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
 
   // Content
   --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
@@ -15,7 +29,7 @@
   // Arrow
   --pf-c-popover__arrow--Width: var(--pf-global--arrow--width-lg);
   --pf-c-popover__arrow--Height: var(--pf-global--arrow--width-lg);
-  --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
   --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-popover__arrow--m-top--TranslateX: -50%;
   --pf-c-popover__arrow--m-top--TranslateY: 50%;
@@ -39,6 +53,16 @@
   // Header
   --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
 
+  // Title
+  --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
+
+  // Title icon
+  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
+
   // Footer
   --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
 
@@ -132,6 +156,31 @@
       left: auto;
     }
   }
+
+  &.pf-m-danger {
+    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-danger__title-icon--Color);
+    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-danger__title-text--Color);
+  }
+
+  &.pf-m-warning {
+    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-warning__title-icon--Color);
+    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-warning__title-text--Color);
+  }
+
+  &.pf-m-success {
+    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
+    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
+  }
+
+  &.pf-m-default {
+    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
+    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
+  }
+
+  &.pf-m-info {
+    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
+    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-info__title-text--Color);
+  }
 }
 
 .pf-c-popover__content {
@@ -139,6 +188,7 @@
   padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
   background-color: var(--pf-c-popover__content--BackgroundColor);
 
+  // Remove in breaking change
   > .pf-c-title {
     margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
   }
@@ -165,6 +215,27 @@
   box-shadow: var(--pf-c-popover__arrow--BoxShadow);
 }
 
+.pf-c-popover__title {
+  flex: 0 0 auto;
+  margin-bottom: var(--pf-c-popover__title--MarginBottom);
+  font-family: var(--pf-c-popover__title--FontFamily);
+  font-size: var(--pf-c-popover__title--FontSize);
+  line-height: var(--pf-c-popover__title--LineHeight);
+
+  &.pf-m-icon {
+    display: flex;
+  }
+}
+
+.pf-c-popover__title-icon {
+  margin-right: var(--pf-c-popover__title-icon--MarginRight);
+  color: var(--pf-c-popover__title-icon--Color);
+}
+
+.pf-c-popover__title-text {
+  color: var(--pf-c-popover__title-text--Color, inherit);
+}
+
 // Body
 .pf-c-popover__body {
   word-wrap: break-word;

package/components/_all.scss

@@ -58,6 +58,7 @@
 @import "./OverflowMenu/overflow-menu.scss";
 @import "./Page/page.scss";
 @import "./Pagination/pagination.scss";
+@import "./Panel/panel.scss";
 @import "./Popover/popover.scss";
 @import "./Progress/progress.scss";
 @import "./ProgressStepper/progress-stepper.scss";

package/docs/components/CodeBlock/examples/CodeBlock.md

@@ -1,6 +1,5 @@
 ---
 id: 'Code block'
-beta: true
 section: components
 cssPrefix: pf-c-code-block
 ---## Examples

package/docs/components/ContextSelector/examples/context-selector.md

@@ -774,3 +774,5 @@ cssPrefix: pf-c-context-selector
 | `.pf-m-plain.pf-m-text`                  | `.pf-c-context-selector__toggle`          | Modifies the context selector toggle for plain text styles.                     |
 | `.pf-m-disabled`                         | `a.pf-c-context-selector__menu-list-item` | Modifies an item for the disabled state.                                        |
 | `.pf-m-full-height`                      | `.pf-c-context-selector`                  | Modifies a context selector to full height of parent. See masthead for use.     |
+| `.pf-m-large`                            | `.pf-c-context-selector`                  | Modifies toggle height to be large.                                             |
+| `.pf-m-page-insets`                      | `.pf-c-context-selector`                  | Modifies toggle and menu insets to match the responsive page chrome insets.     |

package/docs/components/HelperText/examples/HelperText.md

@@ -1,6 +1,5 @@
 ---
 id: 'Helper text'
-beta: true
 section: components
 cssPrefix: pf-c-helper-text
 ---## Examples

package/docs/components/Menu/examples/Menu.md

@@ -1,7 +1,6 @@
 ---
 id: Menu
 section: components
-beta: true
 cssPrefix: pf-c-menu
 ---import './Menu.css'
 
@@ -286,7 +285,7 @@ cssPrefix: pf-c-menu
 
 ### With flyout
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-flyout">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -408,7 +407,7 @@ cssPrefix: pf-c-menu
 
 ### With flyout menu top
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-flyout">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -530,7 +529,7 @@ cssPrefix: pf-c-menu
 
 ### With flyout menu left
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-flyout">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -652,7 +651,7 @@ cssPrefix: pf-c-menu
 
 ### With flyout menu left top
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-flyout">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -774,7 +773,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-drilldown">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -1154,7 +1153,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown level two
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-drilldown pf-m-drilled-in">
   <div class="pf-c-menu__content" style="--pf-c-menu__content--Height: 193px;">
     <ul class="pf-c-menu__list">
@@ -1534,7 +1533,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown level three
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-drilldown pf-m-drilled-in">
   <div class="pf-c-menu__content" style="--pf-c-menu__content--Height: 233px;">
     <ul class="pf-c-menu__list">
@@ -1914,7 +1913,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown level four
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-drilldown pf-m-drilled-in">
   <div class="pf-c-menu__content" style="--pf-c-menu__content--Height: 193px;">
     <ul class="pf-c-menu__list">
@@ -2294,7 +2293,7 @@ cssPrefix: pf-c-menu
 
 ### Scrollable drilldown
 
-```html
+```html isBeta
 <div
   class="pf-c-menu pf-m-drilldown pf-m-scrollable"
   style="--pf-c-menu__content--MaxHeight: 100px;"
@@ -2677,7 +2676,7 @@ cssPrefix: pf-c-menu
 
 ### Width modified drilldown
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-drilldown" style="--pf-c-menu--Width: 350px;">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -3057,7 +3056,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown with breadcrumbs - level 1
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-drilldown">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -3188,7 +3187,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown with breadcrumbs - level 2
 
-```html
+```html isBeta
 <div
   class="pf-c-menu pf-m-drilldown pf-m-drilled-in"
   style="--pf-c-menu__content--Height: 96px;"
@@ -3347,7 +3346,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown with breadcrumbs - level 3
 
-```html
+```html isBeta
 <div
   class="pf-c-menu pf-m-drilldown pf-m-drilled-in"
   style="--pf-c-menu__content--Height: 136px;"
@@ -3542,7 +3541,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown with breadcrumbs - level 4
 
-```html
+```html isBeta
 <div
   class="pf-c-menu pf-m-drilldown pf-m-drilled-in"
   style="--pf-c-menu__content--Height: 216px;"
@@ -3744,27 +3743,27 @@ cssPrefix: pf-c-menu
 
 <!--
 ### Drilldown managed height
-```hbs
+```hbs isBeta
 {{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height" menu--Drilldown--menu--attribute='style="--pf-c-menu--MaxHeight: 120px; --pf-c-menu__content--Height: 216px;"'}}
 ```
 
 ### Drilldown managed height level two
-```hbs
+```hbs isBeta
 {{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height-level-2" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--menu--attribute='style="--pf-c-menu--MaxHeight: 120px; --pf-c-menu__content--Height: 193px;"'}}
 ```
 
 ### Drilldown managed height level three
-```hbs
+```hbs isBeta
 {{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height-level-3" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--IsDrilledIn--list-2="true" menu--Drilldown--menu--attribute='style="--pf-c-menu--MaxHeight: 120px; --pf-c-menu__content--Height: 233px;"'}}
 ```
 
 ### Drilldown managed height level four
-```hbs
+```hbs isBeta
 {{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height-level-4" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--IsDrilledIn--list-2="true" menu--Drilldown--IsDrilledIn--list-3="true" menu--Drilldown--menu--attribute='style="--pf-c-menu--MaxHeight: 120px; --pf-c-menu__content--Height: 216px;"'}}
 ```
 
 ### Drilldown with breadcrumbs and managed height - level 4
-```hbs
+```hbs isBeta
 {{#> menu menu--id="drilldown-with-breadcrumbs-and-managed-height-level-4" menu--modifier="pf-m-drilldown pf-m-drilled-in" menu--attribute='style="--pf-c-menu--MaxHeight: 120px; --pf-c-menu__content--Height: 216px;"'}}
   {{> menu-breadcrumbs--Drilldown breadcrumb--id="drilldown-with-breadcrumbs-level-4" menu-breadcrumbs--Drilldown--IsLevel4="true"}}
   {{> menu-content--Breadcrumbs menu-content--Breadcrumbs--level2="true" menu-content--Breadcrumbs--level3="true" menu-content--Breadcrumbs--level4="true"}}

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

@@ -450,6 +450,7 @@ A modal box is a generic rectangular container that can be used to build modals.
 | `aria-modal="true"`                                                            | `.pf-c-modal-box`                                              | Tells assistive technologies that the windows underneath the current modal are not available for interaction. **Required**                                                                                                                                           |
 | `aria-label="Close"`                                                           | `.pf-c-modal-box__close .pf-c-button`                          | Provides an accessible name for the close button as it uses an icon instead of text. **Required**                                                                                                                                                                    |
 | `aria-hidden="true"`                                                           | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
+| `form="[id of form in modal body]"`                                            | `.pf-c-modal-box__footer .pf-c-button`                         | Associates a submit button in the modal footer with a form in the modal body. For use when the submit button is outside of the `<form>` that the button submits.                                                                                                     |
 
 ### Usage
 

package/docs/components/Panel/examples/Panel.md

@@ -0,0 +1,163 @@
+---
+id: 'Panel'
+beta: true
+section: components
+cssPrefix: pf-c-panel
+---## Examples
+
+### Basic
+
+```html
+<div class="pf-c-panel">
+  <div class="pf-c-panel__main">
+    <div class="pf-c-panel__main-body">Main content</div>
+  </div>
+</div>
+
+```
+
+### Header
+
+```html
+<div class="pf-c-panel">
+  <div class="pf-c-panel__header">Header content</div>
+  <hr class="pf-c-divider" />
+  <div class="pf-c-panel__main">
+    <div class="pf-c-panel__main-body">Main content</div>
+  </div>
+</div>
+
+```
+
+### Footer
+
+```html
+<div class="pf-c-panel">
+  <div class="pf-c-panel__main">
+    <div class="pf-c-panel__main-body">Main content</div>
+  </div>
+  <div class="pf-c-panel__footer">Footer content</div>
+</div>
+
+```
+
+### Header and footer
+
+```html
+<div class="pf-c-panel">
+  <div class="pf-c-panel__header">Header content</div>
+  <hr class="pf-c-divider" />
+  <div class="pf-c-panel__main">
+    <div class="pf-c-panel__main-body">Main content</div>
+  </div>
+  <div class="pf-c-panel__footer">Footer content</div>
+</div>
+
+```
+
+### No body
+
+```html
+<div class="pf-c-panel">
+  <div class="pf-c-panel__main">Main content</div>
+</div>
+
+```
+
+### Raised
+
+```html
+<div class="pf-c-panel pf-m-raised">
+  <div class="pf-c-panel__main">
+    <div class="pf-c-panel__main-body">Main content</div>
+  </div>
+</div>
+
+```
+
+### Bordered
+
+```html
+<div class="pf-c-panel pf-m-bordered">
+  <div class="pf-c-panel__main">
+    <div class="pf-c-panel__main-body">Main content</div>
+  </div>
+</div>
+
+```
+
+### Scrollable
+
+```html
+<div class="pf-c-panel pf-m-scrollable">
+  <div class="pf-c-panel__main">
+    <div class="pf-c-panel__main-body">
+      Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+    </div>
+  </div>
+</div>
+
+```
+
+### Scrollable with header and footer
+
+```html
+<div class="pf-c-panel pf-m-scrollable">
+  <div class="pf-c-panel__header">Header content</div>
+  <hr class="pf-c-divider" />
+  <div class="pf-c-panel__main">
+    <div class="pf-c-panel__main-body">
+      Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+      <br />
+      <br />Main content
+    </div>
+  </div>
+  <div class="pf-c-panel__footer">Footer content</div>
+</div>
+
+```
+
+## Documentation
+
+### Usage
+
+| Class                    | Applied to    | Outcome                                   |
+| ------------------------ | ------------- | ----------------------------------------- |
+| `.pf-c-panel`            | `<div>`       | Initiates the panel. **Required**         |
+| `.pf-c-panel__header`    | `<div>`       | Initiates the panel header.               |
+| `.pf-c-panel__main`      | `<div>`       | Initiates the panel main content.         |
+| `.pf-c-panel__main-body` | `<div>`       | Initiates a panel content body container. |
+| `.pf-c-panel__footer`    | `<div>`       | Initiates the panel footer.               |
+| `.pf-m-bordered`         | `.pf-c-panel` | Modifies the panel for bordered styles.   |
+| `.pf-m-raised`           | `.pf-c-panel` | Modifies the panel for raised styles.     |
+| `.pf-m-scrollable`       | `.pf-c-panel` | Modifies the panel for scrollable styles. |