@patternfly/patternfly 4.166.4 → 4.169.0

package/components/DescriptionList/description-list.css

@@ -11,9 +11,14 @@
   --pf-c-description-list__group--GridColumn: auto;
   --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
   --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-description-list__term--Display: inline;
+  --pf-c-description-list__term--sm--Display: flex;
   --pf-c-description-list__term--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-description-list__term--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-description-list__term--LineHeight: var(--pf-global--LineHeight--sm);
+  --pf-c-description-list__term-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
+  --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
   --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
   --pf-c-description-list--m-horizontal__term--width: 12ch;
   --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
@@ -34,6 +39,11 @@
   column-gap: var(--pf-c-description-list--ColumnGap);
   grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
 }
+@media screen and (min-width: 576px) {
+  .pf-c-description-list {
+    --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
+  }
+}
 .pf-c-description-list[class*=pf-m-horizontal] {
   --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
 }
@@ -136,6 +146,7 @@
 }
 
 .pf-c-description-list__term {
+  display: var(--pf-c-description-list__term--Display);
   font-size: var(--pf-c-description-list__term--FontSize);
   font-weight: var(--pf-c-description-list__term--FontWeight);
   line-height: var(--pf-c-description-list__term--LineHeight);
@@ -144,6 +155,13 @@
   display: inline;
 }
 
+.pf-c-description-list__term-icon {
+  flex-shrink: 0;
+  min-width: var(--pf-c-description-list__term-icon--MinWidth);
+  margin-right: var(--pf-c-description-list__term-icon--MarginRight);
+  color: var(--pf-c-description-list__term-icon--Color);
+}
+
 .pf-c-description-list__text.pf-m-help-text {
   text-decoration: underline;
   cursor: pointer;

package/components/DescriptionList/description-list.scss

@@ -19,10 +19,21 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
   --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
 
   // term
+  --pf-c-description-list__term--Display: inline;
+  --pf-c-description-list__term--sm--Display: flex;
   --pf-c-description-list__term--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-description-list__term--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-description-list__term--LineHeight: var(--pf-global--LineHeight--sm);
 
+  @media screen and (min-width: $pf-global--breakpoint--sm) {
+    --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
+  }
+
+  // icon
+  --pf-c-description-list__term-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
+  --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
+
   // vertical
   --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
 
@@ -115,6 +126,7 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
 }
 
 .pf-c-description-list__term {
+  display: var(--pf-c-description-list__term--Display);
   font-size: var(--pf-c-description-list__term--FontSize);
   font-weight: var(--pf-c-description-list__term--FontWeight);
   line-height: var(--pf-c-description-list__term--LineHeight);
@@ -124,6 +136,13 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
   }
 }
 
+.pf-c-description-list__term-icon {
+  flex-shrink: 0;
+  min-width: var(--pf-c-description-list__term-icon--MinWidth);
+  margin-right: var(--pf-c-description-list__term-icon--MarginRight);
+  color: var(--pf-c-description-list__term-icon--Color);
+}
+
 .pf-c-description-list__text {
   &.pf-m-help-text {
     text-decoration: underline;

package/components/Dropdown/dropdown.css

@@ -370,6 +370,10 @@
   white-space: nowrap;
 }
 
+.pf-c-dropdown__toggle-text {
+  flex: 0 1 auto;
+}
+
 .pf-c-dropdown__toggle-icon {
   margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
   margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
@@ -381,6 +385,7 @@
 
 .pf-c-dropdown__toggle-image {
   display: inline-flex;
+  flex-shrink: 0;
   margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
   margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
   margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);

package/components/Dropdown/dropdown.scss

@@ -511,6 +511,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   }
 }
 
+.pf-c-dropdown__toggle-text {
+  flex: 0 1 auto;
+}
+
 .pf-c-dropdown__toggle-icon {
   margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
   margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
@@ -525,6 +529,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
 // Toggle image
 .pf-c-dropdown__toggle-image {
   display: inline-flex;
+  flex-shrink: 0;
   margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
   margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
   margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);

package/components/Masthead/masthead.css

@@ -230,6 +230,9 @@
   --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor);
   --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
 }
+.pf-c-masthead .pf-c-nav {
+  align-self: stretch;
+}
 
 .pf-c-masthead__main {
   position: relative;

package/components/Masthead/masthead.scss

@@ -242,6 +242,10 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
       --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
     }
   }
+
+  .pf-c-nav {
+    align-self: stretch;
+  }
 }
 
 // Main

package/components/Table/table.css

@@ -275,6 +275,7 @@
   --pf-c-table--thead--m-nested-column-header--tr--PaddingTop: var(--pf-global--spacer--xs);
   --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-table__subhead--Color: var(--pf-global--Color--200);
+  --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
   color: var(--pf-global--Color--100);
   width: 100%;
   background-color: var(--pf-c-table--BackgroundColor);
@@ -316,6 +317,13 @@
   content: "";
   border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
 }
+.pf-c-table.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), .pf-c-table.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-c-table__expandable-row),
+.pf-c-table > .pf-m-striped > tr:nth-child(odd),
+.pf-c-table > .pf-m-striped-even > tr:nth-child(even),
+.pf-c-table tr.pf-m-striped {
+  --pf-c-table__sticky-column--BackgroundColor: var(--pf-c-table--m-striped__tr--BackgroundColor);
+  background: var(--pf-c-table--m-striped__tr--BackgroundColor);
+}
 .pf-c-table tr:not(.pf-c-table__expandable-row) {
   border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
 }

package/components/Table/table.scss

@@ -303,6 +303,9 @@
   // Subhead
   --pf-c-table__subhead--Color: var(--pf-global--Color--200);
 
+  // Striped
+  --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
+
   @media screen and (min-width: $pf-global--breakpoint--xl) {
     --pf-c-table--cell--first-last-child--PaddingRight: var(--pf-c-table--cell--first-last-child--xl--PaddingRight);
     --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--cell--first-last-child--xl--PaddingLeft);
@@ -345,6 +348,19 @@
     }
   }
 
+  // For regular and expandable tables
+  // stylelint-disable
+  &.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), // regular table
+  &.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-c-table__expandable-row), // expandable table
+  > .pf-m-striped > tr:nth-child(odd), // tbody odd
+  > .pf-m-striped-even > tr:nth-child(even), // tbody even
+  tr.pf-m-striped { // tr
+    --pf-c-table__sticky-column--BackgroundColor: var(--pf-c-table--m-striped__tr--BackgroundColor);
+
+    background: var(--pf-c-table--m-striped__tr--BackgroundColor);
+  }
+  // stylelint-enable
+
   // Standard table row (non-expandable)
   // exclude expandable rows
   tr:not(.pf-c-table__expandable-row) {

package/components/Toolbar/toolbar.css

@@ -324,6 +324,12 @@
   --pf-c-toolbar--spacer: 0;
 }
 
+.pf-c-toolbar__group.pf-m-overflow-container,
+.pf-c-toolbar__item.pf-m-overflow-container {
+  flex: 1;
+  overflow: hidden;
+}
+
 .pf-c-toolbar__expand-all-icon {
   display: inline-block;
   transition: var(--pf-c-toolbar__expand-all-icon--Transition);

package/components/Toolbar/toolbar.scss

@@ -322,6 +322,15 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   }
 }
 
+.pf-c-toolbar__group,
+.pf-c-toolbar__item {
+  &.pf-m-overflow-container {
+    flex: 1;
+    overflow: hidden;
+  }
+}
+
+
 .pf-c-toolbar__expand-all-icon {
   display: inline-block;
   transition: var(--pf-c-toolbar__expand-all-icon--Transition);

package/components/Truncate/truncate.css

@@ -1,45 +1,33 @@
 .pf-c-truncate {
-  --pf-c-truncate--FontSize: 1rem;
-  display: inline-flex;
-  flex-wrap: nowrap;
-  max-width: 100%;
+  --pf-c-truncate--MinWidth: 12ch;
+  --pf-c-truncate__start--MinWidth: 6ch;
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: baseline;
+  min-width: var(--pf-c-truncate--MinWidth);
 }
 
 .pf-c-truncate__start,
 .pf-c-truncate__end {
-  flex-shrink: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.pf-c-truncate__start {
+  min-width: var(--pf-c-truncate__start--MinWidth);
+}
+
 .pf-c-truncate__end {
   direction: rtl;
-  text-align: left;
 }
 
-@supports (text-overflow: "") {
-  .pf-c-truncate__start + .pf-c-truncate__end {
-    text-overflow: "";
-  }
+.pf-c-truncate__start + .pf-c-truncate__end {
+  overflow: visible;
+  direction: ltr;
 }
-@supports not (text-overflow: "") {
-  .pf-c-truncate__start + .pf-c-truncate__end {
-    font-size: 0;
-  }
-  .pf-c-truncate__start + .pf-c-truncate__end .pf-c-truncate__text {
-    font-size: var(--pf-c-truncate--FontSize);
-  }
-}
-@supports (-webkit-hyphens: none) {
-  .pf-c-truncate {
-    display: inline-block;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 
+@supports (-webkit-hyphens: none) {
   .pf-c-truncate__end {
     direction: ltr;
   }

package/components/Truncate/truncate.scss

@@ -1,55 +1,36 @@
 .pf-c-truncate {
-  --pf-c-truncate--FontSize: 1rem;
+  --pf-c-truncate--MinWidth: 12ch;
+  --pf-c-truncate__start--MinWidth: 6ch;
 
-  display: inline-flex;
-  flex-wrap: nowrap;
-  max-width: 100%;
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: baseline;
+  min-width: var(--pf-c-truncate--MinWidth);
 }
 
-// Start, end
 .pf-c-truncate__start,
 .pf-c-truncate__end {
-  flex-shrink: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.pf-c-truncate__start {
+  min-width: var(--pf-c-truncate__start--MinWidth);
+}
+
 // End
 .pf-c-truncate__end {
   direction: rtl;
-  text-align: left;
 }
 
-// text-overflow: <string>
-@supports (text-overflow: "") {
-  .pf-c-truncate__start + .pf-c-truncate__end {
-    text-overflow: "";
-  }
-}
-
-// text-overflow: ellipsis
-@supports not (text-overflow: "") {
-  // Start + end = middle truncation
-  .pf-c-truncate__start + .pf-c-truncate__end {
-    font-size: 0; // shrink ellipsis size to zero
-
-    .pf-c-truncate__text {
-      font-size: var(--pf-c-truncate--FontSize);
-    }
-  }
+.pf-c-truncate__start + .pf-c-truncate__end {
+  overflow: visible;
+  direction: ltr;
 }
 
 // safari not supported
 @supports (-webkit-hyphens: none) {
-  .pf-c-truncate {
-    display: inline-block;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .pf-c-truncate__end {
     direction: ltr;
   }

package/docs/components/BackToTop/examples/BackToTop.md

@@ -1,6 +1,5 @@
 ---
 id: 'Back to top'
-beta: true
 section: components
 cssPrefix: pf-c-back-to-top
 ---import './BackToTop.css'

package/docs/components/DescriptionList/examples/DescriptionList.md

@@ -67,12 +67,7 @@ cssPrefix: pf-c-description-list
 <dl class="pf-c-description-list">
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
-      <span
-        class="pf-c-description-list__text pf-m-help-text"
-        role="button"
-        type="button"
-        tabindex="0"
-      >Name</span>
+      <span class="pf-c-description-list__text">Name</span>
     </dt>
     <dd class="pf-c-description-list__description">
       <div class="pf-c-description-list__text">example</div>
@@ -80,12 +75,7 @@ cssPrefix: pf-c-description-list
   </div>
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
-      <span
-        class="pf-c-description-list__text pf-m-help-text"
-        role="button"
-        type="button"
-        tabindex="0"
-      >Namespace</span>
+      <span class="pf-c-description-list__text">Namespace</span>
     </dt>
     <dd class="pf-c-description-list__description">
       <div class="pf-c-description-list__text">
@@ -95,12 +85,7 @@ cssPrefix: pf-c-description-list
   </div>
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
-      <span
-        class="pf-c-description-list__text pf-m-help-text"
-        role="button"
-        type="button"
-        tabindex="0"
-      >Labels</span>
+      <span class="pf-c-description-list__text">Labels</span>
     </dt>
     <dd class="pf-c-description-list__description">
       <div class="pf-c-description-list__text">example</div>
@@ -108,12 +93,7 @@ cssPrefix: pf-c-description-list
   </div>
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
-      <span
-        class="pf-c-description-list__text pf-m-help-text"
-        role="button"
-        type="button"
-        tabindex="0"
-      >Pod selector</span>
+      <span class="pf-c-description-list__text">Pod selector</span>
     </dt>
     <dd class="pf-c-description-list__description">
       <div class="pf-c-description-list__text">
@@ -128,12 +108,7 @@ cssPrefix: pf-c-description-list
   </div>
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
-      <span
-        class="pf-c-description-list__text pf-m-help-text"
-        role="button"
-        type="button"
-        tabindex="0"
-      >Annotation</span>
+      <span class="pf-c-description-list__text">Annotation</span>
     </dt>
     <dd class="pf-c-description-list__description">
       <div class="pf-c-description-list__text">2 Annotations</div>
@@ -1202,6 +1177,82 @@ Column fill will modify the default placement of description list groups to fill
 {{> description-list__example description-list--title="Horizontal 2 column DL" description-list--modifier="pf-m-horizontal pf-m-auto-term-widths pf-m-2-col"}}
 ``` -->
 
+## With icons
+
+### Icons on terms
+
+```html
+<dl class="pf-c-description-list">
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__term-icon">
+        <i class="fas fa-cube" aria-hidden="true"></i>
+      </span>
+      <span
+        class="pf-c-description-list__text"
+      >This is a long description that should wrap to multiple lines in cases where the viewport is quite narrow.</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">example</div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__term-icon">
+        <i class="fas fa-book" aria-hidden="true"></i>
+      </span>
+      <span class="pf-c-description-list__text">Namespace</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">
+        <a href="#">mary-test</a>
+      </div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__term-icon">
+        <i class="fas fa-key" aria-hidden="true"></i>
+      </span>
+      <span class="pf-c-description-list__text">Labels</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">example</div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__term-icon">
+        <i class="fas fa-globe" aria-hidden="true"></i>
+      </span>
+      <span class="pf-c-description-list__text">Pod selector</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">
+        <button class="pf-c-button pf-m-link pf-m-inline" type="button">
+          <span class="pf-c-button__icon pf-m-start">
+            <i class="fas fa-plus-circle" aria-hidden="true"></i>
+          </span>
+          app=MyApp
+        </button>
+      </div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__term-icon">
+        <i class="fas fa-flag" aria-hidden="true"></i>
+      </span>
+      <span class="pf-c-description-list__text">Annotation</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">2 Annotations</div>
+    </dd>
+  </div>
+</dl>
+
+```
+
 ## Documentation
 
 ### Accessibility
@@ -1220,6 +1271,7 @@ Column fill will modify the default placement of description list groups to fill
 | `.pf-c-description-list__term`                                                  | `<dt>`                                   | Initiates a description list component term. **Required**                                                                        |
 | `.pf-c-description-list__description`                                           | `<dd>`                                   | Initiates a description list component description. **Required**                                                                 |
 | `.pf-c-description-list__text`                                                  | `<span>`, `<div>`                        | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required** |
+| `.pf-c-description-list__term-icon`                                             | `<span>`                                 | Initiates a description list component term icon element.                                                                        |
 | `.pf-m-compact`                                                                 | `.pf-c-description-list`                 | Modifies the description list for compact horizontal and vertical spacing.                                                       |
 | `.pf-m-fluid`                                                                   | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid.                                                                            |
 | `.pf-m-help-text`                                                               | `.pf-c-description-list__text`           | Indicates there is more information available for the description list component term text.                                      |

package/docs/components/JumpLinks/examples/JumpLinks.md

@@ -2,7 +2,6 @@
 id: Jump links
 section: components
 cssPrefix: pf-c-jump-links
-beta: true
 ---## Examples
 
 ### Horizontal default