@patternfly/patternfly 4.166.3 → 4.168.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/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/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/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>
@@ -152,7 +127,9 @@ cssPrefix: pf-c-description-list
       <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>
+      <div
+        class="pf-c-description-list__text"
+      >This is a long description that should wrap to multiple lines in a multi-column layout.</div>
     </dd>
   </div>
   <div class="pf-c-description-list__group">
@@ -601,14 +578,18 @@ cssPrefix: pf-c-description-list
 
 ### Column fill
 
+Column fill will modify the default placement of description list groups to fill from top to bottom using css column-count, instead of left to right. **Note:** using this modifier will change the layout so that horizontally adjacent groups are no longer aligned in the same row.
+
 ```html
-<dl class="pf-c-description-list pf-m-fill-columns">
+<dl class="pf-c-description-list pf-m-fill-columns pf-m-2-col pf-m-3-col-on-lg">
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
       <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>
+      <div
+        class="pf-c-description-list__text"
+      >This is a long description that should wrap to multiple lines in a multi-column layout.</div>
     </dd>
   </div>
   <div class="pf-c-description-list__group">
@@ -656,10 +637,12 @@ cssPrefix: pf-c-description-list
 
 ```
 
-### Column fill, horizontal
+## Auto fit
+
+### Auto-fit basic
 
 ```html
-<dl class="pf-c-description-list pf-m-fill-columns pf-m-horizontal">
+<dl class="pf-c-description-list pf-m-auto-fit">
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
@@ -713,11 +696,12 @@ cssPrefix: pf-c-description-list
 
 ```
 
-### Column fill, horizontal, multi-column
+### Auto-fit, min width modified grid template columns
 
 ```html
 <dl
-  class="pf-c-description-list pf-m-fill-columns pf-m-horizontal pf-m-2-col pf-m-3-col-on-lg"
+  class="pf-c-description-list pf-m-auto-fit"
+  style="--pf-c-description-list--GridTemplateColumns--min: 200px;"
 >
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
@@ -772,12 +756,13 @@ cssPrefix: pf-c-description-list
 
 ```
 
-## Auto fit
-
-### Auto-fit basic
+### Auto-fit, min width modified, responsive grid template columns
 
 ```html
-<dl class="pf-c-description-list pf-m-auto-fit">
+<dl
+  class="pf-c-description-list pf-m-auto-fit"
+  style="--pf-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"
+>
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
@@ -831,13 +816,12 @@ cssPrefix: pf-c-description-list
 
 ```
 
-### Auto-fit, min width modified grid template columns
+## Responsive column definitions
+
+### Default responsive columns
 
 ```html
-<dl
-  class="pf-c-description-list pf-m-auto-fit"
-  style="--pf-c-description-list--GridTemplateColumns--min: 200px;"
->
+<dl class="pf-c-description-list pf-m-2-col-on-lg pf-m-3-col-on-xl">
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
@@ -891,12 +875,11 @@ cssPrefix: pf-c-description-list
 
 ```
 
-### Auto-fit, min width modified, responsive grid template columns
+### Horizontal responsive columns
 
 ```html
 <dl
-  class="pf-c-description-list pf-m-auto-fit"
-  style="--pf-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"
+  class="pf-c-description-list pf-m-horizontal pf-m-2-col-on-lg pf-m-3-col-on-xl"
 >
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
@@ -951,12 +934,12 @@ cssPrefix: pf-c-description-list
 
 ```
 
-## Responsive column definitions
-
-### Default responsive columns
+### Responsive horizontal, vertical group layout
 
 ```html
-<dl class="pf-c-description-list pf-m-2-col-on-lg pf-m-3-col-on-xl">
+<dl
+  class="pf-c-description-list pf-m-horizontal pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"
+>
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
@@ -1010,12 +993,12 @@ cssPrefix: pf-c-description-list
 
 ```
 
-### Horizontal responsive columns
+## Auto-column-width
+
+### Default auto columns width
 
 ```html
-<dl
-  class="pf-c-description-list pf-m-horizontal pf-m-2-col-on-lg pf-m-3-col-on-xl"
->
+<dl class="pf-c-description-list pf-m-auto-column-widths pf-m-3-col">
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
@@ -1069,11 +1052,11 @@ cssPrefix: pf-c-description-list
 
 ```
 
-### Responsive horizontal, vertical group layout
+### Horizontal auto column width
 
 ```html
 <dl
-  class="pf-c-description-list pf-m-horizontal pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"
+  class="pf-c-description-list pf-m-horizontal pf-m-auto-column-widths pf-m-2-col-on-lg"
 >
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
@@ -1128,12 +1111,12 @@ cssPrefix: pf-c-description-list
 
 ```
 
-## Auto-column-width
+## Inline grid
 
-### Default auto columns width
+### Default inline grid
 
 ```html
-<dl class="pf-c-description-list pf-m-auto-column-widths pf-m-3-col">
+<dl class="pf-c-description-list pf-m-3-col pf-m-inline-grid">
   <div class="pf-c-description-list__group">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
@@ -1187,74 +1170,27 @@ cssPrefix: pf-c-description-list
 
 ```
 
-### Horizontal auto column width
-
-```html
-<dl
-  class="pf-c-description-list pf-m-horizontal pf-m-auto-column-widths pf-m-2-col-on-lg"
->
-  <div class="pf-c-description-list__group">
-    <dt class="pf-c-description-list__term">
-      <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>
-    </dd>
-  </div>
-  <div class="pf-c-description-list__group">
-    <dt class="pf-c-description-list__term">
-      <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__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__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__text">Annotation</span>
-    </dt>
-    <dd class="pf-c-description-list__description">
-      <div class="pf-c-description-list__text">2 Annotations</div>
-    </dd>
-  </div>
-</dl>
+<!-- ## Auto term with is only supported in FF currently
 
-```
+### Horizontal 2 col auto term width
+```hbs
+{{> 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"}}
+``` -->
 
-## Inline grid
+## With icons
 
-### Default inline grid
+### Icons on terms
 
 ```html
-<dl class="pf-c-description-list pf-m-3-col pf-m-inline-grid">
+<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">Name</span>
+      <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>
@@ -1262,6 +1198,9 @@ 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__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">
@@ -1272,6 +1211,9 @@ 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__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">
@@ -1280,6 +1222,9 @@ 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__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">
@@ -1295,6 +1240,9 @@ 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__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">
@@ -1305,13 +1253,6 @@ cssPrefix: pf-c-description-list
 
 ```
 
-<!-- ## Auto term with is only supported in FF currently
-
-### Horizontal 2 col auto term width
-```hbs
-{{> 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"}}
-``` -->
-
 ## Documentation
 
 ### Accessibility
@@ -1330,12 +1271,13 @@ cssPrefix: pf-c-description-list
 | `.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.                                      |
 | `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}`                                   | `.pf-c-description-list`                 | Modifies the description list component term and description pair to a horizontal layout.                                        |
 | `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}`                                     | `.pf-c-description-list`                 | Modifies the description list component term and description pair to a vertical layout.                                          |
-| `.pf-m-fill-columns`                                                            | `.pf-c-description-list`                 | Modifies the description list groups to fill columns .                                                                           |
+| `.pf-m-fill-columns`                                                            | `.pf-c-description-list`                 | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right.                     |
 | `.pf-m-auto-column-widths`                                                      | `.pf-c-description-list`                 | Modifies the description list to format automatically.                                                                           |
 | `.pf-m-inline-grid`                                                             | `.pf-c-description-list`                 | Modifies the description list display to inline-grid.                                                                            |
 | `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}`                                  | `.pf-c-description-list`                 | Modifies the description list number of columns.                                                                                 |