@patternfly/react-styles 4.27.0 → 4.30.0

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 4.30.0 (2021-12-08)
+
+
+### Features
+
+* **DualListSelector:** add composable tree example ([#6652](https://github.com/patternfly/patternfly-react/issues/6652)) ([5fe977b](https://github.com/patternfly/patternfly-react/commit/5fe977becb5dea615724abf846f315e50931c188))
+
+
+
+
+
+## 4.29.1 (2021-12-07)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+# 4.29.0 (2021-12-06)
+
+
+### Features
+
+* **Card:** Add disabled card and clean up props ([#6659](https://github.com/patternfly/patternfly-react/issues/6659)) ([86f225a](https://github.com/patternfly/patternfly-react/commit/86f225ab2e02d617e2d380c4a7f7593037c50e84))
+
+
+
+
+
+# 4.28.0 (2021-12-06)
+
+
+### Features
+
+* **MenuToggle:** add plain with text variant ([#6627](https://github.com/patternfly/patternfly-react/issues/6627)) ([1f4ca5e](https://github.com/patternfly/patternfly-react/commit/1f4ca5e36d7077da3ff3e6918874048c784216e0))
+
+
+
+
+
 # 4.27.0 (2021-12-06)
 
 

package/css/components/DescriptionList/description-list.css

@@ -104,6 +104,20 @@
 .pf-c-description-list.pf-m-fluid {
   --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
 }
+.pf-c-description-list.pf-m-fill-columns {
+  display: block;
+  column-count: var(--pf-c-description-list--GridTemplateColumns--count);
+  margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
+}
+.pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
+  display: inline-grid;
+  width: 100%;
+  margin-bottom: var(--pf-c-description-list--RowGap);
+  break-inside: avoid;
+  page-break-inside: avoid;
+  -webkit-column-break-inside: avoid;
+  -moz-column-break-inside: avoid;
+}
 
 .pf-c-description-list__group {
   display: grid;

package/css/components/DescriptionList/description-list.d.ts

@@ -11,6 +11,7 @@ declare const _default: {
     "autoFit": "pf-m-auto-fit",
     "compact": "pf-m-compact",
     "fluid": "pf-m-fluid",
+    "fillColumns": "pf-m-fill-columns",
     "helpText": "pf-m-help-text",
     "1Col": "pf-m-1-col",
     "2Col": "pf-m-2-col",

package/css/components/DescriptionList/description-list.js

@@ -13,6 +13,7 @@ exports.default = {
     "autoFit": "pf-m-auto-fit",
     "compact": "pf-m-compact",
     "fluid": "pf-m-fluid",
+    "fillColumns": "pf-m-fill-columns",
     "helpText": "pf-m-help-text",
     "1Col": "pf-m-1-col",
     "2Col": "pf-m-2-col",

package/css/components/Dropdown/dropdown.css

@@ -191,24 +191,27 @@
   border-color: var(--pf-c-dropdown__toggle--before--BorderTopColor) var(--pf-c-dropdown__toggle--before--BorderRightColor) var(--pf-c-dropdown__toggle--before--BorderBottomColor) var(--pf-c-dropdown__toggle--before--BorderLeftColor);
 }
 .pf-c-dropdown__toggle.pf-m-disabled, .pf-c-dropdown__toggle:disabled {
+  --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
   pointer-events: none;
 }
-.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled:not(.pf-m-plain) {
+.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--disabled--BackgroundColor);
 }
-.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before {
+.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text::before {
   border: 0;
 }
 .pf-c-dropdown__toggle.pf-m-split-button {
   padding: 0;
 }
+.pf-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
+  background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
+}
 .pf-c-dropdown__toggle.pf-m-split-button > * {
   position: relative;
   padding-top: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingTop);
   padding-right: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingRight);
   padding-bottom: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom);
   padding-left: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft);
-  background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
 }
 .pf-c-dropdown__toggle.pf-m-split-button > *:first-child {
   --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft);
@@ -232,6 +235,9 @@
 .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
   border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
 }
+.pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary[disabled] {
+  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
+}
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
   display: flex;
   align-items: center;
@@ -289,13 +295,13 @@
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
   border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
 }
-.pf-c-dropdown__toggle.pf-m-plain {
+.pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
   --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
   display: inline-block;
   color: var(--pf-c-dropdown__toggle--m-plain--Color);
 }
-.pf-c-dropdown__toggle.pf-m-plain > * {
+.pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) > * {
   line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
 }
 .pf-c-dropdown__toggle.pf-m-plain::before {
@@ -308,12 +314,12 @@
   --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
 }
 .pf-c-dropdown__toggle.pf-m-primary {
-  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
-  --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
   border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
 }
-.pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
+.pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled):not([disabled]) {
   --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
+  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
+  --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
 }
 .pf-c-dropdown__toggle.pf-m-primary::before {
   border: 0;
@@ -327,15 +333,17 @@
 .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
 }
-.pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
+.pf-c-dropdown__toggle.pf-m-primary .pf-m-expanded > :not(.pf-m-disabled):not([disabled]) {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
 }
 .pf-c-dropdown__toggle.pf-m-secondary {
+  border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
+}
+.pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled]) {
   --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
-  border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
 }
-.pf-c-dropdown__toggle.pf-m-secondary::before {
+.pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])::before {
   border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
   border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
 }

package/css/components/Dropdown/dropdown.d.ts

@@ -24,6 +24,7 @@ declare const _default: {
     "action": "pf-m-action",
     "disabled": "pf-m-disabled",
     "plain": "pf-m-plain",
+    "text": "pf-m-text",
     "splitButton": "pf-m-split-button",
     "primary": "pf-m-primary",
     "active": "pf-m-active",
@@ -43,8 +44,7 @@ declare const _default: {
     "alignLeftOn_2xl": "pf-m-align-left-on-2xl",
     "ariaDisabled": "pf-m-aria-disabled",
     "icon": "pf-m-icon",
-    "description": "pf-m-description",
-    "text": "pf-m-text"
+    "description": "pf-m-description"
   }
 };
 export default _default;

package/css/components/Dropdown/dropdown.js

@@ -26,6 +26,7 @@ exports.default = {
     "action": "pf-m-action",
     "disabled": "pf-m-disabled",
     "plain": "pf-m-plain",
+    "text": "pf-m-text",
     "splitButton": "pf-m-split-button",
     "primary": "pf-m-primary",
     "active": "pf-m-active",
@@ -45,7 +46,6 @@ exports.default = {
     "alignLeftOn_2xl": "pf-m-align-left-on-2xl",
     "ariaDisabled": "pf-m-aria-disabled",
     "icon": "pf-m-icon",
-    "description": "pf-m-description",
-    "text": "pf-m-text"
+    "description": "pf-m-description"
   }
 };

package/css/components/Form/form.css

@@ -100,7 +100,7 @@
 .pf-c-form.pf-m-horizontal.pf-m-align-right .pf-c-form__label {
   text-align: right;
 }
-@media (min-width: 768px) {
+@media screen and (min-width: 768px) {
   .pf-c-form.pf-m-horizontal {
     --pf-c-form__group-label--PaddingBottom: 0;
   }
@@ -120,6 +120,126 @@
     grid-column: 2;
   }
 }
+@media screen and (min-width: 0) {
+  .pf-c-form.pf-m-horizontal-on-xs {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-form.pf-m-horizontal-on-sm {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-form.pf-m-horizontal-on-md {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-form.pf-m-horizontal-on-lg {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-form.pf-m-horizontal-on-xl {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-form.pf-m-horizontal-on-2xl {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
 .pf-c-form.pf-m-limit-width {
   max-width: var(--pf-c-form--m-limit-width--MaxWidth);
 }

package/css/components/Form/form.d.ts

@@ -31,6 +31,12 @@ declare const _default: {
     "horizontal": "pf-m-horizontal",
     "alignRight": "pf-m-align-right",
     "noPaddingTop": "pf-m-no-padding-top",
+    "horizontalOnXs": "pf-m-horizontal-on-xs",
+    "horizontalOnSm": "pf-m-horizontal-on-sm",
+    "horizontalOnMd": "pf-m-horizontal-on-md",
+    "horizontalOnLg": "pf-m-horizontal-on-lg",
+    "horizontalOnXl": "pf-m-horizontal-on-xl",
+    "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
     "limitWidth": "pf-m-limit-width",
     "action": "pf-m-action",
     "info": "pf-m-info",

package/css/components/Form/form.js

@@ -33,6 +33,12 @@ exports.default = {
     "horizontal": "pf-m-horizontal",
     "alignRight": "pf-m-align-right",
     "noPaddingTop": "pf-m-no-padding-top",
+    "horizontalOnXs": "pf-m-horizontal-on-xs",
+    "horizontalOnSm": "pf-m-horizontal-on-sm",
+    "horizontalOnMd": "pf-m-horizontal-on-md",
+    "horizontalOnLg": "pf-m-horizontal-on-lg",
+    "horizontalOnXl": "pf-m-horizontal-on-xl",
+    "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
     "limitWidth": "pf-m-limit-width",
     "action": "pf-m-action",
     "info": "pf-m-info",

package/css/components/MultipleFileUpload/multiple-file-upload.css

@@ -0,0 +1,180 @@
+.pf-c-multiple-file-upload {
+  --pf-c-multiple-file-upload--GridTemplateColumns: 1fr;
+  --pf-c-multiple-file-upload--Gap: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--TextAlign: center;
+  --pf-c-multiple-file-upload__main--GridTemplateColumns: auto;
+  --pf-c-multiple-file-upload__main--GridTemplateRows: auto;
+  --pf-c-multiple-file-upload__main--GridTemplateAreas:
+    "title"
+    "upload"
+    "info";
+  --pf-c-multiple-file-upload__main--Gap: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__main--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-global--spacer--xl);
+  --pf-c-multiple-file-upload__main--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-multiple-file-upload__main--BorderStyle: dashed;
+  --pf-c-multiple-file-upload__main--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-multiple-file-upload__title--Display: grid;
+  --pf-c-multiple-file-upload__title--GridTemplateColumns: auto;
+  --pf-c-multiple-file-upload__title--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__title-icon--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__title-text-separator--Display: block;
+  --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__info--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-multiple-file-upload__info--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__info--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
+  --pf-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-global--palette--blue-50);
+  --pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
+  --pf-c-multiple-file-upload--m-horizontal__main--TextAlign: left;
+  --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
+  --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
+    "title upload"
+    "info upload";
+  --pf-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--2xl);
+  --pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
+  --pf-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-global--spacer--xs);
+  --pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
+  --pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
+  --pf-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
+  --pf-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
+  --pf-c-multiple-file-upload__status-progress--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__status-progress-icon--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
+  --pf-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
+  --pf-c-multiple-file-upload__status-item--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__status-item--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-multiple-file-upload__status-item--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-multiple-file-upload__status-item-icon--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
+  --pf-c-multiple-file-upload__status-item-progress--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-global--primary-color--100);
+  --pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
+  display: grid;
+  gap: var(--pf-c-multiple-file-upload--Gap);
+  grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
+}
+.pf-c-multiple-file-upload.pf-m-horizontal {
+  --pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
+  --pf-c-multiple-file-upload__main--TextAlign: var(--pf-c-multiple-file-upload--m-horizontal__main--TextAlign);
+  --pf-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
+  --pf-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
+  --pf-c-multiple-file-upload__main--Gap: var(--pf-c-multiple-file-upload--m-horizontal__main--Gap);
+  --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
+  --pf-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
+  --pf-c-multiple-file-upload__title--Gap: var(--pf-c-multiple-file-upload--m-horizontal__title--Gap);
+  --pf-c-multiple-file-upload__title-text-separator--Display: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
+  --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
+  --pf-c-multiple-file-upload__info--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__info--MarginTop);
+}
+.pf-c-multiple-file-upload.pf-m-drag-over {
+  --pf-c-multiple-file-upload__main--BorderStyle: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderStyle);
+  --pf-c-multiple-file-upload__main--BorderColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderColor);
+  --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
+  --pf-c-multiple-file-upload__title-icon--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
+  --pf-c-multiple-file-upload__title-text--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color);
+  --pf-c-multiple-file-upload__info--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__info--Color);
+}
+
+.pf-c-multiple-file-upload__main {
+  display: grid;
+  padding: var(--pf-c-multiple-file-upload__main--PaddingTop) var(--pf-c-multiple-file-upload__main--PaddingRight) var(--pf-c-multiple-file-upload__main--PaddingBottom) var(--pf-c-multiple-file-upload__main--PaddingLeft);
+  text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
+  background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
+  border: var(--pf-c-multiple-file-upload__main--BorderWidth) var(--pf-c-multiple-file-upload__main--BorderStyle) var(--pf-c-multiple-file-upload__main--BorderColor);
+  grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
+  grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
+  grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
+  gap: var(--pf-c-multiple-file-upload__main--Gap);
+}
+
+.pf-c-multiple-file-upload__title {
+  display: var(--pf-c-multiple-file-upload__title--Display);
+  grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__title--Gap);
+  grid-area: title;
+}
+
+.pf-c-multiple-file-upload__title-icon {
+  color: var(--pf-c-multiple-file-upload__title-icon--Color);
+}
+
+.pf-c-multiple-file-upload__title-text {
+  color: var(--pf-c-multiple-file-upload__title-text--Color, inherit);
+}
+
+.pf-c-multiple-file-upload__title-text-separator {
+  display: var(--pf-c-multiple-file-upload__title-text-separator--Display);
+  margin-top: var(--pf-c-multiple-file-upload__title-text-separator--MarginTop);
+}
+
+.pf-c-multiple-file-upload__upload {
+  grid-area: upload;
+}
+
+.pf-c-multiple-file-upload__info {
+  grid-area: info;
+  margin-top: var(--pf-c-multiple-file-upload__info--MarginTop);
+  font-size: var(--pf-c-multiple-file-upload__info--FontSize);
+  color: var(--pf-c-multiple-file-upload__info--Color);
+}
+
+.pf-c-multiple-file-upload__status,
+.pf-c-multiple-file-upload__status-item-main {
+  min-width: 0;
+}
+
+.pf-c-multiple-file-upload__status-progress {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-progress--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-progress--Gap);
+}
+
+.pf-c-multiple-file-upload__status-progress-icon {
+  color: var(--pf-c-multiple-file-upload__status-progress-icon--Color);
+}
+
+.pf-c-multiple-file-upload__status-item {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-item--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-item--Gap);
+  padding-top: var(--pf-c-multiple-file-upload__status-item--PaddingTop);
+  padding-bottom: var(--pf-c-multiple-file-upload__status-item--PaddingBottom);
+  border-bottom: var(--pf-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-c-multiple-file-upload__status-item--BorderColor);
+}
+.pf-c-multiple-file-upload__status-item:first-child {
+  --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-c-multiple-file-upload__status-item--first-child--PaddingTop);
+}
+
+.pf-c-multiple-file-upload__status-item-icon {
+  color: var(--pf-c-multiple-file-upload__status-item-icon--Color);
+}
+
+.pf-c-multiple-file-upload__status-item-close {
+  margin-top: var(--pf-c-multiple-file-upload__status-item-close--MarginTop);
+}
+
+.pf-c-multiple-file-upload__status-item-progress {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-item-progress--Gap);
+}
+
+.pf-c-multiple-file-upload__status-item-progress-text {
+  color: var(--pf-c-multiple-file-upload__status-item-progress-text--Color);
+}
+
+.pf-c-multiple-file-upload__status-item-progress-size {
+  color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
+}

package/css/components/MultipleFileUpload/multiple-file-upload.d.ts

@@ -0,0 +1,26 @@
+import './multiple-file-upload.css';
+declare const _default: {
+  "modifiers": {
+    "horizontal": "pf-m-horizontal",
+    "dragOver": "pf-m-drag-over"
+  },
+  "multipleFileUpload": "pf-c-multiple-file-upload",
+  "multipleFileUploadInfo": "pf-c-multiple-file-upload__info",
+  "multipleFileUploadMain": "pf-c-multiple-file-upload__main",
+  "multipleFileUploadStatus": "pf-c-multiple-file-upload__status",
+  "multipleFileUploadStatusItem": "pf-c-multiple-file-upload__status-item",
+  "multipleFileUploadStatusItemClose": "pf-c-multiple-file-upload__status-item-close",
+  "multipleFileUploadStatusItemIcon": "pf-c-multiple-file-upload__status-item-icon",
+  "multipleFileUploadStatusItemMain": "pf-c-multiple-file-upload__status-item-main",
+  "multipleFileUploadStatusItemProgress": "pf-c-multiple-file-upload__status-item-progress",
+  "multipleFileUploadStatusItemProgressSize": "pf-c-multiple-file-upload__status-item-progress-size",
+  "multipleFileUploadStatusItemProgressText": "pf-c-multiple-file-upload__status-item-progress-text",
+  "multipleFileUploadStatusProgress": "pf-c-multiple-file-upload__status-progress",
+  "multipleFileUploadStatusProgressIcon": "pf-c-multiple-file-upload__status-progress-icon",
+  "multipleFileUploadTitle": "pf-c-multiple-file-upload__title",
+  "multipleFileUploadTitleIcon": "pf-c-multiple-file-upload__title-icon",
+  "multipleFileUploadTitleText": "pf-c-multiple-file-upload__title-text",
+  "multipleFileUploadTitleTextSeparator": "pf-c-multiple-file-upload__title-text-separator",
+  "multipleFileUploadUpload": "pf-c-multiple-file-upload__upload"
+};
+export default _default;

package/css/components/MultipleFileUpload/multiple-file-upload.js

@@ -0,0 +1,27 @@
+"use strict";
+exports.__esModule = true;
+require('./multiple-file-upload.css');
+exports.default = {
+  "modifiers": {
+    "horizontal": "pf-m-horizontal",
+    "dragOver": "pf-m-drag-over"
+  },
+  "multipleFileUpload": "pf-c-multiple-file-upload",
+  "multipleFileUploadInfo": "pf-c-multiple-file-upload__info",
+  "multipleFileUploadMain": "pf-c-multiple-file-upload__main",
+  "multipleFileUploadStatus": "pf-c-multiple-file-upload__status",
+  "multipleFileUploadStatusItem": "pf-c-multiple-file-upload__status-item",
+  "multipleFileUploadStatusItemClose": "pf-c-multiple-file-upload__status-item-close",
+  "multipleFileUploadStatusItemIcon": "pf-c-multiple-file-upload__status-item-icon",
+  "multipleFileUploadStatusItemMain": "pf-c-multiple-file-upload__status-item-main",
+  "multipleFileUploadStatusItemProgress": "pf-c-multiple-file-upload__status-item-progress",
+  "multipleFileUploadStatusItemProgressSize": "pf-c-multiple-file-upload__status-item-progress-size",
+  "multipleFileUploadStatusItemProgressText": "pf-c-multiple-file-upload__status-item-progress-text",
+  "multipleFileUploadStatusProgress": "pf-c-multiple-file-upload__status-progress",
+  "multipleFileUploadStatusProgressIcon": "pf-c-multiple-file-upload__status-progress-icon",
+  "multipleFileUploadTitle": "pf-c-multiple-file-upload__title",
+  "multipleFileUploadTitleIcon": "pf-c-multiple-file-upload__title-icon",
+  "multipleFileUploadTitleText": "pf-c-multiple-file-upload__title-text",
+  "multipleFileUploadTitleTextSeparator": "pf-c-multiple-file-upload__title-text-separator",
+  "multipleFileUploadUpload": "pf-c-multiple-file-upload__upload"
+};

package/css/components/Table/table.css

@@ -394,9 +394,14 @@
   outline-offset: var(--pf-c-table--thead--m-nested-column-header--button--OutlineOffset);
 }
 .pf-c-table thead.pf-m-nested-column-header th,
-.pf-c-table thead.pf-m-nested-column-header td {
+.pf-c-table thead.pf-m-nested-column-header td,
+.pf-c-table thead.pf-m-nested-column-header input {
   vertical-align: middle;
 }
+.pf-c-table thead.pf-m-nested-column-header .pf-c-table__check label {
+  display: flex;
+  align-items: center;
+}
 .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) th:not([rowspan]),
 .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
   --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
@@ -429,7 +434,7 @@
   background-color: transparent;
   border-left: var(--pf-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-c-table__expandable-row--after--BorderColor);
 }
-.pf-c-table tbody .pf-c-table__check > input {
+.pf-c-table tbody .pf-c-table__check input {
   margin-top: var(--pf-c-table__check--input--MarginTop);
   vertical-align: top;
 }
@@ -716,9 +721,15 @@
 .pf-c-table__check {
   --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
 }
-.pf-c-table__check > input:not([disabled]) {
+.pf-c-table__check label:not([disabled]),
+.pf-c-table__check input:not([disabled]) {
   cursor: pointer;
 }
+.pf-c-table__check label {
+  display: block;
+  padding: inherit;
+  margin: calc(var(--pf-c-table--cell--PaddingTop) * -1) calc(var(--pf-c-table--cell--PaddingRight) * -1) calc(var(--pf-c-table--cell--PaddingBottom) * -1) calc(var(--pf-c-table--cell--PaddingLeft) * -1);
+}
 
 .pf-c-table__favorite .pf-c-button {
   --pf-c-button--m-plain--Color: var(--pf-c-table__favorite--c-button--Color);

package/css/components/Truncate/truncate.css

@@ -0,0 +1,46 @@
+.pf-c-truncate {
+  --pf-c-truncate--FontSize: 1rem;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  max-width: 100%;
+}
+
+.pf-c-truncate__start,
+.pf-c-truncate__end {
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.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);
+  }
+}
+@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/css/components/Truncate/truncate.d.ts

@@ -0,0 +1,8 @@
+import './truncate.css';
+declare const _default: {
+  "truncate": "pf-c-truncate",
+  "truncateEnd": "pf-c-truncate__end",
+  "truncateStart": "pf-c-truncate__start",
+  "truncateText": "pf-c-truncate__text"
+};
+export default _default;

package/css/components/Truncate/truncate.js

@@ -0,0 +1,9 @@
+"use strict";
+exports.__esModule = true;
+require('./truncate.css');
+exports.default = {
+  "truncate": "pf-c-truncate",
+  "truncateEnd": "pf-c-truncate__end",
+  "truncateStart": "pf-c-truncate__start",
+  "truncateText": "pf-c-truncate__text"
+};

package/css/docs/components/Dropdown/examples/Dropdown.css

@@ -9,7 +9,8 @@
 #ws-core-c-dropdown-primary-toggle,
 #ws-core-c-dropdown-secondary-toggle,
 #ws-core-c-dropdown-menu-item-icons,
-#ws-core-c-dropdown-aria-disabled-items {
+#ws-core-c-dropdown-aria-disabled-items,
+#ws-core-c-dropdown-plain-with-text {
   min-height: 310px;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.27.0",
+  "version": "4.30.0",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.160.0",
+    "@patternfly/patternfly": "4.164.1",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.0.0"
   },
   "license": "MIT",
-  "gitHead": "c44a0bbc7da74841706ed994fa4e24409299438c"
+  "gitHead": "d356fa38b88466281002c38009d4cdb87aedbe5e"
 }