@patternfly/patternfly 4.166.4 → 4.169.0

package/docs/demos/Tabs/examples/Tabs.md

@@ -340,9 +340,7 @@ section: components
                   aria-labelledby="open-tabs-example-tabs-list-details-title"
                 >
                   <div class="pf-c-description-list__group">
-                    <dt class="pf-c-description-list__term">
-                      <span class="pf-c-description-list__text">Name</span>
-                    </dt>
+                    <dt class="pf-c-description-list__term">Name</dt>
                     <dd class="pf-c-description-list__description">
                       <div
                         class="pf-c-description-list__text"
@@ -350,9 +348,7 @@ section: components
                     </dd>
                   </div>
                   <div class="pf-c-description-list__group">
-                    <dt class="pf-c-description-list__term">
-                      <span class="pf-c-description-list__text">Status</span>
-                    </dt>
+                    <dt class="pf-c-description-list__term">Status</dt>
                     <dd class="pf-c-description-list__description">
                       <div class="pf-c-description-list__text">
                         <div class="pf-l-flex pf-m-space-items-sm">
@@ -368,9 +364,7 @@ section: components
                     </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>
+                    <dt class="pf-c-description-list__term">Namespace</dt>
                     <dd class="pf-c-description-list__description">
                       <div class="pf-c-description-list__text">
                         <div class="pf-l-flex pf-m-space-items-sm">
@@ -387,17 +381,13 @@ section: components
                     </dd>
                   </div>
                   <div class="pf-c-description-list__group">
-                    <dt class="pf-c-description-list__term">
-                      <span class="pf-c-description-list__text">Restart policy</span>
-                    </dt>
+                    <dt class="pf-c-description-list__term">Restart policy</dt>
                     <dd class="pf-c-description-list__description">
                       <div class="pf-c-description-list__text">Always restart</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>
+                    <dt class="pf-c-description-list__term">Labels</dt>
                     <dd class="pf-c-description-list__description">
                       <div class="pf-c-description-list__text">
                         <div class="pf-c-label-group">
@@ -428,43 +418,33 @@ section: components
                     </dd>
                   </div>
                   <div class="pf-c-description-list__group">
-                    <dt class="pf-c-description-list__term">
-                      <span
-                        class="pf-c-description-list__text"
-                      >Active deadline seconds</span>
-                    </dt>
+                    <dt
+                      class="pf-c-description-list__term"
+                    >Active deadline seconds</dt>
                     <dd class="pf-c-description-list__description">
                       <div class="pf-c-description-list__text">Not configured</div>
                     </dd>
                   </div>
                   <div class="pf-c-description-list__group">
-                    <dt class="pf-c-description-list__term">
-                      <span class="pf-c-description-list__text">Tolerations</span>
-                    </dt>
+                    <dt class="pf-c-description-list__term">Tolerations</dt>
                     <dd class="pf-c-description-list__description">
                       <div class="pf-c-description-list__text">stuff</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 IP</span>
-                    </dt>
+                    <dt class="pf-c-description-list__term">Pod IP</dt>
                     <dd class="pf-c-description-list__description">
                       <div class="pf-c-description-list__text">10..345.2.197</div>
                     </dd>
                   </div>
                   <div class="pf-c-description-list__group">
-                    <dt class="pf-c-description-list__term">
-                      <span class="pf-c-description-list__text">Annotations</span>
-                    </dt>
+                    <dt class="pf-c-description-list__term">Annotations</dt>
                     <dd class="pf-c-description-list__description">
                       <div class="pf-c-description-list__text">stuff</div>
                     </dd>
                   </div>
                   <div class="pf-c-description-list__group">
-                    <dt class="pf-c-description-list__term">
-                      <span class="pf-c-description-list__text">Node</span>
-                    </dt>
+                    <dt class="pf-c-description-list__term">Node</dt>
                     <dd class="pf-c-description-list__description">
                       <div class="pf-c-description-list__text">
                         <div class="pf-l-flex pf-m-space-items-sm">
@@ -481,9 +461,7 @@ section: components
                     </dd>
                   </div>
                   <div class="pf-c-description-list__group">
-                    <dt class="pf-c-description-list__term">
-                      <span class="pf-c-description-list__text">Created at</span>
-                    </dt>
+                    <dt class="pf-c-description-list__term">Created at</dt>
                     <dd class="pf-c-description-list__description">
                       <div class="pf-c-description-list__text">
                         <time>Oct 15, 1:51 pm</time>
@@ -920,9 +898,7 @@ section: components
                           aria-label="Pod information list"
                         >
                           <div class="pf-c-description-list__group">
-                            <dt class="pf-c-description-list__term">
-                              <span class="pf-c-description-list__text">Name</span>
-                            </dt>
+                            <dt class="pf-c-description-list__term">Name</dt>
                             <dd class="pf-c-description-list__description">
                               <div
                                 class="pf-c-description-list__text"
@@ -930,9 +906,7 @@ section: components
                             </dd>
                           </div>
                           <div class="pf-c-description-list__group">
-                            <dt class="pf-c-description-list__term">
-                              <span class="pf-c-description-list__text">Status</span>
-                            </dt>
+                            <dt class="pf-c-description-list__term">Status</dt>
                             <dd class="pf-c-description-list__description">
                               <div class="pf-c-description-list__text">
                                 <div class="pf-l-flex pf-m-space-items-sm">
@@ -948,11 +922,7 @@ section: components
                             </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>
+                            <dt class="pf-c-description-list__term">Namespace</dt>
                             <dd class="pf-c-description-list__description">
                               <div class="pf-c-description-list__text">
                                 <div class="pf-l-flex pf-m-space-items-sm">
@@ -969,11 +939,9 @@ section: components
                             </dd>
                           </div>
                           <div class="pf-c-description-list__group">
-                            <dt class="pf-c-description-list__term">
-                              <span
-                                class="pf-c-description-list__text"
-                              >Restart policy</span>
-                            </dt>
+                            <dt
+                              class="pf-c-description-list__term"
+                            >Restart policy</dt>
                             <dd class="pf-c-description-list__description">
                               <div
                                 class="pf-c-description-list__text"
@@ -981,9 +949,7 @@ section: components
                             </dd>
                           </div>
                           <div class="pf-c-description-list__group">
-                            <dt class="pf-c-description-list__term">
-                              <span class="pf-c-description-list__text">Pod IP</span>
-                            </dt>
+                            <dt class="pf-c-description-list__term">Pod IP</dt>
                             <dd class="pf-c-description-list__description">
                               <div
                                 class="pf-c-description-list__text"
@@ -991,11 +957,9 @@ section: components
                             </dd>
                           </div>
                           <div class="pf-c-description-list__group">
-                            <dt class="pf-c-description-list__term">
-                              <span
-                                class="pf-c-description-list__text"
-                              >Active deadline seconds</span>
-                            </dt>
+                            <dt
+                              class="pf-c-description-list__term"
+                            >Active deadline seconds</dt>
                             <dd class="pf-c-description-list__description">
                               <div
                                 class="pf-c-description-list__text"
@@ -1003,11 +967,7 @@ section: components
                             </dd>
                           </div>
                           <div class="pf-c-description-list__group">
-                            <dt class="pf-c-description-list__term">
-                              <span
-                                class="pf-c-description-list__text"
-                              >Created at</span>
-                            </dt>
+                            <dt class="pf-c-description-list__term">Created at</dt>
                             <dd class="pf-c-description-list__description">
                               <div class="pf-c-description-list__text">
                                 <time>Oct 15, 1:51 pm</time>
@@ -1015,9 +975,7 @@ section: components
                             </dd>
                           </div>
                           <div class="pf-c-description-list__group">
-                            <dt class="pf-c-description-list__term">
-                              <span class="pf-c-description-list__text">Node</span>
-                            </dt>
+                            <dt class="pf-c-description-list__term">Node</dt>
                             <dd class="pf-c-description-list__description">
                               <div class="pf-c-description-list__text">
                                 <div class="pf-l-flex pf-m-space-items-sm">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.166.4",
+  "version": "4.169.0",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-reset.css

@@ -9480,9 +9480,14 @@ label.pf-c-check, .pf-c-check__label,
   --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);
@@ -9503,6 +9508,11 @@ label.pf-c-check, .pf-c-check__label,
   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);
 }
@@ -9605,6 +9615,7 @@ label.pf-c-check, .pf-c-check__label,
 }
 
 .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);
@@ -9613,6 +9624,13 @@ label.pf-c-check, .pf-c-check__label,
   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;
@@ -10346,6 +10364,12 @@ label.pf-c-check, .pf-c-check__label,
   --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);
@@ -12633,6 +12657,10 @@ label.pf-c-check, .pf-c-check__label,
   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);
@@ -12644,6 +12672,7 @@ label.pf-c-check, .pf-c-check__label,
 
 .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);
@@ -15656,6 +15685,9 @@ ul.pf-c-list {
   --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;
@@ -24243,6 +24275,7 @@ svg.pf-c-spinner.pf-m-xl {
   --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);
@@ -24284,6 +24317,13 @@ svg.pf-c-spinner.pf-m-xl {
   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);
 }
@@ -27135,47 +27175,35 @@ svg.pf-c-spinner.pf-m-xl {
 }
 
 .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: "";
-  }
-}
-@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);
-  }
+.pf-c-truncate__start + .pf-c-truncate__end {
+  overflow: visible;
+  direction: ltr;
 }
-@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/patternfly.css

@@ -9602,9 +9602,14 @@ label.pf-c-check, .pf-c-check__label,
   --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);
@@ -9625,6 +9630,11 @@ label.pf-c-check, .pf-c-check__label,
   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);
 }
@@ -9727,6 +9737,7 @@ label.pf-c-check, .pf-c-check__label,
 }
 
 .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);
@@ -9735,6 +9746,13 @@ label.pf-c-check, .pf-c-check__label,
   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;
@@ -10468,6 +10486,12 @@ label.pf-c-check, .pf-c-check__label,
   --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);
@@ -12755,6 +12779,10 @@ label.pf-c-check, .pf-c-check__label,
   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);
@@ -12766,6 +12794,7 @@ label.pf-c-check, .pf-c-check__label,
 
 .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);
@@ -15778,6 +15807,9 @@ ul.pf-c-list {
   --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;
@@ -24365,6 +24397,7 @@ svg.pf-c-spinner.pf-m-xl {
   --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);
@@ -24406,6 +24439,13 @@ svg.pf-c-spinner.pf-m-xl {
   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);
 }
@@ -27257,47 +27297,35 @@ svg.pf-c-spinner.pf-m-xl {
 }
 
 .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: "";
-  }
-}
-@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);
-  }
+.pf-c-truncate__start + .pf-c-truncate__end {
+  overflow: visible;
+  direction: ltr;
 }
-@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;
   }