@patternfly/react-styles 4.41.6 → 4.42.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 4.42.0 (2022-01-20)
+
+
+### Features
+
+* **Truncate:** added Truncate component ([#6713](https://github.com/patternfly/patternfly-react/issues/6713)) ([c803b5d](https://github.com/patternfly/patternfly-react/commit/c803b5df3761f689172d79bbc71bc38623b0bf5a))
+
+
+
+
+
 ## 4.41.6 (2022-01-20)
 
 

package/css/components/Dropdown/dropdown.css

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

package/css/components/Masthead/masthead.css

@@ -148,13 +148,8 @@
   padding-left: var(--pf-c-masthead--PaddingLeft);
   background-color: var(--pf-c-masthead--BackgroundColor);
 }
-@media screen and (min-width: 1200px) {
-  .pf-c-masthead {
-    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
-  }
-}
 @media screen and (min-width: 768px) {
-  .pf-c-masthead {
+  .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
     --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
     --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
     --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -174,6 +169,14 @@
     --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
   }
 }
+@media screen and (min-width: 1200px) {
+  .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
+    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
+  }
+}
+.pf-c-page:where(.pf-m-breakpoint-xl) .pf-c-masthead {
+  --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
+}
 .pf-c-masthead.pf-m-light {
   color: var(--pf-global--Color--100);
   --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
@@ -230,6 +233,9 @@
   --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor);
   --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
 }
+.pf-c-masthead .pf-c-nav {
+  align-self: stretch;
+}
 
 .pf-c-masthead__main {
   position: relative;

package/css/components/Masthead/masthead.d.ts

@@ -13,6 +13,8 @@ declare const _default: {
   "modifiers": {
     "light_200": "pf-m-light-200",
     "light": "pf-m-light",
+    "resizeObserver": "pf-m-resize-observer",
+    "breakpointXl": "pf-m-breakpoint-xl",
     "fullHeight": "pf-m-full-height",
     "horizontal": "pf-m-horizontal",
     "displayStack": "pf-m-display-stack",
@@ -65,6 +67,7 @@ declare const _default: {
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
   "nav": "pf-c-nav",
+  "page": "pf-c-page",
   "toolbar": "pf-c-toolbar",
   "toolbarContentSection": "pf-c-toolbar__content-section",
   "toolbarExpandableContent": "pf-c-toolbar__expandable-content"

package/css/components/Masthead/masthead.js

@@ -15,6 +15,8 @@ exports.default = {
   "modifiers": {
     "light_200": "pf-m-light-200",
     "light": "pf-m-light",
+    "resizeObserver": "pf-m-resize-observer",
+    "breakpointXl": "pf-m-breakpoint-xl",
     "fullHeight": "pf-m-full-height",
     "horizontal": "pf-m-horizontal",
     "displayStack": "pf-m-display-stack",
@@ -67,6 +69,7 @@ exports.default = {
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
   "nav": "pf-c-nav",
+  "page": "pf-c-page",
   "toolbar": "pf-c-toolbar",
   "toolbarContentSection": "pf-c-toolbar__content-section",
   "toolbarExpandableContent": "pf-c-toolbar__expandable-content"

package/css/components/Table/table.css

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

package/css/components/Table/table.d.ts

@@ -15,6 +15,9 @@ declare const _default: {
     "visibleOn_2xl": "pf-m-visible-on-2xl",
     "fixed": "pf-m-fixed",
     "stickyHeader": "pf-m-sticky-header",
+    "striped": "pf-m-striped",
+    "expandable": "pf-m-expandable",
+    "stripedEven": "pf-m-striped-even",
     "ghostRow": "pf-m-ghost-row",
     "center": "pf-m-center",
     "help": "pf-m-help",

package/css/components/Table/table.js

@@ -17,6 +17,9 @@ exports.default = {
     "visibleOn_2xl": "pf-m-visible-on-2xl",
     "fixed": "pf-m-fixed",
     "stickyHeader": "pf-m-sticky-header",
+    "striped": "pf-m-striped",
+    "expandable": "pf-m-expandable",
+    "stripedEven": "pf-m-striped-even",
     "ghostRow": "pf-m-ghost-row",
     "center": "pf-m-center",
     "help": "pf-m-help",

package/css/components/Toolbar/toolbar.css

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

package/css/components/Toolbar/toolbar.d.ts

@@ -32,6 +32,7 @@ declare const _default: {
     "chipGroup": "pf-m-chip-group",
     "label": "pf-m-label",
     "pagination": "pf-m-pagination",
+    "overflowContainer": "pf-m-overflow-container",
     "chipContainer": "pf-m-chip-container",
     "plain": "pf-m-plain",
     "show": "pf-m-show",

package/css/components/Toolbar/toolbar.js

@@ -34,6 +34,7 @@ exports.default = {
     "chipGroup": "pf-m-chip-group",
     "label": "pf-m-label",
     "pagination": "pf-m-pagination",
+    "overflowContainer": "pf-m-overflow-container",
     "chipContainer": "pf-m-chip-container",
     "plain": "pf-m-plain",
     "show": "pf-m-show",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.41.6",
+  "version": "4.42.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.167.0",
+    "@patternfly/patternfly": "4.171.0",
     "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": "ce80b69350209b17f274f222e03278a3d09c021f"
+  "gitHead": "a41d19dbc31279e77a47110886e4d6173c3b7d96"
 }