@patternfly/patternfly 4.142.0 → 4.144.2

package/RELEASE-NOTES.md

@@ -3,6 +3,46 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+
+## 2021.13 release notes (2021-10-08)
+Packages released:
+- [@patternfly/patternfly@v4.144.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.144.2)
+
+### Components
+- **Backdrop:** Added var for position to allow customization ([#4391](https://github.com/patternfly/patternfly/pull/4391))
+- **Banner:** Added link style ([#4383](https://github.com/patternfly/patternfly/pull/4383))
+- **Card:**
+  * Fixed demo image paths ([#4400](https://github.com/patternfly/patternfly/pull/4400))
+  * Updated log view and event view demos ([#4371](https://github.com/patternfly/patternfly/pull/4371))
+- **Drag drop:**
+  * Added drag drop ([#4398](https://github.com/patternfly/patternfly/pull/4398))
+  * Moved drag drop styles into component ([#4404](https://github.com/patternfly/patternfly/pull/4404))
+- **Dual list selector:** Added support for disabled items ([#4361](https://github.com/patternfly/patternfly/pull/4361))
+- **Jump links:** Moved text into expandable toggle ([#4352](https://github.com/patternfly/patternfly/pull/4352))
+- **Label:** Added compact variant ([#4386](https://github.com/patternfly/patternfly/pull/4386))
+- **Log viewer:**
+  * Preserved white space in log viewer text ([#4397](https://github.com/patternfly/patternfly/pull/4397))
+  * Made text fill available space in container ([#4406](https://github.com/patternfly/patternfly/pull/4406))
+- **Masthead:** Updated column-end ([#4418](https://github.com/patternfly/patternfly/pull/4418))
+- **Masthead, description list**: Fixed undefined vars ([#4421](https://github.com/patternfly/patternfly/pull/4421))
+- **Menu:** Added scrollable and plain modifiers ([#4392](https://github.com/patternfly/patternfly/pull/4392))
+- **Nav:** Added support for menu component as flyout ([#4417](https://github.com/patternfly/patternfly/pull/4417))
+- **Progress stepper:** Added help text for popover ([#4381](https://github.com/patternfly/patternfly/pull/4381))
+- **Radio, checkbox, form:** Corrected label alignment ([#4375](https://github.com/patternfly/patternfly/pull/4375))
+- **Select:**
+  * Added support for placeholder in toggle ([#4377](https://github.com/patternfly/patternfly/pull/4377))
+  * Removed double invalid icon on invalid typeahead ([#4385](https://github.com/patternfly/patternfly/pull/4385))
+- **Table:**
+  * Added fixed columns ([#4326](https://github.com/patternfly/patternfly/pull/4326))
+  * Addressed followup compact tree issues ([#4389](https://github.com/patternfly/patternfly/pull/4389))
+- **Text input group:** Added component ([#4408](https://github.com/patternfly/patternfly/pull/4408))
+- **Toolbar:** Adjusted demo heights, removed dupe demo ([#4373](https://github.com/patternfly/patternfly/pull/4373))
+
+### Other
+- **Deps:** Update dependency theme-patternfly-org to v0.7.3 ([#4275](https://github.com/patternfly/patternfly/pull/4275))
+- **Utilities:** Added breakpoint options to docs ([#4409](https://github.com/patternfly/patternfly/pull/4409))
+
+
 ## 2021.12 release notes (2021-09-14)
 Packages released:
 - [@patternfly/patternfly@v4.135.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.135.2)

package/components/DescriptionList/description-list.css

@@ -19,6 +19,8 @@
   --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
   --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
   --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
+  --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
+  --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
   --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
   --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
   --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
@@ -32,12 +34,6 @@
   column-gap: var(--pf-c-description-list--ColumnGap);
   grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
 }
-@media screen and (min-width: 768px) {
-  .pf-c-description-list {
-    --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
-    --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
-  }
-}
 .pf-c-description-list[class*=pf-m-horizontal] {
   --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
 }

package/components/DescriptionList/description-list.scss

@@ -31,16 +31,13 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
   --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
   --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width); // use --pf-c-description-list__term--width here as it is re-defined on line 45
   --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
+  --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
+  --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
 
   // auto-fit
   --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: #{pf-size-prem(250px)};
   --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
 
-  @media screen and (min-width: $pf-global--breakpoint--md) {
-    --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
-    --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
-  }
-
   // help text
   --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
   --pf-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);

package/components/Masthead/masthead.css

@@ -130,7 +130,7 @@
   --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
   --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
   --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
   --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
   --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
   --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -207,7 +207,7 @@
 }
 .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
   --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor);
-  --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
+  --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor);
 }
 .pf-c-masthead .pf-c-context-selector {
   --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
@@ -311,7 +311,7 @@
   --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
   --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
   --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
   --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
   --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
   --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -368,7 +368,7 @@
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -428,7 +428,7 @@
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -488,7 +488,7 @@
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -548,7 +548,7 @@
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -608,7 +608,7 @@
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);

package/components/Masthead/masthead.scss

@@ -11,7 +11,7 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
   --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
   --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
   --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
   --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
   --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -214,7 +214,7 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
     &.pf-m-full-height {
       --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor);
-      --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
+      --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor);
     }
   }
 

package/components/Table/table-scrollable.css

@@ -0,0 +1,53 @@
+.pf-c-table {
+  --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
+  --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
+  --pf-c-table__sticky-column--Left: 0;
+  --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
+  --pf-c-table__sticky-column--Top: 0;
+  --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
+  --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
+}
+.pf-c-table .pf-c-table__sticky-column {
+  position: sticky;
+  left: var(--pf-c-table__sticky-column--Left);
+  z-index: var(--pf-c-table__sticky-column--ZIndex);
+  min-width: var(--pf-c-table__sticky-column--MinWidth);
+  background-color: var(--pf-c-table__sticky-column--BackgroundColor);
+  background-clip: padding-box;
+}
+.pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+  border-right: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth) solid var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
+}
+.pf-c-table.pf-m-sticky-header {
+  --pf-c-table--cell--Overflow: visible;
+}
+.pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
+  z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
+}
+
+.pf-c-scroll-outer-wrapper {
+  --pf-c-scroll-outer-wrapper--MinHeight: 25rem;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.pf-c-scroll-inner-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+}

package/components/Table/table-scrollable.scss

@@ -0,0 +1,60 @@
+.pf-c-table {
+  --pf-c-table__sticky-column--cell-min-width--base: #{pf-size-prem(200px)};
+  --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
+  --pf-c-table__sticky-column--Left: 0;
+  --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
+  --pf-c-table__sticky-column--Top: 0;
+  --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
+  --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
+
+  .pf-c-table__sticky-column {
+    position: sticky;
+    left: var(--pf-c-table__sticky-column--Left);
+    z-index: var(--pf-c-table__sticky-column--ZIndex);
+    min-width: var(--pf-c-table__sticky-column--MinWidth);
+    background-color: var(--pf-c-table__sticky-column--BackgroundColor);
+    background-clip: padding-box;
+
+    &.pf-m-border-right::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      content: "";
+      border-right: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth) solid var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
+    }
+  }
+
+  &.pf-m-sticky-header {
+    --pf-c-table--cell--Overflow: visible;
+
+    thead {
+      .pf-c-table__sticky-column {
+        z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
+      }
+    }
+  }
+}
+
+.pf-c-scroll-outer-wrapper {
+  --pf-c-scroll-outer-wrapper--MinHeight: #{pf-size-prem(400px)};
+
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.pf-c-scroll-inner-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+}

package/components/TextInputGroup/text-input-group.css

@@ -0,0 +1,124 @@
+.pf-c-text-input-group {
+  --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
+  --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--BorderColor--200);
+  --pf-c-text-input-group--hover__text--after--BorderBottomColor: var(--pf-global--primary-color--100);
+  --pf-c-text-input-group__text--focus-within--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
+  --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group__text-input--PaddingTop: var(--pf-global--spacer--form-element);
+  --pf-c-text-input-group__text-input--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
+  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
+  --pf-c-text-input-group__text-input--MinWidth: 12ch;
+  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
+  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
+  --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
+  --pf-c-text-input-group__icon--TranslateY: -50%;
+  --pf-c-text-input-group__utilities--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group__utilities--MarginLeft: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
+  position: relative;
+  display: flex;
+}
+.pf-c-text-input-group:hover {
+  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
+}
+.pf-c-text-input-group.pf-m-icon {
+  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-c-text-input-group--m-icon__text-input--PaddingLeft);
+}
+
+.pf-c-text-input-group__main {
+  display: flex;
+  flex: 1;
+  gap: var(--pf-global--spacer--sm);
+  min-width: 0;
+}
+.pf-c-text-input-group__main > :first-child:not(.pf-c-text-input-group__text) {
+  margin-left: var(--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft);
+}
+.pf-c-text-input-group__main .pf-c-chip-group {
+  overflow: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.pf-c-text-input-group__main .pf-c-chip-group::-webkit-scrollbar {
+  display: none;
+}
+.pf-c-text-input-group__main .pf-c-chip-group,
+.pf-c-text-input-group__main .pf-c-chip-group__list {
+  flex-wrap: nowrap;
+}
+
+.pf-c-text-input-group__text {
+  display: inline-grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: "text-input";
+  flex: 1;
+}
+.pf-c-text-input-group__text::before, .pf-c-text-input-group__text::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+}
+.pf-c-text-input-group__text::before {
+  border: var(--pf-c-text-input-group__text--before--BorderWidth) solid var(--pf-c-text-input-group__text--before--BorderColor);
+}
+.pf-c-text-input-group__text::after {
+  border-bottom: var(--pf-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-c-text-input-group__text--after--BorderBottomColor);
+}
+.pf-c-text-input-group__text:hover, .pf-c-text-input-group__text:focus-within {
+  --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group__text--hover__icon--Color);
+}
+.pf-c-text-input-group__text:focus-within {
+  --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomWidth);
+  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomColor);
+}
+
+.pf-c-text-input-group__icon {
+  position: absolute;
+  top: 50%;
+  left: var(--pf-c-text-input-group__icon--Left);
+  color: var(--pf-c-text-input-group__icon--Color);
+  transform: translateY(var(--pf-c-text-input-group__icon--TranslateY));
+}
+
+.pf-c-text-input-group__text-input {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  width: 100%;
+  min-width: var(--pf-c-text-input-group__text-input--MinWidth);
+  padding: var(--pf-c-text-input-group__text-input--PaddingTop) var(--pf-c-text-input-group__text-input--PaddingRight) var(--pf-c-text-input-group__text-input--PaddingBottom) var(--pf-c-text-input-group__text-input--PaddingLeft);
+  border: 0;
+}
+.pf-c-text-input-group__text-input, .pf-c-text-input-group__text-input.pf-m-hint {
+  grid-area: text-input;
+}
+.pf-c-text-input-group__text-input.pf-m-hint {
+  color: var(--pf-c-text-input-group__text-input--m-hint--Color);
+}
+
+.pf-c-text-input-group__utilities {
+  display: flex;
+  align-items: center;
+  margin-right: var(--pf-c-text-input-group__utilities--MarginRight);
+  margin-left: var(--pf-c-text-input-group__utilities--MarginLeft);
+}
+.pf-c-text-input-group__utilities > * + * {
+  margin-left: var(--pf-c-text-input-group__utilities--child--MarginLeft);
+}
+.pf-c-text-input-group__utilities .pf-c-button {
+  --pf-c-button--PaddingRight: var(--pf-c-text-input-group__utilities--c-button--PaddingRight);
+  --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
+}

package/components/TextInputGroup/text-input-group.scss

@@ -0,0 +1,157 @@
+.pf-c-text-input-group {
+  // Base border
+  --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
+
+  // Bottom border
+  --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--BorderColor--200);
+  --pf-c-text-input-group--hover__text--after--BorderBottomColor: var(--pf-global--primary-color--100);
+  --pf-c-text-input-group__text--focus-within--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
+
+  // Main
+  --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-global--spacer--sm);
+
+  // Search input
+  --pf-c-text-input-group__text-input--PaddingTop: var(--pf-global--spacer--form-element);
+  --pf-c-text-input-group__text-input--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
+  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
+  --pf-c-text-input-group__text-input--MinWidth: 12ch;
+  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200); // matches placeholder text color
+
+  // Icon
+  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
+  --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
+  --pf-c-text-input-group__icon--TranslateY: -50%;
+
+  // Utilities
+  --pf-c-text-input-group__utilities--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group__utilities--MarginLeft: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
+
+  position: relative;
+  display: flex;
+
+  &:hover {
+    --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
+  }
+
+  &.pf-m-icon {
+    --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-c-text-input-group--m-icon__text-input--PaddingLeft);
+  }
+}
+
+.pf-c-text-input-group__main {
+  display: flex;
+  flex: 1;
+  gap: var(--pf-global--spacer--sm);
+  min-width: 0;
+
+  > :first-child:not(.pf-c-text-input-group__text) {
+    margin-left: var(--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft);
+  }
+
+  // Scroll chip group horizontally if there is overflow
+  .pf-c-chip-group {
+    overflow: auto;
+
+    // Hide scrollbar for IE, Edge and Firefox
+    -ms-overflow-style: none;  // IE and Edge
+    scrollbar-width: none;  // Firefox
+
+    // Hide scrollbar for Chrome, Safari and Opera
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .pf-c-chip-group,
+  .pf-c-chip-group__list {
+    flex-wrap: nowrap;
+  }
+}
+
+.pf-c-text-input-group__text {
+  display: inline-grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: "text-input";
+  flex: 1;
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    content: "";
+  }
+
+  &::before {
+    border: var(--pf-c-text-input-group__text--before--BorderWidth) solid var(--pf-c-text-input-group__text--before--BorderColor);
+  }
+
+  &::after {
+    border-bottom: var(--pf-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-c-text-input-group__text--after--BorderBottomColor);
+  }
+
+  &:hover,
+  &:focus-within {
+    --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group__text--hover__icon--Color);
+  }
+
+  &:focus-within {
+    --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomWidth);
+    --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomColor);
+  }
+}
+
+.pf-c-text-input-group__icon {
+  position: absolute;
+  top: 50%;
+  left: var(--pf-c-text-input-group__icon--Left);
+  color: var(--pf-c-text-input-group__icon--Color);
+  transform: translateY(var(--pf-c-text-input-group__icon--TranslateY));
+}
+
+.pf-c-text-input-group__text-input {
+  @include pf-text-overflow;
+
+  position: relative;
+  width: 100%;
+  min-width: var(--pf-c-text-input-group__text-input--MinWidth);
+  padding: var(--pf-c-text-input-group__text-input--PaddingTop) var(--pf-c-text-input-group__text-input--PaddingRight) var(--pf-c-text-input-group__text-input--PaddingBottom) var(--pf-c-text-input-group__text-input--PaddingLeft);
+  border: 0;
+
+  &,
+  &.pf-m-hint {
+    grid-area: text-input;
+  }
+
+  &.pf-m-hint {
+    color: var(--pf-c-text-input-group__text-input--m-hint--Color);
+  }
+}
+
+.pf-c-text-input-group__utilities {
+  display: flex;
+  align-items: center;
+  margin-right: var(--pf-c-text-input-group__utilities--MarginRight);
+  margin-left: var(--pf-c-text-input-group__utilities--MarginLeft);
+
+  > * + * {
+    margin-left: var(--pf-c-text-input-group__utilities--child--MarginLeft);
+  }
+
+  .pf-c-button {
+    --pf-c-button--PaddingRight: var(--pf-c-text-input-group__utilities--c-button--PaddingRight);
+    --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
+  }
+}

package/components/_all.scss

@@ -74,8 +74,10 @@
 @import "./TabContent/tab-content.scss";
 @import "./Table/table-grid.scss";
 @import "./Table/table.scss";
+@import "./Table/table-scrollable.scss";
 @import "./Table/table-tree-view.scss";
 @import "./Tabs/tabs.scss";
+@import "./TextInputGroup/text-input-group.scss";
 @import "./Tile/tile.scss";
 @import "./Title/title.scss";
 @import "./ToggleGroup/toggle-group.scss";

package/docs/components/Table/examples/Table.css

@@ -8,3 +8,7 @@
   left: 440px;
   top: -18px;
 }
+
+#ws-core-c-table-sticky-columns-and-header .ws-preview-html {
+  height: 600px;
+}